Salesforce.com certified Force.com Developer Certification Tutorial # 6: Visual Force Pages

This blog post is the sixth tutorial of the Salesforce.com Certified Force.com Developer Certification tutorial series titled ‘Visual Force Pages’. The following is the list of tutorial series.

_____________________________________________________________________________

Exam Outline for Visual Force Pages

User Interface 15%
List and describe the components of any Force.com application user interface (e.g., tabs, applications, detail pages, list views)
Given a scenario, determine the capabilities and constraints of the declarative framework for building a user interface (e.g., what can and can’t be done in a page layout)
Describe use cases for how Force.com pages can extend the user interface in the declarative framework and when to do so
Describe the capabilities and functionality of Force.com sites

VI. Visual Force Pages

1. Introduction to Visualforce Pages

  • 2 types of UI
    • Page Builder
      • UI generated automatically
      • limited/no control of UI behavior
      • limited control over look and feel, but all UIs are consistent
    • Visualforce
      • UI generated by developer/technologist
      • full control of UI behavior
      • full ‘pixel level’ control over UI
  • Visualforce & Apex
    • closely tied
    • PE/GE edition limitations prevent from authoring own apex (app exchange apps is okay)
  • Visualforce inline editor
    • auto-completion
    • full syntax highlighting
    • online doc
    • can be edited through force.com id
  • Developers can include
    • VF tags, Force.com expressions, HTML, Javascript, Flash
    • VF pages are limited to 15 MB
  • view State
    • maintains state across multiple pages or server calls
    • view state inspector
      • shows components contributing to view state
      • must be enabled on user profile
      • is displayed only when using <apex:form>
    • view state limit is 135 kb
  • vf pages
    • understand Salesforce metadata
    • display the same performance as statndard sf pages
    • are automatically upgraded to the next sf release
    • vf conforms to mvc development patter
  • MVC
    • Model – standard or custom object
    • View – pages that are presented to the end user
    • Controller – that determines the logic what happens initates an action such as clicking on a tab, etc.
  • 3 key elements
    • Visualforce pages
      • design definition of an app’s user interface
      • implemented using standard web technologies like HTML & javascript
      • can dynamically detect device and associate them with specific design definitions
    • Visualforce components
      • can be standard or custom UI components
      • over 65 standard sf ui elements available at G
      • referenced via a tag library model
    • Visualforce controllers
      • ability to reuse any standard Salesforce UI behavior like new, edit, save, etc (standard controller) and have access to Salesforce data
      • ability to define new UI behaviors and navigation using apex (custom controller)
  • Visualforce Components
    • pre-built UI constructs which reference standard elements in the Salesforce UI
    • referenced in a VF page using an XML tag
    • dynamic visualforce components
      • are designed in apex
      • allows to create pages that render based on variety of states, such as user’s:
        • permissions, behavior, org preferences, data attributes
      • are not intended to be the primary way to create new vf pages
  • Controllers
    • contain the logic and data references a page uses
    • can be used to maintain state across page interactions
    • are refernced or used by pages, through components that call data or actions
    • each page can reference or use standard controller, custom controller or custom controller extensions
    • each vf page references one main controller
  • types of visualforce components
    • standard controllers
      • are available for all API entities/objects as well as custom objects
      • provide access to standard sf data and behavior
      • are referenced by using <apex:page standardController=”Contact”>
    • custom controllers
      • are coded to create custom behaviors or non standard data sets
      • can be used to create wizards or leverage callouts
      • are invoked by using <apex:page controller=”MyController”>
    • cusom extensions
      • add custom behavior or additional data to standard controllers
      • are invoked by using <apex:page standardController=”Contact” extensions=”MyClass, MyOtherClass”>
  • Expressions and Data Binding
    • uses expression syntax to bind components to sf data and actions in the page’s controllers
    • expressions are linked back to controller data and actions not just to sf in general
    • all content in {!…} evaluated as an expression
    • User.FirstName} shows the current user’s first name in a page
    • data context is provided to controllers by the ID parameter, just as in standard pages.
  • Versioning
    • backward compatible
    • each vf page is saved with version settigns for specified version of api as well specified version of visualforce
  • Visualforce namespace
    • standard tags begin with the word apex
    • custom tags begin with the letter c
    • user can register custom namespaces to be displayed with custom tags instead of the letter c
  • Incorporating VF pages in Salesforce UI by
    • creating links to reference the unique page URL
    • overriding standard buttons to route to the new page
    • overriding tab overview pages to use the new page
    • creating custom tabs for the new page
    • embedding pages into page layouts
    • adding pages to a dashboard
    • using pages as custom help for a custom object

