Uniface GUI サンプル: コマンドボタン

Uniface 9.6.01
サンプル Version: 1.0
2012年 12月


概要

サンプルは、非常にシンプルなテキストだけのボタンから、WIndows7リボンバーのような洗練されたボタンまで、いろいろなコマンドボタンを含んでいます。 サンプルはどのように異なったボタンタイプを定義すべきか表しています。

機能

サンプルは以下を表しています。

このサンプルは以下は含まれていません。


ファイル

サンプルは以下のファイルを含んでいます:

ファイル名

説明

u96_buttons_readme_jpn.htm

このファイル

u96_button.xml

Uniface エクスポートファイルの内容

オブジェクト

名前

説明

フォーム


U96_BUTTON

メインフォーム

U96_BUTTON1
U96_BUTTON2
U96_BUTTON3
U96_BUTTON4
U96_BUTTON5
U96_BUTTON6
U96_BUTTON7
U96_BUTTON8
U96_BUTTON9
U96_BUTTON10

それぞれ4つの異なる状態のボタンスタイルを表しています。

u96_button_glassy_active.png
u96_button_glassy_default.png
u96_button_glassy_focus.png
u96_button_glassy_hover.png
u96_button_iconsave.png
u96_button_iconsave_active.png
u96_button_iconsave_focus.png
u96_button_iconsave_hover.png
u96_button_ribbon_active.png
u96_button_ribbon_default.png
u96_button_ribbon_focus.png
u96_button_ribbon_hover.png
u96_button_s1.png
u96_button_s2.png
u96_button_s3.png
u96_button_s4.png
u96_button_s5.png
u96_button_s6.png
u96_button_s7.png
u96_button_s8.png
u96_button_s9.png
u96_button_s10.png
u96_button_screen.png

このサンプルで使用される画像

前提条件

サンプルを使用するにあたって、以下の知識が必要とされます。

Unifaceスキル

レベル

Uniface 開発

Uniface プロックコード

ウィジェット



ステップ

  1. 以下をIDFアサイメントの[FILES]セクション内の最初の行に追記します。
    u96*.*     .\samples\u96*.*
  2. サブフォルダ samples をプロジェクトフォルダに作成します。
  3. u96_button.zip を samplesフォルダにすべて解凍します。
  4. u96_button.xml をインポートします。
    /imp u96_button.xml
  5. コンパイルします。
    /all u96_button*
  6. コマンドラインからサンプルフォームを起動します。
    /tst u96_button
  7. フォームをテストします。
    フォームは異なったボタンタイプを表示します。それぞれのボタンをクリックして4つの状態と該当スタイルのreadmeを確認します。
  8. コンポーネントエディタからフォームの設定を確認してください。
    • フィールドプロパティ, 初期値, ウィジェットタイプ, データタイプを確認します。
    • ウィジェットプロパティの Representation, カラー, イメージを確認します。

スタイル 1: テキスト付シンプルボタン

     これはシンプルなUnifaceボタンです。
Windows GUIを追従しないという点においてWindowsボタンとは異なっています。背景色はグラデーションの緑に設定しています。そして4つの異なった前景色が異なった状態で設定されています。
テキスト テキストはフィールド値から表示しています。
背景色 なし
前景色 なし
フィールドプロパティ
  • Inital Value (テキストの設定)
  • Data Type: String
ウィジェットプロパティ
  • Representation: Uniface
  • Gradient: True
  • Background Color: RGB (0,170,0)
  • Foreground Color: 白
  • Focus Foreground: 黄色
  • Hover Foreground: ダークグリーン
  • Select Foreground: 黒

スタイル 2: イメージとテキスト付シンプルボタン(Old)

これはイメージとテキスト両方を持ったUnifaceボタンです。
このようなボタンを作るために、ラベルをボタンに隣接するようにペイントして、そしてラベルをフィールドにアタッチする必要があります。
テキスト テキストはラベル値から表示しています。
背景イメージ なし
前景イメージ 前景イメージはフィールド値から表示しています。
フィールドプロパティ
  • Inital Value (前景イメージの設定)
  • Data Type=イメージ
ウィジェットプロパティ
  • Representation=Uniface

スタイル 3: イメージとテキスト付シンプルボタン(New)

これはイメージとテキスト両方を持っているUnifaceボタンです。
このようなボタンを作るために、あなたはフィールド値にイメージとテキストをUnifaceリストとして指定することができます。
例:@u96_button_iconsave.png·!保存.
テキスト テキストはフィールド値から表示しています。
背景イメージ なし
前景イメージ 前景イメージはフィールド値から表示しています。
フィールドプロパティ
  • Inital Value (テキストと前景イメージの設定)
  • Data Type: String
ウィジェットプロパティ
  • Representation: Uniface
  • Label Image Align: Left (テキストの左側にイメージを配置)
  • Label Image Size: Large

スタイル 4: イメージボタン

