第6回　Flexが備えるMXMLコンポーネント
（Part3：数値入力，リッチテキスト・エディタ，日付入力）

　前回に引き続いて，Flexが備えるMXMLコンポーネントを紹介していきましょう。今回は数値入力，リッチテキスト・エディタ，日付入力です。

数値入力【NumericStepper】

　NumericStepperコンポーネント＊1は，指定した間隔で数値を加算したり減算したりするためのボタンが付随する，数値入力に特化した入力フィールドです。UIのベース・コンポーネントであるUIComponentクラス＊2を継承し，第4回で紹介したTextInputコンポーネントと第5回で紹介したButtonコンポーネントを内部で使用しています。NumericStepperのStyleは，これらのコンポーネントに適用されるStyleになるわけです。

　では，実際にサンプルを見てみましょう（図1）。

図1：【NumericStepper】サンプル（クリックすると別ウィンドウで表示します。ソースはこちら）

　上から順に
1-1．ノーマル
1-2．初期表示の値を指定
1-3．最大文字数指定
1-4．最小値・最大値を指定
1-5．加算・減算の間隔を指定
1-6．表示値の次の値・前の値
1-7．ユーザーに入力させない（※裏技）
のようになります。

　1-1．はノーマル状態。つまり，すべての属性が初期値の状態です。ノーマルの状態では最小値は「0」，最大値は「10」，加算・減算の間隔は「1」です。使い方は見ての通り▲ボタンをクリックすると数値が「1」ずつ加算され，▼ボタンをクリックすると減算されます。また，入力エリアにフォーカスを合わせてキーボードの「↑」・「↓」キーを押すことでも加算・減算することができます。

　ユーザーによる入力も可能ですが，数値しか入力できません。また，最小値より小さい値や最大値より大きい値は入力できません。さらに，加算・減算の間隔の倍数にならない値も入力できません。どの場合も"最も近い値"に強制的に変更されます。例えば「-10」と入力してEnterキーを押すと「0」に，「100」と入力すると「10」に，「1.1」と入力すれば「1」に，「1.5」と入力すれば「2」に変更されます。

　第5回のButtonコンポーネントの説明で「autoRepeat・repeatInterval・repeatDelay」属性について説明したように，この▲・▼ボタンにはそれらの属性が適用されており，各ボタンを押しっぱなしにすることで表示されている値が自動的に加算・減算されていきます。

　1-2．は「value」属性に「5」を初期値としてセットしています。また，この値は入力エリアに表示されている値なので加算・減算すると変化します。

　1-3．は「maxChars」属性に「1」とセットしているのでユーザーは1文字しか入力できません（0～9）。しかし，最大値は初期値の「10」なので▲ボタンをクリックすることで値を「10」にすることが可能です。この属性の利用シーンというのがちょっと想像できません。

　1-4．は「minimum」属性で最小値を，「maximum」属性で最大値を指定しています。図1のサンプルでは「-20～20」まで変更することが可能です。

　1-5．は「stepSize」属性で加算・減算の間隔を指定しています。1番目は「-100～100」の間を「10」ずつ変化します。2番目は「-1～1」の間を「0.01」ずつ変化します。3番目は「-100～100」の間を「-10」ずつ変化します。この3番目はちょっと変わっていて▲ボタンをクリックすると減算され，▼ボタンをクリックすると加算されます。

　1-6．は現在表示されている値の次の値（▲ボタンを押す）と前の値（▼ボタンを押す）を，それぞれNumericStepperコンポーネントの上下に表示しています。▲ボタンを押した値は「nextValue」属性から取得可能で，▼ボタンを押した値は「previousValue」属性から取得可能です。この属性は読み取り専用属性です。とは言え，「value」属性と「stepSize」属性から計算することが可能な値でもあります。実際，NumericStepperのASソースを見てみると最小値・最大値の範囲をチェックし，nextValue = value + stepSize，previousValue = value - stepSize という計算をしています。

　1-7．は標準の属性では提供されていないので裏技を使用しています。「1-1．」で説明したようにユーザーが入力した値を加算・減算の間隔の倍数値に強制的変換しますので，場合によっては入力させないほうが良い場合がある"かも"しれません。そこで，NumericStepper内部で使用されているTextInputの「editable」属性を直接変更しています。決して，この方法が良いわけではないので「こんなやり方もあるのだな」程度に流してください。ちなみに，「mx_internal」というのはネームスペース＊3です。

リッチテキスト・エディタ【RichTextEditor】

　RichTextEditorコンポーネント＊4は，文字の装飾，文章の整形を行うためのツールです。TextAreaコンポーネント（第4回）では，HTMLを「htmlText」属性にセットすればHTMLの表示が可能ですが，HTMLの入力はできないと説明しました。RichTextEditorは，ユーザーが指定した文字の装飾，文章の整形を内部で処理してTextAreaに表示してくれるコンポーネントです。

