hifiveとjQuery UIを組み合わせる【モーダル表示】
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はモーダルウィンドウです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。ボタンを押すとモーダルウィンドウが表示されて、情報を入力すると一覧が更新されます。
HTMLについて
HTMLは主に3つの分かれて構成されます。まずモーダルとして表示する部分があります。これは最初表示されません。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="dialog-form" title="Create new user" style="display: none;"> | |
| <form> | |
| <fieldset> | |
| <label for="name">ID</label> <input type="text" name="id" id="id" | |
| class="text ui-widget-content ui-corner-all" /> <label | |
| for="email">名前</label> <input type="text" name="userName" | |
| id="userName" value="" | |
| class="text ui-widget-content ui-corner-all" /> <label | |
| for="password">パスワード</label> <input type="password" | |
| name="password" id="password" value="" | |
| class="text ui-widget-content ui-corner-all" /> | |
| </fieldset> | |
| </form> | |
| </div> |
次にデータの一覧を表示するテーブルがあります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <table id="result" class="ui-widget ui-widget-content" | |
| style="margin: 1em 0; border-collapse: collapse;"> | |
| <tr class="ui-widget-header"> | |
| <th>ID</th> | |
| <th>名前</th> | |
| <th>パスワード</th> | |
| </tr> | |
| <tr> | |
| <td>test_id</td> | |
| <td>test_name</td> | |
| <td>test_password</td> | |
| </tr> | |
| </table> | |
| <input type="button" id="register" value="register" /> |
そして一覧部分のテンプレートがあります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/ejs" id="row"> | |
| <tr> | |
| <td>[%= id %]</td> | |
| <td>[%= userName %]</td> | |
| <td>[%= password %]</td> | |
| </tr> | |
| </script> |
JavaScriptについて
JavaScriptの実装ですが、今回はコントローラとロジックに分かれています。それぞれ目的は次のようになります。
- コントローラ
UI側のクリックなどをハンドリング - ロジック
ユーザ作成処理などを担当（今回はモック）
まずロジックから紹介します。
ロジックの実装
今回のロジックは DialogLogic としています。今回はモックですが、本来であればAjaxを使ってデータを保存したりします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var dialogLogic = { | |
| __name: 'DialogLogic', | |
| createUser: function() { | |
| this._private(); | |
| }, | |
| _private: function() { | |
| alert('create user!'); | |
| } | |
| }; |
コントローラの実装
コントローラは次のような実装になります。まず全体像を紹介します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var controller = { | |
| // コントローラ名の定義 | |
| __name: 'DialogController', | |
| // ロジックの定義 | |
| dialogLogic: dialogLogic, | |
| // コントローラが作成された際のイベント | |
| __ready: function() { | |
| }, | |
| // 登録ボタンを押した時のイベント | |
| '#register click': function() { | |
| }, | |
| // ダイアログの"Create User"ボタンがクリックされた時のコールバック | |
| createUser: function(originalThis, event) { | |
| }, | |
| // ダイアログを閉じる際のイベント | |
| cancel: function(target, event) { | |
| }, | |
| // ダイアログ内のフォームをクリアする | |
| clearForm: function() { | |
| } | |
| }; | |
| // コントローラの作成と要素へのバインド | |
| h5.core.controller('#container', controller); |
コントローラが作成された際のイベント
__ready イベントでは次のように実装します。ポイントとしてはボタンを押した際のコールバック先をhifiveのコントローラとしていることです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| __ready: function() { | |
| // registerボタンの装飾 | |
| $('#register').button(); | |
| var that = this; | |
| // dialogの設定 | |
| // ボタンを押した時のコールバックはhifive化したコントローラのメソッドを設定している。 | |
| $('#dialog-form').dialog({ | |
| autoOpen: false, | |
| height: 320, | |
| width: 350, | |
| modal: true, | |
| buttons: { | |
| 'Create User': that.ownWithOrg(that.createUser), | |
| Cancel: that.ownWithOrg(that.cancel) | |
| }, | |
| close: that.own(that.clearForm) | |
| }); | |
| }, |
登録ボタンを押した時のイベント
登録ボタンを押した時には単にモーダルを開くだけです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#register click': function() { | |
| $('#dialog-form').dialog('open'); | |
| }, |
ダイアログの”Create User”ボタンがクリックされた時のコールバック
モーダルでユーザ作成のボタンが押された際にはロジック側の createUser を呼び出し、その後HTMLに入力された内容を反映します。そして最後にモーダルを閉じて完了です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| createUser: function(originalThis, event) { | |
| // DialogLogicのcreateUserメソッドを呼ぶ | |
| this.dialogLogic.createUser(); | |
| // 画面に追加する文字列を取得 | |
| var row = this.view.get('row', { | |
| id: $('#id').val(), | |
| userName: $('#userName').val(), | |
| password: $('#password').val() | |
| }); | |
| $('#result tbody').append(row); | |
| $('#dialog-form').dialog('close'); | |
| }, |
ダイアログを閉じる際のイベント
モーダルを閉じるのはjQuery UIのdialogの機能をそのまま使います。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| cancel: function(target, event) { | |
| $('#dialog-form').dialog('close'); | |
| }, |
ダイアログ内のフォームをクリアする
最後にフォームの内容をクリアする処理です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| clearForm: function() { | |
| $('#id').val(''); | |
| $('#userName').val(''); | |
| $('#password').val(''); | |
| } |
このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。モーダルウィンドウの表示はよくある機能なので、実装時の参考にしてください。
実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。
hifive開発者ブログ 
コメントは受け付けていません。