Visualforceの概要

by Mitsuhiro Okamoto on 9月 29, 2009 at 09:00 午前

USのDeveloperForceに掲載されていた、
「An Introduction to Visualforce」の翻訳記事を公開致しました。

以下のURLからご覧いただく事ができます。
http://wiki.developerforce.com/index.php/JP:An_Introduction_to_Visualforce

この記事では、Visualforceを活用する上で重要となる基本的な動作原理から始まり、MVCモデル、Apexとの連動、各種コンポーネントの利用・作成、PDF印刷やモバイルといった数多くの内容について解説がされています。

特にこれからVisualforceを学ぼうとしている開発者にとって、非常に有用な内容となっておりますので、是非ご活用下さい。

コメント (0) | トラックバック (0) Save to del.icio.us Digg this story

Visualforceをはじめよう（３）

by Shinichi Tomita on 11月 21, 2007 at 03:04 午後

カスタムコントローラの作成

いままでは標準コントローラを利用したVisualforceページの記述方法について学んできました。最後に自分で制御ロジックを記述ができるように、カスタムコントローラを作成してみましょう。

カスタムコントローラは、単純にApexコードのクラスです。たとえば以下のようなコードでもコントローラとして成立します（あまり意味はないですが）

public class MyController {

}

カスタムコントローラを作成するには、次のような方法があります。

  1. Visualforceページのエディタから apex:page タグの controller 属性に対して作成するクラスの名前を指定する方法。自動的にクラス作成を行う旨のメッセージが表示され、その場でコントローラを作成することができます。
    例） 
    <apex:page controller="MyController">
        <apex:pageBlock title="Hello {!$User.FirstName}!">
            This is your new page.
        </apex:pageBlock>
    </apex:page>
  2. [設定][開発][コード]メニューから[新規]としてコントローラクラスを作成し、その後Visualforceページ中の apex:page タグに作成したクラスの名前を controller 属性に設定する方法。

apex:pageタグには一度に１つしかコントローラを参照できないことに注意してください。たとえば standardController 属性と controller 属性は共存できません。

controller 属性を指定してページを保存すると、Page Editorボタンの横にControllerボタンが表示されます。これによってページのマークアップ記述画面と制御ロジックを記述するApexコードエディタの画面を切り替えることができます。

S4_2

getter メソッドを定義する

まずVisualforceコントローラが行うことの第一に、ページ中に表示するためのデータベース値や計算結果の値を受け渡すという役目があります。このためにはいわゆるgetterメソッドと呼ばれるメソッドを定義する必要があります。これはget<Identifier>という形で定義され、<Identifier>にあたる部分がメソッドによって返されるレコードやプリミティブ値の名前になります。

たとえば以下のコントローラはgetterメソッドが１つ定義されており、コントローラの名前をあらわす文字列を返します。

public class MyController {

    public String getName() {
        return 'MyController';
    }

}

このgetterメソッドの結果をページに表示するには、プレフィックスとなっている get を取り除いたgetterメソッドの名前を指定します。たとえば、getName メソッドの結果を表示するには、{!Name} と記述します。

<apex:page controller="MyController">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        This is your new page for the {!Name} controller.
    </apex:pageBlock>
</apex:page>

以前の例では、取引先の標準コントローラを利用する際に、ページではURLに含まれる id クエリ文字列パラメータで指定した値を元に、{!Account.<fieldName>} という記述で取引先のレコードを表示することが可能でした。これは取引先の標準コントローラにはすでに指定された取引先のレコード情報を取得する getAccount というgetterメソッドが定義されていたためです。カスタムコントローラでこれを真似ると以下のようになります。

public class MyController {

    public String getName() {
        return 'MyController';
    }

    public Account getAccount() {
        return [SELECT Id, Name FROM Account 
                WHERE Id = :System.currentPageReference().getParameters().get('id')]; 
    } 
}

getAccount メソッドでは、埋め込みのSOQLクエリを利用して、ページのURLに含まれる id パラメータに指定された取引先を返しています。id パラメータ値にアクセスするためにグローバルの System クラスを利用しています。

  • 最初に currentPageReference メソッドを利用して、現在のページの PageReference インスタンスを取得しています。PageReference とは、Visualforceページがクエリ文字列パラメータの情報を含めた形でインスタンス化されたオブジェクトだと考えてください。
  • この PageReference オブジェクトを利用して、クエリ文字列パラメータの名前と値のマップを getParameters メソッドを呼び出すことで取得します。
  • 最後にgetメソッドを利用してidパラメータの値を取得しています。

