Salesforce學習之路-developer篇（三）利用Visualforce Page實現頁面的動態刷新功能

Visualforce是一個Web開發框架，容許開發人員構建能夠在Lightning平臺上本地託管的自定義用戶界面。其框架包含：前端的界面設計，使用的相似於HTML的標記語言；以及後端的控制器，使用相似於Java的Apex語言。

哪些版本支持Visualforce？

衆所周知，Salesforce分爲多個版本，不一樣的版本功能之間存在必定的差別，而支持Visualforce的版本：Contact Manager，Group，Professional，Enterprise，Unlimited，Performance和Developer Edition。

Visualforce的優點？

做爲Markup語言，Visualforce有以下優勢：

• 與其餘基於Web的用戶界面技術集成：由於Visualforce markup最終呈現的是HTML格式，因此開發人員能夠將visualforce markup與標準的HTML, JavaScript，Flash一塊兒使用。
• MVC開發模式：Visualforce經過視圖，控制器模式，開發人員能夠輕鬆拆分和構建用戶界面的外觀和應用程序的業務邏輯。
• 託管平臺：Visualforce頁面徹底由Lightning平臺編譯和呈現，所以不管顯示或編輯的數量如何，它都與Salesforce標準頁面的性能相同。
• 可自動升級：升級Lighnting平臺的其餘組件時，無需從新Visualforce頁面。因爲頁面做爲元數據存儲的，因此它會與系統的其他部分一塊兒自動升級。

---

 

 

Visualforce頁面有兩個主要元素組成：Markup和Controller

• Markup：Visualforce標籤，HTML，JavaScript或嵌入在單個控件中的任何其餘基於Web的代碼組成 <apex：page >標籤。這裏定義了頁面中使用的用戶界面組件以及它們的顯示方式。
• Controller：是一組指令，用於與指定的Markup進行交互，爲其提供數據訪問和修改，使用相似與Java的Apex語言。

通常說來，不涉及sObject的數據處理（增刪改查）時，僅Markup部分便已足夠；若涉及sObject的數據處理，則需建立一個控制器（class類），並將該類與View綁定。

 

Markup

 在這裏建立一個下拉菜單選擇並動態刷新的案例。

<!--對於單Visualforce Page,全部的Page都必須包含在一個Page內-->
<apex:page controller="SP_FilterConditionPageController">
    <!--from:Visualforce頁面的一部分，容許用戶輸入和提交按鈕的表單-->
    <apex:form >
        <!--outputlabel:輸入輸出字段的標籤-->
        <apex:outputlabel value="Site Name" for="siteValue" />
        <!--selectList:選項列表，容許用戶選擇一個值或多個值-->
        <apex:selectList value="{!siteName}" size="1" id="siteValue" multiselect="false">
            <!--selectOptions:做爲selectList的子組件，提供選擇對象的集合-->
            <apex:selectOptions value="{!siteItems}"/>
        </apex:selectList>
        <apex:outputlabel value="Display Months" for="values2" />
        <apex:selectList value="{!displayMonth}" size="1" id="values2" multiselect="false">
            <apex:selectOptions value="{!monthItems}"/>
        </apex:selectList> 
            <!--commandButton:輸入元素的按鈕，按鈕執行有控制器定義，收到響應後刷新頁面-->                
            <apex:commandButton value="Apply" action="{!apply}" rerender="out" status="status"/>   
    </apex:form>
 
    <!--outputPanel:將組件組合在一塊兒進行AJAX刷新-->
    <apex:outputPanel id="out">
        <!--顯示AJAX更新請求狀態的組件-->
        <apex:actionstatus id="status">          
            <apex:facet name="stop">
            </apex:facet>
        </apex:actionstatus>
    </apex:outputPanel>  
</apex:page>

 {!**}: 表示controller中的變量。

 

controller類

服務端的控制器類，爲前端界面的下拉菜單提供數據，並在選擇數據後修改對象對應的字段值。

注意：按鈕Action的響應必須爲PageReference.

public with sharing class SP_FilterConditionPageController {
    String displayMonth;
    String siteName;
    String currentDisplayMonth;
    //獲取當前頁面的對象ID
    Id accountId = ApexPages.CurrentPage().getparameters().get('id');
 
    public String getDisplayMonth() {
        if(displayMonth == null) {
            List<Account__c> accounts = [select Display_Months__c, Display_Site__c
                                         from Account__c
                                         where id = :accountId limit 1];
            displayMonth = accounts[0].Display_Months__c;
        }
        return displayMonth;
    }
 
    public void setDisplayMonth(String displayMonth) {
        this.displayMonth = displayMonth;     
    }
     
    public String getSiteName() {
        return siteName;
    }
 
    public void setSiteName(String siteName) {
        this.siteName = siteName;     
    }
     
    public PageReference apply() {
        if(displayMonth != null || siteName != null){         
            List<Account__c> accounts = [select Display_Months__c, Display_Site__c 
                                         from Account__c 
                                         where id = :accountId limit 1];
            for(Account__c account: accounts) {
                if(displayMonth != null) {
                    account.Display_Months__c = displayMonth;
                }
                if(siteName != null) {
                    account.Display_Site__c = siteName;
                }
            }
            if(Schema.sObjectType.Account__c.isUpdateable()) {
                //更新對象
                update accounts;
            }
        }
        
        //根據當前對象ID，產生新的頁面
        PageReference pageRef = new pageReference('/' + accountId);
        pageRef.setRedirect(true);
        return pageRef;
    }
 
    public List<SelectOption> getSiteItems() {
       List<SelectOption> options = new List<SelectOption>();
       List<Sites__c> sites = [select WebEx_URL__c, Site_Status__c, Lockdown_Flag__c 
                               from Sites__c 
                               where Account__c = :accountId];
       for(Sites__c site: sites){
           if(site.Site_Status__c == 'inactive' || site.Lockdown_Flag__c == 'Not Available') {
               continue;
           }
           options.add(new SelectOption(site.Webex_URL__c, site.Webex_URL__c));
       }     
       return options;
    }
     
    public List<SelectOption> getMonthItems() {
       List<SelectOption> options = new List<SelectOption>();
       options.add(new SelectOption('Last 6 Months', 'Last 6 Months'));
       options.add(new SelectOption('Last 12 Months', 'Last 12 Months'));
       options.add(new SelectOption('Last 18 Months', 'Last 18 Months'));
       options.add(new SelectOption('Last 24 Months', 'Last 24 Months'));
       options.add(new SelectOption('Last 36 Months', 'Last 36 Months'));
        
       return options;
    }
}

 在上述案例中，前端界面在下拉框中選擇對應的site Name和 Display Name值，點擊Apply按鈕時，將結果保存至數據庫，生成新的頁面返回，這樣即可達到動態刷新頁面的效果。

具體的前端界面以下：