logo

サイト内検索
ココログ最強検索 by 暴想

最近のトラックバック

無料ブログはココログ

« VisualForcePDFの改ページについて_2:ページラッパー制御編 | トップページ | VisualForcePDFの改ページについて_4:VisualForce編 »

VisualForcePDFの改ページについて_3:レコード表示制御編

Creating Professional PDF Documents with CSS and Visualforce
※基本的に上記リンクに描いてあることを噛み砕んでいる物です。

前回は1ページはラッパー表現推奨~という話をしました。
今回はデータ表示、レコード表示のテーブルについてかこうと思います。

例えばこのような帳票があるとします。

これを表現するにはどうしたら良いでしょう。


前回指摘した通り、通常手段ではループカウントは利用できません。

またグループ化した1レコード目のみデータ表示を行う事や、
ボーダーの表示非表示を制御する必要もありそうです。

つまりここでもラッパーを利用します。

Tips: つまり List<ページラッパー<レコードラッパー>> という構成になります。
  またレコードラッパーはSObjectを格納します





 テーブルのヘッダー部分を動的に変えたいケースも出てくるでしょう。
この場合apex:PageBlockTableでは上手く行かない場合があります。

Tips:具体的にはタイトル表示に使う apex:facetタグ に<apex:outputText>が入れ込めない。
  また後述する「ナナメ線の表現」が出来ない。

ここでは<Table>+apex:repeatを使って説明していきます。
ただし利用時は最低限必ずスタイル:「border-collapse:cllapse;」を適用してください。

Tips:border-collapse:cllapse;の適用について
Ws000001

Tips:各種利点と欠点について

・PageBlockTable
       
  • 利点        
                  
    • 構築が分かりやすく作り易い
    •             
    • ヘッダと表示データのコード位置が
      近しいため、メンテナンスしやすい
    •             
    • スタイルクラスに[.even][.odd]
      というモノを用意すれば
      色違いの表が簡単にできる。
    •        
       
  •    
  • 欠点        
                  
    • ヘッダーにapex:outputTextが使えない
    •             
    • Image挿し込みによるスラッシュ表示が不可能
    •             
    • 動的にヘッダーを作り込めない
    •        
       

・<Table>+apex:repeat
       
  • 利点        
                  
    • 素のテーブルなのでカスタマイズ性が非情に高い
    •             
    • [A\B]という表現が可能
    •             
    • 動的なヘッダ作成も思うがまま
    •        
       
  •    
  • 欠点        
                  
    • 構築上必須CSSが存在する
    •             
    • ヘッダ行とデータ表示行が離れるため、
      構築上注意が必要
    •        

       

ちなみに両者ともにColspanおよびRowspanは利用しません。
全てフラグ制御でボーダー表示などを行います。
(Excelでセル結合せず表を作るイメージ)

構築は可能ですが、若干分かりづらいものになると思います。
またコーディングも難しくなり相対的にコード量が増えると思われます。






=============================

注意点1:データ表示限界について

1つセルに表示されるデータのWidthは、設定したWidthを大きく超えると致命的な問題が発生します。

例えば横幅100Pxのフィールドがあったとします。
そこに100pxを大きく超える2,000Px相当のインライン要素をいれこむと…

※顧客名に注目してください
Ws000002_3

これはひどい

そうならないよう、意図的に表示文字数を制御することをおすすめします。

方法はApex:outputTextのフォーマット機能か、
String.substringを利用するかのどちらかでしょう。

Tips:スタイルシート「Overflow」による表示制御は試しましたが、
  PDF化すると効かなくなるようです



また動的に改行(<br />)するケースも同じような問題があります。

1ページあたりのデータ表示件数はHeightではなく行数で見ています

行数とは「テーブル行要素内に文字表示をしたときのテーブル行Height」になります。
動的にとは、この文字表示部分を改行したケースを指します。
Kaigyoimg

この時 テーブルの1行のHeight ≠ 1文字のHeight であるため、表示が狂います。

最悪ページの底が突き抜けるケースがあり得るでしょう。
なので固定改行ではない動的改行は、改行=次のレコード行として作ったほうが良いかと思います。

Kugirikaigyo

Tips:レコード表示を空で表示するときも、
  Heightを合わせるために最大Heightを確保した空レコードをつくるようにしてください。
Tips:br 改行数の最大値が決まっているのであれば、
  そのサイズだけ事前にから文字改行でHeightを取るのも手です。





=============================

注意点2:画像の利用について

基本的にHTMLをPDFを変換しているため、画像を表示すればそのままPDFに反映されます。

Imgpdf

※使用した画像はこちら
Test