2. Visual Force Tags

  • Tags
    • consists of library of tags
    • can incldue text, html, javascript tags
    • can’t use javascript commenting
  • Tag Rules
    • are hierarchical
    • must be closed in the reversed order they were opened
    • like xml, vf must be well-formed
    • VF and JSP
    • similar to JSP
    • typically begins with <apex>
    • all pages must be enclosed by a set of <apex:page> tags
    • components may contain attributes with values to help further define them
    • vf components are resolved into other code at runtime
  • Tag Bindings
    • Bindings related visual force components with the page controller or other page components
    • 3 types of bindings
      • data bindings – use expression systan to pull the data from dataset made available by the page controller
      • action bindings – uses expression syntax to call action methods for functions coded in page controller
      • component bindings – compnent attribute values to reference other components
  • Tag Data Binding
    • binding goes both ways – read and updated
  • Expression syntax
    • dynamic object data can be inserted using {!objectname.fieldname} syntax
    • global data can be inserted with the added $ syntax, such as
      • User.fieldName}, {!$Page.otherVisualforcePage}, {!$Component.otherVisualforceComponent}
    • local variables can be created to stand in for these expressions as they can become long and unwieldy using the <apex:variable> tag.
  • Action Binding
    • set of actions available through the controller
    • can be called using expression syntax
    • they can be
      • standard actions
      • custom actions
  • Component Ids
    • all vf tags have an optional id attribute
    • this id is used as the DOM id when the page is rendered
    • the tag can be referenced by the id by other tags, javascript, or other web enabled languages
    • the ids should be unique within each page
    • the hierarchy of ids should be specified if the ids are not unique
    • when components (such as tables and lists) support iteration over record collections, the system appends _index to the id for each row, starting with zero.

3. Basic Page Components

  • Layout Components
    • provides a structure to the page
    • provide templates or frames to insert content
    • do not bind directly to sf data
    • are focused on areas where data-bound components can be placed
    • tags
      • apex:page /> – represents a single vf page
      • apex:variable /> – provides a local variable that can be used to replace an expression to reduce long and repetitive text
  • Static  Resource Components
    • a type of sf storage
    • designed for use with vf
    • items required by the vf pages (such as javascript, css, images, etc…)
    • referenced using $Resource global variable
    • recommended method over uploading these files to document tab
    • are uploaded via Your Name|Setup|Develop|Static Resources
    • can be contained in an archive (zip)
    • limited to 5 MB per file and a 250 mb overall
    • use action attr to redirect
    • Components
      • <apex:stylesheet> – to add additional css file
        • are located in /sCSS/directory
        • dStandard.css – most styles for standard objects/tabs
        • allCustom.css – styles for custom objects/tabs
      • <apex:pageBlock>
        • helps build out pages and uses sf stylesheet by default
        • creates an area of a page that is similar to detail page and doesn’t contain the default content
      • <pageBlockButtons> – set of buttons that are styled like standard sf buttons (buttons still need to be created manually)
      • <pageBlockSection> – must be used within a pageBlock component. This tag creates a section with one or more columns
      • <pageBlockSectionItem>
        • used within pageBlockSection component
        • allows to modify data presentation, display the data using a different widget, or present items not based directly on SF object fields
        • if we need to bundle more than one item in the cell, then use outputpanel
      • <apex:sectionHeader> – creates the standard colored header bar displayed under the tabs in the SF UI
      • <apex:toolbar>
      • <apex:toolbarGroup>
      • <apex:tabPanel>
      • <apex:tab>
      • <apex:panelBar>
      • <apex:panelBarItem>
      • <apex:panelGrid>
      • <apex:panelGroup>
  • Coarse Metadata Components
    • provide a large amount of generated code to create familiary Salesforce structures
    • do not allow for much customization to the generated areas
    • Components
      • <apex:detail />
      • <apex:relatedList />
      • <apex:listViews />
      • <apex:enhancedList />
      • <apex:repeat />
    • Chatter tags
      • enable to add chatter into vf paes
      • incorporate chatter into vf pages using
        • the showChatter attribute of <apex:detail> tag
        • <chatter:feed> to include chatter feed on a record
        • <chatter:followers> to include chatter followers on a record
        • <chatter:feedWithFollowers> to include chatter feed, followers and show/hide chatter button
        • <chatter:follow> to add a button that enables you to follow records
    • Message components
      • <apex:pageMessages> – use the standard sf style
      • <apex:messages> – unformatted but can apply custom style
      • <message> and <pagemessage> – specific to one component
      • messages always shows up in system log.

