1

I am using Eclipse Mars 4.5.0 with the MobileFirst Studio 7.1 plugin.

I am using the built in dojo library and following the documentation from the IBM Knowledge center here: https://www-01.ibm.com/support/knowledgecenter/SSZH4A_6.2.0/com.ibm.worklight.dev.doc/wl_studio_tools/topics/cdojolibprjsetupwl.html

I am unable to view any dojo widgets when I view the application on my browser. Dojo mobile widgets are rendered correctly; I have a slider, radio button & round rectangle pane. In the image below I tried to place a dojo date text box and a currency field but they will not render correctly.

enter image description here

Any advice and help is appreciated

5
  • have import a dojo css style ,"claro.css" by exemple Commented Feb 14, 2016 at 16:30
  • I'm sorry I didn't understand. I added the claro.css to the dojo toolkit settings in the example.
    – Spindoctor
    Commented Feb 14, 2016 at 16:45
  • Provide your MobileFirst Studio project. Upload it somewhere.
    – Idan Adar
    Commented Feb 14, 2016 at 20:17
  • The project is available here: drive.google.com/…
    – Spindoctor
    Commented Feb 14, 2016 at 21:31
  • Idan, were you able to access the project?
    – Spindoctor
    Commented Feb 16, 2016 at 15:32

1 Answer 1

1

It seems like the dijit theme is not being loaded.

Try by including the theme on the index.html file of your application:

<link rel="stylesheet" href="dijit/themes/claro/claro.css">

Make sure you have the theme and icons folder in your www folder (www/digit/themes/claro and www/digit/icons)

In the projet you provided I don't see the CurrencyTextBox or DateTextBox widgets in the index.

But to make those widgets work make sure you include the modules on the dojoInit() function in main.js :

function dojoInit() {
    require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom", "dijit/registry", "dojox/mobile/ScrollableView", 
        "dijit/form/CurrencyTextBox", "dijit/form/DateTextBox"], 
        function(ready) {
           ready(function() {
        });
    });
}

And in your index you should have something like this:

<body style="display: none;" class="claro">
        <div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
        <!--application UI goes here-->
        <label for="income1">U.S. Dollars</label>
        <input type="text" name="income1" id="income1" value="54775.53" required="true" 
        data-dojo-type="dijit/form/CurrencyTextBox" data-dojo-props="constraints:{fractional:true},currency:'USD', invalidMessage:'Invalid amount. Cents are required.'" />
        <br>
        <label for="date1">Drop down Date box:</label>
        <input type="text" name="date1" id="date1" value="2005-12-30"
        data-dojo-type="dijit/form/DateTextBox"
        required="true" />
    </div>
    <script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>
</body>

(Don't forget add the theme class name to the parent <body> element)

Hope this helps

1
  • Thank you this helped. I was able to render a dijit. One thing to note is that we added a lot of the files manually. The dojo requests seem to miss a lot of the files. Do you think it is better to copy the entire dijit folder into the www folder?
    – Spindoctor
    Commented Feb 17, 2016 at 12:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.