OPRO X Designerファーストステップ

製品構成
OPRO X Serverファミリーは、以下のようなソフトウェアで構成されています。
OPRO X Server （OXS）
帳票生成サーバソフトウェア
OPRO X Designer （OXD）
帳票デザインを行うためのクライアントソフトウェア
OPRO X Browser （OXB）（ライセンスフリー）
OPR等、オプロ独自形式の帳票フォーマットを閲覧/印刷するためのクライアントソフト
ウェア
OPRO X Server Management Service （OXSMS）（オプション製品）
帳票の出力履歴や、複数のOPRO X Serverに対する負荷分散等を行うサーバソフト
ウェア
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

2

OXDのアーキテクチャ

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

3

OXDを使用するにあたってOXDは、OXSのテンプレート（拡張子oxtのXML帳票定義体）を、GUIで作成するためのツールです。
OXDでは、OXSのHTTPインターフェイス（CGIまたはサーブレット）に接続し、プレビューやデータベースの参照等を行います。このため、OXSが稼働している必要があります。
また、OPR形式でプレビューを行う場合は、OXBがインストールされている必要があります。
各ソフトウェアのセットアップについては、製品CDの「manual.html」またはサポートペー
ジの「リファレンスマニュアル」をご覧ください。
OPRO X Server - リファレンスマニュアル
https://www2.opro.net/jp/opss/docs/270_ja/manual.html

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

4

OPRO X Designerの画面構成
OPRO X Designerは、OPRO X Serverで使用する帳票定義体（テンプレート）を作成するためのクライアントツールです。テンプレートは、拡張子oxtのXMLとして保存されます。
OPRO X Serverは、テンプレートをもとに、指定したデータソースからリアルタイムにデータを取得し、動的にドキュメントを生成します。
メニューバーコンポーネントパレット

ツールバー

テンプレート
エクスプローラー

プロパティエディタ

レイアウト
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

5

OXSへの接続設定
オプションメニュー → 環境設定 → 「OXS CGI/サーブレット」で、OPRO X ServerのCGI/サーブレットのURLを指定します。
このURLは、プレビューや、サンプルHTMLの作成の際に使用します。

「OXSのバージョン」ボタンで、OXSの接続確認が行えます。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

6基本的な操作
OXDでは、機能毎の部品（コンポーネント）を選択、配置 → プロパティを設定 という流れが基本になります。
簡単なテンプレートを作成し、プレビューしてみましょう。
コンポーネントを選択

配置

プロパティを設定

プレビュー

プレビューボタンの右横にある▼で、プレビューするフォーマットを選択できます。
次回からは、プレビューボタンを押せば、そのフォーマットが選択されます。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

7

プロパティエディタについて
プロパティエディタには、「アクティブ」タブと、「ターゲット」タブがあります。
・「アクティブ」タブ・「ターゲット」タブ

現在選択され、アクティブとなっているコンポーネントのプロパティが表示されます。

コンポーネントを複数選択している場合に、一括でプロパティの値を変更することができます。

Shapeのプロパティ
Label（複数選択）のプロパティ

複数の種類を選択している場合は、ドロップダウンからコンポーネントの種類を選択することができます。

Labelのプロパティ

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

8便利な操作
キーボードを使用することにより、以下のような操作が可能です。
作業効率が大幅に増しますので、是非活用してください。
[ ] で囲まれた文字は、キーボードのキーを表します。

操作

説明[Ctrl] + [矢印 (↑↓←→)]

コンポーネントを 1px ずつ移動

[Ctrl] + [Shift] + [矢印 (↑↓←→)]

コンポーネントをグリッドの間隔単位で移動[Ctrl] + ドラッグ

コンポーネントの移動方向（垂直・水平）を固定 (最初にドラッグし始めた方向に移動)[Shift] + [矢印 (↑↓←→)]

コンポーネントのサイズを変更[Shift] + マウスでコンポーネントサイズを変更

コンポーネントサイズの縦横比を変えずに変更[Alt] + ドラッグ

ボックスコンポーネント（※）を移動（※）ボックスコンポーネントとは、以下のコンポーネントを指します。
Table
InterfaceGroup
DatasetTable
HorizontalDatasetTable
DatasetTableContainer

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

