« 2007年6月 | トップページ | 2007年8月 »

2007年7月の12件の記事

2007年7月30日 (月)

ヘルプ付きのテキストボックス

div要素にdojoType="dropdowncontainer"を指定すると、ヘルプ付きのテキストボックスが作成される。 テキストボックスの右側にはアイコンが配置され、アイコンを押すと指定したヘルプ内容のHTML要素が表示される。 利用するときは、DropdownContainerをrequireする。

<script type="text/javascript">
  dojo.require("dojo.widget.DropdownContainer");
</script>

DropdownContainerのdiv要素は以下の属性を指定できる。その子要素にヘルプとして表示する内容を指定する。

属性概要
inputWidth テキストボックスのサイズ
inputId テキストボックスのId
inputName テキストボックスのname
iconURL アイコンのURL
iconAlt アイコンのalt属性
containerToggleDuration アイコンを押してからヘルプが表示されるまでの時間

 
<style type="text/css">
.popup {
  border: 3px solid blue;
  background-color: white;
  text-align:left;
}
</style>
<div dojoType="dropdowncontainer" id="foo">
  <div class="popup">
    入力フォームに名前を入力して下さい。<br/>
    必須入力です。
  </div>
</div>

分割レイアウト

SplitContainerを用いることで、上下または左右にレイアウト分割し、ユーザが分割位置を変更できる。 SplitContainerを使うときは、SplitContainerとContentPaneをrequireする。
dojo.require("dojo.widget.SplitContainer");
dojo.require("dojo.widget.ContentPane");

SplitContainerを配置する場所に、属性 dojoType="SplitContainer" を持つdiv要素を記述する。SplitContainerのdiv要素の子要素にレイアウト配置する要素を指定する。

SplitContainerのdiv要素はorientation属性を取り、レイアウト配置する各ContentPaneを垂直方向(horizontal)に並べるか、水平方向(vertical)に並べるかを指定する。

SplitContainerは以下の属性を指定できる。

属性概要
orientationhorizontalまたはverticalを指定する。デフォルトはhorizontal
sizerWidth分割位置を変更するバーの太さを指定する。デフォルトは15
activeSizingバーをドラッグ中にも分割位置を変更するか、trueまたはfalseで指定する。デフォルトはfalse
persisttrueを指定すると分割位置をcookieに保存する。デフォルトはfalse

垂直

<div dojoType="SplitContainer" orientation="vertical"
  style="border: 2px solid black; width: 95%; height: 200px;">
  <div dojoType="ContentPane" sizeMin="10" sizeShare="50">
    top
  </div>
  <div dojoType="ContentPane" sizeMin="20" sizeShare="50">
    middle
  </div>
  <div dojoType="ContentPane" sizeMin="10" sizeShare="50">
    bottom
  </div>
</div>
top
middle
bottom

水平

<div dojoType="SplitContainer" orientation="horizontal"
  style="border: 2px solid black; width: 95%; height: 200px;">
  <div dojoType="ContentPane" sizeMin="20" sizeShare="20">
    left
  </div>
  <div dojoType="ContentPane" sizeMin="50" sizeShare="50">
    right
  </div>
</div>
left
right

入れ子の組み合わせ

<div dojoType="SplitContainer" orientation="horizontal"
  style="border: 2px solid black; width: 95%; height: 200px;">
  <div dojoType="ContentPane" sizeMin="20" sizeShare="20">
    left
  </div>
  <div dojoType="SplitContainer" orientation="vertical">
    <div dojoType="ContentPane" sizeMin="10" sizeShare="50">
      top
    </div>
    <div dojoType="ContentPane" sizeMin="20" sizeShare="50">
      middle
    </div>
    <div dojoType="ContentPane" sizeMin="10" sizeShare="50">
    bottom
    </div>
  </div>
</div>
left
top
middle
bottom

基本レイアウト

LayoutContainerを用いることで、ブラウザの領域を上下左右中央に分割して要素を配置できる。

LayoutContainerを使うときは、LayoutContainerとContentPaneをrequireする。

dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.ContentPane");

LayoutContainerを配置する場所に、属性 dojoType="LayoutContainer" を持つdiv要素を記述する。LayoutContainerのdiv要素の子要素にレイアウト配置する要素を指定する。

