Force.com Weibnar : アドバンスドVisualforce

Force.com Webinar:
アドバンスド Visualforce

Mitsuhiro Okamoto
Program Manager
Developer / Platform Marketing

ハッシュタグでShareしよう: #forcewebinarjp
Join the conversation: #forcewebinar

Agenda
1. 前提条件

2. 厄介だけどいい友達: View State

3. View Stateの管理

4. 非同期Apex


想定と難易度


このアドバンスド Webinar の前提条件...



...不明点なく、自信を持ってVisualforceが記述できる




...一般的なApexコードを書く事ができる




...一般的なApexコードを書く事ができる

...HTML & JavaScriptそしてAJAXのコンセプトを理解している


厄介だけどいい友達:
View State


Q: View Stateとは?
A: Apexコントローラの状態やVisualforceページの状態をサーバ
リクエスト間も保持するための、Visualforceページ内に暗号化
されたhiddenの <input> フィールドのこと。このフィールドは
<apex:form> タグがページ上にある場合のみ生成される。


Visualforceのライフサイクル
A
A : URLがリクエストされる
HTTP GET B : Apexコントローラがサーバ上でインス
タンス化される
E C : コントローラの状態がView Stateに直
HTTP POST
列化(シリアライズ)& 暗号化されて
D : ページマークアップがブラウザに送信
D
B され、描画される
E : View Stateが復号 & 復元される
(PostBack時)

<input type="hidden" value="..."/> C


View State: 利点と課題

すばらしい点 :-) 課題 :-(
• 自動的にフィールドの値を保持してく • 巨大化し、パフォーマンスに影響を
れる与える可能性

• 簡単なAJAX機能を持ち合わせている • サイズ制限(135k)を持っている
• 非常に簡単に使えるre-renderページ • 複雑なAJAX機能に対応しづらい
コンポーネントを持つ


View Stateを必要とするもの...
<apex:action*>
<apex:command*>
<apex:inlineEditSupport>
<apex:input*>
<apex:select*>


View Stateの管理


どのようにView Stateを管理するか?


A. コンポーネントの数を減らす



B. transient キーワードを利用する




C. JavaScript Remotingを利用する




C. JavaScript Remotingを利用する

D. Streaming APIを利用する


オプション A: コンポーネント数を減らす



<apex:outputPanel layout="inline"...>

<apex:outputPanel layout="block"...>

<apex:panelGrid...>

<apex:outputLink...>

<apex:outputText styleClass="..."...>



<apex:outputPanel layout="inline"...> <span...>

<apex:outputPanel layout="block"...> <div...>

<apex:panelGrid...> <table...>

<apex:outputLink...> <a...>

<apex:outputText styleClass="..."...> <span...>



<span...>

<div...>

<table...>

<a...>

<span...>


オプション B: transient キーワード

public with sharing class EditClientController {

public Contact client { get; set; }
transient public List<Contact> connections { get; set; }
transient public List<Account> previousEmployers { get; set; }
transient public Set<String> hashTags { get; set; }

...

}


オプション B: transient キーワードを使う

BEFORE
AFTER


オプション B: transient キーワードを使う

BEFORE

57%
AFTER


オプション C: JavaScript Remotingを使う
Q: JavaScript Remotingとは?

A: ステートレスにApexコントローラ内のメソッドをJavascriptか
ら呼ぶ方法


オプション C: Use JavaScript Remoting

取引先責任者を検索:




<apex:actionFunction ... />
<apex:actionRegion ... />
<apex:actionSupport ... />




JavaScript Remoting


JavaScript Remoting のライフサイクル



JS Function



JS Function

Apex Method



JS Function

Apex Method

JS Callback



JS Function

Apex Method
クライアントサイド

JS Callback サーバサイド


JS Function

Apex Method

JS Callback


オプション C: JavaScript Remoting: ページ

<apex:page controller="FindCustomerController">

<input id="searchField" type="text" placeholder="姓を入力"/>
<button onclick="handleButtonClick();">検索</button>

<table>
<tbody id="results"></tbody>
</table>
JS Function

</apex:page> Apex Method

JS Callback


オプション C: JavaScript Remoting: JavaScript

function handleButtonClick() {
var searchTerm = document.getElementById("searchField").value;
FindCustomerController.doSearch(searchTerm, renderResults);
}

JS Function

Apex Method

JS Callback


オプション C: JavaScript Remoting: JavaScript

function handleButtonClick() {
var searchTerm = document.getElementById("searchField").value;
FindCustomerController.doSearch(searchTerm, renderResults);
}
Apexクラス Apexメソッド Apexメソッドパラメータ JSコールバック関数

JS Function

Apex Method

JS Callback


オプション C: JavaScript Remoting: Apexクラス
public with sharing class FindCustomerController {

@RemoteAction
public static List<Contact> doSearch(String customerLastName) {
customerLastName = '%' + customerLastName + '%';
return [
SELECT id, FirstName, LastName
FROM Contact
WHERE LastName LIKE :customerLastName
LIMIT 200
]; JS Function

} Apex Method

JS Callback
}


オプション C: JavaScript Remoting: コールバック

function renderResults(results, event) {
var container = document.getElementById("results"),
html = [];
for (var i=0, j=results.length; i<j; i++) {
html.push("<tr><td>");
html.push(results[i].LastName + ", " + results[i].FirstName);
html.push("</td></tr>");
}
container.innerHTML = html.join(""); JS Function

} Apex Method

JS Callback


オプション C: JavaScript Remoting: 結果

JS Function

Apex Method

JS Callback



BEFORE AFTER
440ms 215ms



BEFORE AFTER
440ms 215ms
52%


オプション D: Streaming APIを使う
Q: Streaming APIとは?

A: Salesforceインスタンスからポーリングをせずにほぼリアルタ
イムに更新を効率よく取得する方法


BEFORE
<apex:page controller="NewAccountsController">
<apex:form>

<apex:actionPoller action="{!find}" rerender="wrapper" interval="15"/>
<h1>Streaming API サンプル</h1>
<h2>新規取引先</h2>
<apex:outputPanel id="wrapper"></apex:outputPanel>

</apex:form>
</apex:page>


AFTER
<apex:page controller="NewAccountsController">

<apex:includeScript value="..."/> 

<h1>Streaming API サンプル</h1>
<h2>新規取引先</h2>
<div id="wrapper"></div>
<script>... $.cometd.init(...) $.cometd.subscribe(...) ...</script>

</apex:page>

オプション D: Streaming APIを使う: 手順
SOQLクエリを定義する

PushTopicレコードを定義する

Visualforceページに必要なJavascriptをインクルードする

cometdのinit(...)およびsubscribe(...)を呼び出す (Inline JS)

何が起きるかを見る


非同期 Apex


非同期 Apex
public with sharing class SendInvoiceController{

@RemoteAction
public static String requestAllInvoices(String customerId) {
sendAllInvoices(customerId);
return('All invoices have been requested.');
}

@future
private static void sendAllInvoices(String customerId) {
EmailHelper.emailCustomerInvoices(customerId);
}

}


Q&A

Mitsuhiro Okamoto
Program Manager
Developer / Platform Marketing


Thank you


Force.com Weibnar : アドバンスドVisualforce

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (10)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Force.com Weibnar : アドバンスドVisualforce

Ähnlich wie Force.com Weibnar : アドバンスドVisualforce (20)

Mehr von Salesforce Developers Japan

Mehr von Salesforce Developers Japan (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (7)

Force.com Weibnar : アドバンスドVisualforce