9便利な機能 - 1
その他、OPRO X Designerには、以下のような便利な機能があります。
・貼り付けポインタ

コンポーネントをコピー「貼り付けポインタ」をクリッククリックした場所に貼り付けられます。
（元のポインタに戻すには、もう一度「貼り付けポインタ」をクリックするか、キーボードのEscキーを押してください）

・画像やテキストをそのまま貼り付け他のアプリケーション上でコピーしたテキスト情報や画像情報（クリップボードの情報）を、そのままレイアウト上に貼り付けることができます。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

10便利な機能 - 2・整列

コンポーネントを複数選択した状態
で、基準にするコンポーネントをクリック「整列」ボタンをクリック

基準のコンポーネントに揃えて整列されます。

・サイズを揃える

コンポーネントを複数選択した状態
で、基準にするコンポーネントをクリック「サイズを揃える」ボタンをクリック

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

基準のコンポーネントにサイズが揃います。

11データベース環境設定
本トレーニングでは、データベースとして付属のsample.mdbを使用します。
OXSがインストールされているコンピュータ上で、以下の設定を行ってください。

1. sample.mdbファイルを、OXSがインストールされているコンピュータ上の任意のフォルダに配置。
2. Windowsのコントロールパネル → 管理ツール → データ ソース (ODBC) を開く。
3. 「システム DSN」タブを開き、「追加」をクリック。
4. ドライバの選択で、「Microsoft Access Driver (*.mdb)」を選択。
5. データソース名（例： sample）を指定。
6. 「選択」をクリックし、配置したmdbファイルを選択。
7. OK ボタンを押し、完了。
8. OXSインストールディレクトリ以下 /conf/ODCAW.xmlの、ODCAW/ODCS/DATABASES/要素で、以下の設定を追加。
（赤文字の「sample」は、5で指定したデータソース名）<DATABASE><Name>sample</Name><Type>Access</Type><URL>jdbc:odbc:sample</URL><Driver>sun.jdbc.odbc.JdbcOdbcDriver</Driver><UserID/><Password/><Connections>3</Connections></DATABASE>
9. OXSを再起動。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

12データベース接続確認
以下の手順で、OXSが接続しているDBを参照できることを確認してください。

1. OXDで、新規テンプレートを開く。
2. Datasetを配置し、ダブルクリック。
3. 「OSMSログイン」にログイン（標準ではadmin/admin）
4. クエリビルダの画面左側のツリーに、「Access」 - 「sample」というデータベースが表示されれば、接続されています。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

13基本的な内容は以上です。次ページからは、サンプルのmdbを使用して、簡易的な連続帳票を作成する手順をご紹介します。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

14データベースからデータを取得して、1ページに複数レコードを表示します。
担当者ごとのリストです

担当者ごとに集計を行います
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

15

A4 縦 のテンプレートを新しく作成します。

1. [新規作成]をクリックします2. プロパティエディタの[レイアウト設定]プロパティを開きます

3.設定を確認します
用紙サイズ：A44.設定を確認します
用紙の向き：縦Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

16

Datasetコンポーネントは、データベースとテンプレートをリンクするコンポーネン
トです。
クエリビルダというツールを利用して、データベースへのアクセスを行います。
1.[データアクセス]タブをクリックします

2.[Dataset]をクリックします

3.そのまま、レイアウト上でクリックして配置します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

17

1.Datasetをダブルクリックします

2.ユーザ名/パスワードを入力します
admin
admin

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

18

データベースのタイプとデータベースを選択します。

1. +をクリックしてツリーを展開します2.「sample」を展開します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

19

テーブルを選択し、フィールド「担当者コード」で結合を行います。

1.「受注情報」 テーブルと「担当者」テーブルをダブルクリックして開きます
2.「受注情報」テーブルの「施行担当者コード」フィールドをクリックします

3.そのまま「担当者」テーブルの「担当者コード」フィールドへドラッグア
ンドドロップします

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

20

テンプレートで使用するフィールドを、デザイングリッドに追加します。