もしあなたがUnifaceボタンあるいはWindowsボタンをあまり好まないなら、どんなイメージでもボタンとして使うことができます。このサンプルはフロッピーディスクのイメージです。しかしそれはかわいい子犬、あるいは別のイメージでも結構です。
テキスト なし
背景イメージ 背景イメージはウィジェットプロパティ値から表示しています。
前景イメージ なし
フィールドプロパティ
  • Data Type: String
ウィジェットプロパティ
  • Representation: Uniface
  • Images (イメージの設定)

スタイル 5: イメージの上にテキスト

このUnifaceボタンはイメージの上にテキストを配置しています。
イメージは何でも結構です。このサンプルはクラシックなボタンの形をしています。しかし別のレースカーのような写真あるいは他のイメージでも結構です。 ボタンに4つの異なったイメージが指定されています。
テキスト テキストはフィールド値から表示しています。
背景イメージ 背景イメージはウィジェットプロパティ値から表示しています。
前景イメージ なし
フィールドプロパティ
  • Inital Value (テキストの設定)
  • Data Type: String
ウィジェットプロパティ
  • Representation: Uniface
  • Color properties (4つのテキストカラー設定)
  • Image properties (イメージの設定)

スタイル 6: イメージの上に画像

これは、別の画像をイメージの上に配置したUifaceボタンです。
サンプルではクラシックなボタンの形(しかし宇宙船の写真でも結構です。)です。そしてフィールド値にフロッピーディスクのイメージをボタンの上に表示されるよう指定します。ボタンの上に4つの異なったイメージが指定されています。
テキスト なし
背景イメージ 背景イメージはウィジェットプロパティ値から表示しています。
前景イメージ 前景イメージはフィールド値から表示しています。
フィールドプロパティ
  • Inital Value (前景イメージの設定)
  • Data Type: Image
ウィジェットプロパティ
  • Representation: Uniface
  • Image properties (イメージの設定)

スタイル 7: イメージの上に画像とテキスト (Old)

これはイメージによって表されたUnifaceボタンです。
それは画像とテキスト両方を配置しています。ボタンの上にテキストを置くために、あなたはラベルをボタンに隣接するようにペイントし、そしてそれをアタッチする必要があります。あなたはこのテクニックを使い、多くの異なったタイプのボタンを作成できます。例えばUnifaceボタンの列をマイクロソフトのリボンバーのように見させることは簡単です。
テキスト テキストはラベル値から表示しています。
背景イメージ 背景イメージはウィジェットプロパティ値から表示しています。
前景イメージ 前景イメージはフィールド値から表示しています。
フィールドプロパティ
  • Inital Value (前景イメージの設定)
  • Data Type: Image
ウィジェットプロパティ
  • Representation: Uniface
  • Images (イメージの設定)

スタイル 8: イメージの上に画像とテキスト (New)

これはイメージによって表されたUnifaceボタンです。イメージとテキスト両方を配置しています。このようなボタンを作るために、あなたはフィールド値に画像とテキストをUnifaceリストとして設定することができます。例:@u96_button_iconsave.png·!保存
あなたはこのテクニックを使い、多くの異なったタイプのボタンを作成できます。例えばUnifaceボタンの列をマイクロソフトのリボンバーのように見させることは簡単です。
テキスト テキストはフィールド値から表示しています。
背景イメージ 背景イメージはウィジェットプロパティ値から表示しています。
前景イメージ 前景イメージはフィールド値から表示しています。
フィールドプロパティ
  • Inital Value (前景イメージの設定)
  • Data Type: Image
ウィジェットプロパティ
  • Representation: Uniface
  • Image properties (イメージの設定)

スタイル 9: Windows ボタン

これはWindowsルック&フィール設定を追従したWindowsボタンです。Representation Windowsが指定されているとき、ボタンのプロパティの大部分が使用不可です。なぜならWindowsがボタンのルック&フィールを取り扱うためです。このタイプのボタンを使用するには異なったアプリケーションに一貫性を持たせたい場合に使用します。
テキスト テキストはフィールド値から表示しています。
背景イメージ なし
前景イメージ なし
フィールドプロパティ
  • Inital Value (テキストの設定)
  • Data Type: String
ウィジェットプロパティ
  • Representation: Windows

スタイル 10: ヘッダー ボタン

これはWindowsルック&フィール設定を追従したヘッダーボタンです。Representation Headerが指定されているとき、ボタンのプロパティの大部分が使用不可です。なぜならWindowsはボタンのルック&フィールを取り扱うためです。あなたが、グリッドウィジェットを使わないでグリッドのような何かを作りたい時、ヘッダーボタンが便利です。
テキスト テキストはフィールド値から表示しています
背景イメージ なし
前景イメージ なし
フィールドプロパティ
  • Inital Value (テキストの設定)
  • Data Type: String
ウィジェットプロパティ
  • Representation: Header

詳細