Transition views in javascript of a dojo based application

StackOverflow https://stackoverflow.com/questions/21989721

Question

I have two scenarios I need help with, and I thought posting them together would prove more valuable for myself, and other viewers.

Setup:

   Worklight 6.1
   dojo 1.9

Application:
   MainView.html  (Contains Body, and a transition Div, and NorthSouthView.js script reference)
   View1.html (Contains a single Div that displays and unordered list
   View2.html (Contains a single Div that Displays <p> data, and also plays audio)
   View3.html (Contains a single Div that Displays instructional information)

  application-descriptor  <mainFile> MainView.html </mainFile>

  All of the views are stored together in the application. There are no external http queries made by the application.  All view transitions are local to the application.

Scenario #1: 

   At application start the MainView.html  is invoked by worklight.  Anticipated format::

   <body>
      <div>
         <h1 id="SSheader" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Loan Snapshot</h1> 
      </div>

      <div  id="TransitionViewDiv">

           /* Would like to load content of View1.html, View2.html, or View3.html here */

      </div>
     <script>SetView.js</script>
</body>

Description + Questions:

When the application starts, SetView.js will be loaded, and the purpose of this script is to look at localStorage and determine which view should be displayed.  (View1, View2, or View3).  The goal is to keep SSheader fixed at the top of the screen at all times. Only    TransitionViewDiv  would update.

Questions: 

1) What coding approach can be used in SetView.js to load one of the 3 possible views into the TransitionViewDiv?.  I did findin dojo 1.9 specs an example using dojox/mobile/ViewController but I was not able to get the sample code to work as documented by dojo.

2) Is the approach of having the TransitionViewDiv necessary, or could View1, 2 or 3 be loaded without TransitionViewDiv?  Keep in mind that each view View1, 2, and 3  are defined as individual Div's.

Appreciate any advice to accomplish the above approach, or welcome any suggestion on the best practices to accomplish the transition.

Scenario #2:

As a follow-on to the scenario 1 above. Once View1, 2 or 3 is successfully loaded the views will have buttons defined that will want to cause the transition to another one of the remaining views. So, if inside SetView.js the decision is to slide in View2 to be displayed, View2 will have buttons that will want to load for example View3.html.

Description + Questions:

1) Would the best approach to load View3.html from View2.html be to use the moveTo on the button click, or should the button use the callback to invoke javascript to cause the transition similar to what was used to load the initial view?

Appreciate any advice on the best practices to managing multiple view stored in independent files. In the end the application will have upwards of 15+ ViewXX.html files each containing a Div. Based on this, having all of the views in one html file and forcing the hide, and show is not feasible.

Appreciate your time and help

Was it helpful?

Solution

To load an HTML fragment (View1.html, View2.html or View3.html), you can use the dojox/mobile/ContentPane. This widget allows you to provide a href property that can be used to specify the location of the view.

You can also alter it later on by setting the href property again, for example:

registry.byId("myContentPane").set("href", "View2.html");

You should keep the div#TransitionViewDiv and programmatically add the dojox/mobile/ContentPane to it, or use declarative syntax and add the following attributes:

 <div id="TransitionViewDiv" data-dojo-type="dojox/mobile/ContentPane" data-dojo-props="href: 'View1.html'"></div>

Your second scenario is differs from the first one. In the first one, you actually have 1 view with many fragments, while in your second scenario you have many views.

If you only have 1 view, you cannot transition to other views (there are none). So if you want to use transitions you cannot use dojox/mobile/ContentPane.

However, if you have seperate views, then that means you need to move the header to each view (since they're part of it). For these, more complex cases I think you should look at the dojox/app module. This covers a lot of the MVC code for you and the only thing you need to do is configure it.

If you're not interested in the dojox/app module, you can try to inherit views. You might want to look at this answer I once provided. In the comment section of that answer you can also find a more detailed JSFiddle. In this example the header is actually inherited. I also wrote a more detailed article to handle this case .

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top