LayoutContainerの子要素には、dojoType="ContentPane" を持つdiv要素を指定する。各ContentPaneはレイアウト配置位置を、layoutAlign属性として、top/right/left/bottom/clientのいずれかの値を指定する。

LayoutContainerのdiv要素はlayoutChildPriority属性を取り、レイアウト配置する各ContentPaneのレイアウト優先順位として、none, top-bottom, left-rightのいずれかを指定する。

  • none: 各ContentPaneを指定した順番に入れ子が決まる
  • top-bottom: 上(top), 下(bottom)を指定したContentPaneが優先される
  • left-right: 右(right), 左(left)を指定したContentPaneが優先される

layoutchildpriority="none"を指定した、基本的なレイアウト。

left
right
top bar
bottom bar
main
<div dojoType="LayoutContainer"  layoutChildPriority='none'
  style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
  <div dojoType="ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;">
    left
  </div>
  <div dojoType="ContentPane" layoutAlign="right" style="background-color: #acb386; width: 100px;">
    right
  </div>
  <div dojoType="ContentPane" layoutAlign="top" style="background-color: #b39b86; ">
    top bar
  </div>
  <div dojoType="ContentPane" layoutAlign="bottom" style="background-color: #b39b86;">
    bottom bar
  </div>
  <div dojoType="ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">
    main
  </div>
</div>

layoutChildPriority='left-right'を指定

left
right
top bar
bottom bar
inner left
main
<div dojoType="LayoutContainer"  layoutChildPriority='left-right'
  style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
  <div dojoType="ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;">
    left
  </div>
  <div dojoType="ContentPane" layoutAlign="right" style="background-color: #acb386; width: 100px;">
    right
  </div>
  <div dojoType="ContentPane" layoutAlign="top" style="background-color: #b39b86; ">
    top bar
  </div>
  <div dojoType="ContentPane" layoutAlign="bottom" style="background-color: #b39b86;">
    bottom bar
  </div>
  <div dojoType="ContentPane" layoutAlign="left" style="background-color: #99cc99; width: 100px;">
    inner left
  </div>
  <div dojoType="ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">
    main
  </div>
</div>

入れ子

LayoutContainerは入れ子に出来る。

 
   
      panel 1    
   
      panel 2    
   
      panel 3    
 
<style type="text/css">
div.statusPanel {
  background-color: ThreeDFace;
  border: 1px solid;
  border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow;
  margin: 1px;
  padding: 2px 6px;
}
</style>

<div dojoType="LayoutContainer"  style="border: solid black; width: 90%; height: 200px;">
  <div dojoType="LayoutContainer" layoutAlign="bottom" style="height: 28px">
    <div dojoType="ContentPane" layoutAlign="left" class="statusPanel">
      panel 1
    </div>
    <div dojoType="ContentPane" layoutAlign="left" class="statusPanel">
      panel 2
    </div>
    <div dojoType="ContentPane" layoutAlign="client" class="statusPanel">
      panel 3
    </div>
  </div>
</div>

2007年7月28日 (土)

スピナー

入力フォームの左側に上下の矢印を表示し、上下の矢印をクリックすることで入力フォームの数値を増減できる。 スピナーを使うときは、dojo.widget.Spinnerをrequireする。スピナーはinput要素に対して各スピナーのdojoTypeを指定して作成する。スピナーのinput要素は以下の属性を指定できる。

属性概要
delta 増減の単位
defaultTimeout 上下の矢印をクリックして増減を繰り返すときの時間をミリ秒単位で指定する。デフォルトは500

整数

dojoTypeとしてIntegerSpinnerを指定する。IntegerTextboxも継承しており、数値入力チェックも行われる。IntegerTextboxの属性も指定できる。

<input dojoType="IntegerSpinner" 
       value="+1,000"
       delta="10"
       min="9"
       max="1550"
       signed="true"
       separator=",">

実数

dojoTypeとしてRealNumberSpinnerを指定する。RealNumberTextboxも継承している。

<input dojoType="RealNumberSpinner"
       value="+1.00e3"
       delta="0.01e1"
       min="-10950"
       max="155000"
       signed="true"
       esigned="false"
       exponent="always"
       separator=','
       places="2">

