Calling Screens (ui.xml) from JS

[lynvcode]

Hello,

I have:
version: SmartClient EE SNAPSHOT_v8.3d_2012-04-04
browser: Firefox 14.0.1 on Ubuntu 12.04 LTS

I am trying to invoke different screens from ui.xml folder, and add it as a member of a VLayout or canvas object. The problem I am facing is that I don't know how to remove the member object of a VLayout AFTER the listgrid loads up correctly.

It would be a good idea to have something like the following which calls an operationbinding and executes the callback, if success or failure, see the following code:

isc.DMI.call({
           appID: "builtinApplication", 
           className: "com.something.test.server.servlet.logger",
           methodName: "doLogger",
           requestParams: {
               actionURL: "/test/sc/IDACall", 
               containsCredentials: true,
               params : {
               }
           },
           callback : function (response, data) {
                 
               if (response.status == isc.RPCResponse.STATUS_SUCCESS) {
                   alert("success");
                    alert(data);
               } else {
                   alert("failed");
               }
           }
       });

so my code follows:

JS code that loads up the emp.ui.xml

function doit(CanvasToAddTo)
{
	CanvasToAddTo.removeMembers(CanvasToAddTo.getMembers());
	CanvasToAddTo.addMember(isc_DataView_0.getMembers());
}

RPCManager.loadScreen("emp");
doit(VLayout0)

file: emp.ui.xml, notice that I have autoDraw="false" for DataView0, If I put it to true it covers whole screen so, the load of the screen works.

<DataSource>
    <loadID>test_employees</loadID>
</DataSource>


<ListGrid dataSource="marinos_employees" ID="ListGrid0" autoDraw="true">
    <fields>
        <ListGridField name="payroll_id" title="Payroll"/>
        <ListGridField name="first_name" title="First Name"/>
        <ListGridField name="last_name" title="Last Name"/>
        <ListGridField name="skill" title="Skill"/>
        <ListGridField name="project_code" title="Project Code"/>
        <ListGridField name="car_transport" title="Car Transport"/>
    </fields>
    <listEndEditAction>next</listEndEditAction>
    <showFilterEditor>true</showFilterEditor>
    <canEdit>true</canEdit>
    <autoFetchData>true</autoFetchData>
    <canRemoveRecords>true</canRemoveRecords>
</ListGrid>


<DataView ID="DataView0" overflow="hidden" autoDraw="false">
    <members><Canvas ref="ListGrid0"/>
    </members>
    <width>100%</width>
    <height>100%</height>
</DataView>

the source code of the smartclient original file

isc.DataSource.create({
    recordName:"employee",
    operationBindings:[
        {
            operationType:"fetch",
            operationId:"fetchEmployeesNotInTeam"
        }
    ],
    serverType:"sql",
    testFileName:"/examples/shared/ds/test_data/employees.data.xml",
    titleField:"Name",
    ID:"employees",
    fields:[
        {
            title:"userOrder",
            hidden:true,
            name:"userOrder",
            type:"integer",
            canEdit:false
        },
        {
            title:"Name",
            name:"Name",
            length:128,
            type:"text"
        },
        {
            title:"Employee ID",
            primaryKey:true,
            name:"EmployeeId",
            type:"integer",
            required:true
        },
        {
            title:"Manager",
            detail:true,
            rootValue:"1",
            name:"ReportsTo",
            type:"integer",
            required:true,
            foreignKey:"employees.EmployeeId"
        },
        {
            title:"Title",
            name:"Job",
            length:128,
            type:"text"
        },
        {
            title:"Email",
            name:"Email",
            length:128,
            type:"text"
        },
        {
            title:"Employee Type",
            name:"EmployeeType",
            length:40,
            type:"text"
        },
        {
            title:"Status",
            name:"EmployeeStatus",
            length:40,
            type:"text"
        },
        {
            title:"Salary",
            name:"Salary",
            type:"float"
        },
        {
            title:"Org Unit",
            name:"OrgUnit",
            length:128,
            type:"text"
        },
        {
            title:"Gender",
            valueMap:[
                "male",
                "female"
            ],
            name:"Gender",
            length:7,
            type:"text"
        },
        {
            title:"Marital Status",
            valueMap:[
                "married",
                "single"
            ],
            name:"MaritalStatus",
            length:10,
            type:"text"
        }
    ]
})



isc.ListGrid.create({
    ID:"ListGrid1",
    autoDraw:false,
    dataSource:"employees",
    fields:[
        {
            name:"Name",
            title:"Name"
        },
        {
            name:"EmployeeId",
            title:"Employee ID"
        },
        {
            name:"ReportsTo",
            title:"Manager"
        },
        {
            name:"Job",
            title:"Title"
        },
        {
            name:"Email",
            title:"Email"
        },
        {
            name:"EmployeeType",
            title:"Employee Type"
        },
        {
            name:"EmployeeStatus",
            title:"Status"
        },
        {
            name:"Salary",
            title:"Salary"
        },
        {
            name:"OrgUnit",
            title:"Org Unit"
        },
        {
            name:"Gender",
            title:"Gender"
        },
        {
            name:"MaritalStatus",
            title:"Marital Status"
        }
    ],
    autoFetchData:true
})



isc.VLayout.create({
    ID:"VLayout0",
    autoDraw:false,
    members:[
        ListGrid1
    ]
})



