构建Dojo 1.7 for Mobile PhoneGap App

时间:2011-11-29 22:14:44

标签: javascript mobile dojo cordova

我正在尝试构建dojo 1.7以在我的phonegap应用程序中使用。我目前正在使用dojo 1.6.1。我通过转到build.dojotoolkit.org并选择dojox.mobile下的所有内容以及dojo.store.JsonRest模块来构建我当前的dojo.js文件。这很好用。

我的问题是尝试创建一个配置文件来创建一个与我从dojo构建网站获得的类似的构建。

我下载了dojo 1.7稳定版src。 我从命令行进入buildScripts文件夹,并尝试使用以下命令运行构建:

>build profile=path/myMobileProfile.js action=release releaseName=test

我使用了profiles文件夹中的示例配置文件:

dependencies = {
    stripConsole: "normal",

    layers: [
        {
            name: "dojo.js",
            customBase: true,
            dependencies: [
                "dojox.mobile.parser",
                "dojox.mobile",
                "dojox.mobile.compat"
            ]
        },
        {
            name: "../dojox/mobile/_compat.js",
            layerDependencies: [
                "dojo.js"
            ],
            dependencies: [
                "dojox.mobile._compat"
            ]
        }
    ],

    prefixes: [
        [ "dijit", "../dijit" ],
        [ "dojox", "../dojox" ]
    ]
}

它构建没有错误。然后,从构建生成的dojo.js被放入我的phonegap应用程序中。我将索引文件更改为以下内容仅用于测试:

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/android/android.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
</head>
<body style="background-color:white">
Phonegap
</body>
</html>

每次运行应用程序时,我都会看到一个白页。当我用我的工作副本替换dojo.js文件时,我看到了Phonegap输出。

我希望能够使用dojo 1.7 mobile和一些新功能,如SpinWheel。

有人可以帮我构建一下吗?

由于

5 个答案:

答案 0 :(得分:2)

我遇到了同样的问题。我认为这与新的AMD加载器有关。

似乎解析器没有解析声明性小部件,而是等待按需执行它或者它永远不会被调用。

我确实发现一些文档提到我们应该使用dojo / ready,但是无法使用它和phoneGap。相同的代码在没有phoneGap的桌面上工作正常,这很奇怪。

查看实时文档:http://livedocs.dojotoolkit.org/dojo/ready

以及:http://livedocs.dojotoolkit.org/loader/amd

“要将加载程序置于AMD模式,请将async配置变量设置为truthy:

<script data-dojo-config="async:1" src="path/to/dojo/dojo.js"></script>
<script>
  // ATTENTION: nothing but the AMD API is available here
</script>

请注意,您只能在加载dojo.js之前设置async标志,并且在AMD模式下,不会自动加载Dojo或任何其他库 - 完全由应用程序决定哪些模块/要加载的库。

答案 1 :(得分:1)

对我来说,这个配置文件适用于dojo 1.7和PhoneGap:

    dependencies = {
    selectorEngine: "acme",
    layers: [
             {
// This is a specially named layer, literally 'dojo.js'
// adding dependencies to this layer will include the modules    
// in addition to the standard dojo.js base APIs.    
             name: "dojo.js",    
             dependencies: [    
                 "dijit._Widget",    
                 "dijit._Templated",    
                 "dojo.fx",    
                 "dojo.NodeList-fx",    
//this wasn't included in the standard build but necessary 
                 "dojo._firebug.firebug",    
 //my used dojo requirements
                 "dojox.mobile.parser",    
                 "dojox.mobile",     
                 "dojox.mobile.Button",    
                 "dojox.mobile.SwapView",    
                 "dojox.mobile.ScrollableView",    
                 "dojox.mobile.TabBar",     
                 "dojox.mobile.SpinWheelTimePicker",     
                 "dojox.mobile.compat"    
            ]     
       }    
], 

prefixes: [   
       ["dijit", "../dijit" ],    
       ["dojox", "../dojox" ]    
]    
}

但是使用这个Profil,CSS文件不包括在内,所以你必须复制所有的CSS文件夹结构。 我的HTML文件如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" "http://www.w3.org/TR/html5/strict.dtd">
            <html>
                <head>
                    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"></meta>
                    <meta name="apple-mobile-web-app-capable" content="yes"></meta>
                    <title>dojox.mobile Demo</title>
                    <link href="css/themes/iphone/iphone.css" rel="stylesheet" type="text/css" />
                    <script type="text/javascript" src="phonegap.js" charset="utf-8"></script>
                    <script type="text/javascript" src="dojo.js" djConfig="isDebug:true, parseOnLoad:true"></script>
                    <script type="text/javascript">
                        require([
                                        "dojox/mobile/parser",      // (Optional) This mobile app uses declarative programming with fast mobile parser
                                        "dojox/mobile",             // (Required) This is a mobile app.
                                        "dojox/mobile/Button",
                            //Some other dojo Widgets
                                "dojox/mobile/compat"       // (Optional) This mobile app supports running on desktop browsers
                                 ],
                                function(parser, mobile, compat){
                                //Optional module aliases that can then be referenced inside callback block
                                }
                                // Do something with mobile api's.  At this point Dojo Mobile api's are ready for use.
                                );
        //to make sure dojo and PhoneGap was loaded use this
        document.addEventListener("deviceready", init(), false);
        function init(){
           dojo.ready(function(){
              //do something
           });
        }
        </script>
    </head>
    <body>
    </body>

HTH

答案 2 :(得分:1)

Dojo 1.7.2

解决了这个问题

答案 3 :(得分:0)

还发现了这个:http://livedocs.dojotoolkit.org/dojo/parser 并试图强制解析整个dom或只是特定的元素,但仍然没有。

答案 4 :(得分:0)

我确实发现以下内容可能会对这个问题有所了解:“Dojo和PhoneGap都有自己的事件来确认页面准备好了。我们发现dojo.ready对于像deviceDetection AP在PhoneGap?容器中运行时,最好在PG deviceReady方法内部完成....“

可在此处找到完整主题:http://bugs.dojotoolkit.org/ticket/14062

它正在讨论dojo 1.6.1,但听起来像dojo 1.7中的一些变化可能会遭受更严重的反应。有一个建议的解决方法,但我不确定它是否会解决1.7问题。