入力チェック

入力フォームの入力チェック

Textbox

Textboxが基本となり、他の入力チェックのwidgetは、Textboxを継承して作成されている。dojo.widget.Textboxをrequireする。

<input type="text"
       id="q1"
       name="test"
       dojotype="Textbox"
       trim="true"
       ucfirst="true" />

dojoType="Textbox"を付けたinput要素は以下の属性を取ることができる。

属性名概要
trim trueを指定すると前後の空白を除く
ucfirst trueを指定すると最初の文字が大文字となる
uppercase trueを指定すると全ての文字が大文字となる
lowercase trueを指定すると全ての文字が小文字となる
digit trueを指定すると数値以外の入力文字が削除される

ValidationTextbox

入力が必須の入力フォームに指定する。Textboxを継承している。

<input type="text"
       name="vt"
       dojotype="ValidationTextbox"
       required="true"
       missingmessage="* The occupation is required." />

ValidationTextboxは以下の属性と、Textboxの属性を取ることができる。継承しているTextboxの属性は全て利用できる。

属性名概要
required trueを指定すると入力がないときに、missingMessageで指定した文字を表示する
missingMessage 入力がないときに表示する文字列を指定する
invalidMessage 正しくない入力がされたときに表示する文字列を指定する。ValidationTextbox自体では使われないが、ValidationTextboxを継承したwidgetにおいて使われる
classPrefix 独自で定義した入力フォームのCSSのクラス名を指定する。指定したクラス名の最後に"Valid", "invalid", "Empty"を付けたクラス名がそれぞれ呼び出される

IntegerTextbox

整数チェック。ValidationTextboxを継承している。

<input type="text"
       name="it"
       dojotype="IntegerTextbox"
       signed="true"
       invalidmessage="Be sure to use a plus or minus sign." />
属性名概要
signed trueを指定すると+または-を最初に付けることが必要となる。デフォルトはeitherで符号はあってもなくてもよい。
separator "," など、桁を明示するための区切り文字として使う記号を指定する。
min 最小値
max 最大値

RealNumberTextbox

実数チェック。IntegerTextboxを継承している。

<input type="text"
       name="rt"
       dojotype="RealNumberTextbox"
       required="true"
       invalidmessage="This is not a valid real number." />
属性名概要
places 小数点以下の桁数
exponent trueを指定すると +5E-28 のように指数部分の指定が必要となる
eSigned trueを指定すると指数部分の+または-の指定が必要となる

CurrencyTextbox

通貨チェック。IntegerTextboxを継承している。

<input type="text"
       name="ct"
       value="\54,775"
       dojotype="CurrencyTextbox"
       symbol="\"
       fractional="false"
       invalidmessage="Invalid amount.  Include yen sign. Example: \12,000" />
属性名概要
symbol デフォルトの通貨記号は$、\などを指定して変更できる。
fractional 小数点以下を指定できるかどうかをtrueかfalseを指定する。デフォルトはomitted

IpAddressTextbox

IPアドレスチェック。ValidationTextboxを継承している。

<input type="text"
       name="ip"
       value="24.17.155.40"
       dojotype="IpAddressTextbox"
       allowipv6="false"
       allowhybrid="false"
       invalidmessage="Invalid IPv4 address." />

以下の属性は全てtrueまたはfalseを指定する。デフォルトはtrue

属性名概要
allowDottedDecimal ドット区切りの10進数表記を許すか
allowDottedHex ドット区切りの16進数表記を許すか
allowDottedOctal ドット区切りの8進数表記を許すか
allowDecimal 10進数表記を許すか
allowHex 16進数表記を許すか
allowIPv6 IPv6形式を許すか
allowHybrid IPv4とIPv6の両方を許すか

UrlTextbox

URLチェック。IpAddressTextboxを継承している。

<input type="text"
       name="url"
       dojotype="UrlTextbox"
       scheme="true"
       invalidmessage="Invalid URL.  Be sure to include the scheme, http://..." />
属性名概要
scheme http://を含むかどうか。trueまたはfalse
allowIP ホスト名としてIPアドレスを許可するか。デフォルトはfalse
allowLocal ホスト名としてlocalhostを許可するか。デフォルトはfalse
allowCC 2文字の国コードを許可するか。デフォルトはtrue
allowGeneric 登録されていないドメインを許可するか。デフォルトはtrue