1.「受注情報」の「全てのフィールドを追加」アイコンをクリックします2. 「担当者」の「担当者名」をダブルクリックしてフィールドを追加します

3.デザイングリッドにフィールドが追加されたことを確認します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

21

デザイングリッドの[表示形式]はドロップダウンリストから表示形式を選択できます。
（ドロップダウンリストにないものは直接キーボードから入力できます。）

1.ドロップダウンリストから表示形式を選択します

2.キーボードから表示形式を入力します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

22

参考「実行結果の確認」をクリックするとクエリーの実行結果が確認できます。
結果の確認

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

23

DatasetTableを、ウィザードを使用して配置します。

1.[ ウィザード]タブをクリックします

2.Dataset Table ウィザードをクリックします
3.Dataset Table ウィザードが起動します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

24

Dataset、テーブルの並びのタイプ、使用するフィールドを設定します。

1. 「Dataset1」を選択します2. 「縦並び」を選択します

3.次の4つのフィールドを選択します
・取引先名
・受注日
・工事名
・受注金額

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

25

コンポーネントの名前と位置とサイズ等を設定します。

[次へ]をクリックしますCopyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

26

バンドとカラムの設定をします。

1.バンドは[カラムヘッダ]を選択します

2.[完了]をクリックして終了
します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

27

各バンドに配置されたLabelの「内容」プロパティを確認します。

カラムヘッダ上のLabelは、「Static」（固定）となっています。

データバンド上のLabelは、「Database」となっています。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

28

DatasetTableの構造を確認します。
カラムヘッダデータバンド（明細行）

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

29

参考

DatasetTableについて
DatasetTableは、テーブルの高さだけ明細行を表示し、1ページに表示しきれない場合は、自動的に改ページします。
明細行（データバンド）
この高さの行を繰り返す

プレビュー

自動的に改ページ
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

30

参考

DatasetTableの構造
DatasetTableは階層構造になっており、DatasetTable本体の上にバンドがあり、その上にカラムがあるような3段構造になっています。

DatasetTableは、その上に別のコンポーネントを配置して使用することが多いため、マウスでのドラッグ操作等を考慮し、単にクリックしただけでは選択できないようになっています。
DatasetTableの各階層を選択するには、いくつかの方法があります。

31

参考

DatasetTableの選択方法(1)
テンプレートエクスプローラで、各階層をクリックすることにより、選択することができます。

32

参考

DatasetTableの選択方法(2)DatasetTableの境界線（下図の赤い印がついた部分）を囲むようにドラッグすると、選択することができます。

また、最下段にあるバンドについては、バンドの境界線を囲むようにドラッグすると、選択することができます。

33

参考

DatasetTableの選択方法(3)キーボードのAltキーを押しながらカラムをクリックすると、カラムを選択することができます。
カラムを選択した状態で、キーボードのEscキーを押すと、カラム → バンド →DatasetTable本体 というように、下の階層に選択が切り替わります。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

34

カラムヘッダの Label の設定を行い、その設定をコピーして別のLabelに 貼り付けます。

1.Labelコンポーネントを選択します

2.全般プロパティの[透過]にチェックを入れます3.フォントプロパティの[色]を白にします
4.フォントプロパティの[太字]にチェックを入れます

5.カラムヘッダのほかの Label コン
ポーネントも同様に設定します[書式のコピー/貼り付け]を使用します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

35

カラムヘッダの高さ、背景色を設定します。

1.カラムヘッダーを選択します

2.全般プロパティで高さを「24」にします

3.カスタムプロパティで背景色を設定します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

36

受注金額を表示する Label コンポーネントとDataset Band の高さの設定をします。

1.Label コンポーネントを選択します

2.カスタムプロパティの[配置]を[右上]にします

3.Datset Band の高さを「24」に設定します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

37

Dataset Tableコンポーネントにグループヘッダとグループフッタを追加します。

1.Dataset Table を選択します

2.カスタムプロパティ「グループ」タブを選択します
3.「施工担当者コード」のヘッダ、フッタにチェックをつけます

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

38

担当者名を表示するためのLabelコンポーネントを配置します。
2.フィールドプロパティを表示します

