3.レイアウトサンプル(ページレイアウト)
ページレイアウトをデザインするために用意されているコンポーネントのサンプルです。
1最上位要素
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
最上位要素(レイアウト) <Layout> | LayoutSample1 | XMLツリーの最上位要素のサンプルです。 |
2テキスト
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
横書きテキスト<Label> | LabelSample1 | テキストの指定方法に関するサンプルです。 |
LabelSample2 | 水平方向の配置(Horizon 属性)に関するサンプルです。 | |
LabelSample3 | 指定領域(X,Y,Width,Height の各属性で指定)にデータが入りきらない場合の圧縮方法( Narrow 属性)に関するサンプルです。 | |
LabelSample4 | 拡大縮小率( Rate 属性)に関するサンプルです。 | |
LabelSample5 | 文字間隔指定(CharSpace)に関するサンプルです。 | |
縦書きテキスト<VerticalLabel> | VerticalLabelSample1 | 水平方向の配置(Horizon 属性)に関するサンプルです。 |
VerticalLabelSample2 | 垂直方向の配置(Vertical 属性)に関するサンプルです。 | |
VerticalLabelSample3 | 描画領域(X,Y,Width,Height の各属性で指定された領域)にデータが入りきらない場合の圧縮方法指定(Narrow 属性)に関するサンプルです。 | |
リンク付き横書きテキスト<LinkLabel> | LinkLabelSample1 | リンク先(URI)を付加した横書きテキストのサンプルです。 |
リンク付き縦書きテキスト<LinkVerticalLabel> | LinkVerticalLabelSample1 | リンク先(URI)を付加した縦書きテキストのサンプルです。 |
通貨形式テキスト<Currency> | CurrencySample1 | 通貨の指定方法に関するサンプルです。 |
複数行横書きテキスト<multi-text> | multi-textSample1 | 水平方向の配置(text-align属性)に関するサンプルです。 |
multi-textSample2 | 行の配置(垂直方向):line-align 属性に関するサンプルです。 | |
multi-textSample3 | 字間、行間の指定方法に関するサンプルです。 | |
multi-textSample4 | インデントの指定方法に関するサンプルです。 | |
multi-textSample5 | 指定領域(x,y,cell-width,cell-height の各属性で指定)にデータが入りきらない場合の圧縮方法( narrow属性)に関するサンプルです。 | |
複数行縦書きテキスト<multi-vtext> | multi-vtextSample1 | 垂直方向の配置(text-align属性)に関するサンプルです。 |
multi-vtextSample2 | 行の配置(水平方向):line-align 属性に関するサンプルです。 | |
multi-vtextSample3 | 字間、行間の指定方法に関するサンプルです。 | |
ページ番号テキスト<page-number> | page-numberSample1 | ページ番号の指定方法に関するサンプルです。 |
page-numberSample2-doc | ページ番号と総ページを表示するサンプルです。 | |
page-numberSample3-doc | ローカルページ番号と総ページを表示し、3 番目のページでローカルページカウンタを初期化するサンプルです。 | |
日付テキスト<datetime-text> | datetime-textSample1 | 現在日時に対してformat 属性で出力形式を指定した結果を出力するサンプルです。 |
datetime-textSample2 | #PCDATA をformat 属性で出力形式を指定したサンプルです。 |
3イメージ
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
イメージ<Image> | ImageSample1 | イメージの指定方法に関するサンプルです。 |
ImageSample2 | 色階調(Depth 属性)に関するサンプルです。 | |
ImageSample3 | グレースケール(GrayScale 属性)に関するサンプルです。 | |
ImageSample4 | 拡大縮小率( Rate 属性)に関するサンプルです。 | |
リンク付きイメージ<LinkImage> | LinkImageSample1 | リンクイメージの指定方法に関するサンプルです。 |
リンク付きエリア<LinkArea> | LinkAreaSample1 | リンク範囲の指定方法に関するサンプルです。 |
白黒2値イメージ<MonochromeImage> | ImageSample5 | 白黒2値イメージの指定方法に関するサンプルです。 |
CCITTFax イメージ<CCITTFaxXImage> | ImageSample6 | CCITTFax フォーマットのイメージの指定方法に関するサンプルです。 |
ImageSample7 | マルチページのTIFF に対して任意のページID を指定でページを埋め込むサンプルです。 | |
JBIG2 イメージ<JBIG2XImage> | ImageSample8 | JBIG2 形式のイメージの指定方法に関するサンプルです。 |
4図形
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
四角形<Square> | SquareSample1 | 四角形の指定方法に関するサンプルです。 |
円<Circle> | CircleSample1 | 円の指定方法に関するサンプルです。 |
角丸四角形<Round> | RoundSample1 | 角丸四角形の指定方法に関するサンプルです。 |
RoundSample2 | 指定した角のみ角丸にするサンプルです。 | |
扇形<Scallop> | ScallopSample1 | 扇形の指定方法に関するサンプルです。 |
楕円<Ellipse> | EllipseSample1 | 楕円の指定方法に関するサンプルです。 |
三角形<Triangle> | TriangleSample1 | 三角形の指定方法に関するサンプルです。 |
菱形<Diamond> | DiamondSample1 | 菱形の指定方法に関するサンプルです。 |
星<Star> | StarSample | 星形の指定方法に関するサンプルです。 |
多角形<Polygon>,<Vertex> | PolygonSample1 | 多角形の指定方法に関するサンプルです。 |
雲<Cloud> | CloudSample1 | 雲の指定方法に関するサンプルです。 |
5線
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
線<Line> | LineSample1 | 描画領域(X,Y,Width,Height の各属性)を指定しないケースのサンプルです。 |
LineSample2 | 領域(X,Y,Width,Height の各属性)を指定するケースのサンプルです。 | |
LineSample3 | スタイルを指定するケースのサンプルです。 |
6インポート
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
PDF ファイル・インポート<pdf:import> | pdf-importSample1 | 既存のPDF ファイルをインポートするサンプルです。 |
pdf-importSample2 | ドキュメントレイアウトを用いて複数のページを取り込むサンプルです。 | |
XML ファイル・インポート<bs:import> | bs-importSample1 | 既存のXML ファイルを埋め込むサンプルです。 |
SVG ファイル・インポート<svg:import> | svg-importSample1 | 既存SVG ファイルのインポートを行うサンプルです。 |
7グループ化
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
複数項目のグループ制御<GroupAlignment> | GroupAlignmentSample1 | 整列方向(Vector 属性)に関するサンプルです。 |
GroupAlignmentSample2 | 水平方向の整列(Horizon 属性)に関するサンプルです。 | |
GroupAlignmentSample3 | 垂直方向の整列(Vertical 属性)に関するサンプルです。 | |
GroupAlignmentSample4 | 行間(LineSpace 属性)に関するサンプルです。 | |
GroupAlignmentSample5 | 領域にデータが入りきらない場合の圧縮方法指定( Narrow 属性)に関するサンプルです。 | |
GroupAlignmentSample6 | GroupAlignment の背景/枠線などの書式設定に関するサンプルです。 | |
表示/非表示制御<GroupDisplay> | GroupDisplaySample1 | 項目をグループ化し、グループ内での項目表示/非表示を制御するサンプルです。 |
GroupDisplaySample2 | GroupDisplay の背景/枠線など書式設定に関するサンプルです。 |
8繰り返し制御
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
縦方向フレーム<flow-area> | flow-areaSample1-doc | 会社情報と売上明細の2つのCSV をそれぞれデータソースとして定義し、会社情報はページ全体に適用し売上明細はフレームにより繰り返し処理をするサンプルです。 |
flow-areaSample2-doc | 会社情報と売上明細、購入明細の3つのCSV をそれぞれデータソースとして定義し各サブフレームにはそれぞれのデータソース(会社情報、売上明細、購入明細)を関連付けし繰り返し処理するサンプルです。 | |
flow-areaSample3-doc | 表示する項目の長さが可変のデータを折り返しながら表示するサンプルです。行毎にデータ長が異なるため行の高さが可変になります。 | |
flow-areaSample4-doc | ページフッタは明細の直後に表示し、レイアウトフッタを下の位置に固定で表示するサンプルです。 | |
flow-areaSample5-doc | 明細データ0件の時、ページヘッダを表示するか非表示にするか指定するサンプルです。 | |
flow-areaSample6-doc | 2種類の小計行を表示する。店舗ごとの小計と、エリアごとの小計を表示し、最後に合計を表示するサンプルです。 | |
flow-areaSample7-doc | 小計行に対し、ブレイクキーの値を動的に表示するサンプルです。 | |
multi-columnSample1-doc | clone 属性を使用し、表を段組にするレイアウトです。 | |
横方向フレーム<hflow-area> | hflowSample1-doc | データ量に応じて横方向に領域が可変となるフレームを表示するサンプルです。 |
縦方向表<fo:table> | tableSample1 | 1 行におけるセル数とセル幅の定義を行うサンプルです。 |
tableSample2 | 各行および、各行のセルごとで詳細な定義を行う場合のサンプルです。 | |
tableSample3-doc | ドキュメントレイアウトとページレイアウトを組み合わせて、データソースから取得したデータを元に行数が可変となるケースのサンプルです。 データベースにはDB2 のSAMPLE データベースを使用しています。 | |
tableSample4-doc | 1つのデータソースをページレイアウト内の複数のfo:table で参照するサンプルです。 | |
tableSample4-page | ドキュメントレイアウトとページレイアウトを組み合わせて、データソースから取得したデータを元に 行数が可変となるケースのサンプルです。 | |
横方向表<fo:htable> | - | - |
クローンペイン<clone> | cloneSample1-doc | データの流れ方はright-down(左上から右へ)、left-down(右上から左へ)、down-right(左上から下へ)、down-left(右上から下へ)と 4 通りあり、隣接するペインへと進んでいきます。 |
9場合分け制御
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
場合分け制御<ConditionIsNull> | ConditionIsNullSample1 | 項目(複数可)のデータ有無による場合分けを行います。 |
行数による場合分け<ConditionIsLine> | ConditionIsLineSample1 | データの行数による場合分けを行います。 |
条件に当てはまらない場合の処理<ConditionIsElse> | ConditionIsElseSample1 | 場合分けに当てはまらないケースの処理を行います。 |
10バーコード
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
JAN-13(標準バージョン)<barcode-jan13> | barcode-jan13Sample1 | JAN-13(標準バージョン)バーコードの指定方法に関するサンプルです。 |
JAN-8(短縮バージョン) <barcode-jan8> | barcode-jan8Sample1 | AN-8(短縮バージョン)バーコードの指定方法に関するサンプルです。 |
CODE39 バーコード<barcode-39> | barcode-39Sample1 | CODE39 バーコードの指定方法に関するサンプルです。 |
CODE128 バーコード<barcode-128> | barcode-128Sample | CODE128 バーコードの指定方法に関するサンプルです。 |
コーダバー( NW-7)<barcode-codabar> | barcode-codabarSample1 | コーダバー( NW-7)バーコードの指方法に関するサンプルです。 |
EAN128<barcode-ean128> | barcode-EAN128Sample1 | EAN128バーコードの指方法に関するサンプルです。 |
UPC-A<barcode-upc-a> | barcodeUPC-ASample1 | UPC-A バーコードの指方法に関するサンプルです。 |
UPC-E<barcode-upc-e> | barcodeUPC-ESample1 | UPC-E バーコードの指方法に関するサンプルです。 |
UPC-A/E<barcode-upc-ae> | barcodeUPC-AESample1 | UPC-A/E バーコードの指方法に関するサンプルです。 |
QR コード<barcode2d-qr> | barcode2dQRSample1 | QRコードの指方法に関するサンプルです。 |
PDF417<barcode -pdf417> | barcodepdf417Sample1 | PDF417 バーコードの指方法に関するサンプルです。 |
郵便カスタマバーコード<barcode-postal> | barcode-postalSample1 | 郵便カスタマバーコードの指定法に関するサンプルです。 |
CVS-EAN128<barcode-cvs-ean128> | barcodeCVS-EAN128Sample1 | コンビニエンスストア(CVS)での公共料金等の払い込み用紙で用いられるバーコードの指定法に関するサンプルです。 |
11グラフ
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
折れ線グラフ<line-chart> | line-chartSample1 | マーカーの形状に関するサンプルです。 |
line-chartSample2 | マーカーおよび、マーカー中継線の有無に関するサンプルです。 | |
line-chartSample3 | マーカー中継線を表示しないサンプルです。 | |
縦棒グラフ<block-chart> | block-chartSample1 | 縦棒グラフのサンプルです。 |
block-chartSample2-1 | 縦棒グラフの種類に関するサンプルです。 | |
block-chartSample2-2 | 縦棒グラフの種類に関するサンプルです。 | |
block-chartSample3-1 | blocktype="vertical"時の、データラベル表示位置に関するサンプルです。 | |
block-chartSample3-2 | blocktype="vertical"時の、データラベル表示位置に関するサンプルです。 | |
block-chartSample3-3 | blocktype="vertical"時の、データラベル表示位置に関するサンプルです。 | |
block-chartSample4-1 | blocktype="horizon"時の、データラベル表示位置に関するサンプルです。 | |
block-chartSample4-2 | blocktype="horizon"時の、データラベル表示位置に関するサンプルです。 | |
block-chartSample4-3 | blocktype="horizon"時の、データラベル表示位置に関するサンプルです。 | |
block-chartSample5-1 | 目盛り単位の表示位置に関するサンプルです。 | |
block-chartSample5-2 | 目盛り単位の表示位置に関するサンプルです。 | |
block-chartSample6-1 | X 項目軸とY 数値軸の交点に関するサンプルです。 | |
block-chartSample6-2 | X 項目軸とY 数値軸の交点に関するサンプルです。 | |
block-chartSample7 | 凡例に関するサンプルです。 | |
block-chartSample8-1 | X 軸目盛りとY 軸目盛りの回転に関するサンプルです。 | |
block-chartSample8-2 | X 軸目盛りとY 軸目盛りの回転に関するサンプルです。 | |
block-chartSample9 | 表示文字列の表示に関するサンプルです。 | |
block-chartSample10 | Y 軸上げ幅に関するサンプルです。 | |
面グラフ<fill-chart> | fill-chartSample1 | 面グラフに関するサンプルです。 |
fill-chartSample2 | 面グラフに関するサンプルです。 | |
キャンドルチャート<candle-chart> | candle-chartSample1 | キャンドルチャートに関するサンプルです。 |
複合グラフ<mix-chart> | mix-chartSample1 | 縦棒グラフと折れ線グラフの複合グラフサンプルです。 |
mix-chartSample2 | 縦棒グラフと面グラフの複合グラフサンプルです。 | |
mix-chartSample3 | キャンドルチャートと折れ線グラフの複合グラフサンプルです。 | |
円グラフ<pie-chart3d> | pie-chart3dSample1 | 円グラフに関するサンプルです。 |
レーダーチャート<radar-chart> | radar-chartSample1 | レーダーチャートに関するサンプルです。 |
12フォーム
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
テキスト<form:text> | form-textSample1 | テキストフィールドのフォーム定義に関するサンプルです。 |
form-textSample2 | フォームフィールドの表示(hidden)と印刷(print)設定に関するサンプルです。 | |
form-textSample3 | form:number-format タグを使用して通貨形式で表示するサンプルです。 | |
form-textSample4 | form:percent-fomat タグを使用してパーセント表示するサンプルです。 | |
form-textSample5 | form:date-format タグとform:time-format タグを使用して日時を表示するサンプルです。 | |
パスワード<form:password> | form_passwordSample1 | パスワードフィールドに関するサンプルです。 |
実行ボタン<form:submit-button> | form_submit-buttonSample1 | フォーム送信機能付きボタンフィールドに関するサンプルです。 |
リセットボタン<form:reset-button> | form_reset-buttonSample1 | フォームリセット機能付きボタンフィールドに関するサンプルです。 |
プッシュボタン<form:push-button> | form_push-buttonSample1 | ボタンフィールドに関するサンプルです。 |
チェックボックス<form:check-box> | form_checkboxSample1 | チェックボックスに関するサンプルです。 |
ラジオボタン<form:radio-button> | form_radiobuttonSample1 | ラジオボタンに関するサンプルです。 |
リストボックス<form:list-box> | form_listboxSample1 | リストボックスに関するサンプルです。 |
コンボボックス<form:combo-box> | form_comboboxSample1 | コンボボックスに関するサンプルです。 |
JavaScript<form:javascript> | form_javascriptSample1 | カーソルやマウスで操作を行うとテキストボックスにイベントが追加表示されるサンプルです。 |
13しおり
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
しおり<page-label> | page-labelSample1 | しおりの作成に関するサンプルです。 |
14埋め込みデータオブジェクト
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
埋め込みデータオブジェクト<embedded-object> | embedded-objectSample1 | PDFファイルにExcelファイルを埋め込むサンプルです。 |
15電子署名
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
Self-Sign 用電子署名フィールド<signature> | signatureSample1 | 電子署名フィールドの表示と印刷設定に関するサンプルです。 |
Entrust 用電子署名フィールド<entrust-signature> | entrust-signatureSample1 | 「Entrust」用電子署名フィールドの表示( hidden 属性)と印刷(print 属性)設定に関するサンプルです。 |
VeriSign 用電子署名フィールド<verisign-signature> | verisign-signatureSample1 | 「VeriSign Digital Signatures」用電子署名フィールドの表示( hidden 属性)と印刷(print 属性)設定に関するサンプルです。 |
16透かし
オブジェクト名 | サンプル名 | 概要 |
---|---|---|
透かし <watermark> | watermarkSamplePosition1 | fit 属性をposition に設定したサンプルです。 |
watermarkSampleHorizon1 | fit 属性をhorizon に設定したサンプルです。 | |
watermarkSampleVertical1 | fit 属性をvertical に設定したサンプルです。 | |
watermarkSample1 | dx,dy 属性による表示位置を設定したサンプルです。 fit 属性がposition 以外の場合、初期値で中央揃えになります。 dx,dy 属性で相対的な座標を指定することが可能です。 水平方向(dx 属性)は中心を0 として右端が1、左端が-1 となります。 垂直方向(dy 属性)は中心を0 として上端が1、下端が-1 となります。 | |
watermarkSampleHorizon1-front | 透かしを前面に表示するサンプルです。 | |
watermarkSampleHorizon1-back | 透かしを背面に表示するサンプルです。 | |
横書き透かしテキスト<watermark-text> | watermarkSampleText1 | テキストの指定方法に関するサンプルです。 |
透かしイメージ<watermark-image> | watermarkSampleImage1 | イメージの指定方法に関するサンプルです。 |
透かし罫線<watermark-line> | watermarkSampleLine1 | 罫線の指定方法に関するサンプルです。 |
透かし四角形<watermark-square> | watermarkSampleSquare1 | 罫線の指定方法に関するサンプルです。 |