EmailTextbox

Emailアドレスチェック。UrlTextboxを継承している。

<input type="text"
       name="email"
       dojotype="EmailTextbox"
       invalidmessage="Invalid Email Address." />
属性名概要
allowCruft <mailto:foo@yahoo.com>という形式を許可するか。デフォルトはfalse

EmailListTextbox

EmailTextboxを継承している。

<input type="text"
       name="emails"
       dojotype="EmailListTextbox"
       invalidmessage="Invalid Email Address List." />
属性名概要
listSeparator 区切り記号、デフォルトは ";", ",", "\n", " "のいずれか。

DateTextbox

日付チェック。ValidationTextboxを継承している。

<input type="text"
       lang="ja-jp"
       name="date"
       value="2007/06/12"
       dojotype="DateTextbox"
       invalidmessage="Invalid date. Use yyyy/MM/dd format." />
属性名概要
displayFormat yyyy/MM/ddのように表示形式を指定する。
formatLength short/medium/longのいずれかを指定する。

TimeTextbox

時間チェック。ValidationTextboxを継承している。

<input type="text"
       name="time"
       value="5:45:00"
       formatlength="medium"
       dojotype="TimeTextbox"
       invalidmessage="Invalid time." />
属性名概要
displayFormat HH:mm:ssのように表示形式を指定する。
formatLength short/medium/longのいずれかを指定する。

RegexpTextbox

正規表現による入力チェック。ValidationTextboxを継承している。

<input type="text"
       name="reg"
       value="someTestString"
       dojotype="RegexpTextbox"
       regexp="^[\w]+$"
       invalidmessage="Invalid Non-Space Text." />
属性名概要
regexp 正規表現
flags iやgなど、正規表現のオプション指定

UsStateTextbox

米国の2文字の州コードをチェック。ValidationTextboxを継承している。

<input type="text"
       name="state"
       value="CA"
       dojotype="UsStateTextbox"
       invalidmessage="Invalid US state abbr." />
属性名概要
allowTerritories Guam, Puerto Ricoなどを許す。AS, FM, GU, MH, MP, PW, PR, VI
allowMilitary 米軍の州コードを許す。AA, AE, AP

UsZipTextbox

米国のZIPコードをチェック。ValidationTextboxを継承している。

<input type="text"
       name="zip"
       value="98225-1649"
       dojotype="UsZipTextbox"
       invalidmessage="Invalid US Zip Code." />

UsSocialSecurityNumberTextbox

米国の社会保障番号をチェック。ValidationTextboxを継承している。

<input type="text"
       name="ssn"
       value="123-45-6789"
       dojotype="UsSocialSecurityNumberTextbox"
       invalidmessage="Invalid US Social Security Number." />

UsPhoneNumberTextbox

米国の電話番号をチェック。ValidationTextboxを継承している。

<input type="text"
       name="phone"
       value="(123) 456-7890"
       dojotype="UsPhoneNumberTextbox"
       invalidmessage="Invalid US Phone Number." />

2007年7月24日 (火)

時間指定

時間を指定するための画面部品を作成できる。カレンダーと同様に、その場で表示されるTimePickerと、ボタンを押すと表示されるDropdownTimePickerの2つがある。

TimePicker

<script type="text/javascript">
dojo.require("dojo.widget.TimePicker");
</script>
<div dojoType="TimePicker"></div>

TimePickerの選択は、onValueChangedイベントとして受け取ることができる。選択した日付の値は、TimePicker widgetオブジェクトのtimeプロパティにより、Dateオブジェクトとして取得できる。

以下に示す例では、時間を選択すると入力フォームに選択した時間が入力されます。

<script type="text/javascript">
function init(){
    dojo.event.connect(dojo.widget.byId('tp'),'onValueChanged', 'getTimePickerValue');
}
function getTimePickerValue(){
  dojo.byId('tpinput').value = dojo.widget.byId('tp').time;
}
dojo.addOnLoad(init);
</script>

<div dojoType="TimePicker" id="tp"></div>
<input id="tpinput"  size="35">

dojoType="TimePicker"を指定した要素では、以下の属性を設定できる。