1.Datasetをクリックします3.「担当者名」フィールドをクリックします

4.グループヘッダの上へドラッグ&ドロップします

5.次の設定を行います
・全般プロパティで[透過]にチェックを入れます
・フォントプロパティで[太字]にチェックを入れます
ここまで終わったら、一度プレビューしてみましょう。
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

39

1. DatasetTableを選択します
2. カスタムプロパティを表示します

3. 「グループ」タブで、「施工担当者コード」を選択します4. 「毎ページ出力する」と「グループが変わったら改ページする」にチェックをします

プレビューし、先ほどの結果と比べてみましょう。
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

40

1.グループヘッダを選択します

2.全般プロパティで高さを「24」にします
3.カスタムプロパティで背景色を設定します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

41

参考

■グルーピングの優先順位について
DatasetTableカスタムプロパティの[グループ]タブで[ヘッダ]/[フッタ]にチェックをつけているフィールドはグループ化を行っているフィールドです。
これらのフィールドは、より上に表示されているフィールドを優先的にグループ化を行います。
この表示順を変更するには、移動したいフィールドを選択し、左図の赤枠部分、[上に移動]または[下に移動]をクリックします。
（このとき[チェックされたフィールドのみ表示]をチェックすると作業が簡易になります。）
また、クエリビルダでの並べ替えの設定は明細行である[DatasetBand]部分に適用されます。

下へ移動
上へ移動

チェックされたフィールドのみ表示例）
次のように設定します。
・「施工担当者コード」、「取引先名」の順でグループ化を行う
・クエリビルダの[並べ替えの設定]では「工事名」の昇順を設定

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

42

参考

DatasetTableにグループヘッダ/フッタが設定されている場合、OPRO X Serverは内部的に複数のSQLを発行します。
まず、DISTINCT を使用して、グループのキーとなるデータを得るためのSQLを発行します。
各グループの明細行は、DISTINCT の結果を抽出条件として指定したSQLによって取得します。
このため、グループのデータの数が増えるほど、発行するSQLの数は多くなります。
また、入れ子の階層が深い（例えばグループヘッダが5階層等）といった作りは、パフォーマンス上あまりお勧めできません。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

43

グループフッタにAggregate Functionコンポーネントを配置します。
1.[データアクセス]タブをクリックします

2.[Aggregate Function]をクリックします

3.グループフッタに配置します

4.内容プロパティを設定します
Dataset ：Dataset1
フィールド：受注金額
関数：SUM
5.次の設定を行います
・全般プロパティ [透過]にチェック・フォントプロパティ [太字]にチェック・カスタムプロパティ [配置]を[右上]Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

44

Labelを配置して、合計表示に見出しをつけます。
1.見出し用にLabelコンポーネントを配置します

2.内容プロパティを設定します
タイプ：Static
内容 ：合計3.次の設定を行います
・全般プロパティ [透過]にチェック・フォントプロパティ [太字]にチェック

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

45

1.グループフッタを選択します

2.全般プロパティで高さを「48」にします
3.カスタムプロパティで背景色を設定します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

46

1.Dataset Tableをドラッグして選択します2.罫線プロパティで、左から2つ目のタイプを選択します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

47

プレビューを行って、ここまでのデザインの確認をします。

プレビューボタンをクリックします
プレビュー結果

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

48

明細データを「取引先名」順に並べ替えます。
Datasetをダブルクリックし、クエリビルダを起動してください。

1.[並べ替えの設定]をクリック
します
2.「sample.受注情報.取引先名」を選択します

3.クリックして[選択されたフィールド]へ追加します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

49

実行時に「担当者コード」を指定できるように設定します。
抽出条件の設定は「条件式ビルダ」で行います。
1.[抽出条件の設定]をクリックします

3. = [等しい] と{USERINPUT} をダブルクリックします

2.「受注情報」テーブルの「施工担当者コード」フィールドをダブルクリックします

クエリビルダ上の{USERINPUT}は、実行時に値を指定するという意味になります。
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

50

「受注金額」と「値引き」を足して、受注額を計算します。
式の作成は「式ビルダ」で行います。

