コンポーネントの詳細

<LinearBlock> と <StackBlock>

<LinearBlock> と <StackBlock> は、名前の通り、コンテンツ（子コンポーネント）をリニアルール・スタックルールでレイアウトするコンテナです。 部分的にレイアウトルールを切り替えたい場合に使用します。

以下の属性を指定できるため、単にデザインコンテナとしても使用できます。

属性	概要
align	コンテンツの水平方向の配置を設定します。
valign	コンテンツの垂直方向の配置を設定します。
borderThickness	境界線の太さを設定します。
borderColor	境界線の色を設定します。
borderStyle	境界線の描画パターンを設定します。
backgroundColor	背景色を設定します。
padding	領域の内側の余白の大きさを設定します。

また、帳票ならではの特異なユースケースとして、「テキストの上に円や印影を重ねる」という使い方があります。 以下は「１の上に円を重ねる」例です。

<StackBlock height="18" borderThickness="regular">
  <Text x="2" y="2" width="50">
    １．法人事業所
    ２．個人事業所
    ３．国・地方公共団体
  </Text>
  <Ellipse x="1" y="1" width="6" height="6" />
</StackBlock>

<Grid>

<Grid> は、行と列で構成されるグリッド構造を持つコンテナ要素です。子要素の <GridCell> と合わせて使用します。

単純な表を構成するだけではなく、セル結合を駆使して複雑な表を構成したり、罫線を表示しないようにして2段組みレイアウトに使ったりと、様々な使い方が可能です。

グリッド領域の分割

<Grid> を使うには、まず cols 属性と rows 属性でグリッド領域を分割します。

cols 属性では、各列の幅をスペース区切りで指定します。 指定可能な値は以下の通りです。

• 符号なし実数値 : 固定値
• * : 固定値の列を除いた「残りの幅」を均等に分割

例えば、<Grid>全体の幅が500mmである場合に、cols 属性の * の動作は以下のようになります。

• cols="100 * 150"
  • 1列目: 100mm
  • 2列目: (500 - 100 - 150) / 1 = 250mm
  • 3列目: 150mm
• cols="100 * *"
  • 1列目: 100mm
  • 2-3列目: (500 - 100) / 2 = 200mm

rows 属性では、各行の高さをスペース区切りで指定します。 指定可能な値は以下の通りです。

• 符号なし実数値 : 固定値
• n: : n 以上（nは符号なし実数値）
• :m : m 以下（mは符号なし実数値）
• n:m : n 以上 m 以下（n, mは符号なし実数値）
• auto : セル内コンテンツの高さに合わせて自動調整

セルの配置と結合

<Grid> にセルを配置するには、子要素として <GridCell> を記述します。

col 属性と row 属性でセルの位置を指定します。 最初の列と行は 0 から始まります。

<Grid cols="100 *" rows="30 40">
  <GridCell col="0" row="0"><Text>左上</Text></GridCell>
  <GridCell col="1" row="0"><Text>右上</Text></GridCell>
  <GridCell col="0" row="1"><Text>左下</Text></GridCell>
  <GridCell col="1" row="1"><Text>右下</Text></GridCell>
</Grid>

colspan 属性と rowspan 属性を指定することで、セルを結合することができます。

<Grid cols="100 * *" rows="30 40 50">
  <GridCell col="0" row="0" colspan="3" rowspan="2"><Text>3×2</Text></GridCell>
  <GridCell col="0" row="2"><Text>左下</Text></GridCell>
  <GridCell col="1" row="2" colspan="2"><Text>右下</Text></GridCell>
</Grid>

<GridCell> の子要素には、複数のコンポーネントをコンテンツとして記述できます。 リニアルールに基づいて、コンテンツは上から下へ順番に描画されます。

また、<GridCell> では以下の属性も指定できます。

属性	概要
align	コンテンツの水平方向の配置を設定します。
valign	コンテンツの垂直方向の配置を設定します。
backgroundColor	セルの背景色を設定します。
padding	セルの内側の余白の大きさを設定します。

罫線の設定

<Grid> では、大きく分類して3系統の罫線属性が用意されています。

• <Grid> の borderXxx 属性
  • <Grid> 全体のすべての罫線を一括で指定します。
• <Grid> の outerBorderXxx 属性
  • <Grid> 全体の外周の罫線を一括で指定します。
