Topic
  • 6 replies
  • Latest Post - ‏2013-02-09T08:08:03Z by pandrbox
SystemAdmin
SystemAdmin
2327 Posts

Pinned topic Correct Way to use a Dojo mobile Button to do view Transition

‏2012-12-19T18:44:58Z |
Hello,
I am using Worklight 5.0.5, and created my Hybrid Application with Dojo included. I am working within Eclipse Indigo

I want to create a dojox/mobile/Button, that when pressed, transitions to another view. What is the correct way to add this functionality to a dojox/mobile/Button in worklight?

Currently I am doing this incorrectly. It will work in the browser, but when I try to run as an Android Application, the app crashes on start up with the following error: "scriptError at file:///data/data/com.app_name/files/ww/default/dojo/dojo.js:26

Here is the relative code that I wrote to implement the current version of transitioning views via a button:
in app.html:

<button data-dojo-type="dojox.mobile.Button" class="mblBlueButton" id="button">Content</button>

This is wrapped in a Grid div and Pane div

In my js/app.js file:

function dojoInit() {
require([ "dojo", "dojo/parser", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/deviceTheme",
"dojox/mobile/ScrollableView", "dojox/mobile/Heading", "dojox/mobile/ToolBarButton", "dojox/mobile/TabBar",
"dojox/mobile/TabBarButton", "dojox/mobile/TextBox", "dojox/mobile/RoundRectList", "dojox/mobile/ListItem",
"dojox/mobile/GridLayout", "dojox/mobile/Button", "dojox/mobile/Pane", "dijit/dijit"],
function(dojo) {
dojo.ready(function() {
doTransition = function(current, dest) {
var w = dijit.byId(current);
w.performTransition('#' + dest, 1, "slide", null);
};

dojo.connect(dojo.byId("button"), "onclick", function(evt) {
doTransition('Home', 'Dest');
});
});
});
}

To make this build to work in browser I had to add the following to build-dojo.xml:

<include name="dijit/**"/>
within the <patternset id="dojo.resources.loos-modules"> tag
What am I doing wrong, or any suggestions?
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Correct Way to use a Dojo mobile Button to do view Transition

    ‏2012-12-19T19:49:04Z  
    Although not completely what I was looking for, I did find a suitable solution.

    By using an Icon Menu instead of a Grid Layout, much of the UI will look exactly the same, and now moveTo's are supported using the IconMenuItem type.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Correct Way to use a Dojo mobile Button to do view Transition

    ‏2012-12-19T22:14:26Z  
    Although not completely what I was looking for, I did find a suitable solution.

    By using an Icon Menu instead of a Grid Layout, much of the UI will look exactly the same, and now moveTo's are supported using the IconMenuItem type.
    Hi,

    I've attached a simple project that uses buttons to navigate between views. I usually use dojo.on to listen for the click event. Here's a code snippet.
    require(, function(dom, on, registry){
    on(dom.byId("button0"), "click", function () {
    registry.byId("view0").performTransition("view1", 1, "slide");
    });
    on(dom.byId("button1"), "click", function() {
    registry.byId("view1").performTransition("view0", -1, "slide");
    });

    });

    Note that this is a 5.0.5 project.

    Regards, David
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Correct Way to use a Dojo mobile Button to do view Transition

    ‏2012-12-19T22:23:34Z  
    Hi,

    I've attached a simple project that uses buttons to navigate between views. I usually use dojo.on to listen for the click event. Here's a code snippet.
    require(, function(dom, on, registry){
    on(dom.byId("button0"), "click", function () {
    registry.byId("view0").performTransition("view1", 1, "slide");
    });
    on(dom.byId("button1"), "click", function() {
    registry.byId("view1").performTransition("view0", -1, "slide");
    });

    });

    Note that this is a 5.0.5 project.

    Regards, David
    The project was too large to attach, trying again.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Correct Way to use a Dojo mobile Button to do view Transition

    ‏2012-12-19T22:23:43Z  
    Hi,

    I've attached a simple project that uses buttons to navigate between views. I usually use dojo.on to listen for the click event. Here's a code snippet.
    require(, function(dom, on, registry){
    on(dom.byId("button0"), "click", function () {
    registry.byId("view0").performTransition("view1", 1, "slide");
    });
    on(dom.byId("button1"), "click", function() {
    registry.byId("view1").performTransition("view0", -1, "slide");
    });

    });

    Note that this is a 5.0.5 project.

    Regards, David
    Are these lines of code placed within the dojoInit method?
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Correct Way to use a Dojo mobile Button to do view Transition

    ‏2012-12-20T15:20:00Z  
    Are these lines of code placed within the dojoInit method?
    Hi,

    No, the code was in wlCommonInit.

    Basically I have the buttons defined with id's button0 and button1

    <button data-dojo-type="dojox.mobile.Button" id="button0">Go to View 1</button>

    And then I use the code above to attach the function to the onClick event. I also had to add the following to <patternset id="dojo.resources.loose-modules"> in build-dojo.xml

    <include name="dijit/**"/>
    <include name="dojo/_base/unload.js"/>

    I've attached a small zip with the html and javascript.
  • pandrbox
    pandrbox
    22 Posts

    Re: Correct Way to use a Dojo mobile Button to do view Transition

    ‏2013-02-09T08:08:03Z  
    I had similar problem. The list of require statement in dojoInit contains "dijit/dijit" caused this ( scriptError on dojo.js 26 ) After I changed to "dijit", the problem fixed. Try it.