1.[式の作成]をクリックします
2.「受注情報」テーブルの「受注金額」フィールドをダブルクリックします

3.＋ [加算] をダブルクリッ
クします4.「受注情報」テーブルの「値引き」フィールドをダブルクリックします

5.追加された項目の[見出し]を、「Expression1」から「受注額」に変更します
6.表示形式を「¥#,###」とします
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

51

既にある「受注金額」が、「受注額」となるように選択しなおします。
1.「受注金額」を表示していたLabelコン
ポーネントをクリックします

2.内容プロパティで[フィールド]を「受注額」に変更します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

52

AggregateFunctionについても同様に、「受注額」に変更します。
1. Aggregate Functionコンポーネントをクリックします

2.内容プロパティで[フィールド]を「受注額」に変更します
3.[関数]を[SUM]に設定します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

53

「取引先名」のデータが重複した場合に、同じものを繰り返さないように設定します。

1.Dataset Tableを選択します

2.カスタムプロパティで「重複の削除」
タブをクリックします
3.「取引先名」にチェックをつけます

以上で基本的な連続帳票サンプルは完成です！プレビューで確認してみましょう
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

54

参考

1.プレビューボタンをクリックします

担当者コード2.{USERINPUT}入力ウィンドウに担当者コード（1～10）を入力します

1Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

担当者名

1田中

2
345佐藤鈴木
原
石川

678

武藤佐々木
石井

910伊藤小林55

参考Labelの「条件付フォーマット」プロパティで、条件によって表示方法を変更することができます。
例えば、「受注金額」フィールドの値が 6000000 以上の場合、フォントの色を赤で表示するには、以下のように設定します。

・値１
受注額・演算子>=・値26000000
・フォント - 色 赤

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

56

CSV連携TextDatasetコンポーネントを使用すると、テキストファイルやCSVファイル、からデータを読み込むことができます。
1.[データアクセス]タブをクリックします

2.[TextDataset]をクリックします

3.そのまま、レイアウト上でクリックして配置します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

57

CSV連携テキストクエリビルダを起動してテキストの定義を行います。
1.TextDatasetをクリックします2.フィールドプロパティの[編集]をクリックします

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

58

CSV連携テキストの定義を設定します。既存のCSVファイルから設定することができます。
（フィールドごとに直接入力して設定を行うこともできます。）
1.[フィールドの定義]をクリックして[テキストの定義]を開きます。

2.[形式の読み込み]をクリックしてCSVファイルを読込みます。

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

59

CSV連携既存のCSVファイルからテキストの設定を行います。
1.「932（SHIFT_JIS）」を選択します
2.「区切り記号付き」を選択します

3.カンマを選択します
4.ダブルクォーテーションを選択します5.[先頭行をフィールド名として使う]をチェックします
6.[OK]クリックします

7.テキストクエリビルダもOKボタンをクリックして終了します。
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

60

CSV連携テンプレートで使用するフィールドを選択します。

1.「全てのフィールドを追加」アイコンをクリックします※フィールド名をダブルクリックして、一つずつ追加することもできます。
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

61

CSV連携デザイングリッドの[表示形式]はドロップダウンリストから表示形式を選択できます。（ドロップダウンリストにないものは直接キーボードから入力できます。）

1.ドロップダウンリストから表示形式を選択します

2.キーボードから表示形式を入力します

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

62

CSV連携

簡単なサンプルCSVデータを作成することができます。作成したデータを使用して確認プレビューを行うこともできます。
1.TextDataset を選択します

2. 内 容 プ ロ パ テ ィ の [ サ ン プ ル
データ作成]をクリックします

3.作成するサンプルデータの行数（件数）を指定し、[OK]をクリックします

Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

63

CSV連携こここでは、帳票生成時にCSVデータを渡す方法をご紹介します。

1.TextDataset を選択します
2.内容プロパティを設定します
タイプ:Request
リクエストパラメータ名：
TextDataset1

3.プレビュー時に表示されるリク
エスト値にCSVデータを入力します※CSVファイルの場所を指定する方法はURLTextDatasetコンポーネントを使用します。
Copyright © 2010 OPRO Japan Co., Ltd. All Rights Reserved.

64