Visualbuilder Javascript in SmartGWT

[doit]

Hi,
is it possible to convert the Visualbuilder JS code to a JavaScriptObject usable in Java-Code?

For example when I'm calling a servlet that returns the Javascript from Visualbuilder (as it is explained in the FAQ) i want to do something like the following:

        final VLayout mainLayout = new VLayout();
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        IButton button = new IButton("Request");
        button.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent clickEvent) {
                RPCRequest request = new RPCRequest();
                request.setHttpMethod("GET");
                request.setActionURL("/test/ui/main");
                RPCManager.sendRequest(request, new RPCCallback() {
                    public void execute(RPCResponse rpcResponse, Object o, RPCRequest rpcRequest) {
                        [b]mainLayout.addMember(new Canvas([i]createJavaScriptObject(o)[/i]));[/b]
                    }
                });
            }
        });

        mainLayout.addMember(button);
        mainLayout.draw();

The bold line is the important one. Is it possible to do something like that? And if so, what so I have to put into that createJavaScriptObject(o) method? I've already tried to convert the returned String in various ways, but didn't have success(JSNI, JSON.decode(), JSOHelper).

Thanks in advance.

[Isomorphic]

This will work if the JavaScript Object is the correct thing - what would be passed to the isc.Canvas.create() method in SmartClient. But there doesn't seem to be a clear purpose to what you're doing, since the FAQ you referred to already describes a simpler approach.

[doit]

The basic idea is to load different UIs dynamically/lazy at runtime and add them to existing components.
How can i do this?
As I understand the FAQ i have the option to use .jsp files or the servlet approach, but i always have to include a <script src="pathToJspOrServlet"> tag which statically loads the whole UI at startup?
Maybe I misunderstood something here.

[Isomorphic]

The .jsp which can be loaded via <script src=> also gives you the ability to do dynamic loading. If you use the RPCManager to send a request to that URL and setEvalResult(true), the returned JavaScript code will be executed and the components will exist when the RPCRequest.callback fires.

[doit]

Thanks for the pointer to setEvalResult(true).

If I change the code from the initial post to:

        final VLayout mainLayout = new VLayout();
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        IButton button = new IButton("Request");
        button.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent clickEvent) {
                RPCRequest request = new RPCRequest();
                request.setHttpMethod("GET");
                request.setActionURL("/test/ui/main");
                [b]request.setEvalResult(true);[/b]
                RPCManager.sendRequest(request, new RPCCallback() {
                    public void execute(RPCResponse rpcResponse, Object o, RPCRequest rpcRequest) {
                        [b]mainLayout.addMember(new IButton(Canvas.getById("theBtn").getJsObj()));[/b]
                    }
                });
            }
        });

        mainLayout.addMember(button);
        mainLayout.draw();

I have access to "theBtn" and it is added to the "mainLayout" but after that the UI freezes completely. Am I doing something wrong or is the a bug?

Servlet code:

public class UIServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            XML.toJS("<isomorphicXML xmlns:xsi=\"nativeType\">" +
                    "<IButton ID=\"theBtn\" autoDraw=\"false\">" +
                    "    <title>theBtn</title>" +
                    "</IButton>" +
                    "<DataView ID=\"DataView0\" overflow=\"hidden\" autoDraw=\"true\">" +
                    "    <members><Canvas ref=\"theBtn\"/>" +
                    "    </members>" +
                    "    <width>100%</width>" +
                    "    <height>100%</height>" +
                    "    <modulesDir>modules/</modulesDir>" +
                    "</DataView>" +
                    "</isomorphicXML>", resp.getWriter());
        } catch (Exception e) {
            e.printStackTrace();  
        }
    }
}

[Isomorphic]

That code looks generally right, but, you can't get a freeze without an error somewhere - check the Developer Console for errors or warnings.

[doit]

I've got the following warnings in the Dev Console:

XRP8:WARN:Log:ClassFactory.addGlobalID: ID:'DataView0' for object '[DataView ID:DataView0]' collides with ID of existing object '[DataView ID:DataView0]'. The pre-existing widget will be destroyed.
XRP8:WARN:Log:ClassFactory.addGlobalID: ID:'theBtn' for object '[IButton ID:theBtn]' collides with ID of existing object '[IButton ID:theBtn]'. The pre-existing widget will be destroyed.

I can't remember if these were the 100% exact warnings because they showed up only the first time I tried it with the Dev Console opened. After that I didn't get any log entries at all.

When I remove the whole DataView component from the XML it seems to work.


I don't know if it is related to this issue but I'm getting another warning at startup:

08:50:32.050:INFO:Log:initialized
08:50:32.201:WARN:AutoObserver:Use addInterfaceProperties() to add methods to interface [Class AutoObserver]
08:50:45.593:INFO:Log:isc.Page is loaded

*update*
It seems that the DataView is added on top of all the other components with fullscreen size, so the other components aren't reachable anymore(see the attached screenshot).
So whats the purpose of the DataView at all? Is it safe to remove it from the XML? If I set the width and height to 0(generates warnings) or 1 it also seems to work.

[Isomorphic]

Those warnings about the ID collisions indicate that you are loading the Visual Builder-generated screen twice. Maybe you still have a <script src=> tag in your bootstrap file pointing at the same .jsp that you're dynamically loading from.

As far as the DataView (or any top-level container present in a Visual Builder screen), it's going to fill the screen by default, but you can just put it in some other container (use tab.setPane() for example to place it in a tab) and it will just fill that container instead. Or, yes, you could grab other pieces of the screen, and just destroy() the DataView component or edit the VB-generated screen to remove it.

[doit]

Alright, thanks for the help & info.
I have to experiment a bit more, but I think i will get along alone now.