Using Dojo SpinWheel

Question

I am creating an app and would like to use the SpinWheel widget from Dojo.

Currently, all I am trying to do is get the working example of the SpinWheel Widget from the site, http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SpinWheel.html#id4 , functioning

Unfortunately, I cannot seem to do this.

I have tried:

Using the declarative code from the example online. I pulled both the dojo and dojox repos from github, and know that they are in the correct locations because the Hello Dojo tutorial worked perfectly with my paths. Code (mostly copied from site in bold above) is below.

What happens: None of the Dojo code works. The title shows up, as does the ".", but nothing else.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojo SpinWheel</title>

<!-- load Dojo -->
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>
</script>
<script>
    require([
        "dojox/mobile/parser",
        "dojox/mobile/SpinWheel"
    ]);
</script>
</head>

<body>
  <div id="view1" data-dojo-type="dojox/mobile/View">
    <h1 data-dojo-type="dojox/mobile/Heading">Custom SpinWheel</h1>
    <div id="spin1" data-dojo-type="dojox/mobile/SpinWheel">
     <div data-dojo-type="dojox/mobile/SpinWheelSlot"
         labels="['A','B','C','D','E','F','G','H','I','J','K']"
         style="text-align:center;width:40px;"></div>
     <div data-dojo-type="dojox/mobile/SpinWheelSlot"
         labelFrom="3000" labelTo="3100"
         style="width:70px;"></div>
     <div id="pt" class="mblSpinWheelSlot"></div>
     <div id="txt" class="mblSpinWheelSlot">.</div>
     <div data-dojo-type="dojox/mobile/SpinWheelSlot"
         labelFrom="0" labelTo="9"
         style="width:30px;"></div>
     <div data-dojo-type="dojox/mobile/SpinWheelSlot"
         labels="['pt','px','cm']"
         style="width:50px;"></div>
    </div>
    </div>
</body>
</html>

Answer 1

Your example can't work, because:

You don't call parser.parse()
You don't require all modules used by declarative syntax
You don't load mobile theme

Assuming that DOJO is unpacked in the root of your htdocs of your Apache, the working head of your HTML file should look like that:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Dojo SpinWheel</title>
    <!-- load Dojo -->
    <script src="/dojox/mobile/deviceTheme.js"></script>
    <script src="/dojo/dojo.js" data-dojo-config="async: true"></script>
  <script type="text/javascript">
    require([
        "dojox/mobile/parser",
        "dojox/mobile/SpinWheel", "dojox/mobile/View", "dojox/mobile/Heading", "dojox/mobile/SpinWheelSlot"
    ], function(parser) {
       parser.parse();
    });
  </script>
</head>

See also the examples under dojox/mobile/tests . They usually do work, contrary to many examples from Dojo online docs :(

Using Dojo SpinWheel

Question

1 answers

solution1
1 ACCPTED 2014-06-03 08:28:59

Using Dojo SpinWheel

Question

1 answers

solution1 1 ACCPTED 2014-06-03 08:28:59

solution1
1 ACCPTED 2014-06-03 08:28:59