Uniface

Uniface Tutorials
Uniface 9.1
文書番号 10102019101-00
2007 年 2 月
Uniface 9.1.01
Uniface Tutorials
制限付きの権利
このドキュメント、およびこのドキュメントに記載されている製品には、以下が適用され
ます。
© 2006 Compuware Corporation. All rights reserved.
この未公表著作物は、アメリカ合衆国著作権法により保護されています。
アメリカ合衆国政府の権利
アメリカ合衆国政府による使用、複製、または開示に関しては、Compuware Corporation
のライセンス契約に定められた制約、および DFARS 227.7202-1(a)、227.7202-3(a) (1995)、
DFARS 252.227-7013(c)(1)(ii)(OCT 1988)、FAR 12.212(a)(1995)、FAR 52.227-19、また
は FAR 52.227-14(ALT III) に規定された制約が、適宜、適用されます。
Compuware Corporation
この製品には、Compuware Corporation の秘密情報および企業秘密が含まれています。
Compuware Corporation の書面による事前の許可なく、使用、開示、複製することはで
きません。
商標
Compuware および Uniface は Compuware Corporation の登録商標です。Windows およ
び Windows ベースのすべての商標とロゴは、米国 Microsoft Corporation の米国およびそ
の 他の 国 に お け る商 標 ま た は 登録 商 標 で す。CICS、DB2、IBM、およ び OS/2 は、
International Business Machines Corporation の商標または登録商標です。SOLID Server
(TM)、SOLID Bonsai Tree (TM)、SOLID Remote Control (TM)、およびSOLID SQL Editor
（TM）は、Solid Information Technology Ltd. の商標または登録商標です。Java および
Java ベースのすべての商標とロゴは、米国 Sun Microsystems, Inc. の米国およびその他
の国における商標または登録商標です。All rights reserved. Adobe、Acrobat、および
Adobe Acrobat Reader は、Adobe Systems Incorporated の商標または登録商標です。そ
の他の会社名、製品名は、関連するそれぞれの会社の商標または登録商標です。
オンライン サポートおよび学習
FrontLine は、サポートのためのインターネット サイトです。Uniface 製品と技術に関す
る情報にアクセスできます。オンラインの製品関連ドキュメント、技術情報、最新のプ
ラットフォーム サポート情報、コール トラッキング、他の開発者との情報交換、製品バ
グの修正などが提供されています。FrontLine へのアクセスには、http://
frontline.compuware.com のオンライン登録フォーム（カスタマ ライセンスが必要です）
をご利用ください。製品の関連ドキュメントの最新バージョンについては、FrontLine に
ある Uniface Library をご確認ください。Uniface のオンライン コースは、
Uniface@cademy（http://myuniface.com/myuniface/?academy）からアクセスできます。
Uniface のドキュメントに関するご提案やご意見は、非常に貴重な情報となります。ご提
案やご意見がありましたら、以下の FrontLine の Uniface サポートプロセスをお読みにな
り、弊社までお送りください。
http://frontline.compuware.com/nswsections/supportprocess/15394.
目次
はじめに
第 1 章 Uniface アプリケーションを初めて開発する
1.1 チュートリアルの概要 ............................................................................................................... 2
1.2 アプリケーションのモデリング ................................................................................................ 4
1.3 ユーザー インタフェースの作成 ............................................................................................... 8
1.4 コンパイルとテスト ................................................................................................................ 13
1.5 ユーザー インタフェースの微調整 .......................................................................................... 15
1.6 スタートアップ シェルの作成 ................................................................................................. 22
1.7 アプリケーションの配置 ......................................................................................................... 23
第 2 章 初めて開発した Uniface アプリケーションを拡張する
2.1 チュートリアルの概要 ............................................................................................................. 27
2.2 ライブラリとメニューの作成 .................................................................................................. 30
2.3 ヘルプ ファイルと ABOUT フォームの作成 .......................................................................... 34
2.4 メニューのプログラミング ..................................................................................................... 36
2.5 カレンダーを表示するフォームの作成 ................................................................................... 38
2.6 CALENDAR からの日付の選択 .............................................................................................. 39
2.7 注文の合計数を計算するサービスの作成 ................................................................................ 42
2.8 注文の合計数を取得するサービスの呼び出し ......................................................................... 43
2.9 アプリケーション モデルの拡張 ............................................................................................. 44
第 3 章 Uniface Web アプリケーションを初めて開発する
3.1 チュートリアルの概要 ............................................................................................................. 50
3.2 アプリケーションのモデリング .............................................................................................. 53
3.3 サーバー ページの作成 ............................................................................................................ 56
3.4 テスト プリファレンスの設定とサーバー ページのテスト ..................................................... 61
i
3.5 ORDER_LIST の設計とプログラミング ................................................................................ 63
3.6 データを使った ORDER_LIST のテスト ............................................................................... 69
3.7 ORDER_DETAILS サーバー ページの作成 ........................................................................... 70
3.8 SALES_ORDER からの ORDER_DETAILS の呼び出し ...................................................... 74
第 4 章 外部のサーバー ページ レイアウト定義を使用する
4.1 チュートリアルの概要 ............................................................................................................. 79
4.2 アプリケーションのモデリング .............................................................................................. 82
4.3 コンポーネント ストラクチャの作成 ...................................................................................... 83
4.4 外部レイアウトの作成 ............................................................................................................. 85
4.5 外部レイアウト ファイルの使用 ............................................................................................. 88
4.6 レイアウト ファイルの追加作成 ............................................................................................. 88
4.7 複数の外部レイアウト ファイルの使用 .................................................................................. 90
ii
Uniface Tutorials
はじめに
このドキュメントには、クライアント／サーバー環境と Web 環境の両方について、Uniface アプリ
ケーションの開発方法の学習に役立つチュートリアルが提供されています。
対象読者
新規の Uniface 開発者
構成
Uniface 開発の基礎とクライアント／サーバー アプリケーションの開発方法を学習するには、以下の
章を参照してください。
◆
◆
Uniface アプリケーションを初めて開発する
初めて開発した Uniface アプリケーションを拡張する
Web アプリケーションを開発する方法を学習するには、以下の章を参照してください。
◆
Uniface Web アプリケーションを初めて開発する
◆ 外部のサーバー ページ レイアウト定義を使用する
関連ドキュメントとサンプル
これらのチュートリアルは、Uniface Library にも入っています。特に記述がないかぎり、参照先は
Uniface Library のトピックを指します。
UnifaceInstallDir\samples ディレクトリにあるサンプルも、Uniface を初めて使う際に役立ち
ます。
iii
iv
Uniface Tutorials
第1章
Uniface アプリケーションを
初めて開発する
このチュートリアルでは、商品の注文とその明細行を示す Uniface アプリケーションを順を追って作
成していきます。作成したアプリケーションで、注文とその明細行の作成、検索、更新が可能です。
このチュートリアルは、Uniface を初めて使う開発者が対象です。Uniface 開発環境（UDE）でアプ
リケーションの作成を開始するために必要な情報が提供されています。ただし、これは Uniface の入
門書ではなく、Uniface の基本機能がすべて紹介されているわけでもありません。詳細については、
Uniface Library の「Introducing Uniface」を参照してください。
前提条件
◆
Uniface が Microsoft Windows プラットフォームにインストールされていて、SOLID データ
◆
Uniface-installation-directory\adm に入っている構成ファイルが、インストール後に
◆
Uniface プログラム グループの Solid データベースが起動している。
◆
Uniface プログラム グループの Uniface 開発環境が起動している。
ベースが使用されている。
変更されていない。
目標
このチュートリアルで、以下の方法を学習します。
◆ モデル、エンティティ、エンティティ リレーションシップの作成。
◆ フォーム コンポーネントの作成。アプリケーションのデータ構造とレイアウトの定義。トリガで
の PROC コーディング。
◆ フォームのコンパイルとテスト。
◆ Uniface ファンクション キーを使用した、データの保存や検索。
◆ スタートアップ シェルの作成。
◆ アプリケーションの配置。
このチュートリアルの概要については、1.1「チュートリアルの概要」を参照してください。1.2「ア
プリケーションのモデリング」からチュートリアルが開始します。
1
1.1 チュートリアルの概要
1
アプリケーションのモデリング
2 つのエンティティ（ORDER と ORDERLINE）のあるモデル（SALES）と、ORDER と
ORDERLINE 間のリレーションシップを作成し、注文に多くの明細行を関連付けるようにしま
す。
2
ユーザー インタフェースの作成
Uniface のフォーム（SALES_ORDER）コンポーネントをユーザー インタフェースとして作成し
ます。SALES_ORDER に ORDER と ORDERLINE を描きます。
3
コンパイルとテスト
いくつかの注文とその明細行を作成します。そのデータを保存して、検索します。
2
Uniface Tutorials
4
ユーザー インタフェースの微調整
タスク 3 では、ファンクション キーを使用して、データの作成や検索などをします。たとえ
ば、[Ctrl]+[r] でデータを検索できます。ユーザーがファンクション キーの組み合わせを覚えな
くてもいいように、これらのファンクションを表示させるほうが良いでしょう。たとえば、ボ
タンをクリックしてデータを検索できます。このタスクでは、SALES_ORDER にコントロール
部品と PROC コードを追加して、ボタンをクリックすればデータを操作できるようにします。
5
スタートアップ シェルの作成
ここまで、SALES_ORDER は Uniface 開発環境（UDE）上で実行しています。これはアプリ
ケーションのテストには便利ですが、アプリケーションのユーザーは、UDE の内側からの実行
はできません。
SALES_ORDER を起動するスタートアップ シェル（SALES_APP）を作成します。
6
アプリケーションの配置
SALES_APP を元にデスクトップ上にアイコンを作成します。このアイコンをクリックすると、
アプリケーションが実行されます。
第 1 章 Uniface アプリケーションを初めて開発する 3
1.2 アプリケーションのモデリング
このタスクを実行する前に、「Uniface アプリケーションを初めて開発する」のセクションを読んで
ください。
モデルとエンティティを作成します。
1
コンストラクション ワークスペースで、[Model] アイコンをクリックします。
図 1-1. コンストラクション ワークスペースの [Model] アイコン
2
[New] ボタンをクリックして、新しいモデルを作成します。[Name] フィールドに SALES と入力
します。
3
[Entities] ボタンをクリックします。
4
新しいエンティティを作成します。[Entity Name] フィールドに ORDER と入力します。
このモデルの最初のエンティティの場合は、[New] ボタンはクリックしません。そのかわり、
[Entity Name] フィールドに直接エンティティ名を入力します。モデルにすでにエンティティ
がある場合は、[New] ボタンをクリックして、新しいエンティティを作成します。これは、他
のオブジェクトを作成する場合も同様です。
5
6
4
[Fields] ボタンをクリックして、以下のフィールドを作成します。
Field Name
Label
Widget Type
Data Type
ORDER_ID
Order ID
EditBox
String
DATE
Date
EditBox
Date
TOTAL
Total
EditBox
Floating decimal point
STATUS
Status
DropDownList
String
SHIP_TO
Ship to
EditBox
String
STATUS を選択して、[Widget Type] の横の [>>] ボタンをクリックします。
Uniface Tutorials
7
ドロップダウン リスト STATUS の [Value] と [Representation] を入力します。[OK] ボタンをク
リックします。
第 1 章 Uniface アプリケーションを初めて開発する 5
8
[Define Field:ORDER.SALES] 画面で、[OK] ボタンをクリックしてフォームを閉じます。
9
[Define Entity:Sales] 画面で、ORDER を選択して [Keys] ボタンをクリックします。
10 [Key] フィールドに ORDER_ID を追加して、[OK] ボタンをクリックします。
11 別のエンティティを作成して、ORDERLINE という名前にします。
12 ORDERLINE に、以下のフィールドを定義します。
Field Name
Label
Widget Type
Data Type
LINE_ID
Line ID
EditBox
String
EditBox
String
ORDER_ID
6
Uniface Tutorials
Field Name
Label
Widget Type
Data Type
ITEM_NAME
Item name
EditBox
String
UNIT_PRICE
Unit price
EditBox
Floating decimal point
QUANTITY
Quantity
EditBox
Numeric
LINE_TOTAL
Line total
EditBox
Floating decimal point
[Key ] フィールドは LINE_ID です。
リレーションシップを作成します。
1
[Define Entity: SALES] 画面の [Entity Name] フィールドで、ORDER を選択します。
2
[Relationships] ボタンをクリックします。
3
[Many Entity] カラムの [>>] ボタンをクリックします。
4
ORDERLINE を選択して、[OK] ボタンをクリックします。
5
[Foreign Key] フィールドの [>>] ボタンをクリックします。
6
[Foreign Key] フィールドに ORDER_ID を追加して、[OK] ボタンをクリックします。
第 1 章 Uniface アプリケーションを初めて開発する 7
7
[OK] ボタンをクリックして、[Define Relationship] 画面を閉じます。
これで、1 対 N のリレーションシップを形成する 2 つのエンティティのあるモデルが作成され
ました。[Define Entity: SALES] 画面のメニュー [File]>[Analyze Model]、または [Define
Model] 画面の [Edit]>[Analyze Model] を実行し、モデルの分析を行います。
8
[OK] ボタンをクリックして、開いている画面をすべて閉じ、コンストラクション ワークスペー
スに戻ります。
詳細については、Uniface Library の「Modeling Applications」を参照してください。
1.3 ユーザー インタフェースの作成
このタスクを行う前に、必ず「アプリケーションのモデリング」のタスクを済ませてください。
フォームを作成して、フォームにエンティティをロードします。
1
コンストラクション ワークスペースで、[Form] アイコンをクリックします。
図 1-2. コンストラクション ワークスペースの [Form] アイコン
2
[Open Component] の[Name] フィールドに SALES_ORDER と入力して、[OK] ボタンをクリックし
ます。
8
Uniface Tutorials
以下のようなメッセージのダイアログ ボックスが表示されます。
Specified Component SALES_ORDER does not exist. Create new Component?
（指定されたコンポーネント SALES_ORDER は存在しません。新しいコンポーネントを作成しま
すか）
[Yes] ボタンをクリックします。
以下のようなメッセージのダイアログ ボックスが表示されます。
Use a Component Template?（コンポーネント テンプレートを使いますか）
[No] ボタンをクリックします。
コンポーネント エディタとレイアウト エディタが開いて、SALES_ORDER を編集できます。
第 1 章 Uniface アプリケーションを初めて開発する 9
図 1-3. コンポーネント エディタ
レイアウト
エディタ
コンポーネント
エディタ
ツール
パレット
ステータス
レイアウト エディタが表示されない場合は、[View]>[Layout Editor] を選択するか、コンポー
ネント エディタ ツールバーにあるアイコンをクリックします。
3
レイアウト エディタを前面に表示します。ツール パレットでエンティティ アイコンを選択し、
マウス カーソルを使ってレイアウト エディタ上にフレームを描きます。
フレームの大きさは、すべてのフィールドが入るサイズ（たとえば 80 × 15）にします。
10
Uniface Tutorials
4
作成したフレームをクリックで選択し、ポップアップ メニューから [Rename] を選択します。
5
モデル SALES とエンティティ ORDER を選択して、[OK] ボタンをクリックします。これで、
SALES_ORDER に描かれたエンティティは ORDER になります。
6
ORDER フレームが選択されていることを確認します。メニューから [Edit]>[Load Fields] を選択
します。
7
[Select ALL] ボタンをクリックして、すべてのフィールドを選択し、[OK] ボタンをクリックしま
す。
Entity too small for selected fields というメッセージが表示される場合は、
[Cancel] ボタンをクリックしてエンティティのフレームを広げるか、[Width] フィールドの値
を小さくします。
第 1 章 Uniface アプリケーションを初めて開発する 11
フィールドがエンティティ エリアにロードされます。
8
ツール パレットのエンティティ アイコンを選択します。ORDER の内側に別のエンティティを描
いて、ORDERLINE という名前にします。
9
ORDERLINE フレームを選択して、メニューから [Edit]>[Load Fields] を選択します。
10 すべてのフィールドを選択し、ORDER_ID の選択を解除します。[OK] ボタンをクリックします。
12
Uniface Tutorials
フィールドをロードするために必要があれば、ORDERLINE フレームのサイズを広げてくださ
い。
結果は以下のようになります。
詳細については、Uniface Library の「Defining Components」を参照してください。
1.4 コンパイルとテスト
このタスクを行う前に、必ず「ユーザー インタフェースの作成」のタスクを済ませてください。
第 1 章 Uniface アプリケーションを初めて開発する 13
MY_FORM をコンパイルしてテストします。
1
メニューから、[File]>[Compile] を選択します。
コンパイル結果は画面の下にあるメッセージ ラインに表示されます。[View]>[Message Frame]
を選択すると、メッセージ フレームにある詳細な結果を参照できます。
2
メニューから、[File]>[Test] を選択します。
3
ORDER と ORDERLINE のフィールドにデータを入力します。
4
[Ctrl]+[s] を押して、入力したデータを保存します。
メッセージ ラインに Store successful というメッセージが表示されます。
以下のファンクション キーで、データを操作したり、フォームの実行を終了したりできます。
5
キーの組み合わせ
ファンクション
Ctrl + g
データをクリアします。
Ctrl + r
データを検索します。
Ctrl + a
妥当性チェックをして終了します。
Ctrl + q
無条件で終了します。
Ctrl + k
ファンクション キーのヘルプ メッ
セージを表示します。
[Ctrl]+[q] を押して、実行中のフォームを終了します。
詳細については、Uniface Library の以下のトピックを参照してください。
14
Uniface Tutorials
◆ Compiling Objects
◆ Testing and Debugging
◆ GOLD and SUPER Key Combinations
1.5 ユーザー インタフェースの微調整
このタスクを行う前に、必ず「コンパイルとテスト」のタスクを済ませてください。
レイアウトを微調整して、MY_FORM にファンクションを追加します。
1
SALES_ORDER のレイアウト エディタでマウスを使って、SALES_ORDER のサイズ、エンティ
ティとフィールドのサイズと位置を以下のように調整します。
2
エンティティ ORDERLINE を選択します。右下の隅に、四角いアイコンが表示されています。こ
のアイコンをマウスで選択してドラッグし、以下のようにします。
第 1 章 Uniface アプリケーションを初めて開発する 15
この変更により、テスト環境と実行環境での ORDERLINE の最大表示行数は 4 になります。た
とえば、以下のように表示されます。
3
16
SALES_ORDER の下に別のエンティティを描きます。
Uniface Tutorials
4
この新しいエンティティをクリックして、ポップアップ メニューから [Rename] を選択します。
[Model Name] フィールドに DUMMY と入力して、[OK] ボタンをクリックします。
Application model does not exist（アプリケーション モデルは存在しません）という
メッセージが表示されたら、[OK] ボタンをクリックします。
5
[Entity] の [Name] フィールドに CONTROL と入力して、[OK] ボタンをクリックします。
6
CONTROL のフレーム内をダブルクリックして、プロパティを表示します。
[Define Component Entity Properties: CONTROL.DUMMY] 画面で、[DBMS Path] が Not
in database になっていることを確認します。
プロパティ画面を閉じます。
7
ツール パレットで、ウィジェット メニューから [CommandButton] を選択します。
第 1 章 Uniface アプリケーションを初めて開発する 17
8
コマンド ボタンをエンティティ CONTROL の中にマウスで配置します。
9
そのコマンド ボタンを選択します。ポップアップ メニューから、[Rename] を選択します。
[Name] フィールドに EXIT と入力します。名前の変更フォームを閉じます。
10 [EXIT] コマンド ボタンをダブルクリックして、プロパティを編集します。
18
Uniface Tutorials
11 [Initial Value] フィールドに Exit と入力します。[Characteristics] フィールドで、Control を選
択します。[OK] ボタンをクリックして画面を閉じます。
12 コンポーネント エディタを前面に持ってきます。
13 [Structure] ツリーで、EXIT.CONTROL.DUMMY を選択します。[Triggers] ウィンドウで
<Detail> トリガを選択します。PROC エリアに以下の PROC 命令を追加します。
askmess "Do you want to leave the application?","Yes,No"
if ($status = 1)
exit
endif
第 1 章 Uniface アプリケーションを初めて開発する 19
14 SALES_ORDER をコンパイルします。
以下の警告メッセージは無視して構いません。
Warning: 1016 - (Fields for) entity CONTROL not found in business object
model....generating now. Warning: 1043 - Field EXIT assumed maximum
length of 40.
15 フォームをテストします。[Exit] ボタンをクリックします。
16 Do you want to leave the application? というメッセージが表示されたら、[No] ボタン
をクリックします。[Exit] ボタンをクリックします。
ダイアログ ボックスで、[Yes] ボタンをクリックします。
フォームが終了します。
20
Uniface Tutorials
17 CONTROL エンティティに、以下のコマンド ボタンをの追加して定義します。
コマンド ボタン
<Detail> トリガの PROC 命令
Name: ADD_ORDER
creocc "ORDER", -1
Initial Value: Add an order
Characteristic: Control
Name: ADD_ORDERLINE
if(ORDER_ID.ORDER !="")
Initial Value: Add an order line
creocc "ORDERLINE", -1
Characteristic: Control
ORDER_ID.ORDERLINE=ORDER_ID.ORDER
else
message/info "You need create an %\
order before adding an order line."
endif
Name: SAVE
macro "^STORE"
Initial Value: Save
Characteristic: Control
Name: CLEAR
clear/e "ORDER"
Initial Value: Clear
Characteristic: Control
Name: RETRIEVE
retrieve/e "ORDER"
Initial Value: Retrieve
Characteristic: Control
18 SALES_ORDER をコンパイルしてテストします。
19 [Retrieve] ボタンをクリックします。
第 1 章 Uniface アプリケーションを初めて開発する 21
20 それぞれのコマンド ボタンをクリックして、動作を確認します。
21 フォームを終了します。
詳細については Uniface Library の「Programming in Uniface」を参照してください。
1.6 スタートアップ シェルの作成
このタスクを行う前に、必ず「ユーザー インタフェースの微調整」のタスクを済ませてください。
スタートアップ シェルを作成します。
22
1
メニューから、[Editors]>[Start-up Shell] を選択します。
2
[Shell] の [Name] フィールドに SALES_APP と入力します。
3
[OK] ボタンをクリックします。
Uniface Tutorials
Specified Shell SALES_APP doesn't exist. Create new Shell?（指定されたシェ
ル SALES_APP は存在しません。新しいシェルを作成しますか）というダイアログ ボックスが
表示されたら、[Yes] ボタンをクリックします。
4
[Define Start-up Shell Properties: SALES_APP] フォームで、[Triggers] ボタンをクリックしま
す。
5
Application Execute トリガを選択して、以下の PROC コードを入力します。
activate "SALES_ORDER"
6
[Save Start-up Shell] アイコンをクリックします。
7
[Edit Trigger: Start-up Shell] 画面を閉じます。
8
メニューから [File]>[Compile] を選択して、スタートアップ シェル SALES_APP をコンパイルし
ます。
コンパイルされたスタートアップ シェル sales_app.aps は、
UnifaceInstallationDirectory\project ディレクトリに入っています。
9
[OK] ボタンをクリックして、[Define Start-up Shell Properties:SALES_APP] 画面を閉じます。
10 Uniface を終了します。
詳細については、Uniface Library の「Startup Shells」を参照してください。
1.7 アプリケーションの配置
このタスクを行う前に、必ず「スタートアップ シェルの作成」のタスクを済ませてください。
アプリケーションを配置します。
1
Windows のデスクトップに以下の名前のショートカットを作成します。
My first Uniface application
2
ショートカット My first Uniface application のプロパティを編集します。
第 1 章 Uniface アプリケーションを初めて開発する 23
Target（ターゲット）
UnifaceInstallationDirectory\bin\uniface.exe /asn=..\adm\idf.asn
sales_app
Start in（起動場所）
UnifaceInstallationDirectory\project
UnifaceInstallationDirectory は、Uniface がインストールされているディレクトリです
（D:\uniface など）。UnifaceInstallationDirectory にスペースが含まれる場合は、
"C:\Program Files\compuware\uniface\bin\uniface.exe" や "C:\Program
Files\compuware\uniface\project" のように、パスを引用符で囲む必要があります。
3
SOLID データベースが稼働していることを確認します。稼働していない場合は、Uniface プログ
ラム グループの [Uniface Development Solid] をクリックして起動します。
24
Uniface Tutorials
4
Uniface プログラム グループから [Uniface Development Environment] を起動します。
5
コマンド ラインに、/urr と入力します。
6
[OK] ボタンをクリックします。
トランスクリプト ウィンドウが表示されます。このウィンドウを閉じます。
7
ショートカット My first Uniface application をクリックすると、アプリケーションが起
動します。
詳細については、Uniface Libaray の「Uniface Runtime Repository」を参照してください。
第 1 章 Uniface アプリケーションを初めて開発する 25
26
Uniface Tutorials
第2章
初めて開発した
Uniface アプリケーションを
拡張する
このチュートリアルでは、第 1 章の「Uniface アプリケーションを初めて開発する」で開発した基本
的な Uniface アプリケーションを手順を追って拡張していきます。
前提条件
第 1 章のチュートリアル「Uniface アプリケーションを初めて開発する」を終えてから、このチュー
トリアルに進んでください。
目標
このチュートリアルで、以下の方法を学習します。
◆
ライブラリの作成。ライブラリ内のメニューとグローバル変数の作成。
◆
メニュー項目トリガでの PROC コーディング。これには、ネイティブ ヘルプ ファイルのオープ
ンとフォームの起動が含まれます。
◆
フォーム レベルおよびアプリケーション レベルでのメニュー バーの使用。
◆
カレンダー ウィジェットの作成と、それを使用した日付フィールドの値の設定。
◆
フォームから別のフォームの起動。
◆
サービスの作成とフォームからの呼び出し。
◆
フィールドのシンタックスとレイアウトの定義。アプリケーション モデル エディタでのトリガ
のプログラミング。
このチュートリアルの概要については、2.1「チュートリアルの概要」を参照してください。2.2「ラ
イブラリとメニューの作成」からチュートリアルが開始します。
2.1 チュートリアルの概要
1
ライブラリとメニューの作成
ライブラリ（SALES_LIB）内に、3 つのドロップダウン メニュー（[File]、[Edit]、[Help]）か
らなるメニュー バー（SALES_MB）を作成します。ドロップダウン メニューはそれぞれ、いく
つかのメニュー項目で構成されます。たとえば、[Help] ドロップダウン メニューには [Help] と
[About] があります。
2
フォームとアプリケーションへのメニュー バーの追加
27
SALES_MB を SALES_ORDER に追加します。SALES_ORDER をテストすると、以下のようなメ
ニューが表示されます。
SALES_MB をスタートアップ シェル SALES_APP に追加します。これにより SALES_MB が、アプ
リケーション SALES_APP のすべてのフォームでのデフォルトのメニュー バーになります。
3
ヘルプ ファイルと ABOUT フォームの作成
HTML ヘルプ ファイルを作成します。
About 情報を表示する SALES_ABOUT というフォームを作成します。
4
メニューのプログラミング
各メニュー項目に PROC コードを追加して、実行時に、[Help]>[About] を選択すると
SALES_ABOUT が表示されたり、[Help]>[Help] を選択するとヘルプ ファイルが開くようにしま
す。
5
カレンダーを表示するフォームの作成
カレンダー ウィジェットを含むフォーム CALENDAR を作成します。
MonthCalendar で選択した日付を CALENDAR の呼び出し元に渡すために使用する、グローバ
ル変数 THE_DATE を作成します。
6
作成したカレンダーからの日付の選択
SALES_ORDER フォームを変更して、実行時に、CALENDAR フォームから [Date] フィールドの値
を選択できるようにします。
28
Uniface Tutorials
7
注文の合計値を計算するサービスの作成
ORDER_ID を入力すればその注文の Line total の合計が戻されるオペレーションを持つ、
CALCULATE_SVC というサービスを作成します。
8
フォームからサービスの呼び出し
SALES_ORDER フォームを変更して、注文の [Total] フィールドをダブルクリックすると
CALCULATE_SVC に定義したオペレーションが呼び出され、注文の明細行の合計値が [Total]
フィールドに表示されるようにします。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 29
9
アプリケーション モデルの微調整
[Line total] フィールドのシンタックスとレイアウトのプロパティを定義して、このフィールド
を編集不可にし、値が 200.00 というように表示されるようにします。
モデル エディタで、[Unit Price] フィールドと [Quantity] フィールドの Leave Field トリガ
をプログラミングして、フィールドを離れると [Line total] フィールドが自動的に更新されるよ
うにします。
2.2 ライブラリとメニューの作成
このタスクを行う前に、「初めて開発した Uniface アプリケーションを拡張する」のセクションを読
んでください。
このタスクを行う前に、必ず「Uniface アプリケーションを初めて開発する」のタスクを済ませてく
ださい。
ライブラリとメニューを作成します。
1
Uniface 開発環境で、[Editors]>[Library]>[Properties] を選択します。
2
[New] ボタンをクリックします。[Library Name] フィールドに SALES_LIB と入力して、[OK] ボ
タンをクリックします。
3
[Editors]>[Library]>[Menus] を選択します。
4
[SALES_LIB] を選択し、メニュー バー アイコンを選択します。[Menu] フィールドに
SALES_MB、[Language] フィールドに JPN と入力して、[OK] ボタンをクリックします。
30
Uniface Tutorials
Specified Menu SALES_MB does not exist. Create new Menu?（指定されたメ
ニュー SALES_MB は存在しません。新しいメニューを作成しますか）というメッセージのダ
イアログ ボックスが表示されます。
[Yes] ボタンをクリックします。
5
[Define Menu:SALES_MB.JPN.SALES_LIB(Bar)] 画面の [Item] フィールドに、File と入力し
ます。[Details] セクションの [Referenced Menu] フィールドをクリックして、[Item] フィール
ドの横の [Referenced Menu] フィールドをクリックします。
ドロップダウン メニュー FILE が作成されます。
6
[New] ボタンをクリックして、ドロップダウン メニューをあと 2 つ（EDIT と HELP）作成します。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 31
32
7
[File]>[Save] を選択します。
8
[Item] フィールドで [File] を選択して、[Open] ボタンをクリックします。
9
2 つのオプション メニュー（Save と Exit）を作成します。
Uniface Tutorials
10 [File]>[Save] を選択します。
11 [Menu Path] フィールドで、SALES_MB を選択します。
12 [Item] フィールドで、[Edit] を選択して [Open] ボタンをクリックします。
13 EDIT に対して 2 つのオプション メニュー Clear と Retrieve を作成し、保存します。
14 HELP に対して 2 つのオプション メニュー Help と About を作成し、保存します。
15 再び SALES_MB を選択します。[File]>[Update UOBJ] を選択します。[Menu bars] フィールドに
SALES_MB と入力して、[Close] ボタンをクリックします。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 33
16 [OK] ボタンをクリックして、[Define Menu Bar] 画面を閉じます。
詳細については、Uniface Library の「Defining Libraries and Global Objects」を参照してく
ださい。
2.3 ヘルプ ファイルと ABOUT フォームの作成
このタスクを行う前に、必ず「フォームとアプリケーションへのメニュー バーの追加」のタスクを
済ませてください。
ヘルプ ファイルを作成します。
1
HTML ヘルプ ファイルを作成して、それに sales_help.html という名前を付けます。
テストのため、sales_help.html に以下のタグとテキストをコピーします。
<html>
<body><h1>My Fist Uniface Application</h1>
<p> The help text.....
</body>
</html>
34
Uniface Tutorials
メモ： お手持ちのヘルプ ファイルを使うこともできます。
2
sales_help.html を UnifaceInstallationDirectory\doc\help ディレクトリにコピー
します。
SALES_ABOUT フォームを作成します。
1
新しいフォームを作成して、それに SALES_ABOUT という名前を付けます。
2
[Go To]>[Form Properties] を選択します。
3
[Title] と [Geometry] のプロパティを編集して、[OK] ボタンをクリックします。
4
ツール パレットからエンティティ アイコンを選択し、カーソルをドラッグしてレイアウト エ
ディタにエンティティを描きます。
5
作成したエンティティを DUMMY.DUMMY という名前に変えます。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 35
6
ツール パレットから、[Widget Menu]>[CommandButton] を選択し、エンティティ
DUMMY.DUMMY の中にコマンド ボタンを描きます。それに OK_BUTTON という名前を付けます。
7
OK_BUTTON をダブルクリックして、プロパティ フォームを開きます。[Initial Value] フィールド
に OK と入力して、[OK] ボタンをクリックします。
8
ツール パレットから [Label] を選択して、カーソルを DUMMY.DUMMY の内側にドラッグします。
9
Label エリアを選択し、ポップアップ メニューから [Label]>[Label Text] を選択します。
10 以下のように何かテキストを入力して、[OK] ボタンをクリックします。
11 OK_BUTTON の <Detail> トリガに、以下の PROC コードを入力します。
exit
12 SALES_ABOUT をコンパイルします。
13 SALES_ABOUT を閉じて、コンストラクション ワークスペースに戻ります。
次のタスク：メニューのプログラミング
2.4 メニューのプログラミング
このタスクを行う前に、必ず「ヘルプ ファイルと ABOUT フォームの作成」のタスクを済ませてく
ださい。
メニュー項目をプログラミングします。
1
[Editors]>[Library]>[Menus] を選択します。
2
[Define Menu:SALES_MB.USA.SALES_LIB(Bar)] 画面が開いていない場合は、[File]>[Open]
を選択します。[Menu] フィールドをクリックして、メニュー バー アイコンを選択し、
SALES_MB を選択して、[OK] ボタンをクリックします。
36
Uniface Tutorials
3
[Define Menu:SALES_MB.USA.SALES_LIB(Bar)] 画面で、File を選択して [Open] ボタンをク
リックします。
4
[Define Menu: FILE.USA.SALES_LIB (Drop-down)] 画面で、[Triggers] ボタンをクリックしま
す。
5
[Structure] ウィンドウで Save を選択し、[Triggers] ウィンドウで Option を選択します。PROC
コード エリアに以下の PROC コードを入力します。
macro "^STORE"
6
Exit の Option トリガに、以下の PROC コードを入力します。
exit
7
[Edit Triggers: Menu] 画面で [Save Menu] アイコンをクリックして、[Edit Triggers: Menu] 画面
を閉じます。
8
[File]>[Open] を選択します。
9
[Open Menu] 画面で、メニュー バー アイコンを選択し、[Menu] フィールドの SALES_MB をク
リックします。ドロップダウン メニュー アイコンを選択し、EDIT を選択して [OK] ボタンをク
リックします。
10 EDIT メニューのトリガに、以下の PROC コードを入力します。
メニュー名
トリガ
PROC コード
Clear
Option
clear/e "ORDER.SALES"
Retrieve
Option
retrieve/e "ORDER.SALES"
11 編集内容を保存します。
12 HELP メニューのトリガに、以下の PROC コードを入力します。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 37
メニュー名
トリガ
PROC コード
About
Option
activate "SALES_ABOUT"
Help
Option
help/topic, "sales_help"
13 編集を保存して [OK] ボタンをクリックし、開いている画面をすべて閉じます。
14 Uniface 開発環境を再起動し、コマンド ライン パラメータに /men と入力して、[OK] ボタンをク
リックします。
[IDF Transcript] ウィンドウに *finished* と表示されたら、[IDF Transcript] ウィンドウを
閉じます。
15 Uniface 開発環境で、SALES_ORDER フォームを開きます。[File]>[Test] を選択して、
SALES_ORDER をテストします。
16 SALES_ORDER のメニュー項目をクリックしてみます。たとえば、[Help]>[About] を選択しま
す。
[SALES_ABOUT] フォームが表示されます。
[OK] ボタンをクリックして、SALES_ABOUT を閉じます。
[Help]>[Help] を選択してみます。
sales_help.html ファイルが開きます。
次のタスク：カレンダーを表示するフォームの作成
詳細については Uniface Library の「Programming in Uniface」を参照してください。
2.5 カレンダーを表示するフォームの作成
前のタスク：メニューのプログラミング
このタスクを行う前に、必ず「Uniface アプリケーションを初めて開発する」のタスクを済ませてく
ださい。
グローバル変数を作成します。
1
[Editors]>[Library]>[Variables] を選択します。
2
SALES_LIB を選択します。
3
[Variable Name] フィールドに THE_DATE と入力して、[Data Type] フィールドで Date を選択し
ます。
4
38
[OK] ボタンをクリックして、コンストラクション ワークスペースに戻ります。
Uniface Tutorials
いったん、すべての Uniface 環境を終了させ、Uniface プログラム グループから [Uniface Devel-
5
opment Environment] を起動します。
コマンド ラインに /obj と入力して、[OK] ボタンをクリックします。トランスクリプト ウィン
6
ドウに *finished* と表示されたら、ウィンドウを閉じます。
CALENDAR フォームを作成します。
1
フォームを作成して、それに CALENDAR という名前を付けます。
2
[Go To]>[Component Properties] を選択します。
3
[Library] フィールドに SALES_LIB と入力して、[OK] ボタンをクリックします。
4
CALENDAR にエンティティ DUMMY.DUMMY を描きます。
5
ツール パレットから、[Widget Menu]>[MonthCalendar] を選択します。
6
DUMMY.DUMMY の中にカレンダーを描いて、それに CALENDAR_FLD と名前を付けます。
7
CALENDAR_FLD の下にコマンド ボタンを描いて、OK_BUTTON と名前を付けます。OK_BUTTON を
ダブルクリックして、そのプロパティ画面を開き、[Initial Value] フィールドに OK と入力しま
す。[OK] をクリックして、プロパティ画面を閉じます。
以下のトリガに PROC コードを入力します。
8
オブジェクト名
トリガ
PROC コード
CALENDAR
Execute
$variation="sales_lib"
CALENDAR_FLD=$date
show
edit
OK_BUTTON.DUMMY.DUMMY
<Detail>
;assign the value of the calendar ;to
the global variable
$$THE_DATE=CALENDAR_FLD
exit
CALENDAR をコンパイルします。
9
詳細については、Uniface Library の以下のトピックを参照してください。
◆
/obj
◆
Month Calendar
2.6 CALENDAR からの日付の選択
このタスクを行う前に、必ず「カレンダーを表示するフォームの作成」のタスクを済ませてくださ
い。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 39
CALENDAR を呼び出すために、SALES_ORDER を編集します。
1
SALES_ORDER を開きます。
2
フィールドの位置を並べ替えて、DATE.ORDER フィールドの横にコマンド ボタンを挿入し、
GET_DATE という名前を付けます。
3
GET_DATE をダブルクリックして、[Initial Value] フィールドで >>、[Characteristics] フィール
ドで Control を選択します。
4
GET_DATE の <Detail> トリガに、以下の PROC コードを入力します。
activate "CALENDAR"
DATE.ORDER=$$THE_DATE
5
SALES_ORDER をコンパイルします。
SALES_ORDER から CALENDAR を呼び出します。
40
1
[File]>[Test] を選択して、SALES_ORDER をテストします。
2
SALES_ORDER のメニューから、[Edit]>[Retrieve] を選択します。
3
注文を選択して、[>>] ボタンをクリックします。CALENDAR が表示され、日付を選択できます。
Uniface Tutorials
4
たとえば 2006 年 8 月 22 日という日付を選択し、[OK] ボタンをクリックします。
グローバル変数 THE_DATE が使用されて、選択した日付が Date フィールドに表示されます。
詳細については、Uniface Library の「activate」を参照してください。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 41
2.7 注文の合計数を計算するサービスの作成
前のタスク：カレンダーを表示するフォームの作成
このタスクを行う前に、必ず「Uniface アプリケーションを初めて開発する」のタスクを済ませてく
ださい。
サービスを作成します。
1
コンストラクション ワークスペースで、[Service] アイコンをクリックします。
2
[Component Name] フィールドに CALCULATE_SVC を入力して、[OK] ボタンをクリックします。
以下のメッセージが表示されます。
Specified Component CALCULATE_SVC does not exist. Create new Component?
[Yes] ボタンをクリックします。
以下のメッセージが表示されます。
Use a Component Template?
[No] ボタンをクリックします。
3
コンポーネント エディタの [Structure] ウィンドウで、CALCULATE_SVC を選択します。
4
ポップアップ メニューから、[Insert Entity]>[As child] を選択します。
5
挿入されたエンティティを選択して、それを ORDERLINE.SALES という名前にします。
6
CALCULATE_SVC の Operations トリガに、以下の PROC コードを記述します。
operation get_total
param
string THE_NUMBER : IN
Float
TOTAL
: OUT
endparams
clear
ORDER_ID.ORDERLINE=THE_NUMBER
retrieve
42
Uniface Tutorials
TOTAL=0.0
$1=1
while($1 <= $hits("ORDERLINE"))
setocc "ORDERLINE", $1
TOTAL=TOTAL + LINE_TOTAL.ORDERLINE
$1=$1+1
endwhile
end
7
CALCULATE_SVC をコンパイルします。
8
サービスのコンポーネント エディタを閉じます。
詳細については、Uniface Library の以下のトピックを参照してください。
◆
Services
◆
Operations
2.8 注文の合計数を取得するサービスの呼び出し
このタスクを行う前に、必ず「注文の合計数を計算するサービスの作成」のタスクを済ませてくださ
い。
サービス オペレーションを呼び出すために、SALES_ORDER を編集します。
1
SALES_ORDER を開きます。
SALES_ORDER のレイアウト エディタが表示されていない場合は、[View]>[Layout Editor] を選
択します。
2
レイアウト エディタで TOTAL を選択し、ポップアップ メニューから [Field]>[Widget
Properties] を選択します。
3
[Define Edit Box Properties] 画面で、[Double Click] フィールドを Detail に設定します。
4
TOTAL の <Detail> トリガに、以下の PROC コードを入力します。
If(ORDER_ID.ORDER != "")
activate "CALCULATE_SVC".get_total(ORDER_ID.ORDER,TOTAL)
endif
5
SALES_ORDER をコンパイルします。
SALES_ORDER からのオペレーションの呼び出しをテストします。
1
[File]>[Test] を選択して、SALES_ORDER をテストします。
2
[Retrieve] ボタンをクリックするか、[Edit]>[Retrieve] を選択して、検索を実行します。
3
注文を選択して、Total フィールドをダブルクリックします。
選択した注文の明細行の合計値が、Total フィールドに追加されます。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 43
詳細については、Uniface Library の「activate」を参照してください。
2.9 アプリケーション モデルの拡張
前のタスク：注文の合計数を取得するサービスの呼び出し
このタスクを行う前に、必ず「Uniface アプリケーションを初めて開発する」のタスクを済ませてく
ださい。
フィールドのシンタックスとレイアウトを定義します。
1
Uniface 開発環境で、[Editors]>[Model] を選択します。
2
SALES を選択して、[Entities] ボタンをクリックします。
3
ORDERLINE を選択して、[Fields] ボタンをクリックします。
4
[Field Name] フィールドで LINE_TOTAL を選択します。[Syntax] フィールドで Shorthand を
選択し、[>>] ボタンをクリックします。
44
Uniface Tutorials
5
[Define Field Syntax] フォームで、[Edit] と [Prompt] の選択を解除して、[OK] ボタンをクリック
します。
6
[Layout] フィールドで Shorthand を選択し、[>>] ボタンをクリックします。
7
[Define Field Layout] 画面の [Format] フィールドで、zzzP99 と入力して、[OK] ボタンをクリッ
クします。結果は以下のようになります。
第 2 章 初めて開発した Uniface アプリケーションを拡張する 45
フィールドのトリガをプログラミングします。
1
[Define Field: ORDERLINE.SALES] 画面で、[Triggers] ボタンをクリックします。
2
以下の PROC コードを入力します。
フィールド名
トリガ
PROC コード
UNIT_PRICE
Leave Field
LINE_TOTAL=UNIT_PRICE * QUANTITY
QUANTITY
Leave Field
LINE_TOTAL=UNIT_PRICE * QUANTITY
3
[Save] アイコンをクリックします。
4
[OK] ボタンをクリックして、トリガ エディタと、開いている画面をすべて閉じます。
フォームをテストします。
1
SALES_ORDER フォームを開きます。
2
コンポーネント エディタで、UNIT_PRICE と QUANTITY の Leave Field トリガをチェックしま
す。
アプリケーション モデル エディタで入力された PROC コードは、コンポーネントに継承され
ます。
46
Uniface Tutorials
3
[File]>[Compile] を選択して、SALES_ORDER をコンパイルします。
4
[File]>[Test] を選択して、SALES_ORDER をテストします。
5
[Retrieve] ボタンをクリックして、すべての注文とその明細行を検索します。
Line total フィールドの値は、そのレイアウト定義（95.00 など）を使用して表示されます。
6
注文行を選択して、Line total フィールドを変更してみます。
シンタックス定義で表示のみと定義されているため、変更できません。
7
Unit price または Quantity のフィールドを変更して、フィールドを離れます。
Line total フィールドが更新されます。
詳細については、Uniface Library の以下のトピックを参照してください。
◆
Field Syntax
◆
Field Layout
第 2 章 初めて開発した Uniface アプリケーションを拡張する 47
48
Uniface Tutorials
第3章
Uniface Web アプリケーションを
初めて開発する
このチュートリアルでは、商品の注文とその明細行を示す Web アプリケーションを順を追って作成
していきます。作成したアプリケーションは、Web 環境で注文とその明細行の作成、検索、更新が
できます。
このチュートリアルは、Uniface の Web 開発を初めてする開発者が対象です。Uniface 開発環境で、
Web アプリケーションを作成してテストするために十分役立つ方法が提供されています。Uniface
Web アプリケーションについての詳細は、Uniface Library の「Theme: Web Applications」を参照
してください。
前提条件
◆
Uniface が Microsoft Windows プラットフォームにインストールされていて、SOLID データ
ベースが使用されている。他のデータベースでも、適切に設定されていれば使用できます。
◆
UnifaceInstallDir\adm に入っている構成ファイルが、インストール後に変更されていない。
◆
Uniface プログラム グループの Solid データベースが起動している。
◆
Uniface プログラム グループの Uniface 開発環境が起動している。
◆
Uniface 開発環境の基本的な知識がある。たとえば「Uniface アプリケーションを初めて開発す
る」のチュートリアルを終了している。
目標
このチュートリアルで、以下の方法を学習します。
◆
エンティティ フィールドの作成。フィールドのグラフィック表示は、HTML コントロールとし
て定義します。
◆
Web テスト環境の設定。
◆
サーバー ページ コンポーネントの作成。
◆
レイアウト エディタを使用した、Web アプリケーションのレイアウトの作成。エンティティな
どのオブジェクトをサーバー ページに挿入します。
◆
サーバー ページのトリガでの PROC コーディング。
◆
パラメータを使用した、サーバー ページ間の呼び出し。
◆
UDE（Uniface 開発環境）でのサーバー ページのテスト。
このチュートリアルの概要については、3.1「チュートリアルの概要」を参照してください。3.2「ア
プリケーションのモデリング」からチュートリアルが開始します。
49
3.1 チュートリアルの概要
1
アプリケーションのモデリング
2 つのエンティティ（ORDER と ORDERLINE）のあるモデル（SALES）を作成します。エンティ
ティ フィールドのグラフィック表示は、Web アプリケーション以外で使われるウィジェットで
はなく、HTML コントロールです。ORDER と ORDERLINE 間のリレーションシップを作成し
て、1 つの注文に複数の明細行を付けるようにします。
2
サーバー ページの作成
Uniface サーバー ページ（ORDER_LIST）を作成します。サーバー ページ レイアウト エディ
タを使用して、ORDER_LIST にオブジェクトを挿入し、ORDER_LIST の色やサイズを設定しま
す。
3
テスト プリファレンスの設定とサーバー ページのテスト
テスト モードのプリファレンスを設定したあと、開発環境内で ORDER_LIST をテストします。
4
50
サーバー ページの設計とプログラミング
Uniface Tutorials
ORDER_LIST にエンティティORDER を作成します。作成したエンティティに ORDER のフィール
ドをロードします。ORDER_LIST にリンクとボタンを挿入します。PROC 命令を記述して、
ORDER の検索、作成、更新、保存ができるようにします。
5
データを使用したサーバー ページのテスト
ORDER_LIST をテストして、いくつかの注文データを作成します。結果を保存したり、検索し
たりします。
第 3 章 Uniface Web アプリケーションを初めて開発する 51
6
明細サーバー ページの作成
注文とその明細行が入った、別のサーバー ページ（ORDER_DETAILS）を作成します。
7
サーバー ページからの明細の呼び出し
ORDER エンティティに、Non-Database フィールドのハイパーリンク（EDIT）を作成します。
EDIT は、サーバー ページ ORDER_DETAILS にリンクします。
アプリケーションをテストします。ORDER_LIST ページで、注文の Edit リンクをクリックし
て ORDER_DETAILS ページに移ります。そこで選択した注文とその明細行の作成と更新ができ
ます。
52
Uniface Tutorials
3.2 アプリケーションのモデリング
このタスクを実行する前に、「Uniface Web アプリケーションを初めて開発する」のセクションを読
んでください。
Web アプリケーションに、アプリケーション モデルを作成します。
1
モデルを作成して、それに SALES という名前を付けます。
メモ： このモデルは、第 1 章のチュートリアル「Uniface アプリケーションを初めて開発する」
で作成したものと同じです。このモデルがすでにある場合は、HTML コントロールを使用した
各フィールドの詳細な編集のみを行ってください。
第 2 章「初めて開発した Uniface アプリケーションを拡張する」のチュートリアルが終わって
いる場合は、LINE_TOTAL フィールドの [Syntax] を Shorthand から Template に戻してくだ
さい。
2
モデル SALES にエンティティを作成して、ORDER という名前を付けます。
3
エンティティ ORDER に、以下のフィールドを定義します。
第 3 章 Uniface Web アプリケーションを初めて開発する 53
4
フィールド名
ラベル
HTML コントロール
データ タイプ
ORDER_ID
Order ID
Text
String
DATE
Date
Text
Date
TOTAL
Total
Text
Floating decimal point
STATUS
Status
Menu
String
SHIP_TO
Ship to
Text
String
[Define Field: ORDER.SALES] 画面で、STATUS を選択して、[HTML Control: Menu] フィール
ドの横の [>>] ボタンをクリックします。
5
以下の [Value]（値）と [Representation]（表示）のリストを入力して、[OK] ボタンをクリック
します。
54
Uniface Tutorials
6
[Key] フィールドで ORDER_ID を選択します。
7
別のエンティティを作成して、ORDERLINE という名前にします。
8
ORDERLINE に、以下のフィールドを定義します。
フィールド名
ラベル
HTML コントロール
データ タイプ
LINE_ID
Line ID
Text
String
Text
String
ORDER_ID
9
ITEM_NAME
Item name
Text
String
UNIT_PRICE
Unit price
Text
Floating decimal point
QUANTITY
Quantity
Text
Numeric
LINE_TOTAL
Line total
Text
Floating decimal point
[Key] フィールドで LINE_ID を選択します。
10 エンティティ リレーションシップを以下のように定義します。
1 側エンティティ
N 側エンティティ
フォーリン キー
ORDER
ORDERLINE
ORDER_ID.ORDERLINE
11 SALES を分析します。開いているすべての画面を [OK] をクリックして終了します。
第 3 章 Uniface Web アプリケーションを初めて開発する 55
詳細については、Uniface Library の以下のトピックを参照してください。
◆
Modeling Applications
◆
HTML Controls
3.3 サーバー ページの作成
このタスクを行う前に、必ず「アプリケーションのモデリング」のタスクを済ませてください。
サーバー ページを作成して、レイアウトします。
1
コンストラクション ワークスペースで、[Server Page] アイコンをクリックします。
2
[Component Name] フィールドに ORDER_LIST と入力して、[OK] ボタンをクリックします。
以下のメッセージが表示されます。
Specified Component ORDER_LIST does not exist. Create new Component?
（指定されたコンポーネント ORDER_LIST が存在しません。新しいコンポーネントを作成しますか）
[Yes] ボタンをクリックします。
56
Uniface Tutorials
以下のメッセージが表示されます。
Use a Component Template?（コンポーネントのテンプレートを使いますか）
[No] ボタンをクリックします。
次に、サーバー ページのコンポーネント エディタとレイアウト エディタが開き、ORDER_LIST
を編集できます。
コンポーネント
エディタ
メニュー
フォーマット
ツールバー
編集エリア
編集モードツールバー
ステータスバー
レイアウト エディタが表示されない場合は、Uniface 開発環境のメニューから [View]>[Layout
Editor] を選択します。
レイアウト エディタは、メニュー、フォーマット ツールバー、編集エリア、編集モード ツール
バー、ステータスバーで構成されています。
3
レイアウト エディタの編集モード ツールバーにある [HTML Tags] をクリックします。
4
レイアウト エディタでのカーソルの位置合わせが難しい場合は、以下の手順で行います。
◇
カーソルを FORM タグの上に移動するには、以下のようにします。
1
編集エリアで FORM タグをクリックするか、またはステータスバーの <form> タグを選
択します。
第 3 章 Uniface Web アプリケーションを初めて開発する 57
2
キーボードの左矢印キーを押します。
3
[Enter] キーを押します。[Enter] キーを数回押すと、BODY と FORM の間にスペースが
追加されます。
◇
カーソルを FORM タグの下に移動するには、以下のようにします。
1
編集エリアで FORM タグをクリックするか、またはステータスバーの <form> タグを選
択します。
2
3
キーボードの右矢印キーを押します。
[Enter] キーを押します。[Enter] キーを数回押すと、スペースが追加され、カーソルを
FORM の下に簡単に置くことができます。
◇
FORM タグ エリアにさらにスペースを追加するには、以下のようにします。
1
編集エリアで FORM タグの内側にカーソルを移動します。
2
[Enter] キーを数回押します。
それでもカーソルを希望する場所に置けない場合は、編集モード ツールバーの [Source] をク
リックして、カーソルを置きたいオブジェクトの後ろに <br> タグを挿入します。
メモ： レイアウト エディタのメニューから [View]>[Block outline] を選択すると、オブジェクト
のエリアがマークされます。これにより、オブジェクトの内側にカーソルを置きやすくなりま
す。
5
カーソルを FORM タグの上に移動します。
6
レイアウト エディタのメニューから、[Insert]>[Image] を選択します。
7
[Image properties] フォームで、イメージ ファイルを選択します。Don't use alternate
text を選択します。[OK] ボタンをクリックします。
メモ： イメージのリンクには相対パスを使う方が適切です。たとえば、Uniface のデフォルト
Web 設定で、イメージ ファイル image1.jpg は UnifaceInstallDir\apache-tomcat5.5.15\webapps\uniface\images\ というディレクトリに入っています。[Image
Location] フィールドには、絶対パスではなく ../../images/image1.jpg と入力できます。
8
カーソルをイメージのすぐ右に置きます。フォーマット ツールバーから Heading 1 を選択し
て、以下のように入力します。
Order-Orderline
結果は以下のようになります。
58
Uniface Tutorials
9
レイアウト エディタのメニューから、[Insert]>[Horizontal Line] を選択して、イメージと見出
しテキストの下に線を挿入します。
10 フォーマット ツールバーから、背景色の選択アイコンをクリックします。背景色を選択します。
11 見出しテキスト Order-Orderline を選択します。フォント サイズを大きくするアイコンまた
は小さくするアイコンをクリックして、テキストのサイズを調整します。テキストの色選択ア
イコンをクリックして、テキストの色を変えます。
12 編集モード ツールバーの [Preview] をクリックします。
Preview モードでは以下のように表示されます。
13 編集モード ツールバーの [HTML Tags] をクリックします。カーソルを FORM タグ エリアの中に
移動します。レイアウト エディタのメニューから、[Insert]>[Entity] を選択します。
第 3 章 Uniface Web アプリケーションを初めて開発する 59
14 [Name] フィールドに CTRL.DUMMY と入力して、[OK] ボタンをクリックします。
結果は以下のようになります。
15 サーバー ページ レイアウト エディタ、またはサーバー ページ コンポーネント エディタで、
[Refresh Structure] アイコンをクリックします。
コンポーネントの Structure ツリーに、作成したエンティティ CTRL.DUMMY が追加されていま
す。
16 Uniface 開発環境のメニューから、[File]>[Compile] を選択します。詳細については、Uniface
Library の「Server Pages」を参照してください。
60
Uniface Tutorials
3.4 テスト プリファレンスの設定とサーバー ページのテスト
このタスクを行う前に、必ず「サーバー ページの作成」のタスクを済ませてください。
テスト プリファレンスを設定して、サーバー ページをテストします。
1
Uniface 開発環境のメニューから、[Utilities]>[Preferences]>[Test Mode] を選択します。
[Component Editor Test Mode] を選択します。
[Test URL] フィールドに、http://localhost:8080/uniface/wrd/run と入力します。
[Test Browser] フィールドで、ブラウザ（IEXPLORE.EXE など）を選択します。
[Show Server Page Dialog] をオンにします。
[OK] ボタンをクリックします。
2
Uniface ルーターが実行していることを確認します。
第 3 章 Uniface Web アプリケーションを初めて開発する 61
これは、[ コントロール パネル ] の [ サービス ]（または [ コントロール パネル ]>[ 管理ツール ]>
[ サービス ]）で確認できます。[ サービス ] は以下のようなウィンドウです。
URouter の [ 状態 ] が「開始」になっている必要があります。
「開始」になっていない場合は、
ポップアップ メニューで [ 開始 ] を選択します。[ 状態 ] がすでに「開始」になっている場合
は、ポップアップ メニューで [ 再起動 ] を選択して再起動します。URouter を再起動すると、
Uniface サーバー環境が新しくなります。
3
Uniface プログラム グループから [WRD Start] アイコンをクリックして、Tomcat を起動します。
4
Uniface 開発環境のメニューから、[File]>[Test] を選択します。
Component definition was modified since last compilation. Do you want to
test or compile before testing?（最後のコンパイル後にコンポーネントの定義が変更
されています。すぐにテストしますか。またはテストの前にコンパイルしますか）というメッ
セージのダイアログ ボックスが表示される場合は、[Compile] ボタンをクリックします。
5
以下のダイアログ ボックスが表示されたら、[OK] ボタンをクリックします。
結果は以下のようになります。
62
Uniface Tutorials
6
ブラウザを閉じます。
詳細については、Uniface Library の「Testing Server Pages」を参照してください。
3.5 ORDER_LIST の設計とプログラミング
このタスクを行う前に、必ず「テスト プリファレンスの設定とサーバー ページのテスト」のタスク
を済ませてください。
サーバー ページ ORDER_LIST を設計して、プログラムします。
1
ORDER_LIST のレイアウト エディタで、エンティティ CTRL.DUMMY の内側にカーソルを移動し
ます。レイアウト エディタのメニューから、[Insert]>[Link] を選択します。
2
[Link Properties] 画面で、以下の値を入力して [OK] ボタンをクリックします。
第 3 章 Uniface Web アプリケーションを初めて開発する 63
3
カーソルを Home リンクの横に置きます。レイアウト エディタのメニューから、
[Insert]>[Subst] を選択します。
4
[XSubst Properties] 画面で、以下の値を設定して [OK] ボタンをクリックします。
結果は以下のようになります。
64
Uniface Tutorials
レイアウト エディタの編集モード ツールバーにある [Source] をクリックします。この画面で、
5
ソース ファイルを編集できます。
RETRIEVE.CTRL.DUMMY ボタンのソース コードをチェックします。ソース コードは以下のよう
6
になっています。
<x-subst name="RETRIEVE.CTRL.DUMMY"
type="submit"><input name="RETRIEVE.CTRL.DUMMY"
value="Retrieve" type="submit"></x-subst>
メモ： この名前は完全修飾名でなければなりません。以下が含まれている必要があります。
◆
オブジェクト名（RETRIEVE など）
◆
そのエンティティ名（CTRL など）
◆
そのモデル名（DUMMY など）
7
編集モード ツールバーの [HTML Tags] をクリックします。
8
[Insert]>[Subst] を使用して、さらに 2 つの [SUBST] ボタンを追加します。
名前
タイプ
値
NEW.CTRL.DUMMY
Button
New
SAVE.CTRL.DUMMY
Button
Save
結果は以下のようになります。
第 3 章 Uniface Web アプリケーションを初めて開発する 65
9
HTML ソースをチェックし、追加されたボタンが HTML ソース ファイルとして正しいかどうか
を確認します。
10 コンポーネント エディタで、[Refresh Structure] アイコンをクリックします。
11 レイアウト エディタで、[Insert]>[Horizontal Line] を選択して、エンティティ CTRL.DUMMY の
下に水平線を挿入します。
12 水平線の下の FORM タグの中に、カーソルを置きます。
13 [Insert]>[Entity] を選択して、エンティティ ORDER.SALES を挿入します。
14 HTML ソースをチェックします。<form> タグの中に以下の行が含まれているはずです。
<x-entity name="ORDER.SALES"> </x-entity>
15 [Refresh Structure] アイコンをクリックします。
結果は以下のようになります。
16 コンポーネント エディタで、ORDER.SALES を選択します。Uniface 開発環境のメニューから、
[Edit]>[Load Fields] を選択します。
66
Uniface Tutorials
17 すべてのフィールドを選択し、[tabular] レイアウトをクリックして、[Maximum occurrences]
を 50 に設定します。[At least one occurrence] の選択を解除して、[OK] ボタンをクリックしま
す。
[Normal] 編集モードで表示すると、結果は以下のようになります。
第 3 章 Uniface Web アプリケーションを初めて開発する 67
結果の表示が良くない場合は、編集モード ツールバーで [Preview] をクリックしたあと、
[HTML Tags] をクリックします。
18 [Refresh Structure] アイコンをクリックします。
19 Uniface 開発環境のメニューから、[Go To]>[Component Variables] を選択します。コンポーネン
ト変数 MESS を String データ タイプで作成します。
20 ボタンの <Detail> トリガに、以下のように PROC コードを記述します。
ボタン名
<Detail> トリガの PROC 命令
RETRIEVE.CTRL.DUMMY
clear/e "ORDER"
retrieve/e "ORDER"
$MESS$="There are %%$hits("ORDER") records."
NEW.CTRL.DUMMY
creocc "ORDER", -1
DATE=$date
SAVE.CTRL.DUMMY
store/e "ORDER"
if($status !=0)
$MESS$="Store error."
else
$MESS$="Store successful."
commit
endif
clear/e "ORDER"
retrieve/e "ORDER"
68
Uniface Tutorials
21 ORDER_LIST の Set State トリガで、Uniface が生成した PROC コードの終わりに、以下の行を
追加します。
$webinfo("output")="%%$webinfo("output")%%<br>%%$MESS$%%%"
22 ORDER_LIST をコンパイルします。
詳細については、Uniface Library の「Constructing Server Pages」を参照してください。
3.6 データを使った ORDER_LIST のテスト
このタスクを行う前に、必ず「サーバー ページの設計とプログラミング」のタスクを済ませてくだ
さい。
データを使って、ORDER_LIST をテストします。
1
Uniface ルーターと Tomcat が実行されていることと、サーバー ページ ORDER_LIST が開いてい
ることを確認します。
2
Uniface 開発環境のメニューから、[File]>[Test] を選択します。[New] ボタンをクリックして、注
文を作成します。[Save] ボタンをクリックして、注文を保存します。これを繰り返し、いくつ
かの注文を作成して保存します。以下に例を示します
3
既存の Order ID（たとえば、ORD-1）で、新たに注文を作成してみます。[Save] ボタンをクリッ
クします。ページの最後に、Store error. という文字が表示されます。
第 3 章 Uniface Web アプリケーションを初めて開発する 69
4
リンク [Home] をクリックし、[Retrieve] ボタンなどをテストします。
5
ブラウザを閉じます。
3.7 ORDER_DETAILS サーバー ページの作成
このタスクを行う前に、必ず「データを使ったサーバー ページのテスト」のタスクを済ませてくだ
さい。
選択した注文とその明細行のサーバー ページを作成します。
70
1
新しいサーバー ページを作成して、それに ORDER_DETAILS という名前を付けます。
2
レイアウト エディタで、以下のオブジェクトを挿入します。
名前
Insert
Type
HOME
Link
CTRL.DUMMY
Entity
Uniface Tutorials
Subst
Type
値
親
http://
localhost:8080/
uniface/wrd/run/
order_list
Body tag
Form tag
名前
Insert
Type
Subst
Type
値
親
NEW.CTRL.DUMMY
Subst
Button
Add an orderline
CTRL.DUMMY
SAVE.CTRL.DUMMY
Subst
Button
Save
CTRL.DUMMY
ORDER.SALES
Entity
Form tag
3
[Refresh Structure] アイコンをクリックします。
4
コンポーネント エディタで、ORDER.SALES を選択します。Uniface 開発環境のメニューから、
[Edit]>[Load Fields] を選択します。
5
すべてのフィールドを選択し、[Maximum occurrences] を 1 に設定して、[vertical] レイアウトを
クリックします。[OK] ボタンをクリックします。
6
レイアウト エディタで、ORDER.SALES の内側にエンティティ ORDERLINE.SALES を挿入しま
す。
7
[Refresh Structure] アイコンをクリックします。
8
コンポーネント エディタで、ORDERLINE.SALES を選択して、メニューから [Edit]>[Load
Filelds] を選択します。
9
ORDER_ID 以外のすべてのフィールドを選択します。[Maximum occurrences] を 30 に設定して、
[tabular] レイアウトをクリックします。[At least one occurrence] の選択を解除して、[OK] ボ
タンをクリックします。
10 レイアウト エディタで、レイアウトを編集します。たとえば、タイトルを追加したり、水平線
を挿入したり、色を変えたりします。
第 3 章 Uniface Web アプリケーションを初めて開発する 71
ORDER エンティティと ORDERLINE エンティティのソース コードは、以下のようになっています。
<x-entity name="ORDER.SALES">
<table>
<x-occurrence max="1" start="first" atleastone="1" name="ORDER.SALES"><tr>
<td>
<table>
<tbody>
<tr>
<th>
<x-subst name="ORDER_ID.ORDER.SALES" type="label">Order ID</x-subst></th>
<td>
<x-subst size="40" sync="1" type="text" name="ORDER_ID.ORDER.SALES">
<input size="40" SYNC="1" value="" name="ORDER_ID.ORDER.SALES" type="text" />
</x-subst>
</td>
</tr>
<tr>
<th><x-subst name="DATE.ORDER.SALES" type="label">Date</x-subst></th>
<td>
<x-subst size="20" sync="1" type="text" name="DATE.ORDER.SALES">
<input size="20" SYNC="1" value="" name="DATE.ORDER.SALES" type="text" />
</x-subst></td>
</tr>
<tr>
<th><x-subst name="TOTAL.ORDER.SALES" type="label">Total</x-subst></th>
72
Uniface Tutorials
<td><x-subst size="20" sync="1" type="text" name="TOTAL.ORDER.SALES">
<input size="20" SYNC="1" value="" name="TOTAL.ORDER.SALES" type="text" />
</x-subst></td>
</tr>
<tr>
<th><x-subst name="STATUS.ORDER.SALES" type="label">Status</x-subst></th>
<td><x-subst sync="1" size="1" type="select" name="STATUS.ORDER.SALES">
<select SYNC="1" size="1" name="STATUS.ORDER.SALES">
<option value="entered">Entered</option>
<option value="not delivered">Not delivered</option>
<option value="delivered">Delivered</option>
<option value="canceled">Canceled</option>
</select>
</x-subst></td>
</tr>
<tr>
<th><x-subst name="SHIP_TO.ORDER.SALES" type="label">Ship to</x-subst></th>
<td><x-subst size="40" sync="1" type="text" name="SHIP_TO.ORDER.SALES">
<input size="40" SYNC="1" value="" name="SHIP_TO.ORDER.SALES" type="text" />
</x-subst></td>
</tr>
</tbody>
</table>
</td>
</tr>
</x-occurrence>
</table>
<br />
<x-entity name="ORDERLINE.SALES">
<table>
<tbody>
<tr>
<th><x-subst name="LINE_ID.ORDERLINE.SALES" type="label">Line ID</x-subst></th>
<th><x-subst name="ITEM_NAME.ORDERLINE.SALES" type="label">Item name</x-subst></th>
<th><x-subst name="UNIT_PRICE.ORDERLINE.SALES" type="label">Unit price</x-subst></th>
<th><x-subst name="QUANTITY.ORDERLINE.SALES" type="label">Quantity</x-subst></th>
<th><x-subst name="LINE_TOTAL.ORDERLINE.SALES" type="label">Line total</x-subst></th>
</tr>
<x-occurrence max="30" start="first" name="ORDERLINE.SALES"><tr>
<td><x-subst size="40" sync="1" type="text" name="LINE_ID.ORDERLINE.SALES">
<input size="40" SYNC="1" value="" name="LINE_ID.ORDERLINE.SALES" type="text" />
</x-subst></td>
<td><x-subst size="40" sync="1" type="text" name="ITEM_NAME.ORDERLINE.SALES">
<input size="40" SYNC="1" value="" name="ITEM_NAME.ORDERLINE.SALES" type="text" />
</x-subst></td>
<td><x-subst size="20" sync="1" type="text" name="UNIT_PRICE.ORDERLINE.SALES">
<input size="20" SYNC="1" value="" name="UNIT_PRICE.ORDERLINE.SALES" type="text"/>
</x-subst></td>
第 3 章 Uniface Web アプリケーションを初めて開発する 73
<td><x-subst size="20" sync="1" type="text" name="QUANTITY.ORDERLINE.SALES">
<input size="20" SYNC="1" value="" name="QUANTITY.ORDERLINE.SALES" type="text" />
</x-subst></td>
<td><x-subst size="20" sync="1" type="text" name="LINE_TOTAL.ORDERLINE.SALES">
<input size="20" SYNC="1" value="" name="LINE_TOTAL.ORDERLINE.SALES" type="text"/>
</x-subst></td>
</tr>
</x-occurrence>
</tbody>
</table>
</x-entity>
<br />
</x-entity>
11 [Refresh Structure] アイコンをクリックします。
12 ORDER_DETAILS をコンパイルします。
詳細については、Uniface Library の「Constructing Server Pages」を参照してください。
3.8 SALES_ORDER からの ORDER_DETAILS の呼び出し
このタスクを行う前に、必ず「ORDER_DETAILS サーバー ページの作成」のタスクを済ませてく
ださい。
SALES_ORDER から ORDER_DETAILS を呼び出します。
1
Uniface 開発環境のメニューから、[Editors]>[Model] を選択します。SALES を選択して、
[Entities] ボタンをクリックします。ORDER を選択して、[Fields] ボタンをクリックします。
2
[Define Field: ORDER.SALES] フォームで、以下のように指定して新しいフィールドを追加し
ます。
◇ Field Name: EDIT
◇ Label: Edit
◇ HTML Control: Hyperlink
◇ Characteristic: Non-database
3
EDIT を選択して、[HTML Control: Hyperlink] フィールドの横の [>>] ボタンをクリックします。
4
以下のデータを入力します。
◇ Link Text: Edit
◇ Link Value: http://localhost:8080/uniface/wrd/run/
order_details.sales_details?%%ORDER_ID
74
Uniface Tutorials
[OK] ボタンをクリックします。
5
開いている画面をすべて閉じます。
6
ORDER_LIST のレイアウト エディタを開きます。
7
ORDER.SALES にあるテーブルの最初の列を選択します。
選択した列の上と左端に 3 つのアイコンが表示されます。
左（または右）の矢印をクリックすると、選択した列の前（または後ろ）に、新しい列を追加
できます。選択した列を削除するには、中央のアイコンをクリックします。選択したセルの左
端にあるアイコンを使用して、行の追加や削除を行います。
[Table]>[Insert] を選択する方法でも、セルを編集できます。
8
左矢印をクリックして、新しい列を追加します。
第 3 章 Uniface Web アプリケーションを初めて開発する 75
9
新しく挿入した列を選択し、EDIT.ORDER.SALES という Subst を Type: Hyperlink を指定して
挿入します。
10 [Refresh Structure] アイコンをクリックして、ストラクチャをリフレッシュします。
11 ORDER_LIST をコンパイルします。
12 ORDER_DETAILS のコンポーネント エディタで、以下のトリガに PROC コードを記述します。
オブジェクト名
トリガ名
PROC コード
ORDER_DETAILS
Operations
operation sales_details
ORDER_ID.ORDER=$webinfo("input")
retrieve/e "ORDER"
webgen
end
NEW.CTRL.DUMMY
<Detail>
creocc "ORDERLINE",-1
SAVE.CTRL.DUMMY
<Detail>
store/e "ORDER"
if($status == 0)
commit
endif
13 ORDER_DETAILS をコンパイルします。
14 Uniface ルーターと Tomcat が実行されていることを確認します。
15 サーバー ページ ORDER_LIST を開きます。Uniface 開発環境のメニューから、[File]>[Test] を
選択します。
16 [Retrieve] ボタンをクリックします。
結果は以下のようになります。
76
Uniface Tutorials
17 [Edit] リンクをクリックして、注文を 1 つ選択します（ORD-1 など）。
これは ORDER_DETAILS サーバー ページにリンクされていて、選択した注文が表示されます。
18 [Add an orderline] ボタンをクリックします。フィールドにデータを入力して、[Save] ボタンを
クリックします。これを繰り返して、注文の明細行を追加していきます。以下に例を示します。
第 3 章 Uniface Web アプリケーションを初めて開発する 77
19 [Home] リンクをクリックします。
ORDER_LIST ページが表示されます。[Retrieve] ボタンをクリックします。別の注文を選択して
[Edit] リンクをクリックし、ORDER_DETAILS ページに移動できることを確認します。
詳細については、Uniface Library の「Calling Operations on Server Pages」を参照してください。
78
Uniface Tutorials
第4章
外部のサーバー ページ
レイアウト定義を使用する
このチュートリアルでは、外部サーバー ページのレイアウト定義を使用して、Web アプリケーショ
ンのユーザー インタフェースを生成する方法を示します。
前提条件
Web アプリケーションの基礎知識があり、「Uniface Web アプリケーションを初めて開発する」の
チュートリアルを終えている必要があります。
目標
このチュートリアルで、以下の方法を学習します。
◆ サーバー ページ レイアウトの HTML ファイルへのエクスポート。
◆ 外部レイアウト ファイルの編集。1 つのサーバー ページに同じエンティティやフィールドを 2 回
作成する、といった Uniface 開発環境でサポートされていない機能を実装します。
◆ $SEARCH_SKELETON アサインメント設定による、外部レイアウト ファイルのサーバー ペー
ジ レイアウト定義としての使用。
◆ PROC ステートメント webgen の LayoutFile パラメータと /append スイッチの使用。Web アプ
リケーションのユーザー インタフェース生成で、複数のレイアウト定義ができます。
このチュートリアルの概要については、4.1「チュートリアルの概要」を参照してください。4.2「ア
プリケーションのモデリング」からチュートリアルが開始します。
4.1 チュートリアルの概要
XHTML ページの生成に使われるレイアウト定義は、通常、.usp ファイルにコンパイルされた内部
サーバー ページ定義で使用します。ただし、レイアウト定義をサーバー ページと同じ名前で拡張子
.hts のテキスト ファイルとして、保存することもできます。1 つまたは複数のレイアウト定義を使
用して、Uniface 開発環境でサポートされない機能を実装できます。
たとえば、1 つのサーバー ページに同じエンティティまたはフィールドを 2 回作成することができま
す。送信ボタンのあるエンティティを Web ページの上と下の両方に配置したい場合、.hts ファイル
の編集により、同じエンティティを 2 回表示させるようにできます。コンポーネント ストラクチャ
では、1 回しか表示できません。
79
レイアウト定義をテキスト ファイル（ServerPageName.hts）に保存できます。
$SEARCH_SKELETON を external_only または external_first に設定すると、webgen に
よって .hts ファイルからレイアウト定義が検索されます。
Uniface Web アプリケーションでは、ブラウザに送られる XHTML ページは、サーバー ページのコ
ンポーネント定義とレイアウト定義を使用して、PROC ステートメント webgen によって生成され
ます。webgen に使用できるオプションの引数（LayoutFile パラメータと /append スイッチ）は、
複数のレイアウト定義を組み合わせて、ブラウザの XHTML ページを構成できます。この機能は、
HTML ファイルとして保存されたイメージ、ヘッダ、トレイラなどの既存の HTML リソースを使う
場合に便利です。
メモ： XHTML およびサーバー ページのレイアウト構造をよく理解していない場合や、特に使う
理由がない場合は、内部レイアウト定義を使用する方を推奨します。
外部レイアウト定義を使用する場合は、コンポーネント定義とレイアウト定義を手動で同期さ
せる必要があります。
複数のレイアウト定義を使用する場合は、すべてのレイアウト定義を外部レイアウト ファイル
として保存し、$SEARCH_SKELETON を external_only に設定する必要があります。
1 つのサーバー ページに複数のレイアウト定義を使用する場合は、各ファイルに含まれている
HTML の構成要素が組み合わされたときに有効な HTML ファイルになっている必要があります。
ステップの概要
1
アプリケーションのモデリング
エンティティ（ORDER）のあるモデル（SALES）を作成します。
2
コンポーネント ストラクチャの作成
ORDER.SALES のリストと [SAVE] ボタンのあるエンティティ CTRL.DUMMY が含まれる、サー
バー ページ EXTERNAL_LAYOUT を作成します。
80
Uniface Tutorials
3
外部レイアウトの作成
サーバー ページ レイアウトの最後に、SAVE.CTRL.DUMMY をコピーします。ORDER.SALES エ
ンティティのフィールドを二重に作成します。
レイアウト定義は、Uniface 開発環境ではもう有効ではありません。そのため、外部レイアウ
ト定義としてだけ使用されます。外部レイアウト ファイル external_layout.hts に、
EXTERNAL_LAYOUT のレイアウトをエクスポートします。
4
外部レイアウト ファイルの使用
アサインメント設定で $SEARCH_SKELETON に EXTERNAL_LAYOUT を指定して実行します。
第 4 章 外部のサーバー ページ レイアウト定義を使用する 81
[Save] ボタンがページの上と下に現れます。ORDER.SALES の各フィールドが 2 重に表示されます。
一方は表示だけで、もう一方は編集可能です。
5
レイアウト ファイルの作成
サーバー ページ（HEADER）を作成して、そのレイアウトをファイル header.hts にエクス
ポートします。
テキスト エディタを使用して、レイアウト ファイル trailer.hts を編集します。
6
複数の外部レイアウト ファイルの使用
external_layout.hts ファイルを変更して、header.hts、external_layout.hts、
trailer.hts の組み合わせが、有効な HTML ファイルになるようにします。LayoutFile パラ
メータと /append スイッチを指定して webgen を使用し、EXTERNAL_LAYOUT を実行します。
4.2 アプリケーションのモデリング
Web アプリケーションに、アプリケーション モデルを作成します。
1
モデルを作成して、それに SALES という名前を付けます。
メモ： 「Uniface Web アプリケーションを初めて開発する」が終わっている場合は、そのチュー
トリアルで開発したモデルを使用して、次のステップ「コンポーネント ストラクチャの作成」
に進みます。
2
82
モデル SALES にエンティティを作成して、ORDER という名前を付けます。
Uniface Tutorials
3
4
エンティティ ORDER に、以下のフィールドを定義します。
フィールド名
ラベル
HTML コントロール
データ タイプ
ORDER_ID
Order ID
Text
String
DATE
Date
Text
Date
TOTAL
Total
Text
Floating decimal point
STATUS
Status
Menu
String
SHIP_TO
Ship to
Text
String
[Define Menu Control Properties: STATUS.ORDER.SALES] ダイアログ ボックスで、以下の
Value と Representation のリストを入力します。
5
Value
Representation
entered
Entered
not delivered
Not delivered
delivered
Delivered
canceled
Canceled
[Key] フィールドで ORDER_ID を選択します。
4.3 コンポーネント ストラクチャの作成
このタスクを行う前に、必ず「アプリケーションのモデリング」のタスクを済ませてください。
コンポーネント ストラクチャを作成します。
1
サーバー ページを作成して、それに EXTERNAL_LAYOUT と名前を付けます。
2
レイアウト エディタで、FORM タグに 3 行のテーブルを挿入します。
3
テーブルの最初の行に、エンティティを挿入して、それに CTRL.DUMMY と名前を付けます。
4
CTRL.DUMMY に、Type を Button にした SUBST を挿入し、それに SAVE.CTRL.DUMMY という名
前を付けます。
5
テーブルの 2 番めの行に、エンティティ ORDER.SALES を挿入します。
6
コンポーネント ストラクチャをリフレッシュします。
7
ORDER.SALES エンティティのフィールドを [tabular] レイアウトでロードします。
第 4 章 外部のサーバー ページ レイアウト定義を使用する 83
結果は以下のようになります。
8
コンポーネント ストラクチャをリフレッシュします。
9
EXTERNAL_LAYOUT のトリガに、以下の PROC コードを入力します。
トリガ
PROC コード
Execute
webget
clear/e "ORDER.SALES"
retrieve/e "ORDER.SALES"
webgen
SAVE.CTRL.DUMMY ボタンの <Detail>
store/e "ORDER.SALES"
if ($status == 0)
commit
endif
10 EXTERNAL_LAYOUT をコンパイルして、検索と保存が正しくできるかどうかをテストします。
84
Uniface Tutorials
4.4 外部レイアウトの作成
このタスクを行う前に、必ず「コンポーネント ストラクチャの作成」のタスクを済ませてください。
外部レイアウトを作成します。
1
EXTERNAL_LAYOUT のレイアウト エディタで、CTRL.DUMMY エンティティをコピーして、それ
をテーブルの 3 行めにペーストします。
2
ORDER_ID 列の後ろに 4 つの列を追加します。
結果は以下のようになります。
3
追加した列に、DATE、TOTAL、STATUS、SHIP_TO をコピーします。[Normal] 編集モードで表
示すると、以下のようになっています。
第 4 章 外部のサーバー ページ レイアウト定義を使用する 85
CTRL.DUMMY エンティティと ORDER_ID のフィールドが、EXTERNAL_LAYOUT サーバー ページ
で 2 回表示されています。リフレッシュを行うと、正しくないコンポーネント ストラクチャに
なります。そのため、外部レイアウト ファイルとして使用する必要があります。
4
レイアウト エディタのメニューから、[File]>[Export HTML] を選択します。
5
[File name]フィールドにexternal_layout.htsと入力して、[保存]ボタンをクリックします。
メモ： 外部レイアウト ファイル名はサーバー ページと同じ名前にして、拡張子 .hts を付けま
す。
external_layout.hts ファイルは、UnifaceInstallDir/project ディレクトリの下に保
存します。
6
2 番めの CTRL.DUMMY エンティティと、新しく追加したフィールドを削除して、コンポーネント
ストラクチャを正しく直します。
7
external_layout.hts ファイルをテキスト エディタで開きます。
8
ORDER.SALES エンティティで、最初のフィールド DATE、TOTAL、SHIP_TO の <input> タグを
削除します。最初の STATUS フィールドの <select> タグを削除します。それらの SUBST の
type を html に変更します。
結果は以下のようになります。
<x-entity name="ORDER.SALES">
<table border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th>ID</th>
<td>Date</td>
<td>Total</td>
<td>Status</td>
<td>Ship to</td>
<td></td>
86
Uniface Tutorials
<td></td>
<th>Date</th>
<th>Total</th>
<th>Status</th>
<th>Ship to</th>
</tr>
<x-occurrence max="100" start="first" atleastone="1" name="ORDER.SALES"><tr>
<td><x-subst size="8" sync="1" type="html" name="ORDER_ID.ORDER.SALES">
<input size="8" SYNC="1" value="" name="ORDER_ID.ORDER.SALES" type="text" />
</x-subst></td>
<td><x-subst size="8" sync="1" type="html" name="DATE.ORDER.SALES"></x-subst>
</td>
<td><x-subst size="8" sync="1" type="html" name="TOTAL.ORDER.SALES"></x-subst>
</td>
<td><x-subst sync="1" size="1" type="html" name="STATUS.ORDER.SALES"></x-subst>
</td>
<td><x-subst size="15" sync="1" type="html" name="SHIP_TO.ORDER.SALES">
</x-subst></td>
<td></td>
<td></td>
<td><x-subst size="8" sync="1" type="text" name="DATE.ORDER.SALES">
<input size="8" SYNC="1" value="" name="DATE.ORDER.SALES" type="text" />
</x-subst></td>
<td><x-subst size="8" sync="1" type="text" name="TOTAL.ORDER.SALES">
<input size="8" SYNC="1" value="" name="TOTAL.ORDER.SALES" type="text" />
</x-subst></td>
<td><x-subst sync="1" size="1" type="select" name="STATUS.ORDER.SALES">
<select SYNC="1" size="1" name="STATUS.ORDER.SALES">
<option value="entered">Entered</option> <option value="not delivered">Not delivered</option>
<option value="delivered">Delivered</option> <option value="canceled">Canceled
</option></select>
</x-subst></td>
<td><x-subst size="15" sync="1" type="text" name="SHIP_TO.ORDER.SALES">
<input size="15" SYNC="1" value="" name="SHIP_TO.ORDER.SALES" type="text"/>
</x-subst></td>
</tr>
</x-occurrence>
</tbody>
</table>
</x-entity>
9
編集内容を保存します。
第 4 章 外部のサーバー ページ レイアウト定義を使用する 87
4.5 外部レイアウト ファイルの使用
このタスクを行う前に、必ず「外部レイアウトの作成」のタスクを済ませてください。
外部レイアウトを使用します。
1
UnifaceInstallDir\adm\wasv.asn ファイルに、以下のアサインメント設定を追加します。
$SEARCH_SKELETON=external_only
$SEARCH_SKELETON=external_first でも動作します。
2
Uniface ルーターを起動します。
3
サーバー ページ EXTERNAL_LAYOUT をテストします。
結果は以下のようになります。
4
2 つの [Save] ボタンをテストします。
4.6 レイアウト ファイルの追加作成
UDE で、レイアウト ファイルを作成します。
1
サーバー ページを作成して、それに HEADER と名前を付けます。
2
レイアウト エディタで、イメージとヘッダー テキストを挿入します。
以下のようになります。
88
Uniface Tutorials
3
FORM タグを削除します。[Source] 編集モードで、</body> と </html> を削除します。
結果は以下のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Default" content="Uniface 9" />
<link rel="stylesheet" type="text/css" href="../css/applic.css" />
<x-subst type="function" name="$usp_formtitle"><title>$usp_formtitle</title>
</x-subst><x-subst type="inclfile" name="usys:usysweb.jss"></x-subst>
<!-// ### Field Syntax Checking ###
// Enable the following HTML to enable browser field syntax checking:
<x-option fieldcheck="true" />
<x-subst type="fieldcheck" name="javascript"></x-subst>
<x-subst type="fieldcheck" name="errormessages"></x-subst>
<x-subst type="fieldcheck" name="applet"></x-subst>
-->
</head>
<body class="" onload="uLoad(this)">
<h1><img style="width: 334px; height: 47px;" alt="" src="../../my_heading_image.jpg" />
<span style="color: rgb(150, 100, 50);">Sales Order</span></h1>
メモ： イメージの指定は、"../../my_heading_image.jpg" のような相対パスを使用しま
す。テスト URL を指定して Web サーバーを起動しなければ、UDE にイメージは表示されませ
ん。詳細については、Uniface Library の「Adding Images to a Server Page」を参照してくださ
い。
4
レイアウト エディタのメニューから、[File]>[Export HTML] を選択します。
5
[File name] フィールドに header.hts と入力して、[ 保存 ] ボタンをクリックします。
第 4 章 外部のサーバー ページ レイアウト定義を使用する 89
ファイル エディタを使用して、レイアウト ファイルを作成します。
1
UnifaceInstallDir/project ディレクトリに、trailer.hts という名前のファイルを作成
します。
2
メモ帳などのテキスト エディタを使用して、trailer.hts を開きます。
3
以下の行を入力します。
<table style="text-align: left; width: 600;" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 400px;"><big style="color: rgb(153, 102, 51);">(c)Compuware
Corporation</big></td>
<td style="width: 200px;"><span style="color: rgb(153, 102, 51);">Version
</span><span style="font-style: italic; color: rgb(153, 102, 51);">xx</span>
</td>
</tr>
</tbody>
</table>
<br />
</body>
</html>
4
ファイルを保存して閉じます。
4.7 複数の外部レイアウト ファイルの使用
このタスクを行う前に、必ず「外部レイアウト ファイルの使用」と「レイアウト ファイルの追加作
成」のタスクを済ませてください。
1
EXTERNAL_LAYOUT を開きます。
2
Execute トリガの PROC コードを以下のように変更して、複数のレイアウト ファイルを使用す
るようにします。
webget
clear/e "ORDER.SALES"
retrieve/e "ORDER.SALES"
webgen "header.hts"
;generate a layout using header.hts
webgen/append ;append external_layout.hts
webgen/append "trailer.hts" ;append trailer.hts
3
EXTERNAL_LAYOUT をコンパイルします。
4
external_layout.hts ファイルをテキスト エディタで開きます。
5
<form> タグより上のコンテンツを削除します。</body> と </html> を削除します。
header.hts、external_layout.hts、trailer.hts の組み合わせが、有効な HTML ファ
イルになります。
90
Uniface Tutorials
6
EXTERNAL_LAYOUT をテストします。
第 4 章 外部のサーバー ページ レイアウト定義を使用する 91
92
Uniface Tutorials