HTML5 Builderでコンポーネントを国際化対応する

HTML5 Builderでコンポーネントを国際化対応する方法を調べました。

Pageをデフォルトの言語で作成します。

PageのLanguageプロパティから対応する言語を選択します。
ここでは「Japanese」を選択します。

コンポーネントのプロパティを日本語用に修正します。

ファイルを見ると、デフォルトの言語の設定が保存されている「unit1.xml.php」と、日本語の設定が保存されている「unit1.Japanese.xml.php」が作られています。

実行時にLanguageプロパティを変更すると、指定した言語に表示が変更されます。

function Button1Click($sender, $params)
{
   if($this->Language == "(default)")
      $this->Language = "Japanese";
   else
      $this->Language = "(default)";
}

アプリケーションを実行します。

「Change」ボタンを押すと、表示言語が変更されます。

ブラウザの言語情報をもとに表示言語を設定する場合は、Applicationオブジェクトを使用します。

function Page1Create($sender, $params)
{
   global $application;
   $application->autoDetectLanguage();
   $this->Language = $application->Language;
}

HTML5 BuilderのDataListで入力候補を表示する

DataListコンポーネントを使ってみました。

EditコンポーネントとDataListコンポーネントを配置します。

DataList1のItemsプロパティを編集します。

値リストエディタが表示されます。

キーには、入力欄に設定される文字列
値には、入力候補に表示される文字列
を入力します。

Edit1のDataListプロパティにDataList1を設定します。

「F9」キーを押して実行します。

HTML5 BuilderのAnimationコンポーネントを使ってみる

Animationコンポーネントを使うと、アニメーション効果を簡単に実現できます。
ブラウザによって、対応しているアニメーション効果に違いがあるようです。

AnimationコンポーネントとButtonコンポーネントを配置します。

Animation1のItemsプロパティを編集します。

CSS3 Animation画面が表示されます。
この画面で、使用するアニメーションを一元管理できます。

「項目の新規作成」ボタンを押して、項目を作成します。

プロパティを編集して、アニメーションを設定します。

「OK」ボタンを押して、設定を登録します。

Button1のAnimationsプロパティを編集します。

アニメーションエディタ画面が表示されます。
この画面でアニメーションを実行するイベントや対象のコンポーネントを設定します。

「新規ルールセットの追加」ボタンを押します。

JavaScriptイベントが追加されました。

プルダウンメニューからイベントを選択します。

「新規ソースの追加」ボタンを押します。

アクションが追加されました。

最初のプルダウンメニューでは、アニメーションを追加するか削除するかを選択します。
2番目のプルダウンメニューでは、アニメーションするコンポーネントを選択します。
3番目のプルダウンメニューでは、Animationコンポーネントを選択します。
アニメーション欄から、適用するアニメーションをチェックします。

「OK」ボタンを押して、設定を登録します。

「F9」キーを押して、アプリケーションを実行します。

動的にアニメーションを実行する場合は、対象のコンポーネントにクラスを追加します。
クラス名はAnimationコンポーネントのNameプロパティとアニメーション項目のCaptionプロパティをアンダーバー(_)でつなぎます。

function Button1JSClick($sender, $params)
{
    ?>
    //begin js
    $('#Button1_outer').addClass('Animation1_Animation1');
    //end
    <?php
}

アニメーション項目のプロパティを見てみます。

  • Animation Duration

    アニメーションの間隔

  • StartColor

    最初の色

  • EndColor

    最後の色

次の例では、ボタンの色が徐々に赤くなります。

  • Animation Timing

    アニメーションの速度

    • ease 最初と最後はゆっくり
    • linear 一定の速度
    • ease-in 最初はゆっくり
    • ease-out 最後はゆっくり
    • ease-in-out 最初と最後はゆっくり
  • Interation Count

    アニメーションの繰り返し回数
    infiniteのときは無制限に繰り返す

  • Start Rotate

    最初の角度

  • End Rotate

    最後の角度

次の例では、ボタンが回転します。

  • Start Scale

    最初の大きさ

  • End Scale

    最後の大きさ

次の例では、ボタンが大きくなります。

  • Start Translate

    最初の位置

  • End Translate

    最後の位置

次の例では、ボタンが移動します。

HTML5 BuilderのCheckListBoxコンポーネントを使ってみる

HTML5 BuilderのCheckListBoxコンポーネントを使ってみる

Itemsプロパティ

Itemsプロパティは項目を示す配列です。

function Button1Click($sender, $params)
{
   $this->CheckListBox1->Items = array('Delphi XE3', 'C++Builder XE3', 'HTML5 Builder', 'Prism XE3');
}

Columnsプロパティ

Columnsプロパティは列数を示します。

function Button2Click($sender, $params)
{
   $this->CheckListBox1->Columns = 2;
}

Checkedプロパティ

Checkedプロパティはチェックされた項目を示す配列です。
チェックされた項目は、値に1を設定します。

function Button1Click($sender, $params)
{
   //2番目と3番目の項目をチェックする
   $this->CheckListBox1->Checked = array(0, 1, 1);
}

function Button1Click($sender, $params)
{
   //チェックされている項目の項目名をLabel1に表示する
   $checked = $this->CheckListBox1->Checked;
   reset($checked);
   $items = array();
   while(list($key, $val) = each($checked))
   {
      if($val == 1)
      {
         $items[] = $this->CheckListBox1->Items[$key];
      }
      $this->Label1->Caption = implode(',', $items);
   }

Headerプロパティ

Headerプロパティには、キーにヘッダーとなる項目のインデックス、値に1を登録します。
値に0を入力するとヘッダーになりません。

ヘッダーの背景色はHeaderBackgroundColorプロパティ、ヘッダーの文字色はHeaderColorプロパティで設定します。

実行画面

AddItem()メソッド

AddItem()メソッドは項目を追加します。

$this->CheckListBox1->AddItem('InterBase');

Clear()メソッド

Clear()メソッドはすべての項目を削除します。

$this->CheckListBox1->Clear();

SelectAll()メソッド

SelectAll()メソッドはすべての項目をチェックします。

function Button1Click($sender, $params)
{
    $this->CheckListBox1->SelectAll();
}

ItemAtPos()メソッド

ItemAtPos()メソッドは引数のインデックスの項目名を返します。

function Button1Click($sender, $params)
{
   //3番目の項目の項目名をLabel1に表示する
   $this->Label1->Caption = $this->CheckListBox1->ItemAtPos(2);
}