AW.UI.TextAreaInput = AW.System.Control.subclass();
AW.UI.TextAreaInput.create = function() {
var obj = this.prototype;
obj.setTag("textarea");
obj.setClass("text", "expand");
obj.setClass("item", "control");
obj.setClass("ui", "imagetext");
obj.setClass("templates", "");
obj.setClass("input", "box");
}
var textarea1 = new AW.UI.TextAreaInput;
textarea1.setAttribute("onselectstart",true);
textarea1.getAttribute("value")
textarea1.value;
textarea1.setEvent("onKeyUp",function() {
textarea.setContent("value",textarea1.element().value);
});
<html>
<head>
<title>ActiveWidgets Examples</title>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
<script src="../../runtime/lib/aw.js"></script>
<style>
.aw-system-control {position: absolute}
#box {left: 0px; top: 0px; width: 700px; height: 453px; border: 1px solid #999; background: #ffffff; position: absolute;}
#tabs {left: 6px; top: 6px; width: 700px; height: 22px;}
#frame {left: 6px; top: 28px; width: 400px; height: 425px; border: 1px solid #999; background: #f9f8f4; position: absolute;}
#label1 {left: 20px; top: 60px; width: 300px; height: 16px;}
#label2 {left: 90px; top: 81px; width: 30px; height: 16px;}
#input1 {left: 90px; top: 60px; width: 200px; height: 20px;}
#label3 {left: 20px; top: 110px; width: 50px; height: 16px;}
#combo1 {left: 90px; top: 110px; width: 100px; height: 20px;}
#combo1-popup {width: 100px; height: 53px;}
#label4 {left: 20px; top: 150px; width: 310px; height: 20px;}
#combo2 {left: 90px; top: 150px; width: 100px; height: 20px;}
#combo2-popup {width: 100px; height: 53px;}
#label5 {left: 20px; top: 190px; width: 30px; height: 16px;}
#combo3 {left: 90px; top: 190px; width: 100px; height: 20px;}
#combo3-popup {width: 100px; height: 36px;}
#label6 {left: 20px; top: 90px; width: 65px; height: 32px;}
#textarea1 {left: 90px; top: 60px; width: 300px; height: 100px; overflow: auto;}
#label6a {left: 90px; top: 155px; width: 65px; height: 32px;}
#label7 {left: 20px; top: 210px; width: 65px; height: 48px;}
#textarea2 {left: 90px; top: 185px; width: 300px; height: 100px; overflow: auto;}
#label7a {left: 90px; top: 280px; width: 65px; height: 32px;}
#label8 {left: 20px; top: 335px; width: 65px; height: 48px;}
#textarea3 {left: 90px; top: 310px; width: 300px; height: 100px; overflow: auto;}
#label8a {left: 90px; top: 405px; width: 65px; height: 32px;}
#label9 {left: 20px; top: 60px; width: 30px; height: 16px;}
#combo4 {left: 125px; top: 60px; width: 125px; height: 20px;}
#combo4-popup {width: 125px; height: 116px;}
#label10 {left: 20px; top: 110px; width: 30px; height: 16px;}
#combo5 {left: 125px; top: 110px; width: 125px; height: 20px;}
#combo5-popup {width: 125px; height: 20px;}
#label11 {left: 20px; top: 150px; width: 30px; height: 16px;}
#combo6 {left: 125px; top: 150px; width: 125px; height: 20px;}
#combo6-popup {width: 125px; height: 20px;}
#label12 {left: 20px; top: 190px; width: 30px; height: 16px;}
#combo7 {left: 125px; top: 190px; width: 125px; height: 20px;}
#combo7-popup {width: 125px; height: 20px;}
#label13 {left: 20px; top: 230px; width: 30px; height: 16px;}
#combo8 {left: 125px; top: 230px; width: 125px; height: 20px;}
#combo8-popup {width: 125px; height: 20px;}
#label14 {left: 20px; top: 270px; width: 30px; height: 16px;}
#combo9 {left: 125px; top: 270px; width: 125px; height: 20px;}
#combo9-popup {width: 125px; height: 20px;}
#label15 {left: 20px; top: 60px; width: 300px; height: 16px;}
#input2 {left: 100px; top: 60px; width: 200px; height: 20px;}
#label16 {left: 20px; top: 100px; width: 300px; height: 16px;}
#input3 {left: 100px; top: 100px; width: 200px; height: 20px;}
#label17 {left: 20px; top: 140px; width: 300px; height: 16px;}
#input4 {left: 100px; top: 140px; width: 200px; height: 20px;}
#label18 {left: 20px; top: 180px; width: 300px; height: 16px;}
#input5 {left: 100px; top: 180px; width: 200px; height: 20px;}
#label19 {left: 20px; top: 250px; width: 75px; height: 32px;}
#textarea4 {left: 100px; top: 220px; width: 300px; height: 100px; overflow: auto;}
#label19a {left: 100px; top: 315px; width: 65px; height: 32px;}
</style>
</head>
<body>
<script>
// Textarea definition from Jim Hunter on the Active Widgets Support Forum
AW.UI.TextAreaInput = AW.System.Control.subclass();
AW.UI.TextAreaInput.create = function() {
var obj = this.prototype;
obj.setTag("textarea");
obj.setClass("text", "expand");
obj.setClass("item", "control");
obj.setClass("ui", "imagetext");
obj.setClass("templates", "");
obj.setClass("input", "box");
}
var box = new AW.HTML.DIV;
box.setId("box");
document.write(box);
var tabs = new AW.UI.Tabs;
tabs.setId("tabs");
tabs.setItemText(["a", "b", "c", "d"]);
tabs.setItemCount(4);
tabs.setSelectedItems([0]);
document.write(tabs);
var frame = new AW.HTML.DIV;
frame.setId("frame");
document.write(frame);
var container = new AW.HTML.SPAN;
document.write(container);
//--
var maxCharsTitle = 200;
var maxCharsDescriptionFields = 4000;
var label1 = new AW.UI.Label;
label1.setId("label1");
label1.setControlText("1:");
var input1 = new AW.UI.Input;
input1.setId("input1");
input1.setControlText("");
input1.getContent("box/text").setAttribute("maxlength", maxCharsTitle);
input1.onControlTextChanged = function(text) {
if(text.length < maxCharsTitle) {
label2.setControlText("(" + eval(maxCharsTitle-text.length) + " characters left)");
}
else {
label2.setControlText("0 characters left");
}
}
var label2 = new AW.UI.Label;
label2.setId("label2");
label2.setControlText("(" + maxCharsTitle + " characters left)");
var label3 = new AW.UI.Label;
label3.setId("label3");
label3.setControlText("2:");
var combo1 = new AW.UI.Combo;
combo1.setId("combo1");
combo1.setControlText("");
combo1.setItemText(["a", "b", "c"]);
combo1.setItemCount(3);
combo1.getContent("box/text").setAttribute("readonly",true);
var label4 = new AW.UI.Label;
label4.setId("label4");
label4.setControlText("3:");
var combo2 = new AW.UI.Combo;
combo2.setId("combo2");
combo2.setControlText("");
combo2.setItemText(["a", "b", "c"]);
combo2.setItemCount(3);
combo2.getContent("box/text").setAttribute("readonly",true);
var label5 = new AW.UI.Label;
label5.setId("label5");
label5.setControlText("4:");
var combo3 = new AW.UI.Combo;
combo3.setId("combo3");
combo3.setItemText(["a", "b"]);
combo3.setItemCount(2);
combo3.setControlText(combo3.getItemText(0));
combo3.setSelectedItems(0);
combo3.getContent("box/text").setAttribute("readonly",true);
// ---
var label6 = new AW.UI.Label;
label6.setId("label6");
label6.setControlText("1:");
label6.setClass("text", "wrap");
var textarea1 = new AW.UI.TextAreaInput;
textarea1.setId("textarea1");
textarea1.setAttribute("onselectstart",true);
textarea1.setEvent("onKeyUp",function() {
textarea.setContent("value",textarea1.element().value);
/*if(text.length < maxCharsDescriptionField) {
label6a.setControlText("(" + eval(maxCharsDescriptionField-text.length) + " characters left)");
}
else {
label6a.setControlText("0 characters left");
}*/
});
var label6a = new AW.UI.Label;
label6a.setId("label6a");
label6a.setControlText("(" + maxCharsDescriptionFields + " characters left)");
var label7 = new AW.UI.Label;
label7.setId("label7");
label7.setControlText("2:");
label7.setClass("text", "wrap");
var textarea2 = new AW.UI.TextAreaInput;
textarea2.setId("textarea2");
textarea2.setAttribute("onselectstart",true);
var label7a = new AW.UI.Label;
label7a.setId("label7a");
label7a.setControlText("(" + maxCharsDescriptionFields + " characters left)");
var label8 = new AW.UI.Label;
label8.setId("label8");
label8.setControlText("3:");
label8.setClass("text", "wrap");
var textarea3 = new AW.UI.TextAreaInput;
textarea3.setId("textarea3");
textarea3.setAttribute("onselectstart",true);
var label8a = new AW.UI.Label;
label8a.setId("label8a");
label8a.setControlText("(" + maxCharsDescriptionFields + " characters left)");
// ---
var label9 = new AW.UI.Label;
label9.setId("label9");
label9.setControlText("1:");
var combo4 = new AW.UI.Combo;
combo4.setId("combo4");
combo4.setControlText("");
combo4.setItemText(["a", "b", "c", "d", "e", "f", "g"]);
combo4.setItemCount(7);
combo4.getContent("box/text").setAttribute("readonly",true);
var label10 = new AW.UI.Label;
label10.setId("label10");
label10.setControlText("2:");
var combo5 = new AW.UI.Combo;
combo5.setId("combo5");
combo5.setControlText("");
combo5.setItemText(["a"]);
combo5.setItemCount(1);
combo5.getContent("box/text").setAttribute("readonly",true);
var label11 = new AW.UI.Label;
label11.setId("label11");
label11.setControlText("3:");
var combo6 = new AW.UI.Combo;
combo6.setId("combo6");
combo6.setControlText("");
combo6.setItemText(["a"]);
combo6.setItemCount(1);
combo6.getContent("box/text").setAttribute("readonly",true);
var label12 = new AW.UI.Label;
label12.setId("label12");
label12.setControlText("4:");
var combo7 = new AW.UI.Combo;
combo7.setId("combo7");
combo7.setControlText("");
combo7.setItemText(["a"]);
combo7.setItemCount(1);
combo7.getContent("box/text").setAttribute("readonly",true);
var label13 = new AW.UI.Label;
label13.setId("label13");
label13.setControlText("5:");
var combo8 = new AW.UI.Combo;
combo8.setId("combo8");
combo8.setControlText("");
combo8.setItemText(["a"]);
combo8.setItemCount(1);
combo8.getContent("box/text").setAttribute("readonly",true);
var label14 = new AW.UI.Label;
label14.setId("label14");
label14.setControlText("6:");
var combo9 = new AW.UI.Combo;
combo9.setId("combo9");
combo9.setControlText("");
combo9.setItemText(["a"]);
combo9.setItemCount(1);
combo9.getContent("box/text").setAttribute("readonly",true);
// ---
var label15 = new AW.UI.Label;
label15.setId("label15");
label15.setControlText("1:");
var input2 = new AW.UI.Input;
input2.setId("input2");
input2.getContent("box/text").setAttribute("type", "file");
var label16 = new AW.UI.Label;
label16.setId("label16");
label16.setControlText("2:");
var input3 = new AW.UI.Input;
input3.setId("input3");
input3.getContent("box/text").setAttribute("type", "file");
var label17 = new AW.UI.Label;
label17.setId("label17");
label17.setControlText("3:");
var input4 = new AW.UI.Input;
input4.setId("input4");
input4.getContent("box/text").setAttribute("type", "file");
var label18 = new AW.UI.Label;
label18.setId("label18");
label18.setControlText("4:");
var input5 = new AW.UI.Input;
input5.setId("input5");
input5.getContent("box/text").setAttribute("type", "file");
var label19 = new AW.UI.Label;
label19.setId("label19");
label19.setControlText("5:");
label19.setClass("text", "wrap");
var textarea4 = new AW.UI.TextAreaInput;
textarea4.setId("textarea4");
textarea4.setAttribute("onselectstart",true);
var label19a = new AW.UI.Label;
label19a.setId("label19a");
label19a.setControlText("(" + maxCharsDescriptionFields + " characters left)");
// ---
var page1 = [label1, input1, label2, label3, combo1, label4, combo2, label5, combo3];
var page2 = [label6, textarea1, label6a, label7, textarea2, label7a, label8, textarea3, label8a];
var page3 = [label9, combo4, label10, combo5, label11, combo6, label12, combo7, label13, combo8, label14, combo9];
var page4 = [label15, input2, label16, input3, label17, input4, label18, input5, label19, textarea4, label19a];
var pages = [page1, page2, page3, page4];
container.element().innerHTML = page1.join("");
tabs.onCurrentItemChanged = function(i) {
container.element().innerHTML = pages[i].join("");
if (container.$browser=="opera"){document.body.className += ""}
/*alert(input5);
var temp = input5.toString().split("value=");
var temp2 = temp[1].split(">");
input5.getContent("box/text").setAttribute("value",temp2[0]);
alert(input5);*/
}
</script>
</body>
</html>
textarea1.setEvent("onkeyup",function() {
textarea1.setContent('value', textarea1.element().value );
});
var input2 = new AW.UI.Input;
input2.setId("input2");
input2.getContent("box/text").setAttribute("type", "file");
input2.onControlTextChanged = function(text) {
this.setContent("box/text", text);
}
input2.onControlClicked = function(text) {
this.getContent("box/text").setAttribute("type", "file");
}
This topic is archived.