How to make a mobile app screen size aware - json

Question

I want to make a Cordova (Phonegap) app that can be used on all devices. Including PC screens. I want the layout to adjust the number and layout of panels (views) acording to some simple instructions. I chose the Dojox.app because of the way the config.json file controls the MVC structure of the app.
A Dojox.app uses controllers to handle size and orientation events. The config.json file contains "controllers", "views" and other elements to define the MVC structure of the app
//Mandatory,listen App.emit events,implement dojox/app/Controller
"controllers": [
//listens to "app-init, app-load"
"dojox/app/controllers/Load",
//listens to "app-transition, app-domNode"
"dojox/app/controllers/Transition",
//listens to "app-initLayout,app-layoutVIew,app-resize"
"dojox/app/controllers/Layout"
],
//Mandatory, one or a set of views view1+view2+view3
"defaultView": "home+rightPane",
//Mandatory, Specify Application child views
"views": {
"home":{
//Mandatory set template for defaultViews
"template": "app/views/home/home.html",
"controller" : "app/views/home/home.js",
"defaultView": "rightPane",
/* when transitioning between tabs, use a flip animation by default */
"defaultTransition": "slide",
/* the views available to this scene */
"views": {
"rightPane":{
//Mandatory set template for defaultViews
"template": "app/views/rightPane/right.html",
"controller" : "app/views/rightPane/right.js",
"defaultView": "general",
/* when transitioning between tabs, use a flip animation by default */
"defaultTransition": "slide",
/* the views available to this scene */
"views": {
"about":{
"template": "app/views/about/about.html",
"controller" : "app/views/about/view.js"
},
"wifi":{
"template": "app/views/wifi/wifi.html",
"controller" : "app/views/wifi/wifi.js"
},
"general":{
"template": "app/views/general/general.html",
"controller" : "app/views/general/general.js"
},
"picture":{
"template": "app/views/picture/picture.html",
"controller" : "app/views/picture/picture.js"
},
"bright":{
"template": "app/views/bright/bright.html",
"controller" : "app/views/bright/bright.js"
}
}
}
}
}
},
...
I want to create a custom controller by changeing the "dojox/app/controllers/Layout" to allow for the addition and subtraction of views depending on the screen sizs.
Dojo already has the experimental 'dojox/mobile/ScreenSizeAware' module but it is limited to two panels and does not work (well I haven't been able to) in a MVC environment.
How to go about defining the views in the config.json file and how to create the controller.
I'll give it some serious thought over the next few days. If you have any suggestions please jot them down here.

Answer 1

You should take a look at the dojox/app/tests/mediaQuery3ColumnApp, it will show 1, 2 or 3 columns depending upon the screen size. It includes a custom layout controller which uses css to handle the layout, and a custom navigation controller to try to handle which views to show when transitioning. It is not perfect, there are some issues with the navigation between views when the displayed columns has changed, but it should get you started.
You can run it here:
http://archive.dojotoolkit.org/nightly/checkout/dojox/app/tests/mediaQuery3ColumnApp/
And you can see the code here:
https://github.com/dmachi/dojox_application/tree/master/tests/mediaQuery3ColumnApp
Regards,
Ed