Newbie Question - Building a simple login form.
Hi all,
I've just downloaded a copy of active widgets to toy with, and the first thing that I want to do is to build a simple login form.
I've started with the "Dialogue" sample and have managed to put together an example of the login box, but the positioning (like the sample) currently uses abolute positioning. I want to use this in a page that has a fluid layout, but can't seem to find a way of making it all stick together.
Can someone point me in the right direction with this ?
I've been through the documentation without a great deal of sucess.
Current code sample is attached.
<html>
<head>
<title>ActiveWidgets Form Test</title>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
<script src="../../runtime/lib/aw.js"></script>
<style>
.aw-system-control {position: absolute;}
#myGroup {left: 21px; top: 40px; width: 320px; height: 130px;}
#mylabel {left: 60px; top: 63px; width: 260px; height: 16px;}
#label2 {left: 32px; top: 63px; width: 30px; height: 16px;}
#label3 {left: 60px; top: 85px; width: 50px; height: 16px;}
#input1 {left: 135px; top: 85px; width: 168px; height: 20px;}
#label4 {left: 60px; top: 112px; width: 50px; height: 16px;}
#input2 {left: 135px; top: 112px; width: 168px; height: 20px;}
#button1 {left: 221px; top: 138px; width: 82px;}
</style>
</head>
<body>
<div id="LoginForm" title="LoginForm">
<form action="index.htm" method="post" enctype="multipart/form-data" name="MyForm" target="_self">
<script>
// The Form Group Object
var obj = new AW.UI.Group; // Creata a new UI Group Object
obj.setId("myGroup"); // Name (Necessary for CSS rules)
obj.setControlText("Login"); // Set the Group Text
obj.setControlImage("favorites"); // Set the Group Image
document.write(obj); // Write the object to screen
// The label under the group heading
var label1 = new AW.UI.Label;
label1.setId("mylabel");
label1.setControlText("Please enter your username and password.");
document.write(label1);
var label2 = new AW.UI.Label;
label2.setId("label2");
label2.setControlImage("home");
document.write(label2);
var label3 = new AW.UI.Label;
label3.setId("label3");
label3.setControlText("Username :");
document.write(label3);
var input1 = new AW.UI.Input;
input1.setId("input1");
input1.setControlText("Administrator");
document.write(input1);
var label4 = new AW.UI.Label;
label4.setId("label4");
label4.setControlText("Password :");
document.write(label4);
var input2 = new AW.UI.Input;
input2.setId("input2");
input2.getContent("box/text").setAttribute("type", "password");
input2.setControlText("");
document.write(input2);
var button1 = new AW.UI.Button;
button1.setId("button1");
button1.setControlText("Login");
document.write(button1);
</script>
</form>
</div>
</body>
</html>
I've just downloaded a copy of active widgets to toy with, and the first thing that I want to do is to build a simple login form.
I've started with the "Dialogue" sample and have managed to put together an example of the login box, but the positioning (like the sample) currently uses abolute positioning. I want to use this in a page that has a fluid layout, but can't seem to find a way of making it all stick together.
Can someone point me in the right direction with this ?
I've been through the documentation without a great deal of sucess.
Current code sample is attached.
<html>
<head>
<title>ActiveWidgets Form Test</title>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
<script src="../../runtime/lib/aw.js"></script>
<style>
.aw-system-control {position: absolute;}
#myGroup {left: 21px; top: 40px; width: 320px; height: 130px;}
#mylabel {left: 60px; top: 63px; width: 260px; height: 16px;}
#label2 {left: 32px; top: 63px; width: 30px; height: 16px;}
#label3 {left: 60px; top: 85px; width: 50px; height: 16px;}
#input1 {left: 135px; top: 85px; width: 168px; height: 20px;}
#label4 {left: 60px; top: 112px; width: 50px; height: 16px;}
#input2 {left: 135px; top: 112px; width: 168px; height: 20px;}
#button1 {left: 221px; top: 138px; width: 82px;}
</style>
</head>
<body>
<div id="LoginForm" title="LoginForm">
<form action="index.htm" method="post" enctype="multipart/form-data" name="MyForm" target="_self">
<script>
// The Form Group Object
var obj = new AW.UI.Group; // Creata a new UI Group Object
obj.setId("myGroup"); // Name (Necessary for CSS rules)
obj.setControlText("Login"); // Set the Group Text
obj.setControlImage("favorites"); // Set the Group Image
document.write(obj); // Write the object to screen
// The label under the group heading
var label1 = new AW.UI.Label;
label1.setId("mylabel");
label1.setControlText("Please enter your username and password.");
document.write(label1);
var label2 = new AW.UI.Label;
label2.setId("label2");
label2.setControlImage("home");
document.write(label2);
var label3 = new AW.UI.Label;
label3.setId("label3");
label3.setControlText("Username :");
document.write(label3);
var input1 = new AW.UI.Input;
input1.setId("input1");
input1.setControlText("Administrator");
document.write(input1);
var label4 = new AW.UI.Label;
label4.setId("label4");
label4.setControlText("Password :");
document.write(label4);
var input2 = new AW.UI.Input;
input2.setId("input2");
input2.getContent("box/text").setAttribute("type", "password");
input2.setControlText("");
document.write(input2);
var button1 = new AW.UI.Button;
button1.setId("button1");
button1.setControlText("Login");
document.write(button1);
</script>
</form>
</div>
</body>
</html>
Callum
June 19,