• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 Force.com Weibnar : アドバンスドVisualforce
 

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

on

  • 2,165 views

Visualforceはカスタムユーザ・インタフェースを作成するのに欠かせないパ­ワフルなツールですが、この大いなる力には、大いなる責任が伴います。...

Visualforceはカスタムユーザ・インタフェースを作成するのに欠かせないパ­ワフルなツールですが、この大いなる力には、大いなる責任が伴います。作成したページ­が引き締まって快速に動作することは、良いユーザ体験や導入・定着化には非常に重要で­す。このWebinarでは、いくつかの上級者向けのVisualforce機能にト­ピックを置いて、作成するページの効率化を支援します。すでにVisualforce­フレームワークを利用している開発者向けのセッションです。

Statistics

Views

Total Views
2,165
Views on SlideShare
1,055
Embed Views
1,110

Actions

Likes
1
Downloads
13
Comments
0

2 Embeds 1,110

http://blogjp.sforce.com 1109
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Force.com Webinar: アドバンスド Visualforce Mitsuhiro Okamoto Program Manager Developer / Platform MarketingハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • Agenda 1. 前提条件 2. 厄介だけどいい友達: View State 3. View Stateの管理 4. 非同期ApexハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • 想定と難易度ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • この アドバンスド Webinar の前提条件...ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • この アドバンスド Webinar の前提条件... ...不明点なく、自信を持ってVisualforceが記述できるハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • この アドバンスド Webinar の前提条件... ...不明点なく、自信を持ってVisualforceが記述できる ...一般的なApexコードを書く事ができるハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • この アドバンスド Webinar の前提条件... ...不明点なく、自信を持ってVisualforceが記述できる ...一般的なApexコードを書く事ができる ...HTML & JavaScriptそしてAJAXのコンセプトを理解しているハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • 厄介だけどいい友達: View StateハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • Q: View Stateとは? A: Apexコントローラの状態やVisualforceページの状態をサーバ リクエスト間も保持するための、Visualforceページ内に暗号化 されたhiddenの <input> フィールドのこと。 このフィールドは <apex:form> タグがページ上にある場合のみ生成される。ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • 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ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • View State: 利点と課題 すばらしい点 :-) 課題 :-( • 自動的にフィールドの値を保持してく • 巨大化し、パフォーマンスに影響を れる 与える可能性 • 簡単なAJAX機能を持ち合わせている • サイズ制限(135k)を持っている • 非常に簡単に使えるre-renderページ • 複雑なAJAX機能に対応しづらい コンポーネントを持つハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • View Stateを必要とするもの... <apex:action*> <apex:command*> <apex:inlineEditSupport> <apex:input*> <apex:select*>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • View Stateの管理ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • どのようにView Stateを管理するか?ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • どのようにView Stateを管理するか? A. コンポーネントの数を減らすハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • どのようにView Stateを管理するか? A. コンポーネントの数を減らす B. transient キーワードを利用するハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • どのようにView Stateを管理するか? A. コンポーネントの数を減らす B. transient キーワードを利用する C. JavaScript Remotingを利用するハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • どのようにView Stateを管理するか? A. コンポーネントの数を減らす B. transient キーワードを利用する C. JavaScript Remotingを利用する D. Streaming APIを利用するハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション A: コンポーネント数を減らすハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション A: コンポーネント数を減らす <apex:outputPanel layout="inline"...> <apex:outputPanel layout="block"...> <apex:panelGrid...> <apex:outputLink...> <apex:outputText styleClass="..."...>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション A: コンポーネント数を減らす <apex:outputPanel layout="inline"...> <span...> <apex:outputPanel layout="block"...> <div...> <apex:panelGrid...> <table...> <apex:outputLink...> <a...> <apex:outputText styleClass="..."...> <span...>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション A: コンポーネント数を減らす <span...> <div...> <table...> <a...> <span...>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション 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; } ... }ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション B: transient キーワードを使う BEFORE AFTERハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション B: transient キーワードを使う BEFORE 57% AFTERハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: JavaScript Remotingを使う Q: JavaScript Remotingとは? A: ステートレスにApexコントローラ内のメソッドをJavascriptか ら呼ぶ方法ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: Use JavaScript Remoting 取引先責任者を検索:ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: Use JavaScript Remoting 取引先責任者を検索: <apex:actionFunction ... /> <apex:actionRegion ... /> <apex:actionSupport ... />ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: Use JavaScript Remoting 取引先責任者を検索: JavaScript RemotingハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • JavaScript Remoting のライフサイクルハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • JavaScript Remoting のライフサイクル JS FunctionハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • JavaScript Remoting のライフサイクル JS Function Apex MethodハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • JavaScript Remoting のライフサイクル JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • JavaScript Remoting のライフサイクル JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • JavaScript Remoting のライフサイクル JS Function Apex Method クライアントサイド JS Callback サーバサイドハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション 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ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション 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ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション 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ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: JavaScript Remoting: JavaScript function handleButtonClick() { var searchTerm = document.getElementById("searchField").value; FindCustomerController.doSearch(searchTerm, renderResults); } JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: JavaScript Remoting: JavaScript function handleButtonClick() { var searchTerm = document.getElementById("searchField").value; FindCustomerController.doSearch(searchTerm, renderResults); } JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション 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ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション 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 }ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション 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 }ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション 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ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: JavaScript Remoting: 結果 JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: JavaScript Remoting: 結果 BEFORE AFTER 440ms 215msハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション C: JavaScript Remoting: 結果 BEFORE AFTER 440ms 215ms 52%ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション D: Streaming APIを使う Q: Streaming APIとは? A: Salesforceインスタンスからポーリングをせずにほぼリアルタ イムに更新を効率よく取得する方法ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション D: Streaming APIを使う 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>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション D: Streaming APIを使う AFTER<apex:page controller="NewAccountsController"> <apex:includeScript value="..."/> <!-- 4つの js ファイルを読み込み --> <h1>Streaming API サンプル</h1> <h2>新規取引先</h2> <div id="wrapper"></div> <script>... $.cometd.init(...) $.cometd.subscribe(...) ...</script></apex:page>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • オプション D: Streaming APIを使う: 手順 SOQLクエリを定義する PushTopicレコードを定義する Visualforceページに必要なJavascriptをインクルードする cometdのinit(...)およびsubscribe(...)を呼び出す (Inline JS) 何が起きるかを見るハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • 非同期 ApexハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • 非同期 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); } }ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • Q&A Mitsuhiro Okamoto Program Manager Developer / Platform MarketingハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
    • Thank youハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar