Editor
テキストエリアをGlow独自のリッチテキストエディタに置き換える。
new glow.widgets.Editor(textarea, opts)
- textarea … 置き換えたいテキストエリアを指定
- opts …テーマをdarkまたはlightで指定する。いまのところ設定できるのはこのオプション1つのみ
サンプルコードは次のとおり。
editor.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Hello, Glow! / glow.widgets.Editor</title>
<link href="./glow/1.5.1/widgets/widgets.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
<script type="text/javascript" src="./glow/1.5.1/widgets/widgets.js"></script>
<script type="text/javascript">
<!--
glow.ready
(
function()
{
new glow.widgets.Editor("#editorTest");
}
);
-->
</script>
</head>
<body>
<textarea id="editorTest" rows="15" cols="30"></textarea>
</body>
</html>
idを振ったtextareaをglow.widgets.Editor()で指定するだけだ。Webブラウザで表示する。
テキストエリアがリッチテキストエディタに置き換わった。いまのところ用意されているのは「斜体」「太字」「取消線」の3種のみ |
機能の少なさから、このあたりはDojoのEditorと比較するとやや見劣り感がある。またすでにいくつかのWebブラウザでは問題点も挙がっている(ページ最下部の「Known issues」)。使用の際は注意されたい。
InfoPanel
指定したエレメントに注釈用のパネルを生成する。
new glow.widgets.InfoPanel(content, opts)
- content … 注釈用のパネルとして表示したいエレメントを指定
- opts … テーマや座標といったオプションを指定
サンプルは次のとおり。
infoPanel.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Hello, Glow! / glow.widgets.infoPanel</title>
<link href="./glow/1.5.1/widgets/widgets.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
<script type="text/javascript" src="./glow/1.5.1/widgets/widgets.js"></script>
<script type="text/javascript">
<!--
glow.ready
(
function()
{
var myInfoPanel = new glow.widgets.InfoPanel
(
'#simpleInfoPanel',
{
context: "#searchBox"
}
);
myInfoPanel.show();
}
);
-->
</script>
</head>
<body style="padding-top:100px;">
<p>
<label for="searchBox">検索:</label>
<input id="searchBox">
</p>
<div id="simpleInfoPanel">
<p>検索したい用語を入力してください</p>
</div>
</body>
</html>
DOMの構築が完了した時点でtype="text"のinputエレメントにInfoPanelを表示する。Webブラウザで表示してみよう。
テキストボックスの横にInfoPanelが表示された。日本語もレイアウトが崩れることなく表示される様子 |
先述のglow.formsとうまく組み合わせれば、ユーザビリティの高いフォームをGlow単体で簡単に実装できるようになるだろう。
Mask、Overlay、 Panel
それぞれ半透明のレイヤ、オーバーレイ、パネルをページ全体にかぶせて表示させるウィジェット。この3種類は使用/表示感が似ているので一緒に紹介しよう。
Mask
new glow.widgets.Mask(opts)
- opts … マスクの色、透明度やマウスクリック時に実行する関数を指定
Overlay
new glow.widgets.Overlay(content, opts)
- content … オーバーレイさせたいコンテンツを指定
- opts … 座標やモーダルの有無、アニメーションなどを指定
Panel
new glow.widgets.Panel(content, opts)
- content … パネルとして表示させたいコンテンツを指定
- opts … 座標やモーダルの有無、テーマやアニメーションなどを指定
汎用のしやすさから、サンプルコードはPanelのみを取りあげた。
panel.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Hello, Glow! / glow.widgets.Panel</title>
<link href="./glow/1.5.1/widgets/widgets.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
h2.hd
{
font-size: 100%;
}
-->
</style>
<script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
<script type="text/javascript" src="./glow/1.5.1/widgets/widgets.js"></script>
<script type="text/javascript">
<!--
glow.ready
(
function()
{
glow.events.addListener
(
'#submit', 'click',
function()
{
var myPanel = new glow.widgets.Panel
(
glow.dom.create
(
'<div><h2 class="hd">確認</h2>' +
'<p>この内容で送信します。よろしいですか?</p>'+
'<input type="submit" value="送信"><input type="button" value="取消"></div>'
),
{
modal: true,
theme: 'light'
}
);
myPanel.show();
}
);
}
);
-->
</script>
</head>
<body>
<h1>ユーザ登録</h1>
<form id="registUserForm">
<table>
<tr>
<th>氏名</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="text" name="mail"></td>
</tr>
<tr>
<th>年齢</th>
<td><input type="text" name="age"></td>
</tr>
</table>
<input type="button" id="submit" value="submit">
</form>
</body>
</html>
ボタンクリックでパネルを表示する。Webブラウザで表示してみよう。
confirm()やprompt()ではちょっと機能が足りない……といった場合にこれらのウィジェットはおおいに役立ってくれる。3種類のウィジェットをうまく使いこなし「より少ない工数で」「使い勝手のよいユーザインタフェース」を実現しよう。