2014-10-06 69 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

問候, 埃德

相關問題