属性概要
lang ロケールを指定することで、AM/PMの文字が変わる。"en-us", "nl-nl", "zh-cn", "zh-tw", "ja-jp", "fi-fi", "sv-se" を指定できる。指定しないとブラウザのロケールに従って表示される
useDefaultTime trueを指定すると現在の時(hour)が設定される
useDefaultMinutes trueを指定すると現在の分(minutes)が設定される
storedTime 2005-06-30T08:05 のように、表示される時刻をRFC 3339の形式で設定する

DropdownTimePicker

DropdownTimePickerは、input要素に対して dojoType="dropdowntimepicker" を指定して作成する。DropdownTimePickerで選択した値は自動生成された入力フォームに表示されるので、入力フォームから容易に値を取り出すことが出来る。
<script type="text/javascript">
dojo.require("dojo.widget.DropdownTimePicker");
</script>

<input id="ddt" dojoType="dropdowntimepicker">

DropdownTimePickerは、以下の属性を指定できる。

属性概要
value12:00のようにデフォルト値を指定できる
containertoggleDropdownTimePickerを表示するときの効果として、wipe, explode, fadeを指定できる
containerToggleDurationcontainertoggleで指定した効果の実行時間をミリ秒単位で指定する
langロケール
displayFormatHH:mmのように入力フォームに表示するときのフォーマットを指定する

ダイアログ

dojo.widget.Dialogにより、他のHTML要素の操作をブロックするダイアログを作ることができる。表示するダイアログの内容を含むdiv要素に対して、dojoType="dialog"属性を付ける。ダイアログとしてHTMLフォームを含むこともできる。ダイアログの内容は、子要素として含むのではなく、href属性でURL指定した別ファイルのHTMLを指定することもできる。

<div dojoType="dialog" id="loginDialog" bgColor="white" bgOpacity="1" toggle="fade" toggleDuration="250" closeNode="hider" closeonbackgroundclick="true"  >
  <h3>Login Dialog</h3>
  <form onsubmit="return false;">
    <table>
      <tr>
        <td>Name:</td><td><input type="text"></td>
      </tr>
      <tr>
        <td>Password:</td><td><input type="password"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="button" id="closer" value="Login"></td>
      </tr>
    </table>
  </form>
</div>

<style type="text/css">
.dojoDialog {
  background : #eee;
  border : 1px solid #999;
  -moz-border-radius : 5px;
  padding : 4px;
}
</style>

ダイアログを表示するためには、Dialog Widget要素に対して、show()メソッドを実行する。

<script type="text/javascript">
dojo.require("dojo.widget.Dialog");
function showDialog(){
  dojo.widget.byId("loginDialog").show();
}
</script>

<a href="javascript:showDialog()">Show Login Dialog</a>

Dialogの要素は以下の属性を取ることができる。

属性概要
bgColor ダイアログ外側の背景色
bgOpacity ダイアログ外側の背景の透過率
toggle ダイアログを表示するときの効果として、wipe, explode, fadeを指定できる
toggleDuration toggleで指定した効果の実行時間をミリ秒単位で指定する
closeNode onclickイベントによりダイアログを消すHTML要素のID名
closeOnBackgroundClick trueを指定するとダイアログの外をクリックするとダイアログを閉じる。デフォルトはfalse
lifetime ダイアログの表示時間
blockDuration 操作ができない時間
href ダイアログとして表示する内容のHTML要素をURLで指定する
executeScripts hrefでダイアログの内容を指定したとき、指定したHTML内のJavaScriptを実行するかどうかをtrue/falseで指定する。デフォルトはfalse

ModalFloatingPane

ModalFloatingPaneは、Dialogと同様に、他のHTML要素の操作をブロックするダイアログを作成する。窓の形状がFloatingPaneと同じとなる点がDialogと異なる。

ModalFloatingPaneは、FloatingPaneとDialogのベースとなっているModalDialogBaseを継承しているため、FloatingPaneとDialogそれぞれとほぼ同じ機能を提供する。