　では，実際にサンプルを見てみましょう（図2）。

図2：【RichTextEditor】サンプル（クリックすると別ウィンドウで表示します。ソースはこちら）

　このサンプルは1段目（id = rte）のRichTextEditorで入力した内容のソース（htmlText）を2段目（id = txa1）のTextAreaに直接表示し，さらに3段目（id = txa2）のTextAreaの「htmlText」属性に2段目のTextAreaの「text」属性をセットしています。

　つまり，2段目はHTMLの構文がそのまま表示されます。3段目（id = txa3）は2段目で表示したHTMLを「htmlText」属性にセットすることで，RichTextEditorと同じような見た目で表示されています。さらに4段目（id = txa4）は，RichTextEditorのHTML構文が除去された「text」属性の値を表示しています。

　RichTextEditorは，内部で様々なコンポーネントを使用しています。それらのコンポーネントのクラスやIDはオンラインヘルプを参照してください＊4。サンプルでは指定可能なフォントを変更し，Windows系日本語フォントの「MS Gothic（ゴシック）」「MS Mincho（明朝）」とデバイスフォント（_sans，_serif，_typewriter）を選択可能にしています。

　では，実際にRichTextEditorを使用してみましょう。基本的にMicrosoft Wordなどと装飾・整形の方法は似ています。

手順1．何も変更せずに「あいうえお」と入力し，Enterを押します。

手順2．フォントサイズ（左から2番目のコンポーネント）を「36」にし，「かきくきこ」と入力し，Enterを押します（※選択肢の中から「36」を選んでください。バグが有り入力エリアに「36」と入力しても反映されません）。

手順3．フォントファミリー（左から1番目のコンポーネント）を「MS Mincho」にし，また「かきくけこ」と入力し，Enterを押します。

手順4．「さしすせそ」と入力してからその文字列を選択します。そして，（左から3番目のボタン三つ）太字，斜体，下線を選択し，文字列の選択を解除します（入力エリアの空白部分をクリック）し，Enterを押します。

手順5．文字色（左から4番目のコンポーネント）を青色にし，「さしすせそ」と入力し，Enterを押します。

手順6．（左から5番目の四つボタンの2番目で）中央揃えにし「たちつてと」を入力し，Enterを押します。

手順7．（左から5番目の四つボタンの3番目で）右揃えにし「たちつてと」を入力し，Enterを押します。

手順8．（左から5番目の四つボタンの1番目で）左揃えにし「たちつてと」を入力し，Enterを押します。

手順9．箇条書きボタン（左から6番目のボタン）をクリックし「なにぬねの」を入力しEnterを押す。同様に「はひふへほ」（＋Enter），「まみむめも」（＋Enter）を入力します。

手順10．箇条書きボタン（左から6番目のボタン）をもう一度クリックして箇条書きモードを解除します。

手順11．「やゆよ」と入力してからその文字を選択します。太字，斜体，下線を解除します。一番右のリンク入力フィールドに「http://www.google.com」と入力し，Enterを押します。さらに文字列の選択を解除してからEnterを押します。

手順12．先ほどの「やゆよ」部分にマウスカーソルを合わせると，手形のカーソルに変わります。「手順11」によって「やゆよ」という文字列はリンクになっているのですが，通常のHTMLのように「A」タグのスタイルにはなりません。したがって，リンクだとわかるようにユーザー自身でリンク文字列に変化を付ける必要があります。

手順13．「やゆよ」の文字列をクリックするとグーグルのトップページが新規ウィンドウで開きます。

日付入力【DateField】

　DateFieldコンポーネント＊5は，入力エリアの横にカレンダー・アイコンがあり，クリックすると月表示カレンダーのようなUIのDateChooserコンポーネント＊6が表示されます。DateChooserで日付を選択すると，その日付が入力エリアに表示されます。一見するとUIComponentを継承してTextInputとButtonを使用しているように見えるのですが，実際はComboBaseコンポーネント＊7を継承しています。

　では，実際にサンプルを見てみましょう（図3）。

図3：【DateField】サンプル1（クリックすると別ウィンドウで表示します。ソースはこちら）

　上から順に
3-1．ノーマル
3-2．初期表示の日付を指定
3-3．年単位の変更が可能
3-4．テキスト入力が可能
3-5．曜日の表示形式の変更
3-6．土曜日と日曜日の選択が不可
3-7．初期表示の年月を指定
3-8．左端の曜日を指定（月曜日）
3-9．日付の書式を指定
3-10．表示可能年の範囲を指定
3-11．年・月に付加する文字を指定
のようになります。

　3-1．はノーマル状態。つまり，すべての属性が初期値の状態です。初期状態でDateChooserを表示すると当月が表示されます。また，初期状態ではユーザーによる日付の入力はできず，入力エリアをクリックするとDateChooserが表示されます。試しに空白の入力エリアをクリックしてみます。すると，DateChooserが表示されますので，適当な日をクリックします。選択したくない場合はDateChooser外の場所をクリックするかESCキーを押します。

