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>
The AW controls currently do not participate in form submit. If you want to use them like 'normal' html controls you have to add name attribute to the input boxes and create submit method for a button control (finding and calling form.submit method).
AW Components hav a problem with form: Form can't append they values in get/post methods, so u need do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<script src="../../runtime/lib/aw.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../../runtime/styles/xp/aw.css">
</head>
<body>
<form action="form.html" method="get" name="form0" id="form0">
<table width="200" border="1" align="center">
<tr>
<td><span id="labelLogin"></span></td>
<td><span id="loginField"></span></td>
</tr>
<tr>
<td><span id="labelPass"></span></td>
<td><span id="passField"></span></td>
</tr>
<tr>
<td colspan="2"><div align="center"><span id="submitButton"></span></div></td>
</tr>
</table>
</form>
<script>
var labelLogin = new AW.UI.Label;
labelLogin.setControlText("Login:");
labelLogin.setId("labelLogin");
var lf = new AW.UI.Input;
lf.setId("loginField");
var lp = new AW.UI.Label;
lp.setControlText("Password:");
lp.setId("labelPass");
var pf = new AW.UI.Input;
pf.setId("passField");
var sub = new AW.UI.Button;
sub.setControlText("Submit");
sub.setId("submitButton");
sub.setEvent("onclick", function() {
if(lf.getControlText() == '' || pf.getControlText() == '') {
alert('Fill Login and Password please!');
return;
}
appendObject("loginField", lf.getControlText());
appendObject("passField", pf.getControlText());
document.getElementById("form0").submit();
}
);
document.getElementById("labelLogin").innerHTML = labelLogin;
document.getElementById("loginField").innerHTML = lf;
document.getElementById("labelPass").innerHTML = lp;
document.getElementById("submitButton").innerHTML = sub;
document.getElementById("passField").innerHTML = pf;
function appendObject(id, value) {
var obj = document.createElement("input");
obj.setAttribute("type", "hidden");
obj.setAttribute("id", id);
obj.setAttribute("name", id);
obj.setAttribute("value", value);
document.getElementById("form0").appendChild(obj);
}
</script>
</body>
</html>
Works but... u know :)
Paulo Cesar Silva Reis (PC from Brazil).