2014-10-06 68 views
0

我想制作可在所有设备上使用的Cordova(Phonegap)应用程序。包括电脑屏幕。我希望布局根据一些简单的说明来调整面板(视图)的数量和布局。我选择了Dojox.app,因为config.json文件控制着应用程序的MVC结构。如何制作移动应用程序屏幕大小

Dojox.app使用控制器来处理大小和方向事件。该config.json文件包含“控制器”,“意见”等元素来定义应用程序

//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" 
        } 
       } 
      } 
     } 
    } 
}, 
... 

我想通过量变到质变的"dojox/app/controllers/Layout"允许的加法和减法,以创建一个自定义控制器的MVC结构取决于屏幕尺寸的视图。

Dojo已经有了实验'dojox/mobile/ScreenSizeAware'模块,但它仅限于两个面板,并且在MVC环境中不起作用(嗯,我还没有做到)。

如何去定义config.json文件中的视图以及如何创建控制器。

在接下来的几天里,我会认真考虑一下。如果您有任何建议,请在此处记下。

回答

1

您应该看看dojox/app/tests/mediaQuery3ColumnApp,它将根据屏幕大小显示1,2或3列。它包含一个使用css处理布局的自定义布局控制器,以及一个自定义导航控制器,以尝试处理转换时显示的视图。这并不完美,当显示的列发生更改时,在视图之间导航时会出现一些问题,但应该让您开始。 你可以在这里运行: http://archive.dojotoolkit.org/nightly/checkout/dojox/app/tests/mediaQuery3ColumnApp/ 你可以在这里看到的代码: https://github.com/dmachi/dojox_application/tree/master/tests/mediaQuery3ColumnApp

问候, 埃德

相关问题