Topic
7 replies Latest Post - ‏2012-12-07T21:37:36Z by SystemAdmin
SystemAdmin
SystemAdmin
2327 Posts
ACCEPTED ANSWER

Pinned topic Dojo: online works, built-in fails

‏2012-12-03T14:53:42Z |
I would appreciate a little help on dojo, while mobile project works fine with online toolkit, it fails with built-in IBM toolkit distribution.

To sort out problem I created "hello world" project with single page based on this dW article: http://www.ibm.com/developerworks/library/wa-getstarteddojo/index.html
It works like a charm when I am using online dojo, even the same version as built-in version:
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>
If I am trying to use built-in dojo like this:
<script src="dojo/dojo.js"></script>
the dev console complaints "GET .../default/dojo/main.js 404 (Not Found)" on common preview screen.

I took a look on a "wlapp" and indeed could did not find "main.js"; as I understand the concept of repackaging to save on size of final app (build-dojo.xml) I am not sure if it has impact on core functionality. Googling for dojo in worklight context I found examples that developers also include "core-web-layer.js", "mobile-ui-layer.js" and "mobile-compat-layer.js". I took it as repackaging side-effect, added to my project for test and it did not change anything.

I returned to my "dojo/main.js missing" problem. I started to correct ANT build script I adding inclusions of missing files to <patternset id="dojo.resources.loose-modules"> one by one. After couple round-trips (add, build, run, check next missing) I realized I am starting dragging whole dojo back to bundled app and it should not be the case.

What am I missing? (I suppose something embarrassingly obvious).

I cannot find any guideline referring to built-in dojo. Even "getting started" sample uses its own dojo/dojox files :/

I have attached full project with dojo (sorry for this 7MB) with two applications (working global and failing local) as well as screen from both in "WLDojo.zip/dojo-global-local.png".

regards,
-andy.