4. Form and Output Components

  • allow entering info into your pages, & uploading files
  • form components
    • <apex:form>
      • enables a section of a vf page to allow users to enter data and subit it with commandButton or commandLink
    • <apex:inputField>
      • corresponds to a SF object field that respects the attributes of that field and uses associated sf UI widget
    • <apex:inputWidget>
      • set of widgets for data that doesnt correspond to a SF object field to be used with pageBlockSectionItem tags
        • <apex:inputCheckBox>, <apex:inputHidden>, <apex:inputSecret>, <apex:inputText>, <apex:inputTextarea>
      • limitations
        • no protection from malicious javascript
        • no escaping/unescaping the data correctly when displayed on a regular page layout
        • no built-in handling of the truncated display of long text fields
        • no special search indexing to ignore tags and focus on the plain text
        • no special handling of the field when used in filters, workflow rules, etc.
    • <apex:selectWidget>
      • series of additional tags to support the display of UI widgets in organized tables
        • <apex:selectCheckboxes>
        • <apex:selectList>
        • <apex:selectRadio>
    • <apex:inputFile>
      • allows users to upload files and turn them into attachments on records, documents  or apex blobs
    • <apex:commandButton> & <apex:commandLink>
      • used within a form tag.
  • output components
    • display info without allowing the user to change any data
    • have parallel form components
    • components
      • <apex:outputLabel> – creates a label for input or output widgets that do not automatically come with a label
      • <apex:outputField> – creates a read-only display of a label and value for a SF field, automatically formatted according to the field type
      • <apex:outputLink> – creates a link to URL
      • <apex:param> – used as achaild tag that provides a name/value pair parameter for its parent compoentn. It can be used with
        • outputLink: defines http query string parameters
        • outputText: defines text insertion parameters
        • actionFunction: defines javascript function parameters
      • <apex:outputPanel> – tag defines a set of content that is grouped together (often for ajax)
        • layout attribute: block, inline, none
          • block: Generates an HTML div tag (adds a paragraph)
          • inline: Generates an HTML span tag (default:doesn’t do any formatting)
      • <apex:outputText> – displays text which can be formatted using a stylesheet
      • <apex:pageBlockTable> – creates a table by iterating over a set of data using the SF stylesheet. good if data comes from sf object. used within pageBlock or pageBlockSection
      • <apex:dataList> – creates a list (a one-column table) by iterating over a set of data
      • [Note: dataList and dataTable are very similar and generally used when you don’t want the standard sf table style. DataLists are just one-column tables.
      • <apex:dataTable> – creates an HTML table which iterates over a set of data
      • <apex:column> – used within either pageBlockTable or dataTable set of tags. it creates the columns for a table
      • <apex:flash> used to embed flash widgets into a vf page
      • <apex:facet> used with a variety of other component tags to provide or override headers, footers, and captions to other items

5. Visual Force Components for Modularity

  • Custom components can stand alone or be accompanied by a custom controller (can be shared in appexchange)
  • <apex:component> – used to create our own custom reusable components
    • access then using <c:componentname>
  • <apex:attribute> – use it within component tag to define the custom attributes, can define the name, data type, and other aspects of the custom attribute
  • <apex:componentBody> – used within a component tag to pull the body of the component’s implementation into the component definition, often used for custom iteration component
  • Page Inclusions (mashups)
    • <iframe> to include another page as URL
    • <incldue> – to include another vf page
  • Template Tags
    • series of tags that are used to create vf template pages and define reusable components for baseline pages
    • tags
      • <apex:define>
      • <apex:insert>
      • <apex:compositions>
  • <messaging:emailTemplate>
    • facilitate communication outside of the application
    • used to create vf email templates
    • must be wrapped inside a single emailTemplate component
    • have advantages over  traditional email templates
    • can be edited using Email Templates (under admin)
  • Messaging tags
    • <messaging:emailHeader>
    • <messaging:htmlEmailBody>
    • <messaging:plainTextEmailBody>
    • <messaging:attachment>
  • With email templates, you can
    • repeat tag to iterate through all of the related records
    • generate pages inside of the template
    • specify a custom email header
    • create attachment using plain text, HTML or VF
  • Visualforce Performance Troubleshooting
    • reduce view state size using only one <apex:form> tag on a page
    • cache frequently accessed resources
    • reduce page size < 15 mb
    • increase the time interval for calling apex from visualforce page
      remove unnecessary fields to reduce the amount of data returned

6. Javascript in Visualforce

  • Action Binding and Javascript
    • currently only actions that are shared across al objects are exposed through standard controllers
    • but further standard sf actions are available by using javascript and the expression syntax with the !URLFOR and $Action keywords
  • Ajax tags
    • 5 tags
      • actionStatus – used to display start and stop statuses of ajax requests
      • actionSupport – used to call 2nd component when an event happens to the 1st component
      • actionPoller – similar to actionSupport, but the event is based on timer instead of a user action
      • actionFunction – provides support of invoking a controller action from javascript code using an Ajax request by defining new javascript function
      • actionRegion – used to demarcate which parts of the page the server should reprocess
  • use rerender attribute to do partial updates
  • simple to implement partial page update is
    • isolation the portion of the page by surrounding it with <apex:outputpanel> tags. be sure to give id attribute
    • create the command button or link that will trigger the partial refresh. add the rerender attribute and assign it the value of the id of the outputPanel created earlier
  • if event happening to same component that should action, use the built-in javascript event attributes
  • if event happening to a different component that will take the action, use the actionSupport tag to handle the event
  • With ajax toolkit
    • create an apex class and expose it as a web service
    • call the web service from a visual force page
      • optionally can attach a page to a button, make it inline, etc.

7. Further Topics in Visualforce

  • force.com sites allow to build public unauthenticated sites that can access data from sf apps
  • 4 main use cases
    • build and run new web applications
      • consumer reviews, hotel conceirge services, event registration sites
    • transform business apps into websites
      • recruiting portal
    • extend your salesforce crm apps
      • interactive web to lead forms
      • campaign landing pages
    • run your corporate web site on salesforce service
      • public websites, intranets
  • Salesforce Mobile
    • licensed client app that can be run on blackberry, iPhone, or windows mobile device
    • provides mobile access to data, email, tasks and calendar
    • includes features such as permissions, page layouts, related lists, dashboards, reports and list views
    • allows administrator to mobilize a limited set of standard objects and all custom objects
    • lite edition is free
  • guidelines to develop pages for mobile
    • evaluate if app interface needs to be redesigned for the use on mobile devices
    • keep the real estate open by not displaying the header or sidebar
    • avoid using lookup fields. For the best user experience, use apex to validate data entry
    • create reusable styles in a separate page and use the include component to add these styles
    • use a third party libary such as iUI that provides iPhone like interface
    • refrain from createing styles as a static resource
  • iPhone
    • set page width to 980 pixels
  • Blackberry
    • doesn’t support inline events
    • doesn’t have built-in navigation
    • viewstate for forms is too large for Blackberry
    • use standard html forms in mobile page instead of using form component
  • 3 methods to develop for multiple platforms
    • Separation and redirection
      • build pages separately and point the mobile tab to the bb page
      • top of the page, include the js to redirect the page, if the target is not a bb device
    • Lowest Common Denomiator
      • create pages that include minimal or javascript
      • use these pages on any supported device
    • Conditional Code
      • create pages that evaluate which device being used
      • offer appropriate markup for each device
  • Mobile Javascript Librar
    • some functions of mobile devices not applicable to desktop clients
      • developers can use js functions in vf pages for javascript enabled devices
        • mobileforce.device.sync()
        • mobileforce.device.close()
        • mobileforce.device.syncclose()
        • mobileforce.device.getLocation()
      • html links can be used to sync/close
  • Mobilizing Visualforce Pages
    • Create new mobile ready visualforce tab
    • add the vf tab to mobile configuration
    • test the page using a mobile client simulator
  • Chatter Data Model
    • FeedItem is the fundamental entity for the chatter data model
    • Feed tracking can be enabled for upto 20 fields per object
Advertisements

Tagged: , , , ,

One thought on “Salesforce.com certified Force.com Developer Certification Tutorial # 6: Visual Force Pages

  1. Anil G December 17, 2013 at 2:54 am Reply

    Hari, I really appreciate your work in creating such a quality site with so much good content. Thanks for helping the community.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: