Hi Angrez,

Please find the source of web page developed using smartlcient,
Please let me know weather watir can be used for this.

Source.

<!--------------------------------------------------------------------
    SmartClient SDK
    Component Data Binding example

    Copyright 2001-2007 Isomorphic Software, Inc. (www.isomorphic.com)
---------------------------------------------------------------------->


<HEAD><TITLE>
        SmartClient SDK - Component Data Binding example
</TITLE></HEAD><SCRIPT>window.isomorphicDir='../../isomorphic/';</SCRIPT>
<SCRIPT 
SRC=../../isomorphic/system/modules/ISC_Core.js?isc_version=5.6.js></SCRIPT><SCRIPT>isc._lastModule='Core';</SCRIPT>
<SCRIPT 
SRC=../../isomorphic/system/modules/ISC_Foundation.js?isc_version=5.6.js></SCRIPT><SCRIPT>isc._lastModule='Foundation';</SCRIPT>
<SCRIPT 
SRC=../../isomorphic/system/modules/ISC_Containers.js?isc_version=5.6.js></SCRIPT><SCRIPT>isc._lastModule='Containers';</SCRIPT>
<SCRIPT 
SRC=../../isomorphic/system/modules/ISC_Grids.js?isc_version=5.6.js></SCRIPT><SCRIPT>isc._lastModule='Grids';</SCRIPT>

<SCRIPT 
SRC=../../isomorphic/system/modules/ISC_Forms.js?isc_version=5.6.js></SCRIPT><SCRIPT>isc._lastModule='Forms';</SCRIPT>
<SCRIPT 
SRC=../../isomorphic/system/modules/ISC_DataBinding.js?isc_version=5.6.js></SCRIPT><SCRIPT>isc._lastModule='DataBinding';</SCRIPT>
<SCRIPT 
SRC=../../isomorphic/skins/SmartClient/load_skin.js?isc_version=5.6.js></SCRIPT>

<BODY BGCOLOR=#D3D3D3><SCRIPT>


// load datasources
isc.DataSource.create({
    serverType:"sql",
    fields:{
        itemID:{primaryKey:true, hidden:true, type:"sequence", name:"itemID"},
        itemName:{
            title:"Item",
            required:true,
            type:"text",
            length:128,
            name:"itemName"
        },
        SKU:{
            title:"SKU",
            required:true,
            type:"text",
            length:10,
            name:"SKU"
        },
        description:{
            title:"Description",
            type:"text",
            length:2000,
            name:"description"
        },
        category:{
            title:"Category",
            required:true,
            type:"text",
            length:128,
            foreignKey:"supplyCategory.itemName",
            name:"category"
        },
        units:{
            title:"Units",
            valueMap:["Roll", "Ea", "Pkt", "Set", "Tube", "Pad", "Ream", "Tin", 
"Bag", "Ctn", "Box"],
            type:"enum",
            length:5,
            name:"units"
        },
        unitCost:{
            title:"Unit Cost",
            required:true,
            type:"float",
            validators:[
                {
                    type:"floatRange",
                    min:0,
                    errorMessage:"Please enter a valid (positive) cost"
                },
                {
                    type:"floatPrecision",
                    errorMessage:"The maximum allowed precision is 2",
                    precision:2
                }
            ],
            name:"unitCost"
        },
        inStock:{title:"In Stock", type:"boolean", name:"inStock"},
        nextShipment:{title:"Next Shipment", type:"date", name:"nextShipment"}
    },
    tableName:"supplyItem",
    testFileName:"supplyItem.data.xml",
    ID:"supplyItem"
})

isc.DataSource.create({
    serverType:"sql",
    fields:{
        Name:{
            title:"Name",
            type:"text",
            length:128,
            name:"Name"
        },
        EmployeeId:{title:"Employee ID", primaryKey:true, required:true, 
type:"integer", 
                    name:"EmployeeId"},
        ReportsTo:{title:"Manager", required:true, type:"integer", 
rootValue:"1", 
                   foreignKey:"employees.EmployeeId",name:"ReportsTo"},
        Job:{
            title:"Title",
            type:"text",
            length:128,
            name:"Job"
        },
        Email:{
            title:"Email",
            type:"text",
            length:128,
            name:"Email"
        },
        EmployeeType:{
            title:"Employee Type",
            type:"text",
            length:40,
            name:"EmployeeType"
        },
        EmployeeStatus:{
            title:"Status",
            type:"text",
            length:40,
            name:"EmployeeStatus"
        },
        Salary:{title:"Salary", type:"float", name:"Salary"},
        OrgUnit:{
            title:"Org Unit",
            type:"text",
            length:128,
            name:"OrgUnit"
        },
        Gender:{
            title:"Gender",
            valueMap:["male", "female"],
            type:"text",
            length:7,
            name:"Gender"
        },
        MaritalStatus:{
            title:"Marital Status",
            valueMap:["married", "single"],
            type:"text",
            length:10,
            name:"MaritalStatus"
        }
    },
    tableName:"employeeTable",
    testFileName:"employees.data.xml",
    ID:"employees"
})