• <GridCell> の borderXxx 属性
  • 各セルの境界線を個別に指定します。

borderThickness や outerBorderColor のように、それぞれの系統で罫線の太さ・色・スタイルを設定できます。 これらの罫線属性は同時に設定して衝突した場合は、以下の優先順位で解決されます。

1. <GridCell> の borderXxx 属性
2. <Grid> の outerBorderXxx 属性
3. <Grid> の borderXxx 属性

また、スタイルXMLでは、セル範囲を指定して罫線を設定できる <CellRange> 要素も用意されています。

制限と代替手段

<Grid> 自体にはヘッダー・フッターという概念はありませんが、<Frame> と組み合わせることで、改ページ対応のヘッダー・フッターを付与できます。

<Table>

<Table> は、テンプレート変数で入力したデータを表形式で描画するコンポーネントです。 可変行明細やデータグリッドなどとも呼ばれます。

<Table> は列を基準にレイアウトを定義します。 以下の記述例をもとに、各要素を説明します。

<Table items="${items}">
  <TableColumn width="*">
    <TableColumnHeader>
      <Text>品名</Text>
    </TableColumnHeader>
    <TableColumnTemplate>
      <Text>${name}</Text>
    </TableColumnTemplate>
  </TableColumn>
  <TableColumn width="25">
    <TableColumnHeader>
      <Text>数量</Text>
    </TableColumnHeader>
    <TableColumnTemplate>
      <Text align="right">${quantity}</Text>
    </TableColumnTemplate>
  </TableColumn>
  <TableColumn width="25">
    <TableColumnHeader>
      <Text>単価</Text>
    </TableColumnHeader>
    <TableColumnTemplate>
      <Text align="right">${unitPrice}</Text>
    </TableColumnTemplate>
  </TableColumn>
  <TableColumn width="30">
    <TableColumnHeader>
      <Text>金額</Text>
    </TableColumnHeader>
    <TableColumnTemplate>
      <Text align="right">${price}</Text>
    </TableColumnTemplate>
  </TableColumn>
</Table>

• items 属性
  • テンプレート変数を指定します。配列である必要があります。
  • 配列の各要素が1行分のデータとして描画されます。
• <TableColumn> 要素
  • 列を定義します。<TableColumn> は1個以上必要です。
  • width 属性で列の幅を指定します。<Grid> の cols 属性と同様に、固定値（符号なし実数値）と * を指定できます。
• <TableColumnTemplate> 要素
  • 可変行（明細行）のセルを描画するためのテンプレートを定義します。この要素は必ず1つ記述します。
  • <TableColumnTemplate> の子要素には、コンポーネントを記述します。
    • 複数のコンポーネントを記述でき、各行の描画時にはリニアルールでレイアウトされます。
  • <TableColumnHeader> <TableColumnFooter> 要素で、各列のヘッダー・フッターを定義します。
    • この2つの要素は省略可能です。
    • <Table> が改ページされる場合、全てのページで同じヘッダー・フッターが表示されます。

罫線の設定

<Table> では、大きく分類して3系統の罫線属性が用意されています。

• <Table> の borderXxx 属性
  • <Table> 全体のすべての罫線を一括で設定します。
• <Table> の outerBorderXxx 属性
  • <Table> 全体の外周の罫線を一括で設定します。
• <TableColumnTemplate> <TableColumnHeader> <TableColumnFooter> の borderXxx 属性
  • 各セルの境界線を個別に設定します。

borderThickness や outerBorderColor のように、それぞれの系統で罫線の太さ・色・スタイルを設定できます。 これらの罫線属性は同時に設定して衝突した場合は、以下の優先順位で解決されます。

1. <TableColumnTemplate> <TableColumnHeader> <TableColumnFooter> の borderXxx 属性
2. <Table> の outerBorderXxx 属性
3. <Table> の borderXxx 属性

また、スタイルXMLでは、セル範囲を指定して罫線を設定できる <CellRange> 要素も用意されています。

制限と代替手段

<Table> の制限として、セルの結合はできませんが、以下の代替手段があります。

• ヘッダー・フッターのセル結合が必要な場合は、<Frame> と組み合わせます。
• 可変行を縦方向に結合したい（グループごとにまとめる、キーブレイク）場合は、<TableColumnTemplate> で <Table> を入れ子にして記述します。
• 可変行を横方向に結合したい場合は、<TableColumnTemplate> の中で <Grid> を使用します。