<div dojoType="ModalFloatingPane" id="loginModalDialog" title="Login Floating Pane"
  style="width: 400px; height: 200px;" closeNode="hider" closeonbackgroundclick="true"
  bgColor="white" bgOpacity="1" toggle="fade" toggleDuration="250">
  <h3>Login Dialog</h3>
  <form onsubmit="return false;">
    <table>
      <tr>
        <td>Name:</td><td><input type="text"></td>
      </tr>
      <tr>
        <td>Password:</td><td><input type="password"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="button" id="hider" value="Login"></td>
      </tr>
    </table>
  </form>
</div>
<script type="text/javascript">
dojo.require("dojo.widget.ModalFloatingPane");
function showModalDialog(){
  dojo.widget.byId("loginModalDialog").show();
}
</script>

<a href="javascript:showModalDialog()">Show Login Dialog</a>

2007年7月22日 (日)

カレンダー

カレンダーを表示して日付を選択させることができる。カレンダーには、その場で表示されるDatePickerと、ボタンを押すと表示されるDropdownDatePickerの2つがある。

DatePicker

<script type="text/javascript">
dojo.require("dojo.widget.DatePicker");
</script>

<div dojoType="datepicker" widgetId="foo">

DatePickerの日付選択は、onValueChangedイベントとして受け取ることができる。 選択した日付の値を取得するには、DatePickerのwidgetに対して、getValue()またはgetDate()メソッドを実行する。getValue()では日付を文字列として取得し、getDate()ではDateオブジェクトとして取得できる。

setValue()、setDate()で日付を指定することで、DatePickerにおいて指定した日付を選択させることもできる。

以下に示す例では、DatePickerで日付を選択するとその文字列を入力フォームに表示する。また、ボタン「setDate」を押すと入力フォームに入力した日付が、DatePicker上で選択される。

<script type="text/javascript">
dojo.addOnLoad(init);
function init(){
  dojo.event.connect(dojo.widget.byId('cl'),'onValueChanged','setInput');
  dojo.event.connect(dojo.byId('setDate'),'onclick','setDatePicker');
};

function setInput(){
  var checked = dojo.widget.byId('cl').getDate();
  dojo.byId('date').value = dojo.date.format(checked, {formatLength:'medium',selector:'dateOnly', locale:'ja-jp'});
}

function setDatePicker(){
  var date = dojo.date.parse(dojo.byId('date').value, {formatLength:'medium', locale:'ja-jp'});
  dojo.widget.byId('cl').setDate(date);
}


<div dojoType="datepicker" widgetId="cl">

dojoType="DatePicker"を指定した要素では、以下の属性を指定できる。

属性概要
lang ロケールを指定することで、カレンダーの月と曜日の文字が変わる。"en-us", "nl-nl", "zh-cn", "zh-tw", "ja-jp", "fi-fi", "sv-se", "xx"を指定できる。xxを指定すると全て数字で表示される。指定しないとブラウザのロケールに従って表示される
displayWeeks 何週目まで表示するかを固定で指定する
staticDisplay trueを指定すると月や年を変更できなくなる
value "2005-12-25"のように、指定した日が選択された状態でカレンダーが表示される。"today"を指定すると今日が選択された状態となる
weekStartsOn 左端が何曜日になるか指定する。0が日曜日、1が月曜(デフォルト)、2が火曜とずれていく
adjustWeeks trueを指定すると、displayWeeksの値がその月の日を全て表示する最小限の行だけが表示されるようになる
startDate 指定した日("2006-09-10")以前の日を選択できなくなる
endDate 指定した日("2006-09-10")以降の日を選択できなくなる

DropdownDatePicker

DropdownDatePickerは、input要素に対して dojoType="dropdowndatepicker" を指定して作成する。DropdownDatePickerで選択した値は入力フォームに表示されるので、入力フォームから値を取り出すことが出来る。

<script type="text/javascript">
dojo.require("dojo.widget.DropdownDatePicker");
</script.

<input id="ddcl" dojotype="dropdowndatepicker" />

DropdownDatePickerは、DatePickerで指定できる属性に加えて、以下の属性を指定できる。

属性概要
containerToggle カレンダーを表示するときの効果として、wipe, explode, fadeを指定できる
containerToggleDuration containerToggleで指定した効果の実行時間をミリ秒単位で指定する
displayFormat 入力フォームに表示するときのフォーマット指定。yyyy/MM/ddなど
formatLength 入力フォームに表示する日付のフォーマットを長さ、long, medium, shortで指定する
saveFormat フォームの値として取り出すときのフォーマット指定。rfc, posix, yyyy/MM/ddなど