SOQLで取得しているのは Name および Id フィールドだけなので、ページの中に埋め込むことができるのは取引先の名前とID項目のみになります。それぞれ {!Account.Name} および {!Account.Id} という記述を用います。

apex:page タグの属性として tabStyle 属性を指定することで、取引先ページに合わせたスタイルに統一することも可能です。以下のようになります。

<apex:page controller="MyController" tabStyle="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        This is your new page for the {!Name} controller. <br/>
        You are viewing the {!Account.Name} account.
    </apex:pageBlock>
</apex:page>

アクションメソッドを定義する

カスタムコントローラには、たとえばレコードの保存や値のコンバートといった、ある特定のアクションを実行するためのメソッドを定義することができます。これらのアクションメソッドは、以下のコンポーネントの action 属性に結び付けることができます。

  • apex:commandButton - アクションの実行のためのボタンを作成
  • apex:commandLink - アクションの実行のためのリンクを作成
  • apex:actionPoller -　定期的にアクションを実行する
  • apex:actionSupport 他のコンポーネントのイベント(onclickやonmouseoverなど)に呼応してアクションを実行する

例として、以前ユーザの入力を受け取るページを作成した際には、取引先の標準コントローラに定義されている save メソッドを commandButton に結び付けていました。これを MyController カスタムコントローラで行うならば以下のようになります。

<apex:page controller="MyController" tabStyle="Account">
    <apex:form>
        <apex:pageBlock title="Hello {!$User.FirstName}!">
            You are viewing the {!Account.Name} account. <p/>
            Change Account Name: <p/> 
            <apex:inputField value="{!Account.Name}"/> <p/>
            <apex:commandButton action="{!save}" value="Save New Account Name"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

上のページを保存すると、Visualforceエディタ上に、MyController クラスに save メソッドを追加するためのメッセージが現れます。リンクをクリックすると、MyController は以下のようになります。

public class MyController {

    public PageReference save() {
        return null;
    }

    public String getName() {
        return 'MyController';
    }

    public Account getAccount() {
        return [SELECT Id, Name FROM Account 
                WHERE Id = :System.currentPageReference().getParameters().get('id')]; 
    } 
}

生成された save メソッドはpublicとして定義されており、戻り値として PageReference を返し、引数をとりません。これはアクションメソッドとして成り立つために必要な特徴になります。

最終的には、この save メソッドは新規のアカウント入力についてもデータベースに変更を加えたいところですが、ここではまず以前データベースから取得した取引先の情報を保管するためのメンバー変数を定義することにします。取引先の情報を格納しておくメンバー変数がないと、データベースから取得したレコードの情報は画面のレンダリング後にはなくなってしまいます。そのためユーザが変更を行っても保存することができません。メンバー変数を利用するために、以下の2つの点についてコントローラに変更を加えます。

  • メンバー変数をクラスに追加する
  • メンバー変数の値は一番最初の getAccount 呼び出しで初期化する
public class MyController {

    Account account;

    public PageReference save() {
        return null;
    }

    public String getName() {
        return 'MyController';
    }

    public Account getAccount() {
        if (account == null) 
            account = [SELECT Id, Name, Site FROM Account 
                       WHERE id = :System.currentPageReference().getParameters().get('id')];
        return account; 
    }
}

メンバー変数が作成されたので、save メソッドではこれをデータベースに更新するだけで大丈夫です。

public class MyController {

    Account account;

    public PageReference save() {
        update account;
        return null;
    }

    public String getName() {
        return 'MyController';
    }

    public Account getAccount() {
        if(account == null) 
            account = [SELECT Id, Name, Site FROM Account 
                       WHERE id = :System.currentPageReference().getParameters().get('id')];
        return account; 
    } 
}

もうすこし強固に行うなら save メソッドではさまざまな例外処理（たとえば重複チェックなど）を行うべきでしょうが、ここでは簡単な例を示すのが目的であるので省略しています。また、save メソッドの中にcommit文がないことにも注意してください。commit文は、アクションメソッドが成功したときにデータベースに自動的にコミットされるので必要はありません。

このページをテストするときには、Change Account Nameフィールドの値を更新して、Save New Account Nameボタンをクリックしてください。ここでは標準コントローラのときと同様にページがリフレッシュされるだけですが、次の例では現在のページをリフレッシュするのではなく、違うページに遷移するように拡張します。

ページ遷移のメソッドを定義する

