Import dijit/dojo widgets into worklight palette

0
votes

I've been working with IBM Worklight for the last month and I discovered that even if I imported the Dojo toolkit when I created my hybrid app, I can't see dijit components in my palette, and some dojo/dojox components cause errors.

Here is my config :

  • Windows XP
  • Eclipse SDK Version: 3.7.2
  • IBM Worklight 5.0.5
  • Dojo version 1.8.1-20121024

Therefore I got errors when launching my app :

Failed to load resource: the server responded with a status of 404 (Not Found)

URL/ipad/1.0/default/dojox/dgauges/components/green/HorizontalLinearGauge.js

(I wanted to display a slider and only found this gauge)

But I do have the dojo folder in my project (with dijit/dojo/dojox folders inside).

Anyone knows how to fix this ?

Cheers

3
dojoibm-mobilefirst
Any chance you can try with the almost 2-years newer version, Worklight 6.1.0 (you can obtain it from Eclipse > Help > Eclipse Marketplace > search for "worklight"). Worklight 5.0.5 is totally OLD. See if it still happens to you. - Idan Adar
Unfortunately I suppose I can't change for now since I have a pro computer... Don't you have any idea about this ? Can't figure out how to "include" these files to server, and I guess I'm not supposed to, as they are part of the project. - user3241019
I don't even have this version installed anymore. :) It is not an encouraged version to use... Let me see... - Idan Adar

3 Answers

0
votes

  1. I have used the Worklight Studio 5.0.5.1 wizard to create a project and application that includes Dojo and added the iPad environment.

  2. Next, looking at the Dojo Palette, I see a slider widget. I drag it to my HTML: enter image description here

  3. Run As > Build All and Deploy and previewing the environment in the MBS shows the slider: enter image description here

I do not have Xcode on this machine so this is the best I can do right now.
Are you sure you do not see a slider widget?

0
votes

If you were looking for the dijit form Horizontal Slider, you can right click in the palette's contents and click Customize... In the Customize Palette dialog, select the Dojo Form Widgets category, and uncheck Hide. When you expand Dojo Form Widgets, you can select Horizontal Slider and uncheck Hide. Click OK, and these items should show up in the palette.

But for a slider on a mobile page, Idan's suggestion of using a Dojo Mobile Slider is probably better than the dijit slider.

0
votes

To improve build performance, applications with Dojo dictate which files to include in the build using the build-dojo.xml file. By default, it is optimized for mobile development. If you'd like to include the HorizontalSlider, the easiest way is to uncomment <include name="dojo/dijit-layer.js.compressed.js"/>, but leave the <include> elements after that commented out. That will give you a patternset of "dojo/dojo.js.compressed.js", "dojo/core-web-layer.js.compressed.js", and "dojo/dijit-layer.js.compressed.js".

If you've used the Palette to drag and drop the HorizontalSlider, it should have added references to dijit.css and claro.css in the application's markup. So these resources will need to be added to your application to style the widget. You could do this manually by copying the dijit/themes/claro/ directory and dijit/themes/dijit.css file into your application. But as we saw, the build-dojo.xml file automates adding these things to the build. In your build-dojo.xml file, find the patternset dojo.resources.loose-modules. And add the following includes:

<include name="dijit/themes/claro/**"/>
<include name="dijit/themes/dijit.css"/>

Save the build-dojo.xml file.

Now you need to update your application's JS file. In wlCommonInit, the layer files are required. There is an array the includes what you would need for mobile development. You will need to add another layer to the array: "dojo/dijit-layer". So it should look something like:

require([ "dojo/core-web-layer", "dojo/mobile-ui-layer", "dojo/mobile-compat-layer", "dojo/dijit-layer" ], dojoInit);

Save your application's JS file and preview your application as you normally would. This should fix the 404 problems and render the HorizontalSlider widget.