isc.DataView.create({
    ID:"DataView0",
    autoDraw:true,
    overflow:"hidden",
    members:[
        VLayout0
    ],
    width:"100%",
    height:"100%"
})

The main idea here is to combine SmartGWT and SmartClient, the way I was considering is to have the base on SmartGWT with Administration of users etc. and all other screens which contain the actual program that the general users. So, the smartclient screens will be loaded through Javascript from a menu table in MySQL.
So a way of adding new screens from R & D to production would be simply copying the DS and UI files into the respective folders and activate the menu by adding a record on the menu table.

a possible menu would be the following DS: menu_ds

<DataSource ID="menu_ds" dataFormat="iscServer" serverType="sql" dataSourceVersion="1" dbName="Mysql" tableName="menu">
    <fields>
        <field name="pk" type="integer" hidden="true" primaryKey="true"/>
        <field name="title" type="text" length="40"/>
        <field name="ui_name" type="text" length="40"/>
        <field name="onclick" type="text" length="255"/>
        <field name="hint" type="text" length="255"/>
        <field name="parent" type="text" required="false" hidden="true" foreignKey="menu.pk" rootValue="root"/>
    </fields>
</DataSource>

I tried finding examples with RPCManager.loadScreen() however, a few exist in SmartGWT forums and none else (Documentation, Feature Explorer, Smartclient Forums.)
I hope I will get some help on this. Thanks in advance.

[Isomorphic]

We're not sure what your specific question is, but the overall approach is fine, and a larg amount of documentation covering it was added to 3.1d builds after the one you downloaded - specifically look at the Component XML overview in the docs package.

[lynvcode]

Thanks for the reply,

My question is how do you check when the screen is fully loaded and/or do you have like a callback that fires after the completion of the load.

[Isomorphic]

But what do you mean by "fully loaded"? When the loadScreen() callback fires, the screen has been loaded - the component s have been created, as well as drawn if autoDraw=true was set.

[lynvcode]

How do you define the callback? Can you provide me with an example? Tried everything however nothing.

[Isomorphic]

Read the docs for RPCManager.loadScreen() - the second parameter is a callback and it's doc explains what you're expected to pass.

[lynvcode]

RPCManager.loadScreen("emp", new function() {
isc_DataView_0.getMembers()
VLayout0.addMember(isc_DataView_0.getMembers());
});

The callback is fired prior of loading the screen, please advise. This ends up let me know that the isc_DataView_0 is not defined.

Do you have a working example with a callback that fires after successful load of the screen? I believe this does not work.

Let me know, thanks.

[Isomorphic]

Again, you need to read the docs for loadScreen() - in this case, this part of the doc:

By default, components in the loaded screen that have global IDs will not actually be allowed to take those global IDs - instead, only widgets that have one of the global IDs passed as the globals parameter will actually receive their global IDs. To override this behavior, pass the special value RPCManager.ALL_GLOBALS for the globals parameter.

[Isomorphic]

Having just tested this, it looks to be working fine for us - it's possible that your screen is not loading at all. If you remove the callback, do the loaded components render on screen?

If not, ensure your file (emp.ui.xml) is in the correct place and check the Server log in the developer console for a failed loading notification.

[lynvcode]

ok,

I am testing it and I am having trouble adding the ListGrid1 (from ui.xml -- screen) into the VLayout0.

Can you provide me with a working example to see how its done, I am kind of new in this thing here, I have extensive history of smartclient now, but this thing I believe I have a problems implementing it...

How it should work: it should move the ListGrid1 as defined in ui.xml as a member of VLayout0 on the test.jsp (original jsp file.) Now, what it does, at least to me, it loads the ListGrid1 to the jsp, but it does not add it as a member to VLayout0.

RPCManager.loadScreen("emp", new function() {
    VLayout0.addMember(ListGrid1);
}, "ListGrid1");

Do take not I removed the DataView0 from the emp.ui.xml
see the following for emp.ui.xml

<DataSource>
    <loadID>test_employees</loadID>
</DataSource>


<ListGrid dataSource="test_employees" ID="ListGrid1" autoDraw="true">
    <fields>
        <ListGridField name="payroll_id" title="Payroll"/>
        <ListGridField name="first_name" title="First Name"/>
        <ListGridField name="last_name" title="Last Name"/>
        <ListGridField name="skill" title="Skill"/>
        <ListGridField name="project_code" title="Project Code"/>
        <ListGridField name="car_transport" title="Car Transport"/>
    </fields>
    <listEndEditAction>next</listEndEditAction>
    <showFilterEditor>true</showFilterEditor>
    <canEdit>true</canEdit>
    <autoFetchData>true</autoFetchData>
    <canRemoveRecords>true</canRemoveRecords>
</ListGrid>

any help would be greatly appreciated, I would also advise to have a working example on the documents for it. I am developer and I am having difficulty understanding how it works. Also, having and loading different screens from anywhere, besides the fact its cool, its also essential when combining smartgwt and smartclient.
Let me know, thanks again.

[Isomorphic]

Ah, don't use new function (), just function ()

[lynvcode]

love you guys! <3

That worked.

Final code for reference.

RPCManager.loadScreen("emp", function() {
    VLayout0.addMember(ListGrid2);
}, "ListGrid2");