2007年7月16日 (月)

コンボボックス

テキストボックスとリストボックスを組み合わせたコンボボックスを提供する。テキストボックスに文字を入力できるだけでなく、右端のボタンをクリックして選択できる入力候補を一覧表示する。

Dojoのコンボボックスでは、テキストボックスに文字を入力すると、途中までの入力に一致する候補を一覧表示する機能も提供する。この機能は英数字のみで動作する。

コンボボックスを使うときは、dojo.widget.ComboBoxをrequireする。

dojo.require("dojo.widget.ComboBox");

コンボボックスは、select要素に対して、dojoType属性をcomboboxとすることで作成できる。option要素を指定することで入力候補を指定する。入力候補はoption要素で指定した順番に表示されるため、option要素はあらかじめソートして指定する必要がある。

<select id="sample" dojoType="combobox">
  <option value="aa">aa</option>
  <option value="ab">ab</option>
  <option value="bb">bb</option>
  <option value="cc">cc</option>
</select>

autocomplete属性として"false"を指定すると、入力候補を一覧表示するだけで、選択しないと入力しないようになる。

maxListLength属性により、入力候補として一度に表示するリストの数を指定できる。以下の例では、maxListLengthとして2を指定している。

入力候補をファイル指定

入力候補をoption要素として指定するのではなく、JavaScriptファイルに候補一覧を指定することができる。 入力候補をJavaScriptファイルに記述して指定するときは、select要素ではなくinput要素にdojoType="combobox"を指定する。そして、入力候補を記述したJavaScriptファイルをdataUrl属性の値としてを指定する。

<input id="dataurl" dojotype="combobox" dataurl="/sample/comboBoxData.js" style="width: 300px;" />

JavaScript配列のファイルは2次元配列、連想配列、JSONのいずれかで指定できる。 以下に2次元配列の例を示す。

[
  ["Alabama","AL"],
  ["Alaska","AK"],
  ["American Samoa","AS"],
    ...
  ["Wyoming","WY"]
]

以下に連想配列の例を示す。

{"AL":"Alabama",
"AK":"Alaska",
"AS":"American Samoa",
...
"WY":"Wyoming"}

入力候補を全てJavaScriptファイルに記述する方法では、入力候補の数が多いときロードに時間がかかってしまう。入力するたびに入力候補のデータをサーバから取得することができる。mode属性の値としてremoteを指定し、dataUrl属性の値として %{searchString} を指定することで、文字を入力するたびに入力文字列を渡して、選択候補を取得することができる。

<input id="dataurl2" dojotype="combobox" dataUrl="/search?text=%{searchString}"  mode="remote" />

イベントハンドラ

onValueChanged属性としてfunctionを指定することで、コンボボックスで入力候補を選択したイベントを取得できる。

<input id="getvalue" dojotype="combobox" dataurl="/sample/comboBoxData.js"
onValueChanged="getVal1" style="width: 300px;" />

<script type="text/javascript" language="JavaScript">
function getVal1(val){
  alert(val);
}
</script>

コンボボックスの値を取得するだけであれば、dojo.widget.byId('getvalue').comboBoxValue.valueで、コンボボックスに入力されている値を取得できる。

<button onclick="getVal2">get value</button>

<script language="JavaScript" type="text/javascript">
function getVal2(){
  alert(dojo.widget.byId('getvalue').comboBoxValue.value);
}
</script>

動的な作成

動的にコンボボックスを作るときの例を以下に示す。

dojo.widget.createWidget("dojo:ComboBox", {name:"prog",autocomplete:false,dataUrl:"comboBoxData.js"}, dojo.byId("progCombo"));

2007年7月15日 (日)

カラーパレット

カラーパレットを表示して、色をユーザに選択させることができる。カラーパレットを用いるときはdojo.widget.Checkboxをrequireする。

dojo.require("dojo.widget.ColorPalette");

カラーパレットを表示するところで、dojoTypeをColorPaletteとして指定したdiv要素を記述する。

<div dojoType="ColorPalette" id="cp"></div>