データベースの更新やその他の計算処理などに加えて、カスタムコントローラのアクションメソッドでは PageReference オブジェクトを返すことによりユーザを異なるページに遷移させることが可能です。

PageReference とはインスタンス化されたページに対する参照をあらわしています。PageReference はURLおよびクエリパラメータの名前と値のセットからできています。他のVisualforceページであったり、外部のWebサイトなども示すことが可能です。カスタムコントローラでは、以下のような形で PageReference を参照したりインスタンス化したりすることができます。

Page.<existingPageName>
すでに作成済みのVisualforceページに対する参照を取得します。このように指定すると、コントローラがそのページに依存していることがプラットフォーム側で判別できるため、そのページが削除されてしまうことを防ぐことができます。
PageReference pageRef = new PageReference('<partialURL>');
Force.comプラットフォーム上の任意のページに対する PageReference を作成します。たとえばあるレコードの詳細画面を表示するときは <partialURL> に '/'+'<レコードID> 'を指定します。Visualforceページに対しても <partialURL> に '/apex/HelloWorld' と入力することによって指定することができますが、Page.<existingPageName>のほうがプラットフォームによって依存性を追跡できるため、より好ましい実装です。
PageReference pageRef = new PageReference('<fullURL>');
外部のURLに対してPageReferenceを作成します。例） 
PageReference pageRef = new PageReference('http://www.google.com');

この例では、Saveボタンをクリックした後に異なるページを表示させたい、と仮定します。そのために、2つ目として以下のようなページ（mySecondPage）を作成します。

<apex:page standardController="Account">
    Hello {!$User.FirstName}!
    <p>You are viewing the {!Account.Name} account.</p>
</apex:page>

元のページ作成画面に戻って、コントローラの中の save メソッドが上で作成したページ（mySecondPage）への PageReference を返すように編集します。

public class MyController {

    Account account;

    public PageReference save() {
        update account;
        PageReference secondPage = Page.mySecondPage;
        secondPage.setRedirect(true);
        return secondPage; 
    }

    public String getName() {
        return 'MyController';
    }

    public Account getAccount() {
        if(account == null) 
            account = [SELECT Id, Name, Site FROM Account 
                       WHERE id = :System.currentPageReference().getParameters().get('id')];
        return account; 
    } 
}

上のコードでは、PageReference の redirect属性が true に設定されている点に注意してください。この属性が設定されていない場合でも PageReference はそのままブラウザに戻されますが、ページの遷移は発生しません。元のURLがそのまま同じ状態で残ります。もしURLを遷移の結果として変更したい場合には、redirect属性を true にしておく必要があります。

上のコードをテストすると、確かにSave New Accont Nameをクリックすると mySecondPage に遷移しますが、データのコンテキスト情報は失われてしまいます。つまり、Accont.Name で指定した値は表示されません。これはリダイレクトする際にコントローラがコンテキストの状態をクリアしてしまうため発生します。そのため id クエリ文字列パラメータを PageReference のパラメータマップに再設定する必要があります。

public class MyController {

    Account account;

    public PageReference save() {
        update account;
        PageReference secondPage = Page.mySecondPage;
        secondPage.setRedirect(true);
        secondPage.getParameters().put('id', account.Id); 
        return secondPage; 
    }

    public String getName() {
        return 'MyController';
    }

    public Account getAccount() {
        if(account == null) 
            account = [SELECT Id, Name, Site FROM Account 
                       WHERE id = :System.currentPageReference().getParameters().get('id')];
        return account; 
    } 
}
以上で、カスタムコントローラの作成方法も含め、Visualforceページについて一通り学びました。もっと高度な開発については、Visualforce Developer's Guideの各章をご覧ください。

コメント (1) | トラックバック (0) Save to del.icio.us Digg this story

Visualforceをはじめよう（２）

by Shinichi Tomita on 11月 13, 2007 at 04:59 午後

入力コンポーネントを使用する

これまではVisualforceページでデータを表示する方法について学びました。ユーザからの入力を受け取るためには、apex:form タグを利用し、その中に入力コンポーネントを記述します。フォームの送信には apex:commandLink あるいは apex:commandButton タグが利用できます。

入力コンポーネントとして最も多く用いられるのが apex:inputField タグです。このタグはオブジェクトの項目の型情報を利用して、適切な入力ウィジットを描画します。たとえば、日付型項目に対して apex:inputField を使用すると日付選択カレンダーがフォーム内に表示されますし、選択リスト項目に対して使用するとドロップダウンリストが代わりに表示されます。apex:inputField タグはすべての標準＆カスタムオブジェクトの項目に対して利用でき、そしてその項目に定義されているメタデータ情報、つまり必須条件や一意制約、ユーザが参照あるいは編集権限を持っているかといった情報に従って適切にレンダリングを行います。