Attachments

  • SystemAdmin
    SystemAdmin
    2327 Posts
    ACCEPTED ANSWER

    Re: Dojo: online works, built-in fails

    ‏2012-12-03T16:18:58Z  in response to SystemAdmin
    That article looks to be old; try our Worklight Getting Started modules for dojo:
    http://www.ibm.com/developerworks/mobile/worklight/getting-started/#dojo-mobile

    Also, check out the Worklight with Dojo demo in the Worklight video gallery:
    https://www.ibm.com/developerworks/mobile/videos/worklight.html

    Barbara Hampson, Manager, IBM Worklight
    • SystemAdmin
      SystemAdmin
      2327 Posts
      ACCEPTED ANSWER

      Re: Dojo: online works, built-in fails

      ‏2012-12-03T16:40:36Z  in response to SystemAdmin
      Barbara,
      as I said "getting started" brings its own dojo files and it works. I modernized this dW example (to accomodate to 1.7 dojo syntax) and with online dojo (from googleapi) it works fine. My problem is I am stubbornly trying to make "built-in" dojo work for me. This is why I attached the project -- "bring own dojo and make it working" or "use worklight studio generated IBM dojo version to stumble on hello-world" :(

      regards,
      -andy.
      • SystemAdmin
        SystemAdmin
        2327 Posts
        ACCEPTED ANSWER

        Re: Dojo: online works, built-in fails

        ‏2012-12-05T19:09:50Z  in response to SystemAdmin
        The default IBM Worklight Dojo build selects a subset of the Dojo libraries. I found this out the hard way. There are a couple of ways around this: 1) edit the build-dojo.xml build script to include the files you want/need from the version of the library you want to use, or 2) point your script includes to a location on a local server or a CDN where the scripts are available on the network. I suggest the Dojo site which has full sources available which are useful for debugging.

        IBM, as an enhancement request, I suggest having the build-dojo.xml updated to call the Dojo build process. This will enable a custom Dojo build to select the exact sources necessary for the project and include them in the various Worklight project files. I have started doing this work myself for my project, but it would be better to come from IBM out of the box in the future, of course.
  • jim_zhang
    jim_zhang
    12 Posts
    ACCEPTED ANSWER

    Re: Dojo: online works, built-in fails

    ‏2012-12-05T22:01:08Z  in response to SystemAdmin
    hi so I downloaded WLDojo.zip and fixed it in Studio, there are a number of things resulted from what I guess your attempt to "migrate" the web version of a dojo app to the Worklight Studio project, here's what i had to change:
    • some internal project metadata that the tools use to track things (like which app in the project uses dojo, where is dojo, etc.) are not matching the project contents. my guess is that you created a dummy project and renamed things afterwards. i'm not listing them here since they are internal details that are not supposed to be exposed to end users. send me a note if you would like to know the details or you can find out yourself by comparing the attached file with your original contents. you can avoid this by not renaming things after they are created (project name, app name). in the future we'll add better refactoring support so the tools are not broken when you change things.
    • more importantly, there's something about the dojo.js that you should know about. in particular, the dojo.js included with Worklight Studio is the "nano" loader, which means it doesn't include "dojo" itself. as such dojo functions like xhr need to be loaded using the "require()" call. the easiest is using the "dojo" conglomerate or you can be more granular than that. I added "dojo" to the front of the module array
    • added back the script includes you commented out, you don't have to use them but then you'd have to modify build-dojo.xml to include a whole bunch of loose js files to make dojo work:

    <script src="dojo/core-web-layer.js"></script>
    <script src="dojo/mobile-ui-layer.js"></script>

    • finally, data-dojo-config must be passed to the dojo/dojo.js script include for the setting to take effect (another approach is using a separate script block to define the variable djConfig if you want to keep it separate), so I merged the two script elements

    afterwards the page worked fine in preview. see the screenshot and attached resulting file
    • jim_zhang
      jim_zhang
      12 Posts
      ACCEPTED ANSWER

      Re: Dojo: online works, built-in fails

      ‏2012-12-05T22:03:19Z  in response to jim_zhang
      here's the resulting project content
    • SystemAdmin
      SystemAdmin
      2327 Posts
      ACCEPTED ANSWER

      Re: Dojo: online works, built-in fails

      ‏2012-12-05T22:06:36Z  in response to jim_zhang
      Here is a working version too. I created it from scratch. Here is how:
      1) Create a new worklight project with the Hybrid Template. Name the application HelloWorld and check the dojo checkbox (on the 2nd page of the wizard)
      2) Open up the HelloWorld.html page under the common folder. Drag and drop the dojo elements onto the page.
      3) Right click and do a Run As--> Preview.

      The dojo loads correctly. I am to the same conclusion that Jim did above. It seems that the project name was changed, the application names were changed. Meta-data didn't get updated.
    • SystemAdmin
      SystemAdmin
      2327 Posts
      ACCEPTED ANSWER

      Re: Dojo: online works, built-in fails

      ‏2012-12-07T21:37:36Z  in response to jim_zhang
      Jim,
      thank you for deep analysis, that pushed me to "fix" my project. Some more reflections below:

      ad bullet 2 - even though last time I developed serious code in 1.3 I know understand AMD introduced in 1.7. Anyway thank you for keeping us sensitive to this new aspect.

      ad bullet 3 - my bad, that is the part of AMD I have not "loaded" to my head yet. As default online 1.8 built uses single "dojo.js" like it was always before I assumed it is still valid approach. I wish dojo was documented better. Layering is barely explained. Finally I was looking for these *-layer.js file names and found 3rd party wiki that explains it (https://github.com/pruzand/Dojo-Build-Factory/wiki, "standard layer files" chapter) instead of dojotoolkit.org documentation.
      As I do not use WYSIWYG editors I simply forgot about this way to see what must be imported: dragging dojo widgets from palette creates right skeleton in html.

      add bullet 4 - you are righ, data-dojo-config attribute has to be on the same script import as "dojo.js". In my case I needed extra step. I am using "parseOnLoad:false" and explicit call to "parser.parse()". I started working after I applied "when ready" handler i.e. added "dojo" to require section and used "dojo.ready(function(){parser.parse();});". I was confused (again) with that one though as 1.8 uses "dojo/ready" or "dojo/ready!" plugin to wait for load completion.

      add bullet 1 - your hint on failed renaming pushed me forward. Problem is that my hello-world project was so badly broken that eclipse do not even complain on dojo building problems and I overlooked it. Normally if you create a new dojo project from scratch and rename it then build&deploy command produces error.
      I understand your perspective that regular users should not mess up with eclipse files, I think though that renaming is common practice. Also common is situation when customers have ongoing projects and cannot be advised "start from scratch". I fixed paths to with application names in "com.ibm.imp.worklight.core.prefs" and "org.eclipse.wst.common.component" of eclipse project settings, corrected html (see previous paragraph), rebuilt and my project started to work!

      Thread is closed.

      regards,
      -andy.