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 {font: menu}



    #group1 {width: 300px; height: 50px}

    #grid1 {width: 400px; height: 100px}

</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>

Forum search