Visualforce + jQuery

Visualforce + jQuery Force.com上でjQueryを有効活用

Riezel Ramos, Salesforce.com, Associate Sales Support Engineer Kaz Kawamura, Salesforce.com, Technical Solution Architect

Safe harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

今日の内容

・Javascript + jQuery ・Javascript + jQuery + Visualforce

・Javascript + jQuery + Visualforce + Imagination

自己紹介ライゼールラモス (Riezel Ramos)

・出身：　フィリピン

・会社：　Salesforce.com

・仕事：　Sales Support 　　　　　　

Engineer

・その他名前：　ライズ、ライコ、雷子

河村嘉之（Kaz Kawamura）

・会社：　Salesforce.com

・仕事：　Technical Solution　Architect

この本の著者

Javascript + jQuery

Javascriptのないインターネット

・地図：　検索にリダイレクトされる

・Youtube：　ビデオが動かない・Facebook ：　メッセージとチャットが動かない

・Twitter ：　Tweetできない

Javascriptがあるから、ウェブがインターアクティブになった

Javascriptの役割：HTMLドキュメントを操作するため

ウェブページ

HTML：　構造

Javascript：　アクション

CSS：　スタイル

<body> <div> <input type=“text” id=“in1”/> </div> </body> <script type=“text/javascript”> var foo = document.getElementById(“in1”);� foo.addEventListener(“click”, alert(“アロハ!”), false);�</script> <style> body{ background: pink; } </style>

問題：JavascriptだけでDOMの操作が難しい！

よく使うJavascriptの機

能をいくつまとめて、提

供しています。

jQueryでJavascriptをシンプルにする

Javascript

var x = document.getElementById(‘in1’);

jQuery

