Search code examples
javascriptdojoibm-mobilefirst

Dojo widgets not rendering correctly

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

Solution

  • 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