<apex:page standardController="Account">
    <apex:form> 
        <apex:pageBlock title="Hello {!$User.FirstName}!">
            You are viewing the {!account.Name} account. <p/>
            Change Account Name: <p/> 
            <apex:inputField value="{!account.Name}"/> <p/>
            <apex:commandButton action="{!save}" value="Save New Account Name"/> 
        </apex:pageBlock>
    </apex:form> 
</apex:page>

上の例では以下の点に注意してください

  • apex:inputField タグは取引先の取引先名(Name)フィールドに value 属性を通して結び付けられています。これはページ内に項目の値を表示したときと同じ表現方法です。
  • apex:commandButton タグは action 属性を持っています。これは標準の　Account コントローラの save アクションを呼び出すように設定されています。save アクションは標準の取引先編集ページで保存ボタンを押したときと同様の働きをします。すべての標準コントローラは以下のようなアクションを行うことができます。
    • save : 新しくレコードを挿入するか、あるいはコンテキストにある既存のレコードの更新を行います。保存の終了後は指定された元のページに戻るか、あるいはそのレコードの詳細画面に遷移します。
    • edit : 現在コンテキストに存在しているレコードの編集画面に遷移します。操作が完了するとeditアクションを呼び出した元のページに遷移します。
    • delete : コンテキスト上にあるレコードを削除します。操作完了後は画面のリフレッシュを行うか、あるいはオブジェクトのタブ画面に遷移します。
    • cancel : 編集作業をすべてキャンセルします。操作の完了後はeditアクションを呼び出した元のページに遷移します。

06

テーブル形式でデータを表示する

Visualforceのコンポーネントの中には、複数のレコードを繰り返して表示するためのコンポーネントがあります。代表的なものは apex:dataTable です。以下のページは apex:dataTable を利用して現在コンテキストに指定されている取引先に紐付いている取引先責任者の一覧をリストするものです。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.Name} account.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" border="1">
            <apex:column>{!contact.Name}</apex:column> 
        </apex:dataTable>
    </apex:pageBlock>
</apex:page>

07

apex:dataTable は value と var という2つの属性を使用します。これは他の繰り返しをサポートしているコンポーネントについても同じです。

  • value 属性にはレコードのセットを指定します。上の例では {!account.Contacts} と指定することによって、現在コンテキストにある取引先レコードから関連をたどって取引先責任者のリストを取得しています。
  • var 属性には繰り返しの際の変数名を指定します。この変数は apex:dataTable タグの内部で用いることができ、各々の項目値にアクセスするために用いられます。この例では apex:column タグの中の {!contact.Name} という表記によって取引先責任者の名前をそれぞれ表示しています。

この例では apex:dataTable にはスタイル整形のための属性として cellPadding および border 属性が用いられています。これらはオプションであり、ちょうどHTMLのtableタグの属性に相当しています。サポートされている属性のリストについては マニュアル中の Visualforce Component Refernce からご覧いただけます。

apex:dataTable タグは1つ以上の apex:column タグを内部に保持します。テーブル内に表示される行の数は value 属性に指定されているレコードの数によって定まります。

クエリ文字列のパラメータを利用する

以前にも示したとおり、デフォルトのページコンテキスト（ページに表示されるデータの元となるレコード）はページURLにあるクエリ文字列のパラメータである id パラメータによって定まります。Visualforceページではこのほかにもクエリ文字列パラメータを利用することが可能です。

パラメータの取得

Visualforceのマークアップの中からクエリ文字列パラメータを参照するには、グローバル変数である $CurrentPageReference を利用します。これを利用することで、そのページに与えられたクエリ文字列パラメータの中からパラメータ属性を指定してその値を取得することが可能になります。

$CurrentPageReference.parameters.<parameter_name>

例として、ある取引先責任者の詳細情報を取引先のページに追加したいという場合を考えましょう。取引先のレコードIDはデフォルトの id パラメータで渡されますが、取引先責任者のレコードIDは cid というパラメータで渡されるものとします。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are displaying values from the {!account.Name} account and a separate contact
        that is specified by a query string parameter.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" border="1">
              <apex:column>{!contact.Name}</apex:column>
        </apex:dataTable>
    </apex:pageBlock>
    <apex:detail subject="{!$CurrentPageReference.parameters.cid}" relatedList="false" title="false"/> 