実装例
<apex:image value="{!$Resource.イメージ画像名}" widht="82px" height="30px" />

しかし見たとおり、ドットのアラ(ジャギー)が目立って多少ではなく見苦しい面があります。

よって画像は「大きく」作り、表示するときはサイズ指定で小さく表示することを是非おすすめします。

 

またこれを利用し、HTMLでは出来ない次のような表現が可能です。

Slashpdf

 

実装は以下のように行います。

1.次のような\を描いた大きい画像を用意。

Sla

おおむね300px*300pxあれば充分。
Backgroundなどで背景色が変わる場合、画像の透過処理もお忘れなく。

2.静的リソースとしてアップロード

3.以下のように実装

※画像を300*300 から 180*60にリサイズ
<div style="position: relative; border:1px solid black; width:180px; height:60px;">
   <apex:image value="{!$Resource.slash}" width="180px" height="60px" /><br />
   <span style="position:absolute; top:3px; right:3px;">cd</span>
   <span style="position:absolute; bottom:3px; left:3px;">ab</span>
</div>

※divはtdに置き換えてもOK

注意点としては、Widthが固定されてしまう事。
全体的なWidth修正時はこの部分も対象になるので留意してください。

またapex:pageBlockTableでこの表現は利用できないので注意してください。

Tips:画像表示したPDF印刷でCromeを使う場合は注意が必要です。
  Version12において、画像の印刷がうまくいかないケースが発生しました。







=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=

実際にレコード表示用ラッパーを作る

レコード表示用ラッパーの要点は以下のとおりです

  ・行のデータをピンポイントで表示非表示を制御可能
  ・ボーダーラインの制御が可能
  ・文字制限を行う(ソース上で行う場合)

ここで動的にボーダーラインを作るため、実装の形は以下のようにします。
Tableに対して設定するCSSは以下のような形が良いかと思います。

A.Tableに対するスタイルシート設定
  border-collapse: collapse;     //項番1で説明した物
  border-left:1px solid black;   //左にボーダー
  border-bottom:1px solid black; //下にボーダー

Ws000004

B.1セルごとのスタイルシート設定
  border-top:1px solid black;    //上にボーダー
  border-right:1px solid black;  //右にボーダー

Ws000005

AとBを組み合わせると、調度良い形で表が形作れるとおもいます。
またB項目のセル設定を外部から設定する形にすれば、表示の問題も解決できます。

これを表現するラッパーは以下のように構築すると良いかと思います。

public class RecordWrapper{
    private SObject record;       //実データを格納
    private Boolean dummy = false;     //ダミーレコードかどうか
    private Boolean lineFlag = false;  //線表示に関するフラグ   ←←←
    private Integer strlen = 15;       //文字数制限用。置き場はドコデモ。


    /*ダミーレコード用*/
    public RecordWrapper(){
        record = new SObject();  //Nullは絶対回避
        dummy = true;            //ダミー証明
    }


    /*通常レコード用*/
    public RecordWrapper(SObject record){
        this.record = record;  //実データ格納
        dummy = false;         //ダミー解除
    }


    /* 実データは必ず参照可能にする */
    public SObject getRecord(){
        return record;
    }


    /*ダミーはコンストラクタで定義するため、Getterのみ用意*/
    public Boolean getDummy(){
        return dummy;
    }


    /*線表示用Boolean設定*/
    public void setLineFlag(Boolean lineFlag){
        this.lineFlag = lineFlag;
    }
    public Boolean getLineFlag(){
        return lineFlag;
    }


    /* コード上で表示文字数を制限:こちらで通す場合、Staticメソッド化推奨 */
    public String getSeigenString(){
        String str = record.STRING__c;
        if(str == null && str == ''){
            return '';
        }
        if(str.length() =< strlen){
            return str;
        }
        return str.substring(0, strlen);
    }


//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--


    /*スタイルシートクラスを指定し、ボーダーラインを制御*/
    public String getLineStyle(){
        if(lineFlag){
            return 'topSolid';    //上部に直線
        }
        if(dummy){
            return 'topDotted';   //上部に点線
        }
        return '';                //表示しない
    }
}

これをデータのリストの代わりに利用し、表示制御を行えばOKです。




ではよきSalesForceライフを。

« VisualForcePDFの改ページについて_2:ページラッパー制御編 | トップページ | VisualForcePDFの改ページについて_4:VisualForce編 »

Salesforce」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1482716/40708959

この記事へのトラックバック一覧です: VisualForcePDFの改ページについて_3:レコード表示制御編:

« VisualForcePDFの改ページについて_2:ページラッパー制御編 | トップページ | VisualForcePDFの改ページについて_4:VisualForce編 »