:: Forum >> Version 2 >>

Separating AW code from html markup

Early AW examples use document.write(obj) method to insert the control into html page. That may work fine with the small number of the controls (for example, the single AW grid on a page). However with the larger number of form controls having multiple small <script> blocks intermixed with html markup is not very good idea. In this case more efficient solution is to include placeholder html tags where the AW controls should be and later replace them with actual controls using refresh() method. For example,

<table>
<
tr><td>Here is button 1 - <span id="button1"></span></td></tr>
<
tr><td><span id="button2"></span> - and is button 2 </td></tr>
</
table>

<
script>

    var 
obj1 = new AW.UI.Button;
    
obj1.setId("button1");
    
obj1.setControlText("Button 1");
    
obj1.refresh();

    var 
obj2 = new AW.UI.Button;
    
obj2.setId("button2");
    
obj2.setControlText("Button 2");
    
obj2.refresh();

</
script>

 
The only requirement here is assigning the same ID to the placeholder element and actual AW control.

Benefit of this method is full separation of the code and html markup - both javascript and html become much more readable and easier to manage.

Here is the modified AW controls example -

http://www.activewidgets.com/examples/2.0/xp.htm

<html>
<
head>

<!-- include 
AW library files -->
<
script src="../../runtime/2.0/lib/aw.js"></script>
<
link href="../../runtime/2.0/styles/xp/aw.css" rel="stylesheet"></link>

<!-- 
page/controls styles -->
<
style>
    
body {fontmenu}

    
#group1 {width300pxheight50px}
    
#grid1 {width400pxheight100px}
</
style>
</
head>
<
body class="aw-background-1">

<!-- 
page layout -->
<
table>
    <
tr>
        <
td><p>Label:</p><span id="label1">To be replaced by AW object...</span></td>
        <
td colspan="3"><p>Group:</p><span id="group1"></span></td>
    </
tr>
    <
tr>
        <
td><p>Button:</p><span id="button1"></span></td>
        <
td><p>Link:</p><span id="link1"></span></td>
        <
td><p>Input:</p><span id="input1"></span></td>
        <
td><p>Combo:</p><span id="combo1"></span></td>
    </
tr>
    <
tr>
        <
td colspan="3"><p>Tabs:</p><span id="tabs1"></span></td>
        <
td><p>Checkbox:</p><span id="checkbox1"></span></td>
    </
tr>
    <
tr>
        <
td><p>List:</p><span id="list1"></span></td>
        <
td><p>Checked List:</p><span id="checkedList1"></span></td>
        <
td><p>Tree:</p><span id="tree1"></span></td>
        <
td><p>Radio:</p><span id="radio1"></span></td>
    </
tr>
</
table>
<
p>Grid:</p><span id="grid1"></span>

<!-- 
AW controls script -->
<
script>

    var 
itemTextArray = ["Home""Favorites""Font size""Search"];
    var 
itemImageArray = ["home""favorites""fontsize""search"];

    var 
label = new AW.UI.Label;
    
label.setId("label1");
    
label.setControlText("Label");
    
label.setControlImage("favorites");
    
label.refresh();

    var 
group = new AW.UI.Group;
    
group.setId("group1");
    
group.setControlText("Group/Fieldset");
    
group.setControlImage("favorites");
    
group.refresh();

    var 
button = new AW.UI.Button;
    
button.setId("button1");
    
button.setControlText("Button");
    
button.setControlImage("favorites");
    
button.refresh();

//    ...

    
var grid1 = new AW.UI.Grid;
    
grid1.setId("grid1");
    
grid1.setCellText("cell");
    
grid1.setHeaderText("header");
    
grid1.setColumnCount(5);
    
grid1.setRowCount(10);
    
grid1.refresh();

</
script>
</
body>
</
html>

 
Alex (ActiveWidgets)
Friday, May 12, 2006



This topic is archived.

Back to support forum

Forum search