</apex:page>

レンダリングを正しく行うためには適切な取引先IDと取引先責任者IDをパラメータに指定する必要があります。例として取引先のIDが 0017000000Lneby で、取引先責任者のIDが 0037000000Tc3m1 だった場合、以下のようなURLになります。

https://na5.salesforce.com/apex/HelloWorld?id=0017000000Lneby&cid=0037000000Tc3m1
08
パラメータの設定

リンク対してパラメータを設定する際には、apex:param タグを apex:outputLink タグの中に指定します。なお以下の2つの表現は同等になります。

<apex:outputLink value="http://google.com/search?q={!account.Name}">
    Search Google
</apex:outputLink>
<apex:outputLink value="http://google.com/search">
    Search Google
    <apex:param name="q" value="{!account.Name}"/>
</apex:outputLink>

apex:param タグはこの他にも、apex:include および apex:commandLink タグなどで利用することができます

1ページ内でのパラメータの利用

クエリ文字列パラメータの取得および設定の両方ができたので、今度は１つのページの中にこの２つのアクションをまとめてみましょう。テーブルに表示されている取引先責任者の名前のリストに、その下に表示されている取引先責任者の詳細情報を制御するためのハイパーリンクを設置します。以下の作業を行う必要があります。

  • 取引先責任者のリストを表示している dataTable を apex:form タグで囲む
  • 取引先責任者の名前を apex:commandLink タブで囲み、その中に cid パラメータを apex:paramタグで指定する

標準コントローラを利用する場合、commandLink は新しいパラメータ情報を付け加えた上で今のページをリフレッシュします。この場合は cid パラメータが更新されるので、取引先責任者の詳細を行っているコンポーネントの内容が書き換えられることになります。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are displaying contacts from the {!account.Name} account. 
        Click a contact's name to view his or her details.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:form>
            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" border="1">
                  <apex:column>
                      <apex:commandLink>
                          {!contact.Name}
                          <apex:param name="cid" value="{!contact.Id}"/>
                      </apex:commandLink> 
                  </apex:column>
            </apex:dataTable>
        </apex:form>
    </apex:pageBlock>
    <apex:detail subject="{!$CurrentPageReference.parameters.cid}" relatedList="false" title="false"/>
</apex:page>

09

コメント (0) | トラックバック (0) Save to del.icio.us Digg this story

Visualforceをはじめよう（１）

by Shinichi Tomita on 11月 7, 2007 at 04:06 午後

VisualforceはSalesforceのアプリケーションにカスタムユーザインターフェースを作成するためのForce.comプラットフォームの新機能です。Visualforceを利用することで、Salesforceのインターフェースを利用したコンポーネントや、まったく独自のインターフェースを利用することが可能になります。

サインアップとプレビュー申込み

VisualforceはまだDeveloper Editionのみのプレビューで、さらに利用にはプレビュープログラムへの申込みが必要です。まずこちらからDeveloper Editionのアカウントを取得してください。アカウントが取得できたら、こちらのページからVisualforce Developer Previewに申込みを行います。

申込みが終了したら、Salesforceにログインし、[設定]リンクをクリックし、左側の[開発]メニューから新しく[ページ]という項目が増えていることを確認してください。これでVisualforceの利用が可能になりました。

S1

開発者モードを有効化

Visualforceの開発を行うには、開発を行うログインユーザの開発者モードを有効にしておくと便利です。[設定] [私の個人情報] [個人情報]から[編集]をクリックし、[開発モード]チェックボックスにチェックを入れ、保存します。

S2

開発者モードを有効化すると、まるでWikiを編集するような感覚でVisualforceページの作成を行うことができます。ページを作成するには、ブラウザのアドレスバーに対して以下のようなURLを入力します。

https://<salesforceHost>.salesforce.com/apex/PageName

ここで、PageNameという名前のVisualforceページが存在しない場合、エラーメッセージとともに新たに同名のVisualforceページを作成するかどうかを問い合わせるダイアログが表示されます。作成リンクをクリックすると、同URLに対してデフォルトのVisualforceページが作成されます。たとえばHelloWorldというページを作成する場合、

https://<salesforceHost>.salesforce.com/apex/HelloWorld

というURLをアドレスバーに入力します。

VisualforceでHelloWorld

ページが作成されると、デフォルトのグリーティングメッセージとともに、画面のフッター部位にPage Editorというボタンを含むバーが現れます。これをクリックすると、上下に画面が2分割され、Visualforceページのレンダリング結果とページ定義のソース画面とを同時に表示することができます。Visualforceページの開発者は、ページ定義画面のマークアップを直接編集することで、Visualforceの画面を確認しながら開発を行います。

