DojoでWidgetを使ってみる。

## Hellow World

```HTML:Hellow.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom','dojo/domReady!'], 
        function(dom){
            var x = dom.byId('greeting');
            x.innerHTML = 'Hello World';
        });
    </script>
  </head>
  <body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->

  </body>
</html>

```

## ボタン

```HTML:Widget.html
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ウィジェットの静的配置</title>
   <!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく  -->
    <style>
      @import url("dojo/resources/dojo.css");
      @import url("dijit/themes/claro/claro.css");
    </style>
    <!-- load Dojo -->
    <script src="dojo/dojo.js"
     data-dojo-config="async: true"></script>
    <script>
      require([
          'dojo/parser',
          'dojo/domReady!'
      ], function(parser){
            parser.parse();
         });
    </script>
    <script type="text/javascript">
    </script>
  </head>
  <body class="claro">
     <!-- ウィジェット宣言 -->
     <button data-dojo-type="dijit/form/Button"
        data-dojo-props="label: 'クリックして'"
        onClick="alert('ボタンがクリックされました！')">
     </button>
  </body>
</html>
```

## ダイアログ

```HTML:dialog.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ウィジェットの静的配置</title>
   <!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく  -->
    <style>
      @import url("dojo/resources/dojo.css");
      @import url("dijit/themes/claro/claro.css");
    </style>
    <!-- load Dojo -->
    <script src="dojo/dojo.js"
     data-dojo-config="async: true"></script>
    <script>
      require([
          'dojo/parser',
          'dojo/domReady!'
      ], function(parser){
            parser.parse();
         });
    </script>
    <script type="text/javascript">
    </script>
  </head>
  <body class="claro">
     <!-- ウィジェット宣言 -->
     <button data-dojo-type="dijit/form/Button"
        data-dojo-props="label: 'ダイアログを表示'"
        onclick="dijit.byId('test_dialog').show()">
     </button>
     <div id="test_dialog" dojoType="dijit/Dialog" title="ダイアログのタイトル" execute="this.hide();">
        <p>これはダイアログの内容です。</p>
        <div dojoType="dijit.form.Button" type="submit">閉じる</div>
    </div>
  </body>
</html>

```
## テキストボックス

```HTML:textBox.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ウィジェットの静的配置</title>
   <!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく  -->
    <style>
      @import url("dojo/resources/dojo.css");
      @import url("dijit/themes/claro/claro.css");
    </style>
    <!-- load Dojo -->
    <script src="dojo/dojo.js"
     data-dojo-config="async: true"></script>
    <script>
      require([
          'dojo/parser',
          'dojo/domReady!'
      ], function(parser){
            parser.parse();
         });
    </script>
    <script type="text/javascript">
    </script>
  </head>
  <body class="claro">
   <!-- ウィジェット宣言 -->
   
    <!-- テキストボックス -->
    <div>
        <label for="textBox">名前:</label>
        <input id="textBox" data-dojo-type="dijit/form/TextBox" 
               data-dojo-props="placeHolder: '名前を入力してください'">
    </div>
    
    <!-- ボタン -->
    <div style="margin-top: 10px;">
        <button data-dojo-type="dijit/form/Button" 
                data-dojo-props="label: '送信'" 
                onclick="dijit.byId('test_dialog').show()">
        </button>
    </div>
    
    <!-- ダイアログ -->
    <div id="test_dialog" dojoType="dijit/Dialog" title="送信確認" execute="this.hide();">
        <p>送信されました!</p>
        <button dojoType="dijit.form.Button" type="submit">閉じる</button>
    </div>
    
  </body>
</html>

```

## 入力チェック

```HTML:Validation.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ウィジェットの静的配置</title>
   <!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく  -->
    <style>
      @import url("dojo/resources/dojo.css");
      @import url("dijit/themes/claro/claro.css");
    </style>
    <!-- load Dojo -->
    <script src="dojo/dojo.js"
     data-dojo-config="async: true, parseOnLoad: true"></script>
    <script>
      require([
          'dojo/parser',
          'dijit/form/ValidationTextBox'
      ]);
    </script>
    <script type="text/javascript">
    </script>
  </head>
  <body class="claro">
   <!-- ウィジェット宣言 -->
   
    <!-- テキストボックス -->
    <label for="phone">Phone number, no spaces:</label>
    <input type="text" name="phone" id="phone" value="someTestString" required="true"
       data-dojo-type="dijit/form/ValidationTextBox"
       data-dojo-props="regExp:'[\\w]+',
        invalidMessage:'スペースは含めないでください。',
        promptMessage:'電話番号を入力してください。'" />
  </body>
  
</html>

```