Question

我想制作一个可在所有设备上使用的Cordova（Phonegap）应用程序。包括PC屏幕。我希望布局根据一些简单的说明调整面板（视图）的数量和布局。我选择了Dojox.app，因为config.json文件控制应用程序的MVC结构。

Dojox.app使用控制器来处理大小和方向事件。 config.json文件包含“controllers”，“views”和其他元素来定义应用程序的MVC结构

//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"来创建自定义控制器，以允许根据屏幕尺寸添加和减少视图。

Dojo已经拥有实验性'dojox/mobile/ScreenSizeAware'模块，但它仅限于两个面板，并且在MVC环境中无效（我无法做到）。

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

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

Answer 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

此致编

如何使移动应用程序的屏幕大小意识到

1 个答案: