【salesforce】Classic基本知識ーVisualforceページ作成

本セクションにはSalesforce　ClassicのVisualforceページ、拡張コントローラー、カスタムコントローラー作成手順を紹介いたします。
# Visualforceページ作成
本節には、標準コントローラーの使い方とVisualforceページ作成手順を説明します。

- 手順
    1. 画面上部自分の名前の下にある「開発者コンソール」をクリックして、開発者コンソールが、新しいウィンドウに表示されます。
    2. [File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。
    3. 「新しいページの名前」に「vf0001」を入力し、[OK] をクリックして、開発者コンソールで、新しい空白のVisualforceページが開きます。
    4. エディタで、ページに「vf0001.vfp」のマークアップを入力します。
    5. [File (ファイル)] | [Save (保存)] をクリックします。
    6. 新しいページを表示するには、[Preview (プレビュー)] をクリックします。

作成したVisualforceページをプレビュー表示できますけど、通常運用の場合は、タブを作成し、利用するのは多いです。タブ作成手順は[Classic基本知識ーオブジェクト、タグ、アプリケーション作成](https://qiita.com/training_zhang/items/9329e44288a72403aa75)をご参照ください。
※該例に、標準コントローラー「Account」の単一レコード検索アクションを利用していますので、画面開く時、表示したいAccountのIDパラメータが必要です。なので、表示URLの最後に「id=任意な存在しているAccountのID」を追加しいと、画面のラベルしか表示しない、Accountの情報は表示できません。
※vf0002.vfpのマークアップは標準コントローラーのリストアクションを利用する例です。（考え：①デフォルトえどのビュー利用しますか、②ビューを指定できますか？）

```jsp:vf0001.vfp
<apex:page standardController="Account">
        <head>
        <style>
          body {
            font-family: 'Arial Unicode MS';
          }
        </style>
    </head>
    <apex:pageBlock title="Account Summary">
        <apex:pageBlockSection >
            
            Name: {! Account.Name } <br/>
            Phone: {! Account.Phone } <br/>
            Industry: {! Account.Industry } <br/>
            Revenue: {! Account.AnnualRevenue } <br/>
            
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
```
```jsp:vf0002.vfp
<apex:page standardController="Contact" recordSetVar="contacts">
    <apex:pageBlock title="Contacts List">
        
        <!-- Contacts List -->
        <apex:pageBlockTable value="{! contacts }" var="ct">
            <apex:column value="{! ct.FirstName }"/>
            <apex:column value="{! ct.LastName }"/>
            <apex:column value="{! ct.Email }"/>
            <apex:column value="{! ct.Account.Name }"/>
        </apex:pageBlockTable>
        
    </apex:pageBlock>
</apex:page>
```

# 拡張コントローラー作成
- 拡張コントローラー作成手順
    1. 「開発者コンソール」を起動する。
    2. [File (ファイル)] | [New (新規)] | [Apex Class] をクリックします。
    3. 「新しいクラスの名前」に「myControllerExtension」を入力し、[OK] をクリックして、開発者コンソールで、新しい空白のApex Classが開きます。
    4. エディタで、ページに「myControllerExtension.apxc」のソースを入力します。
    5. [File (ファイル)] | [Save (保存)] をクリックします。

```java:myControllerExtension.apxc
public class myControllerExtension {

    private final Account acct;
    
    // The extension constructor initializes the private member
    // variable acct by using the getRecord method from the standard
    // controller.
    public myControllerExtension(ApexPages.StandardController stdController) {
        this.acct = (Account)stdController.getRecord();
    }

    public String getGreeting() {
        return 'Hello ' + acct.name + ' (' + acct.id + ')';
    }
}
```

- 検証Visualforceページ作成手順

「Visualforceページ作成」節の手順で、「vf0003.vfp」のVisualforceページを作成します。

```jsp:vf0003.vfp
<apex:page standardController="Account" extensions="myControllerExtension">
    {!greeting} <p/>
    <apex:form>
        <apex:inputField value="{!account.name}"/> <p/>
        <apex:commandButton value="Save" action="{!save}"/>
    </apex:form>
</apex:page>
```


# カスタムコントローラー作成
- カスタムコントローラー作成手順

　　「拡張コントローラー作成」節の「拡張コントローラー作成手順」により「ContactsListController.apxc」Apex Classを作成します。

```java:ContactsListController.apxc
public class ContactsListController {
	private String sortOrder = 'LastName';
    
    public List<Contact> getContacts() {
        
        List<Contact> results = Database.query(
            'SELECT Id, FirstName, LastName, Title, Email ' +
            'FROM Contact ' +
            'ORDER BY ' + sortOrder + ' ASC ' +
            'LIMIT 10'
        );
        return results;
    }
}
```

- 検証Visualforceページ作成手順

　　「Visualforceページ作成」節の手順で、「vf0004.vfp」のVisualforceページを作成します。

```jsp:vf0004.vfp
<apex:page controller="ContactsListController">
    <apex:form>
        <apex:pageBlock title="Contacts List" id="contacts_list">
            
            <!-- Contacts List -->
            <apex:pageBlockTable value="{! contacts }" var="ct">
                <apex:column value="{! ct.FirstName }"/>
                <apex:column value="{! ct.LastName }"/>
                <apex:column value="{! ct.Title }"/>
                <apex:column value="{! ct.Email }"/>
                
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>
```

# カスタムコントローラー作成例の進階
　　カスタムコントローラー作成例の進階として、FirstNameとLastNameでソート機能を追加します。

- 「ContactsListController.apxc」Apex Classに下記メソードを追記します。

```java:
public void sortByLastName() {
    this.sortOrder = 'LastName';
}
    
public void sortByFirstName() {
    this.sortOrder = 'FirstName';
}
```

- 「vf0004.vfp」のVisualforceページを以下のように変更します。

```jsp:
<apex:column value="{! ct.FirstName }">
    <apex:facet name="header">
        <apex:commandLink action="{! sortByFirstName }" 
            reRender="contacts_list">First Name
        </apex:commandLink>
    </apex:facet>
</apex:column>
<apex:column value="{! ct.LastName }">
    <apex:facet name="header">
        <apex:commandLink action="{! sortByLastName }" 
            reRender="contacts_list">Last Name
        </apex:commandLink>
    </apex:facet>
</apex:column>
```

結果を試してみてください。

# まとめ
　　本セクションにより、自分で簡単的にVisualforceページ作成、標準コントローラー利用、拡張とカスタムコントローラー作成をできたと思います。時間があれば是非trailhead上の関連モジュールとプロジェクトを研修してください。

# 参考資料
[Trailhead: Visualforce の基礎](https://trailhead.salesforce.com/ja/content/learn/modules/visualforce_fundamentals)
[標準コントローラ](https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_controller_std.htm)
[標準リストコントローラ](https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_controller_sosc_about.htm)
[カスタムコントローラおよびコントローラ拡張](https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_controller.htm)