How do I use Dojo inside of Worklight correctly?

Question

I need some help as well as some advice on how to use Dojo correctly in my project. At the moment, this is what I'm doing:

Say I setup a project named 'Test'. Test.html is the first file hit, and in that file I have the following:

<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true" src="dojo/dojo.js"></script>
<script type="text/javascript" src="dojo/core-web-layer.js"></script>
<script type="text/javascript" src="dojo/mobile-ui-layer.js"></script>
<script type="text/javascript" src="dojo/mobile-compat-layer.js"></script>
<script type="text/javascript">
  require(
  // Set of module identifiers
  [ "dojo", "dojox/mobile/parser", "dojox/mobile/SwapView", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/deviceTheme", "dojox/mobile/ScrollableView" ],
  // Callback function, invoked on dependencies evaluation results  
  function(dojo) {
    dojo.ready(function() {});
  });
</script>   

I also have this in Test.js:

require([ "dojo", "dojox/mobile/parser", "dojox/mobile/deviceTheme",
  "dojox/mobile/ScrollableView", "dojox/mobile/compat", "dojox/mobile",
  "dojox/mobile/Button", "dojox/mobile/View", "dojox/mobile/Heading",
  "dojox/mobile/TabBarButton", "dojox/mobile/TabBar",
  "dojox/mobile/TextBox", "dojox/mobile/RoundRectList",
  "dojox/mobile/ListItem", "dojox/mobile/Button",
  "dojox/mobile/SpinWheel", "dojox/mobile/SpinWheelSlot",
  "dojox/mobile/IconContainer", "dojox/mobile/SwapView" ], 
  function(dojo, parser) {
    dojo.ready(function() {

    });
  });

Now, when I click a on one of my buttons, it triggers the WL.Page.Load method and my pagePort div now shows my new page inside of my Test.html page (let's say this is Page2.html), however, there's a problem. The Dojo stuff works fine on page one, but now it doesn't work on page two. I'm not sure what's happening behind the scenes but I feel I'm missing a step (do I need to unload Dojo? Declare it again in the next page?).

If somebody could help me get Dojo working on this second page so I'm able to use Dojo on further pages (after learning what I'm doing wrong) I would be really grateful!

Answer 1

My best guess based on the info you've given is that Page2.html is not really inside Test.html and its a new page. In this case you will need to have the script references in Page2 as well.

If you're testing your code in a web browser you can view the Console and hopefully gain some insight as to what exactly is going wrong.

You can also try working with the Worklight logger to help locate the problem. http://wpcertification.blogspot.com/2012/03/enabling-debuglog-console-in-worklight.html

Here is a general link for "Problem Determination" from IBM as well http://publib.boulder.ibm.com/infocenter/ieduasst/v1r1m0/index.jsp?topic=/com.ibm.iea.worklight/worklight/5.0/Problem_Determination/IMFV50_ProblemDetermination/player.html

Answer 2

As Nick said if you load totally different HTML page you will have that page to declare the classes your are using. In dojox/mobile/tests see test_IconContainer.html for example.

That said you could proceed differently by for example having your alternate views defined in the same HTML or as your are in Worklight by using the fragment mechanism (see https://www.ibm.com/developerworks/mobile/worklight/getting-started/ modules 60.1, 2 and 3).