var x = $(‘#in1');

サンプル：http://jquery.com/

jQueryの良い点

・32KB (minified) ・CSS3のサポート

・クロスブラウザーサポート

・jQuery UI ・jQuery Mobile

・jQuery Plugins

Javascript + jQuery + force.com

まずは、jQueryライブラリをVFページから読みましょう

・静的リソースとして、アップロード <script src=“{!$Resource.jQueryFile}”></script>

・CDNを使う

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>

Apex:includeScript OR script?

<apex:page showHeader="false"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"/> </apex:page>

気を付けましょう！

$j = jQuery.noConflict(); 　→他のライブラリとconflictしないため（標準Visualforceで使っているライブラリを含む）

Visualforce v.s. jQuery

ページ部品

Visualforce jQuery

Visualforce > jQuery

基本はVFで書いたページ

ボタンを押した時のアクションなどを

JavaScriptで記述

Visualforceの部品のIDを取るには？

<apex:outputPanel id="thePanel"></apex:outputPanel>

document.getElementById("{!$Component.thePanel}").innerHTML = result;

$("#{!$Component.thePanel}").text(result);

!$Component.コンポーネントのIDを指定

階層がある場合は階層も指定

注意！これは動かない IDに:が入ると

jQueryは別の意味に捉える

実はjQueryとVFの相性はあまり良くな

い…(以下略)

j_id0:thePanel

Visualforce+jQuery 使いどころ

<apex:form > Weekday <apex:inputCheckBox value="{!weekday}" styleClass="days"/> Satday <apex:inputCheckBox value="{!satday}" styleClass="days"/> Sunday <apex:inputCheckBox value="{!sunday}" styleClass="days"/> <input type="button" id="check" value="check all"/> </apex:form>

$('#check').click(function() { $('.days').attr('checked', 'checked'); });

classを指定して一括処理

生成されるコードではclass属性になる

UIに＋αを加える

Visualforce < jQuery

サーバサイドの機能を呼び出し

ほぼHTMLでそのまま記述

ページからforce.comにアクセス

• actionSupport • actionFunction

• JavaScript Remoting

actionSupport

<apex:inputText value="{!recordInputText}"> <apex:actionSupport action="{!refresh}" event="onchange” reRender="parentPanel"> <apex:param assignTo="{!var1}" value="{!recordId}" name="recordParam"/> </apex:actionSupport> </apex:inputText>

コントローラのメソッドを呼び出す

イベントを指定

イベントの発生に合わせて、コントローラのメソッドを呼び出す • JavaScriptを書かずにイベント処理を実現 • 結果はreRenderで

actionFunction

<apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate"> <apex:param name="firstParam" assignTo="{!state}" value="" /> </apex:actionFunction>

<script> function clickOne(){ methodOneInJavaScript(); } </script>

コントローラのメソッドを指定

名前を付ける

指定した名前でJavaScriptから

呼び出し

コントローラのメソッドに名前を付けてJavaScriptから利用できるようにする • 結果はreRenderで

JavaScript Remoting

<script> $(function() { HelloRemote.sayHello('World', function(result, event) { $('#out').text(result); }); }); </script> global class HelloRemote {

@RemoteAction global static String sayHello(String name) { return 'Hello ' + name + '!'; } }

コントローラ名.メソッド名で呼び出し引数を

渡せるコールバック関数

リモートアクセス可能なメソッドをアノテーション

でマーク

よりJavaScriptっぽくコントローラのメソッドを呼べる • より柔軟 • ただしコードは増える

IDの工夫

<apex:page standardController="Account” recordSetVar="accounts"> <apex:repeat value="{!accounts}" var="account"> <div id=”acct_{!account.id}">{!account.name}</div> </apex:repeat> </apex:page>

<div id=”acct_001A00000090CmoIAE">A商事</div> <div id=”acct_001A000000RQgHkIAL”>B商事</div> <div id=”acct_001A000000EaawzIAB">A商事</div>

IDは一意でなければいけ

ない

SFIDをうまく活用すると一意性を確保するのが容易

Javascript + jQuery + Visualforce + Imagination

世界征服をしてやろう！！

Mini Page Hover

・レコード名にhoverをしたら、詳細を表示する

デモ

Mini Page Hover：　コード

var url = $(this).attr(‘href’) + ‘ div.bDetailBlock’; //hoverしているレコードのURLを取得

$(‘#overlay’).load(url, function () { //#overlayのdivにURLをロードする

setTimeout(function () { //overlayを表示する

　　$(‘#overlay’).show();　},

200);

});

Mini Page Hover：　コードアドバイス： HTMLで作られているホームページコンポーネントのコードフォーマットが崩れるため、jsbeautifierみたいなツールを使うのがお

勧めです　（http://jsbeautifier.org/）

iPad アンケート作成用ツールデモ

デモ（iPad）

セールスフォース側

iPad側

iPad アンケート作成用ツール（セールスフォース側）・jQuery + jQuery UI

$( ".answerUL1" ).sortable({ start: function (e, ui) { },

update: function (e, ui) { /*更新時にこのメッソドを行う */

$( “.answerUL .choiceLabel1”).each( function(){ /* 各選択肢のソート番号を更新する */

$(this).find(".choiceSortNumber").val($(this).index()+1); });

/* apexコントローラーを呼び出し、ソート番号を更新する */ sortChoiceList( /*パラメータ省略 */); } });

<apex:actionFunction action="{!sortChoiceList}" reRender="questionPanel" name="sortChoiceList" oncomplete="initSortable();" > /* パラメータ省略 */

</apex:actionFunction>

iPad アンケート作成用ツール（セールスフォース側）

アドバイス： reRenderの使い方ページの一部のみ、更新したい場合、

reRenderでapexタグのidを指定すれば、指定したDOMしか更新されません。

reRenderを使う時に、できるだけ小さいDOMを設定しないと、重くなる可能性があります。

<apex:actionFunction action="{!sortChoiceList}"

reRender="questionPanel"

name="sortChoiceList"

oncomplete="initSortable();" /> 選択肢の順番を更新したいため、選択肢を持っているパネルを更新します。全ページを更新したら、重くなりますので、小さい範囲で更新したほうが良いです。

iPad アンケート作成用ツール（iPad側）

・jQuery + jQuery Mobile ・複数のプラットフォームで見えるページを

モバイル向けのUIで簡単に作成ができるので、

jQuery Mobileで作りました。

apex:repeatでページ、

質問、選択肢を

ループして表示している

Technology

Visualforce + jQuery