isc.DataSource.create({
    serverType:"sql",
    fields:{
        commonName:{title:"Animal", type:"text", name:"commonName"},
        scientificName:{title:"Scientific Name", primaryKey:true, 
required:true, type:"text", 
                        name:"scientificName"},
        lifeSpan:{title:"Life Span", type:"text", name:"lifeSpan"},
        status:{title:"Endangered Status", type:"text", name:"status"},
        diet:{title:"Diet", type:"text", name:"diet"},
        information:{
            title:"Interesting Facts",
            type:"text",
            length:1000,
            name:"information"
        }
    },
    tableName:"animals",
    testFileName:"animals.data.xml",
    ID:"animals"
})



// create clickable list of datasources
//    This is a good example of a small, read-only list of data for which
//    it is appropriate to set the listGrid.data property directly.
ListGrid.create({
    ID:"dsList",
    left:20, top:75, width:130,
    leaveScrollbarGap:false,
    showSortArrow:"none",
    canSort:false,
    fields:[
        {title:"Select a DataSource", name:"dsTitle"}
    ],
    data:[
        {dsTitle:"Animals", dsName:"animals"},
        {dsTitle:"Office Supplies", dsName:"supplyItem"},
        {dsTitle:"Employees", dsName:"employees"}
    ],
    selectionType:"single",
    recordClick:"bindComponents(record.dsName)"
});


// bind components to the selected datasource, and execute
// a fetch operation with no criteria to populate the boundList
function bindComponents(ds) {
    boundList.setDataSource(ds);
    boundViewer.setDataSource(ds);
    boundForm.setDataSource(ds);
    boundList.fetchData();
    newBtn.enable(); // can't create a new record until a datasource is selected
    saveBtn.disable(); // no record selected for editing, so disable save button
}


// create ListGrid, DetailViewer, & DynamicForm components to bind to 
datasources
// (nested inside a VStack to manage layout)
VStack.create({
    left:170, top:75,
    width:"70%",
    membersMargin:20,
    members:[

        Label.create({
            ID:"helpText",
            contents:"<ul>" +
                "<li>select a datasource from the list at left to bind to these 
components</li>" +
                "<li>click a record in the grid to view and edit that record in 
the form</li>" +
                "<li>click <b>New</b> to start editing a new record in the 
form</li>" +
                "<li>click <b>Save</b> to save changes to a new or edited 
record in the form</li>" +
                "<li>click <b>Clear</b> to clear all fields in the form</li>" +
                "<li>click <b>Filter</b> to filter (substring match) the grid 
based on form values</li>" +
                "<li>click <b>Fetch</b> to fetch records (exact match) for the 
grid based on form values</li>" +
                "<li>double-click a record in the grid to edit inline (press 
Return, or arrow/tab to another record, to save)</li>" +
                "</ul>"
        }),

        // databound ListGrid
        //   * click records to edit in boundForm and view in boundViewer
        //   * double-click record to edit inline (Return or arrow/tab off 
current row to save)
        ListGrid.create({
            ID:"boundList",
            height:200,
            canEdit:true,
            recordClick:"boundForm.editRecord(record); saveBtn.enable(); 
boundViewer.viewSelectedData(boundList)"
        }),

        // databound DynamicForm
        //   * click boundList records to edit
        DynamicForm.create({
            ID:"boundForm",
            numCols:"6",
            autoFocus:false
        }),

        // toolbar to perform various actions using the boundForm values (see 
helpText above)
        Toolbar.create({
            autoDraw:false,
            membersMargin:10,
            buttonConstructor: "IButton",
            height: 22,                               
            buttons:[
                // click can be defined as a function or a string of script to 
execute.
                {title:"Save", click: function () {
                                    boundForm.saveData();
                                    if (!boundForm.hasErrors()) {
                                        boundForm.clearValues();
                                        this.disable();
                                    }
                                }, 
                 ID:"saveBtn", disabled:true},
                {title:"New", click:"boundForm.editNewRecord(); 
saveBtn.enable()", ID:"newBtn", disabled:true},
                {title:"Clear", click:"boundForm.clearValues(); 
saveBtn.disable()"},
                {title:"Filter", 
click:"boundList.filterData(boundForm.getValuesAsCriteria()); 
saveBtn.disable()"},
                {title:"Fetch", 
click:"boundList.fetchData(boundForm.getValuesAsCriteria()); saveBtn.disable()"}
            ]
        }),
        
        // databound DetailViewer
        //   * click boundList records to display
        DetailViewer.create({
            ID:"boundViewer"
        })
    ]
});



</SCRIPT>
</BODY></HTML>


Thanks,
Sadeesh
_______________________________________________
Wtr-general mailing list
Wtr-general@rubyforge.org
http://rubyforge.org/mailman/listinfo/wtr-general

Reply via email to