<Frame>

<Frame> は、<Grid> と <Table> に、改ページ対応のヘッダー・フッターを追加するコンテナです。

<Frame> の直下には <Grid> または <Table> を1つだけ記述し、あわせて以下の要素を任意で記述します。

• <FrameHeader> : 全体で1回だけ描画するヘッダー領域を定義します。
• <FramePageHeader> : 各ページのヘッダー領域を定義します。
• <FramePageFooter> : 各ページのフッター領域を定義します。
• <FrameFooter> : 全体で1回だけ描画するフッター領域を定義します。

これらの4つの要素の子要素には、コンポーネントを記述します。 複数のコンポーネントを記述した場合は、リニアルールに基づいて上から下へ順番に描画されます。

また、<Frame> の特殊な点として、隣接する <Frame> の構成要素で罫線のあるコンポーネントを配置した場合に、罫線を重ね合わせて描画します。 この特性を利用することで、複雑なヘッダー・フッターを持つ表（例えば、請求書に小計欄を付けるなど）を簡単に表現できます。

以下の例では <Table> の下に、小計・消費税・合計欄をもつ <Grid> を配置しています。

<Frame>
  <Table items="${items}">
    <TableColumn width="*">
      <TableColumnHeader>
        <Text>品名</Text>
      </TableColumnHeader>
      <TableColumnTemplate>
        <Text>${name}</Text>
      </TableColumnTemplate>
    </TableColumn>
    <TableColumn width="30">
      <TableColumnHeader>
        <Text>金額</Text>
      </TableColumnHeader>
      <TableColumnTemplate>
        <Text align="right">${price}</Text>
      </TableColumnTemplate>
    </TableColumn>
  </Table>
  <FrameFooter>
    <Grid cols="* 20 30" rows="auto auto auto">
      <GridCell col="1" row="0" borderThickness="regular">
        <Text>小計</Text>
      </GridCell>
      <GridCell col="2" row="0" borderThickness="regular">
        <Text align="right">${total}</Text>
      </GridCell>
      <GridCell col="1" row="1" borderThickness="regular">
        <Text>消費税</Text>
      </GridCell>
      <GridCell col="2" row="1" borderThickness="regular">
        <Text align="right">${tax}</Text>
      </GridCell>
      <GridCell col="1" row="2" borderThickness="regular">
        <Text>合計</Text>
      </GridCell>
      <GridCell col="2" row="2" borderThickness="regular">
        <Text align="right">${totalWithTax}</Text>
      </GridCell>
    </Grid>
  </FrameFooter>
</Frame>

テキストの装飾

テキスト系コンポーネントでは、共通して以下の属性が設定可能です。

属性	概要
fontFamily	フォントファミリー
size	フォントサイズ
color	テキストの色
bold	太字

fontFamily に以下のフォントが指定できます。 ユーザー独自のフォント（ユーザーフォント）を使用することも可能です。

• gothic : ゴシック体（BIZ UDゴシック）
• mincho : 明朝体（BIZ UD明朝）

<RichText>

<RichText> は、装飾付きテキストを描画するコンポーネントです。

以下のように、テキストコンテンツ内で <Span> 要素を使用して、部分的に装飾を変更できます。

<RichText size="16" color="blue">
  Hello, <Span bold="true" color="red">yagisan-reports</Span>!
</RichText>

<Span> 要素は入れ子にして記述しても構いません。

<RichText size="16" color="blue">
  Hello, <Span bold="true"><Span color="red">yagisan</Span>-reports</Span>!
</RichText>

<ColumnText>

<ColumnText> は、文字を1文字ずつセルに分割して配置するコンポーネントです。 yagisan-reportsの中でも特殊なコンポーネントで、テキスト系コンポーネントであると同時に、<Grid> のような性質をもつコンポーネントでもあります。

• テキスト系コンポーネントとして、テキスト装飾属性が指定できます。
• <Grid> と同様に、cols 属性でセルを指定できます。セルには1文字ずつ文字が配置されます。

以下は、5文字分のセルを持つ <ColumnText> の例です。

<ColumnText
  size="16"
  bold="true"
  cols="* * * * *"
  borderThickness="regular"
>
  12345
</ColumnText>