Questions about dojo/dijit/dojox

Question

I'm learning dojo to develop a simple application to be used from mobile clients. I see some widgets have different features between dojox/mobile/* and dijit/form/*. For example the ComboBox from dijit has a property to select which field of a Memory store use (searchAttrb) while the one from dojox hasn't:

https://dojotoolkit.org/reference-guide/1.10/dojox/mobile/ComboBox.html

https://dojotoolkit.org/reference-guide/1.10/dijit/form/ComboBox.html

1. first question: would you recommend the use of dijit widgets for an application that will be used from smartphones?

2. I know what dojo/domReady! means. But I'm not sure if I have to use it also in nested requires. Example:

   require(["dojo/request/xhr", "dojo/json", "dojo/domReady!"], function (xhr, JSON) {
       xhr("api/dummy", {
           handleAs: "json"
       }).then(function (data) {
           require(["dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], function (Memory, ComboBox) {
               var mystore = new Memory({
                   data: data
               });
   
               var comboBox = new ComboBox({
                   id: "idCombo",
                   name: "blabla",
                   store: mystore,
                   searchAttr: "field"
               }, "idCombo").startup();
           });    
       }, function (err) {
           console.log(err);
       });
   });
   

This snippet retreives a file on the server and create the Memory store. Then uses the field "field" to populate the ComboBox. Does the inner dojo/domReady! is required? I guess no, because that code is reached only after the outer function has been executed.

3. I see a lot of dojo examples written in different manner. Some declare all the require items just after the dojo include. Others require only the items the functions need, function by function. What are the differences?

Examples

http://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/mobile/tests/test_FormControls.html?theme=Custom

declares all the items together, and without a function associated, so no names for the items:

<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

<script type="text/javascript">
    require([
        "dojox/mobile",
        "dojox/mobile/parser",
        "dojox/mobile/compat",
        "dojox/mobile/Button",
        "dojox/mobile/CheckBox",
        "dojox/mobile/ComboBox",
        "dojox/mobile/RadioButton",
        "dojox/mobile/Slider",
        "dojox/mobile/TextBox",
        "dojox/mobile/SearchBox",
        "dojox/mobile/ExpandingTextArea",
        "dojox/mobile/ToggleButton"
    ]);

while here:

https://dojotoolkit.org/documentation/tutorials/1.10/checkboxes/demo/CheckBox.html

the require instruction is followed by a function:

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
<script>                
    require(["dijit/form/CheckBox", "dojo/parser", "dojo/domReady!"], function(CheckBox, parser) {

Of course they should have different meaning and use cases, but I'm not sure to understand which.

Answer 1

Seen as has GibboK covered 1 and 2 i'll go for 3!

Just before I start there are lots of different ways of working with the dojo libraries and I'm honestly not sure there is a wrong way.

I have played around with different structures and it really just depends on what you are doing most of the applications I have worked on there is an emphasis on code reuse so I tend to only define what I need for that script.

Instead of

<script type="text/javascript">
    require([
        "dojox/mobile",
        "dojox/mobile/parser",
        "dojox/mobile/compat",
        "dojox/mobile/Button",
        "dojox/mobile/CheckBox",
        "dojox/mobile/ComboBox",
        "dojox/mobile/RadioButton",
        "dojox/mobile/Slider",
        "dojox/mobile/TextBox",
        "dojox/mobile/SearchBox",
        "dojox/mobile/ExpandingTextArea",
        "dojox/mobile/ToggleButton"
    ]);

I tend to pull in my modules independently and pass round any global objects, i also use dojo/_base/declare any custom modules I would use a dojoConfig and reference the scripts as packages.

var dojoConfig = {
    packages: [
        { name: "my", location: "../my" },
        { name: "package2", location: "/js/package2" }
    ]
};

So I would start by defining a person object with a constructor as an example it takes in 2 values.

// in "my/Person.js"
define(["dojo/_base/declare", "dojo/_base/lang"],
  function(declare, lang) {
    return new declare("person", null, {
      fistName: null,
      lastName: null,

      constructor: function(firstName, lastName) {
        this.firstName = firstName;
        this.LastName = lastName;
      },
      getFullName: function() {
        return this.firstName + " "
        this.lastName;
      },
      changeLastName: function(lastName) {
        this.lastName = lastName;
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>

I would then using the dojoConfig referencing the folder ../my and create a new person object passing in the 2 values

define(["dojo/_base/declare", "my/person"],
      function(declare, person) {
        return declare("admin", null, {
          person: null,

          constructor: function() {
            this.person = new person("Jon","Doe");
          },
          fullName: function() {
            console.log(this.person.getFullName);
          },
        });
  });

I'm not sure if that answers all of your questions this will help

http://dojotoolkit.org/documentation/tutorials/1.10/modules/

Answer 2

For question 01

dojox/mobile/* provides widgets that can be used to build web-based applications for mobile devices.

Widget in dojox/mobile/* are designed to be as lightweight as possible with special attention for mobile experience.

Many dependencies could be excluded when building for mobile using dojox/mobile/* as they are less dependent with dojo base.

I would suggest to use these widgets if your target low-end devices as using dijit more suite desktop application.

For question 02

dojo/domReady! it is not required in the inner require.

For question 03:

In dojo you can declare widgets in two ways, declarativelly or programmatically.

With a declarative approach you initiate widgets within your HTML and use dojo/parser to hook the JavaScript behavior offered by the framework.

Please note the data attribute in the HTML data-dojo-type

Example:

<button type="button" id="myButton" data-dojo-type="dijit/form/Button">
    <span>Click Me!</span>
</button>
<script type="text/javascript" src="lib/dojo/dojo.js"
    data-dojo-config="async: true"></script>
<script type="text/javascript">
    require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],
    function(parser){
        parser.parse();
    });
</script>

With a programmatic approach you use entirely JS, and add in the HTML only a "placeholder" where the widget will be hooked/created.

Please note that there is NO data attribute data-dojo-type in the HTML.

Example:

require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
    // Create a button programmatically:
    var myButton = new Button({
        label: "Click me!",
        onClick: function(){
            // Do something:
            dom.byId("result1").innerHTML += "Thank you! ";
        }
    }, "progButtonNode").startup();
});
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>

In my personal experience I saw several times the usage of a declarative approach fitting simple widgets scenario mainly created at backed in the HTML, with "spiced" HTML added by server side script. For a more complex SPA JavaScript application a more programmatic approach.