モジュール 8: コントローラ拡張機能の作成

このモジュールでは、モジュール 7 で作成した Visualforce ページの機能を強化します。コントローラ拡張機能を作成して、スピーカーの写真をアップロードできるようにします

ステップ 1: コントローラ拡張機能を作成する

このステップでは、シンプルなコントローラ拡張による increment() メソッド及び counter プロパティの 追加を通してコントローラ拡張の仕組みについて学びます。Increment ボタンをSpeakerForm ページ上で押下すると、 拡張コントローラのincrement() メソッドが、カウンタプロパティをインクリメントされ、新しい値が画面に自動的に表示されます。次のステップでは、講演者の写真のアップロードをサポートするなどより実用的な SpeakerControllerExtension を作成します。

1. 開発者コンソールで、 File > New > ApexClass の順にクリックし、クラス名に SpeakerControllerExtension と入力し、 OK をクリックします

2. 次のようにクラスを実装します:

   public class SpeakerControllerExtension {
   
       public Integer counter {get; set;}
   
       private final Speaker__c speaker;
       private ApexPages.StandardController stdController;
   
       public SpeakerControllerExtension(ApexPages.StandardController stdController) {
           this.speaker = (Speaker__c)stdController.getRecord();
           this.stdController = stdController;
           counter = 0;
       }
   
       public void increment() {
           counter++;
       }
   
   }
   

3. ファイルを保存します

4. 開発者コンソールでSpeakerFormのページを開き、ページの定義にコントローラ拡張機能を追加します:

   <apex:page standardController="Speaker__c" extensions="SpeakerControllerExtension">
   

5. Increment ボタンを追加します (保存ボタンのすぐ後):

   <apex:commandButton action="{!increment}" value="Increment"/>
   

6. counterを追加します (</apex:pageBlock>タグのすぐ後):

   {!counter}
   

7. ファイルを保存します

8. アプリケーションをテストします

   • Speakers タブをクリックし、speakerを選択し、 編集 をクリックします
   • Incrementボタンを何回か押下し、ページ下部のカウンターの値が表示されることを確認します。

Step 2: データモデルを拡張する

このステップでは、Speaker オブジェクトに 2 つの項目を追加します。1 つ目は[Picture_Path]で、サーバ上の画像の場所を格納します。2 つ目は Picture で、これは、Visualforce ページに画像を表示するために使われる数式項目です。

1. 設定 で ビルド > 作成 > オブジェクト の順に選択し、 Speaker リンクをクリックします

2. カスタム項目＆リレーション セクションで 新規 をクリックし、 画像パス を次のように定義します:

   • データ型：テキスト
   • 項目の表示ラベル：画像パス
   • 文字数：255
   • 項目名：Picture_Path

次へ 、 次へ 、 保存＆新規 の順にクリックします

1. Picture項目を次のように定義します:

   • データ型：数式
   • 項目の表示ラベル：画像
   • 項目名：Picture
   • 数式の戻り値のデータ型：テキスト

   • 数式: IMAGE(Picture_Path__c, '')

     数式の指定では、二重引用符ではなく2つの単一引用符を使用してください。

次へ 、 次へ 、 保存 の順にクリックします。

ステップ 3: 画像のアップロード機能を追加する

1. 開発者コンソールにて SpeakerControllerExtension を開きます。

2. counter変数の宣言、コンストラクタ内での初期化処理、そしてincrement()メソッドの宣言を削除します

3. 以下の様に変数を宣言します (　speaker変数宣言のすぐ前):

   public blob picture { get; set; }
   public String errorMessage { get; set; }
   

4. 標準コントローラのデフォルト挙動をオーバライドする形で、save() メソッドを以下の様に実装します (コンストラクタメソッドのすぐ後):

   public PageReference save() {
       errorMessage = '';
       try {
           upsert speaker;
           if (picture != null) {
               Attachment attachment = new Attachment();
               attachment.body = picture;
               attachment.name = 'speaker_' + speaker.id + '.jpg';
               attachment.parentid = speaker.id;
               attachment.ContentType = 'application/jpg';
               insert attachment;
               speaker.Picture_Path__c = '/servlet/servlet.FileDownload?file='
                                         + attachment.id;
               update speaker;
           }
           return new ApexPages.StandardController(speaker).view();
       } catch(System.Exception ex) {
           errorMessage = ex.getMessage();
           return null;
       }
   }
   

5. ファイルを保存します

6. 開発者コンソールでSpeakerFormのページを開ます

7. Remove the Increment button

8. inputFileを追加します（EmailのinputFieldの直後）:

   <apex:inputFile value="{!picture}" accept="image/*" />
   

9. カウンターの代わりに、 </apex:pageBlock>の直後にエラーメッセージを表示するようにします 。

   {!errorMessage}
   

10. ファイルを保存します。

ステップ 4: アプリケーションをテストする

1. 講演者タブをクリックします

2. 新規をクリックして講演者レコードを作成します

3. スピーカーの名、姓、メールアドレスを入力します

4. 参照 ボタンをクリックしてファイルシステム上のjpgファイルを選択します

5. 保存 ボタンをクリックして、レコードの詳細ページに写真が表示されることを確認します。