VisualForceで jQuery Mobile を使用する。

SalesForceがMobileSDKと関連ドキュメントを続々リリースしているようなので、この先あまりニーズは無いかもしれませんが、VisualForce での jQuery Mobile を使用する場合のポイントです。

１．jQueryの取得
jQueryのホームページから、jQuery、jQueryMobileのリソースをダウンロードし、静的リソースに格納。
なお、CSSはThemeRollerを使うと便利ですが、このへんの使い方は割愛します。

２．VisualForcePageの作成
VisualForceでjQueryMobileを使用するには、VisualForce内にhead部とbody部を作成し、通常のjQueryMobileと同様のコードを書けば、問題無く動作します。
タグと静的リソースの参照は以下のようになります。

Visual Force Page

ポイント１

<apex:page>

タグの"standardStylesheets"を"false"にすること。こうしないとページにSalesForceのスタイルシートが適用されてしまいます。

ポイント２
機器の縦横の向きを変更した場合に、自動的に表示幅を合わせるために、metaタグでviewportの設定をしています。jQueryMobileのサンプルでは、

<meta name="viewport" content="width=device-width, initial-scale=1"/>

となっていますが、これだとiPhone,iPadではうまく動作しませんでした（横向きにしたときにサイズがオーバーする）。

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>

とすることで、正しく表示されるようになりました。

なお、一応これでVisualForceの画面がモバイルサイトっぽくなりますが、あくまでこれは個別のページをjQueryMobileで表示しているに過ぎず、ログイン画面やホーム画面はPC用の画面のままということになります。

コントロールのサイズ変更－その２

２．ラジオボタンのサイズ変更
ｉｐａｄを使用して、お客様にアンケートを入力していただく場合などには、便利なのではないかと思います。
ラジオボタンでは、styleに直接スタイルを定義して、サイズを整えます。

本当は、ここでもスタイルシートを別に定義して、styleclass属性に設定してみたのですが、うまくいきませんでした。
おそらく何か方法があるはずなんですけれど、今のところこの方法でしか実現できていません。

このくらいだと、指でも操作しやすいのではないでしょうか。ちなみに、ボタンでなくラベルの文字にタッチでＯＫです。

コントロールのサイズ変更－その１

VisualForceを使うと、比較的容易にSalesForceと同じような画面が作成できます。しかも、画面のカスタマイズの自由度は想像以上に高いです。少しコードを追加するだけで、SalesForceの画面をぐんと使いやすくできます。

１．ボタンのサイズを変更する。
SalesForceのデフォルトではボタンのサイズについては特に設定していないらしく、Valueで設定した文字でサイズが表示されます。

ボタンのスタイルはCSSのbtnクラスで上書きすることが可能です。以下のようなスタイルシートを設定してみます。

CSS

Visual Force Page

こんな感じになります。

しかも、pageBlockButtunsの中だけでなく同一ページのボタンは全てこのサイズで統一されるので、万一折り返しが発生しても見栄えがスッキリします。

カスタム設定を使用したコード項目の使用－その４

４．カスタム設定項目の参照をテストする場合の注意点

カスタム設定項目の参照を含むコードのテストをする場合、テストコードのアノテーションに
SeeAllData=true
を付け加えなければなりません。

付け加えずにテストを実行すると、カスタム設定のオブジェクトがNullとなり、以下のようなエラーになります。
FATAL_ERROR|System.NullPointerException: Attempt to de-reference a null object

これだけのことで半日悩んでしまいました...。

カスタム設定を使用したコード項目の使用－その３

３．VFの画面上にカスタム設定の表示名を出力する。

コードの取り扱いには、もうひとつ解決しなければならない問題があります。
通常のデータ閲覧をする場合、そのまま画面上に表示しようとすると、性別の値に１または２という コードの値がそのまま表示されてしまいます。
そのため、別途関数を用意して表示名（男・女）を画面上に出力しなければなりません。

コントローラ

※lstはコンストラクタで読み込んでいるデータリスト。
コードが設定されている項目は必ず画面上に読み込まれていなければなりません。

Visual Force Page

このようにに表示されます。

カスタム設定を使用したコード項目の使用－その２

２．セレクトオプションに値を読み込ませる。

では、設定したカスタム設定の値を、実際にセレクトオプションの値として使ってみましょう。
今回参考にしたのはこちらのサイトです。
Using List Custom Settings in Salesforce.com
http://blog.jeffdouglas.com/2010/01/07/using-list-custom-settings-in-salesforce-com/

あと、オプションリストはソートが効かないので、下記のAPEXクラスを導入します。
abhinavguptas / Apex-Select-Option-Sorting -- SelectOptionSorter.cls
https://github.com/abhinavguptas/Apex-Select-Option-Sorting

コントローラ

Visual Force Page

コントローラでSelectOptionsが設定されれば、選択リスト、ラジオボタン、チェックボックスのどれでも使えるようになる。

選択リストの表示
ラジオボタンの表示 ラジオボタンを縦に並べる場合は、layoutにpageDirectionを設定します。
チェックボックスの表示
できあがりはこんな感じです。

データを１件作成してしまえば、データローダでダウンロードしてEXCEL等で追加データを作成、データローダでアップロード、という方法でコード類のメンテナンスが容易になります。

カスタム設定を使用したコード項目の使用－その１

カスタム設定は、項目数が少なく編集の頻度が低いコード類の管理用に使えます。 SalesForceでは、区分等を選択して入力する場合は第一に項目のデータ型に選択リストを使用するのがセオリーなのだと思いますが、 選択リストの選択肢のメンテナンスは、少々手間がかかります。
カスタム設定を使用する利点は、データのメンテナンスにデータローダが使えることです。初期設定やメンテナンスもぐんと楽になり、 使用するにあたってもSOQLを使うことなく簡単に値を呼び出すことができます。
※ カスタム設定を使用したページのソースを見ると、カスタム設定の値が丸ごと読み込まれていることが確認できます。
また、選択リストは設定した値がそのままオブジェクトに保存されてしまうのに対し、カスタム設定を使用すれば、画面に表示する値と実際にオブジェクトに格納する値を別けることができます。

１．カスタム設定の作成
コード項目ごとにカスタム設定を作成していきます。今回は例として性別コードを設定してみます。

性別コード（CSGender__c)を作成する。

設定種別
階層と、リストが選択できるが、今回は単純にリストを選択します。

項目

Name	←名称固定。実際のコードを指定する。重複は不許可
DispName	コードに対応する表示名
Deleted	削除フラグ（trueの場合は選択肢として表示しない。）

カスタム設定の値を取得する関数getInstanceは、Nameがキーになります。

サンプル

Name	DispName	Deleted
1	男	false
2	女	false

こんな感じです。

データを１件作成してしまえば、データローダでダウンロードしてEXCEL等で追加データを作成、データローダでアップロード、という方法でコード類のメンテナンスが容易になります。

VisualForcePageにおけるオブジェクトの項目の参照

ヘルプテキストを画面上に表示
「account」オブジエクトの、「type」項目に設定したヘルプを画面上に表示します。

項目の表示ラベルを画面上に表示
「account」オブジエクトの、「type」項目の表示ラベルを画面上に表示します。