hifiveとjQuery UIを組み合わせる【モーダル表示】

hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。ボタンを押すとモーダルウィンドウが表示されて、情報を入力すると一覧が更新されます。

HTMLについて

HTMLは主に3つの分かれて構成されます。まずモーダルとして表示する部分があります。これは最初表示されません。

	<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>

view raw

index.js

hosted with ❤ by GitHub

	<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" />

view raw

index.html

hosted with ❤ by GitHub

	<script type="text/ejs" id="row">
	<tr>
	<td>[%= id %]</td>
	<td>[%= userName %]</td>
	<td>[%= password %]</td>
	</tr>
	</script>

view raw

index.html

hosted with ❤ by GitHub

JavaScriptについて

JavaScriptの実装ですが、今回はコントローラとロジックに分かれています。それぞれ目的は次のようになります。

ロジックの実装

今回のロジックは DialogLogic としています。今回はモックですが、本来であればAjaxを使ってデータを保存したりします。

	var dialogLogic = {
	__name: 'DialogLogic',

	createUser: function() {
	this._private();
	},

	_private: function() {
	alert('create user!');
	}
	};

view raw

index.html

hosted with ❤ by GitHub

コントローラの実装

コントローラは次のような実装になります。まず全体像を紹介します。

	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);

view raw

index.js

hosted with ❤ by GitHub

コントローラが作成された際のイベント

__ready イベントでは次のように実装します。ポイントとしてはボタンを押した際のコールバック先をhifiveのコントローラとしていることです。

	__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)
	});
	},

view raw

index.js

hosted with ❤ by GitHub

登録ボタンを押した時のイベント

	'#register click': function() {
	$('#dialog-form').dialog('open');
	},

view raw

index.js

hosted with ❤ by GitHub

ダイアログの”Create User”ボタンがクリックされた時のコールバック

モーダルでユーザ作成のボタンが押された際にはロジック側の createUser を呼び出し、その後HTMLに入力された内容を反映します。そして最後にモーダルを閉じて完了です。

	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');
	},

view raw

index.js

hosted with ❤ by GitHub

ダイアログを閉じる際のイベント

モーダルを閉じるのはjQuery UIのdialogの機能をそのまま使います。

	cancel: function(target, event) {
	$('#dialog-form').dialog('close');
	},

view raw

index.js

hosted with ❤ by GitHub

ダイアログ内のフォームをクリアする

	clearForm: function() {
	$('#id').val('');
	$('#userName').val('');
	$('#password').val('');
	}

view raw

index.js

hosted with ❤ by GitHub

このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。モーダルウィンドウの表示はよくある機能なので、実装時の参考にしてください。

実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。

hifive開発者ブログ