デフォルトでは、7x10のカラーパレットだが、属性としてpalette="3x4"を指定することで、3x4のカラーパレットを作ることができる。

<div dojoType="ColorPalette" id="cp" palette="3x4"></div>

ユーザが選択した色の情報を取得するためには、onColorSelectイベントを関数に割り当てる。onColorSelectイベントを割り当てられた関数では、引数として色の情報をRGB指定の文字列('#3366ff'など)として受け取る。

function hello(color){
  alert(color);
}

function init(){
  dojo.event.connect(dojo.widget.byId('sample'), 'onColorSelect', 'hello');
}
dojo.addOnLoad(init);

動的にカラーパレットを作るには以下のように記述する。

dojo.widget.createWidget("dojo:ColorPalette",{palette:"7x10"}, dojo.byId("showPalette"));

以下に、ボタンを押したら、カラーパレットを表示し、色を選択したらカラーパレットを消す例を示す。

<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.ColorPalette");

var pt;
function showPalette(){
  pt = dojo.widget.createWidget("dojo:ColorPalette",{palette:"7x10"}, dojo.byId("showPalette"));
  dojo.event.connect(pt, 'onColorSelect', 'selectPalette');
}

function selectPalette(color){
  alert(color);
  pt.hide();
}
</script>

<button onclick="showPalette();">色選択</button>
<p><div id="showPalette"></div></p>

2007年7月12日 (木)

チェックボックス

Dojoのチェックボックスを利用するときは、dojo.widget.Checkboxをrequireする。

dojo.require("dojo.widget.Checkbox");

通常のチェックボックスに対して、dojoType属性をChickboxと指定する。

<input type="checkbox" name="cb1" widgetId="cb1" value="foo" dojoType="Checkbox">

disableを指定したときの画像も用意されている。

<input type="checkbox" name="cb1" widgetId="cb1" value="foo" dojoType="Checkbox" checked="checked" disabled="disabled>

チェックボックスには、enable(), disabled()メソッドが用意されており、チェックの可否を変更できる。

var checkbox = dojo.widget.byId('cb1');
checkbox.disable();

2007年7月11日 (水)

ドロップダウンボタン, コンボボタン

ドロップダウンボタン

ボタンを押すとメニューが現れるドロップダウンボタンを作成できる。ドロップダウンボタンを利用するときは、dojo.widget.Buttonをrequireする。

<script type="text/javascript">
dojo.require("dojo.widget.Button");
</script>

ドロップダウンボタンは、button要素に対してdojoTypeを"DropDownButton"と指定する。ボタンを押したときに表示されるメニューのIDをmenuId属性に指定する。

<button dojoType="DropDownButton" menuId="menu" widgetId="button">test</button>

メニューは、button要素とは別に、dojoTypeを"PopupMenu2"と指定して作成する。PopupMenu2はtoggle属性を指定して、メニューの表示方法を指定できる。toggleは、"plain", "wipe", "fade", "explode"のいずれかを指定できる。

メニューの各項目は、PopupMenu2を指定した要素の子要素にdojoTypeを"MenuItem2"と指定して作成する。メニュー要素は、アイコン画像をiconSrc、表示文字列をcaption、ショートカットキーをaccelKey属性として指定できる。

<div dojoType="PopupMenu2" id="menu" toggle="wipe">
  <div dojoType="MenuItem2" iconSrc="/sample/cut.gif" caption="Cut" accelKey="Ctrl+C" onClick="alert('cut')"></div>
  <div dojoType="MenuItem2" iconSrc="/sample/copy.gif" caption="Copy" accelKey="Ctrl+X" onClick="alert('copy')"></div>
  <div dojoType="MenuItem2" iconSrc="/sample/paste.gif" caption="Paste" accelKey="Ctrl+V" onClick="alert('paste')"></div>
</div>

コンボボタン

ドロップダウンボタンではボタンを押すとメニューが現れたが、コンボボタンでは、ボタン自体を押すことができ、さらにボタンの右側にメニューが現れるボタンも表示される。

コンボボタンを作成するときは、dojoTypeを"ComboButton"にする以外はドロップダウンボタンと同じ。

« 2007年6月 | トップページ | 2007年8月 »