　3-2．は表示日付「selectedDate」属性を指定しているので，入力エリアに「2010/04/01」が表示されています。DateChooserを表示しても2010年04月が表示され，1日が選択されています。「selectedDate」属性の中身はActionScriptで，日付オブジェクト＝Dateクラス＊8を作成しています。なぜなら，「selectedDate」属性の型がDateクラスだからです（文字列を指定するとエラーになります）。また，良く見るとおわかりになると思いますが，月の値として「3」をセットしていますが表示される月は「4月」です。これは1月＝0，…，12月＝11，のようにDateクラス内部で扱うからです。

　3-3．は「yearNavigationEnabled」属性に「true」をセットすることで，「年エリア」の前に年ナビゲータ「▲▼」が表示されています。この年ナビゲータ，非常に見づらく使い難いのですが，▲をクリックすると年が加算され，逆に▼をクリックすると減算された月が表示されます。

　3-4．は「editable」属性に「true」をセットすることで，ユーザーによる日付文字列の入力を可能にしています。間違った日付（例：2010/02/31）を入力してもエラーになりませんので，プログラムでチェックする必要があります。

　3-5．は「dayNames」属性に文字列の配列を指定して「曜日」の表示を変更しています。先頭は日曜日から開始する仕様になっています。サンプルのように曜日を3文字表記にすると，DateChooser自身の幅も自動的に広がっているのがわかると思います。

　3-6．は「disabledDays」属性に数値の配列を指定することで，選択できない曜日を指定しています。指定できる数値は「0～6」で0：日曜．．．6：土曜です。

　3-7．は「3-2」とは異なり，「displayedYear」属性をセットして初期表示年を指定し，「displayedMonth」属性をセットして初期表示月を指定しています。ただし，DateChooserで年月を変更する（日付は選択しない）と，TextInputフィールドに表示されている日付とは同期せず，前回表示した年月が表示されます。

　3-8．は「firstDayOfWeek」属性をセットすることで，左端の曜日を指定しています。指定できる値は「3-6」と同様で「0～6」です。サンプルでは「1」＝「月曜日」を指定しています。

　3-9．は「formatString」属性で入力エリアに表示する日付文字列の書式を指定しています。使用できる書式はこちら。

　3-10．は「minYear」属性をセットして表示・選択可能な最小年を指定し，「maxYear」属性をセットして表示・選択可能な最大年を指定しています。注意点としては，初期値としてDateChooserは「本日」を最初に表示しますので，サンプルのように「minYear」「maxYear」ともに「2010」年を指定していても「本日」が表示されます。これが"バグ"なのか"使い方"なのかは微妙なところです。「本日」が最小年・最大年の範囲内に無い場合は，「selectedDate」属性を使用して範囲内の日を初期値にセットするか，「displayedYear・ displayedMonth」を使用して初期表示年月を指定する必要があります。

　3-11．は「monthSymbol」属性をセットして「月」を「つき」に，「yearSymbol」属性をセットして「年」を「ねん」に変更しています（DateChooserのヘッダー表記のカスタマイズ）。もちろん，空文字「""」を指定することもでき，「年」や「月」といったヘッダーを消すこともできます。

　さて，ここで「3-1」に戻ります。DateChooserを表示すると「年」「月」と曜日も日本語です。そもそも，Flex2は"英語"で，FlexBuilder2の日本語環境でもFlexFramework2のソースは英語です。では，これらの日本語文字列はどこでセットされているのでしょうか？

　それは「リソースバンドル」という仕組みが可能にしてくれています。Flex Builderのインストールフォルダ以下に「Flex SDK 2\frameworks\locale」というフォルダあります。さらに「en_US」と「ja_JP」というフォルダがあり，「controls.properties」というファイルがあります。

　このファイルをテキストエディッタなどで開くと，「dayNamesShortest = 日,月,火,水,木,金,土 」という記述があります。実はこのファイルをコンパイル時に取り込んでいます。では「en_US」と「ja_JP」をどのように切り分けているかというと，これはFlexプロジェクトのプロパティ内の追加コンパイラ引数で指定しています。

　プロジェクトメニュー ⇒ プロパティ ⇒ Flex コンパイラ ⇒ 追加コンパイラ引数とたどって，ロケールを指定してください（図4）。

図4：コンパイラ引数で「ロケール」を指定（クリックすると拡大表示します）

　この「-locale ja_JP」を「-locale en_US」（＊9，＊10）にしてコンパイルしてみたのが図5です（ソースは全く同じです）。ローカライズに関する詳細な解説は，いずれ紹介できればと思います。

図5：【DateField】サンプル2（クリックすると別ウィンドウで表示します。