Force.com Webinar:                                       アドバンスド Visualforce                                       Mitsuhir...
Agenda      1. 前提条件      2. 厄介だけどいい友達: View State      3. View Stateの管理      4. 非同期ApexハッシュタグでShareしよう: #forcewebinarjpJoi...
想定と難易度ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
この アドバンスド Webinar の前提条件...ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
この アドバンスド Webinar の前提条件...      ...不明点なく、自信を持ってVisualforceが記述できるハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #fo...
この アドバンスド Webinar の前提条件...      ...不明点なく、自信を持ってVisualforceが記述できる      ...一般的なApexコードを書く事ができるハッシュタグでShareしよう: #forcewebinar...
この アドバンスド Webinar の前提条件...      ...不明点なく、自信を持ってVisualforceが記述できる      ...一般的なApexコードを書く事ができる      ...HTML & JavaScriptそしてA...
厄介だけどいい友達:                                         View StateハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #force...
Q: View Stateとは?      A: Apexコントローラの状態やVisualforceページの状態をサーバ      リクエスト間も保持するための、Visualforceページ内に暗号化      されたhiddenの <inpu...
Visualforceのライフサイクル  A                                                          A : URLがリクエストされる                          ...
View State: 利点と課題                  すばらしい点 :-)                    課題 :-(     • 自動的にフィールドの値を保持してく               • 巨大化し、パフォーマ...
View Stateを必要とするもの...   <apex:action*>   <apex:command*>   <apex:inlineEditSupport>   <apex:input*>   <apex:select*>ハッシュタグ...
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: ...
どのようにView Stateを管理するか?   A. コンポーネントの数を減らす   B. transient キーワードを利用する   C. JavaScript Remotingを利用するハッシュタグでShareしよう: #forcewe...
どのようにView Stateを管理するか?   A. コンポーネントの数を減らす   B. transient キーワードを利用する   C. JavaScript Remotingを利用する   D. Streaming APIを利用するハ...
オプション A: コンポーネント数を減らすハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
オプション A: コンポーネント数を減らす         <apex:outputPanel layout="inline"...>         <apex:outputPanel layout="block"...>         <...
オプション A: コンポーネント数を減らす         <apex:outputPanel layout="inline"...>   <span...>         <apex:outputPanel layout="block".....
オプション A: コンポーネント数を減らす                                       <span...>                                       <div...>      ...
オプション B: transient キーワード     public with sharing class EditClientController {     	           public            Contact   ...
オプション B: transient キーワードを使う            BEFORE            AFTERハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forc...
オプション B: transient キーワードを使う            BEFORE                                       57%            AFTERハッシュタグでShareしよう: #...
オプション C: JavaScript Remotingを使う   Q: JavaScript Remotingとは?   A: ステートレスにApexコントローラ内のメソッドをJavascriptか      ら呼ぶ方法ハッシュタグでShar...
オプション C: Use JavaScript Remoting                         取引先責任者を検索:ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: ...
オプション C: Use JavaScript Remoting                         取引先責任者を検索:                                  <apex:actionFunction ...
オプション C: Use JavaScript Remoting                         取引先責任者を検索:                                       JavaScript Remot...
JavaScript Remoting のライフサイクルハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
JavaScript Remoting のライフサイクル                                       JS FunctionハッシュタグでShareしよう: #forcewebinarjpJoin the con...
JavaScript Remoting のライフサイクル                                       JS Function                                       Apex ...
JavaScript Remoting のライフサイクル                                       JS Function                                       Apex ...
JavaScript Remoting のライフサイクル                                       JS Function                                       Apex ...
JavaScript Remoting のライフサイクル                                       JS Function                                       Apex ...
JS Function                                       Apex Method                                       JS CallbackハッシュタグでShar...
オプション C: JavaScript Remoting: ページ <apex:page controller="FindCustomerController">       <input id="searchField" type="text...
オプション C: JavaScript Remoting: ページ <apex:page controller="FindCustomerController">       <input id="searchField" type="text...
オプション C: JavaScript Remoting: ページ <apex:page controller="FindCustomerController">       <input id="searchField" type="text...
オプション C: JavaScript Remoting: JavaScript     function handleButtonClick() {         var searchTerm = document.getElementBy...
オプション C: JavaScript Remoting: JavaScript     function handleButtonClick() {         var searchTerm = document.getElementBy...
オプション C: JavaScript Remoting: JavaScript     function handleButtonClick() {         var searchTerm = document.getElementBy...
オプション C: JavaScript Remoting: Apexクラス    public with sharing class FindCustomerController {          @RemoteAction        ...
オプション C: JavaScript Remoting: Apexクラス    public with sharing class FindCustomerController {          @RemoteAction        ...
オプション C: JavaScript Remoting: コールバック  function renderResults(results, event) {      var container = document.getElementByI...
オプション C: JavaScript Remoting: 結果                                       JS Function                                       A...
オプション C: JavaScript Remoting: 結果         BEFORE                        AFTER          440ms                        215msハッ...
オプション C: JavaScript Remoting: 結果         BEFORE                        AFTER          440ms                        215ms  ...
オプション D: Streaming APIを使う   Q: Streaming APIとは?   A: Salesforceインスタンスからポーリングをせずにほぼリアルタ      イムに更新を効率よく取得する方法ハッシュタグでShareしよ...
オプション D: Streaming APIを使う   BEFORE<apex:page controller="NewAccountsController"><apex:form>     <apex:actionPoller action=...
オプション D: Streaming APIを使う   AFTER<apex:page controller="NewAccountsController">     <apex:includeScript value="..."/> <!--...
オプション D: Streaming APIを使う: 手順   SOQLクエリを定義する   PushTopicレコードを定義する   Visualforceページに必要なJavascriptをインクルードする   cometdのinit(.....
非同期 ApexハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
非同期 Apex      public with sharing class SendInvoiceController{            @RemoteAction            public static String re...
Q&A                                       Mitsuhiro Okamoto                                       Program Manager         ...
Thank youハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
Upcoming SlideShare
Loading in...5
×

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

2,397
-1

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,397
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Force.com Webinar: アドバンスド Visualforce Mitsuhiro Okamoto Program Manager Developer / Platform MarketingハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  2. 2. Agenda 1. 前提条件 2. 厄介だけどいい友達: View State 3. View Stateの管理 4. 非同期ApexハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  3. 3. 想定と難易度ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  4. 4. この アドバンスド Webinar の前提条件...ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  5. 5. この アドバンスド Webinar の前提条件... ...不明点なく、自信を持ってVisualforceが記述できるハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  6. 6. この アドバンスド Webinar の前提条件... ...不明点なく、自信を持ってVisualforceが記述できる ...一般的なApexコードを書く事ができるハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  7. 7. この アドバンスド Webinar の前提条件... ...不明点なく、自信を持ってVisualforceが記述できる ...一般的なApexコードを書く事ができる ...HTML & JavaScriptそしてAJAXのコンセプトを理解しているハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  8. 8. 厄介だけどいい友達: View StateハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  9. 9. Q: View Stateとは? A: Apexコントローラの状態やVisualforceページの状態をサーバ リクエスト間も保持するための、Visualforceページ内に暗号化 されたhiddenの <input> フィールドのこと。 このフィールドは <apex:form> タグがページ上にある場合のみ生成される。ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  10. 10. 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
  11. 11. View State: 利点と課題 すばらしい点 :-) 課題 :-( • 自動的にフィールドの値を保持してく • 巨大化し、パフォーマンスに影響を れる 与える可能性 • 簡単なAJAX機能を持ち合わせている • サイズ制限(135k)を持っている • 非常に簡単に使えるre-renderページ • 複雑なAJAX機能に対応しづらい コンポーネントを持つハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  12. 12. View Stateを必要とするもの... <apex:action*> <apex:command*> <apex:inlineEditSupport> <apex:input*> <apex:select*>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  13. 13. View Stateの管理ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  14. 14. どのようにView Stateを管理するか?ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  15. 15. どのようにView Stateを管理するか? A. コンポーネントの数を減らすハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  16. 16. どのようにView Stateを管理するか? A. コンポーネントの数を減らす B. transient キーワードを利用するハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  17. 17. どのようにView Stateを管理するか? A. コンポーネントの数を減らす B. transient キーワードを利用する C. JavaScript Remotingを利用するハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  18. 18. どのようにView Stateを管理するか? A. コンポーネントの数を減らす B. transient キーワードを利用する C. JavaScript Remotingを利用する D. Streaming APIを利用するハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  19. 19. オプション A: コンポーネント数を減らすハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  20. 20. オプション A: コンポーネント数を減らす <apex:outputPanel layout="inline"...> <apex:outputPanel layout="block"...> <apex:panelGrid...> <apex:outputLink...> <apex:outputText styleClass="..."...>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  21. 21. オプション 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
  22. 22. オプション A: コンポーネント数を減らす <span...> <div...> <table...> <a...> <span...>ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  23. 23. オプション 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
  24. 24. オプション B: transient キーワードを使う BEFORE AFTERハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  25. 25. オプション B: transient キーワードを使う BEFORE 57% AFTERハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  26. 26. オプション C: JavaScript Remotingを使う Q: JavaScript Remotingとは? A: ステートレスにApexコントローラ内のメソッドをJavascriptか ら呼ぶ方法ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  27. 27. オプション C: Use JavaScript Remoting 取引先責任者を検索:ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  28. 28. オプション C: Use JavaScript Remoting 取引先責任者を検索: <apex:actionFunction ... /> <apex:actionRegion ... /> <apex:actionSupport ... />ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  29. 29. オプション C: Use JavaScript Remoting 取引先責任者を検索: JavaScript RemotingハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  30. 30. JavaScript Remoting のライフサイクルハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  31. 31. JavaScript Remoting のライフサイクル JS FunctionハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  32. 32. JavaScript Remoting のライフサイクル JS Function Apex MethodハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  33. 33. JavaScript Remoting のライフサイクル JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  34. 34. JavaScript Remoting のライフサイクル JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  35. 35. JavaScript Remoting のライフサイクル JS Function Apex Method クライアントサイド JS Callback サーバサイドハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  36. 36. JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  37. 37. オプション 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
  38. 38. オプション 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
  39. 39. オプション 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
  40. 40. オプション 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
  41. 41. オプション 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
  42. 42. オプション 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
  43. 43. オプション 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
  44. 44. オプション 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
  45. 45. オプション 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
  46. 46. オプション C: JavaScript Remoting: 結果 JS Function Apex Method JS CallbackハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  47. 47. オプション C: JavaScript Remoting: 結果 BEFORE AFTER 440ms 215msハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  48. 48. オプション C: JavaScript Remoting: 結果 BEFORE AFTER 440ms 215ms 52%ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  49. 49. オプション D: Streaming APIを使う Q: Streaming APIとは? A: Salesforceインスタンスからポーリングをせずにほぼリアルタ イムに更新を効率よく取得する方法ハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  50. 50. オプション 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
  51. 51. オプション 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
  52. 52. オプション D: Streaming APIを使う: 手順 SOQLクエリを定義する PushTopicレコードを定義する Visualforceページに必要なJavascriptをインクルードする cometdのinit(...)およびsubscribe(...)を呼び出す (Inline JS) 何が起きるかを見るハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  53. 53. 非同期 ApexハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  54. 54. 非同期 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
  55. 55. Q&A Mitsuhiro Okamoto Program Manager Developer / Platform MarketingハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  56. 56. Thank youハッシュタグでShareしよう: #forcewebinarjpJoin the conversation: #forcewebinar
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×