CODEWITHSUNDEEP
javascriptmobiledojocordova
blong824
blong824

Reputation: 4030

Building Dojo 1.7 for Mobile PhoneGap App

I am trying to build dojo 1.7 to use in my phonegap application. I am currently using dojo 1.6.1. I built my current dojo.js file by going to build.dojotoolkit.org and selecting everything under dojox.mobile as well as a dojo.store.JsonRest module. That works great.

My issue is trying to create a profile file to create a build similiar to the one I got from the dojo build website.

I downloaded dojo 1.7 stable release src. I went into the buildScripts folder from the command line and tried to run a build with the following command:

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

I used the sample profile from the profiles folder:

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" ]
    ]
}

It built with no errors. The dojo.js generated from the build was then dropped into my phonegap application. I changed my index file to the following just for testing:

<!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>

Everytime I run the app I get a white page. When I replace the dojo.js file with my working copy I see the Phonegap output.

I would like to be able to use dojo 1.7 mobile and some of the new features such as the SpinWheel.

Can someone please help me with my build?

Thanks

Upvotes: 1

Views: 4539

Answers (5)

Miguel Calvo
Miguel Calvo

Reputation: 31

This problem is solved with Dojo 1.7.2

Upvotes: 1

Bj&#246;rn
Bj&#246;rn

Reputation: 31

For me this Profile works fine with dojo 1.7 and 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" ]    
]    
}

But with this Profil the CSS Files are not included, so you have to copy all the CSS folder structure. My HTML file looks like this:

<!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

Upvotes: 1

user1080794
user1080794

Reputation: 46

I did find the following that may shed some more light on this issue: "Dojo and PhoneGap? both have their own event to acknowledge when the page is ready. We are finding that the dojo.ready is too early for things like deviceDetection APis when running within a PhoneGap? container and it would be better off being done inside of the PG deviceReady method. ..."

Full thread can be found here: http://bugs.dojotoolkit.org/ticket/14062

It is discussing dojo 1.6.1, but sounds like some changes in dojo 1.7 may suffer more severe reactions. There is a suggested workaround, but I'm not sure it will solve the 1.7 issue.

Upvotes: 0

user1080794
user1080794

Reputation: 46

Also found this: http://livedocs.dojotoolkit.org/dojo/parser and tried to force parse on the entire dom or just the specific element, but still nothing.

Upvotes: 0

user1080794
user1080794

Reputation: 46

I'm having the same type of issues. I think it has to do with the new AMD loader.

It seems as if the parser is not parsing the declarative widgets but rather is waiting to do it on demand or that it just never gets called.

I did find some docs that mention we should use dojo/ready, but couldn't get it to work with it and phoneGap. The same code works fine on a desktop without phoneGap, which is weird.

See live docs: http://livedocs.dojotoolkit.org/dojo/ready

As well as: http://livedocs.dojotoolkit.org/loader/amd

"To put the loader in the AMD mode, set the async configuration variable to 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>

Note that you can only set the async flag before dojo.js is loaded, and that in AMD mode, neither Dojo nor any other library is automatically loaded - it is entirely up to the application to decide which modules/libraries to load."

Upvotes: 2

Related Questions