S3

デフォルトのグリーティングメッセージの代わりに、以下のようなコードを入力してみましょう。

<apex:page>
  Hello {!$User.FirstName}!
</apex:page>

以下のような形でログインユーザの名前が表示されるはずです。

01

このように、Visualforceページの中にはSalesforceの変数を{!変数名.プロパティ名}といった形で埋め込むことができます。これはSコントロールの差し込み項目と同様です。

標準コントローラを利用する

Visualforceではapex:pageマークアップタグの属性として、standardControllerという属性を指定できます。

<apex:page standardController="オブジェクト型名">

コントローラとは、Visualforceが利用するデータおよびビジネスロジックへのアクセスを提供するものです。標準コントローラはSalesforceアプリケーションのすべてのオブジェクトに備わっています。カスタムのビジネスロジックは記述できませんが、指定したオブジェクトの型に結びついて処理を行うことが可能です。

ここではこの標準コントローラを使用して、取引先責任者の詳細を表示するページを作成します。標準コントローラとは、どのデータを取得して表示するかというコンテキスト情報を指定するものだと考えてください。コンポーネントや差し込み項目の値はコントローラから渡されます。具体的なコードとして、HelloWorld Visualforceページに以下のような記述を追加します。

<apex:page standardController="Account">
    Hello {!$User.FirstName}!
    <p>You are viewing the {!account.Name} account.</p>
</apex:page>

この状態ではまだどの取引先を表示するかといったコンテキスト情報は指定されていませんので、レコードは表示されません。もっとも簡単にコンテキストを指定するためには、まず任意の取引先の詳細ページにアクセスして、そのURLを調べてください。例えば、詳細ページのURLが以下のような形式で与えられたとします。

https://na5.salesforce.com/0017000000Lneby

このURLから、取引先のIDが 0017000000Lneby であることがわかります。この値をコピーし、先ほどのVisualforceページのURLパラメータとして以下のような形で追加します。

https://na5.salesforce.com/apex/HelloWorld?id=0017000000Lneby

これによりVisualforceページにIDで指定された取引先の名前が表示されるのを確認してください。

02_2

Visualforceのコンポーネントライブラリを使用する

ここまでは、Visualforceのタグとして必須のタグであるapex:pageタグしか利用していませんでした。HTMLで画像や表を利用するのにimgタグやtableタグを利用するのと同様に、Visualforceのコンポーネントライブラリからさまざまなユーザインターフェースのコンポーネントをページの中で利用することができます。

Salesforceの標準詳細画面におけるセクションのような外観を実現する apex:pageBlock というコンテナタグがあります。先ほどのHelloWorldページを次のように変更してみましょう。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!"> 
            You are viewing the {!account.Name} account.
    </apex:pageBlock> 
</apex:page>

すると以下のような結果が得られます。

03_2

Salesforceの標準インターフェースである詳細画面や関連リスト、入力項目などのコンポーネントを利用するためのタグもあります。詳細画面を表示するには、apex:detail タグを利用します。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.Name} account.
    </apex:pageBlock>
    <apex:detail/> 
</apex:page>

04

apex:detailの属性に何も指定しない場合、コンテキストにあるレコードの詳細情報をそのまま表示します。タグに属性値を指定することで、どのレコードを表示するか、関連リストを表示するか、タイトルバーを表示するかなどの制御が可能です。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.Name} account.
    </apex:pageBlock>
    <apex:detail subject="{!account.OwnerId}" relatedList="false" title="false"/> 
</apex:page>

05

その他利用可能なコンポーネントライブラリについて調べるには、Page EditorのComponent Referenceリンクをクリックするか、あるいは以下のURLから参照することも可能です。

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref.htm

コメント (0) | トラックバック (0) Save to del.icio.us Digg this story

Successforce Live 2007 - Force.comライブデモ スクリーンキャスト

by Shinichi Tomita on 11月 5, 2007 at 07:47 午後

11月2日のSuccessforce Live 2007で行った（B-3 Force.comでどこまでできる？、B-5　Force.com Deep Dive！）ライブデモのスクリーンキャスト（音声無し）です。当日ご参加いただいた方、残念ながらご参加できなかった方もぜひご覧いただければと思います。

B-3 Force.comでどこまでできる？
B-5 Force.com Deep Dive!

コメント (10) | トラックバック (0) Save to del.icio.us Digg this story