coding the salesforce1 platform user interface
DESCRIPTION
Slide deck for my Cloud World Forum talk introducing Visualforce.TRANSCRIPT
Coding the Salesforce1 Platform User InterfaceJune 17, 2014
Keir BowdenCTO, BrightGen@bob_buzzard
What
Why
How
Agenda
What
What is Visualforce?
User interface framework
Component based
Rich set of standard components
HTML
CSS
JavaScript
MVC Framework
ViewModel Controller
Platform provided/ Apex coded
VisualforcePage
Database /Custom classes
What
Why
How
Agenda
Why
Use case 1 – Override Standard Pages
Use Case 1 Features
Standard Controller– Required to override standard page
– Manages a Salesforce record• Account in this example
– Declarative – no Apex code
Use case 2 – Standard Page Plus!
Use Case 2 Features
Standard Controller– As use case 1
– Managing Account
Extension Controller– Coded in Apex
– Extends Standard Controller
– Managing Contacts
– Delegate to Standard Controller
Use Case 3 – Custom Functionality
Use Case 3 Features
Custom Controller– No standard controller to extend
– Coded in Apex from scratch
– Method to execute search
– All data managed in properties
Use Case 4 – External Facing Web Page
Use Case 4 Features
Any type of controller (including none)
Exclude Salesforce Styling, Elements
Regular HTML
External CSS and JavaScript Libraries
Surfaced through Force.com Site
What
Why
How
Agenda
How
Example Page - MarkupPage tag - container
Standard controller – no code!
Standard component with attributesRegular HTML
Standard component – no attributes
Closing page tag
Example Page - Output
Components
Elements on a page– Standard library – 100+
– Custom components• Functional Decomposition
• DRY
• Custom controller only
• Attributes influence behaviour
Example Component
Data Binding
Merge syntax – {! <expression> } Display fields from managed record
– <apex:page StandardController=“Account”> You are viewing <apex:outputField value=“{!Account.Name}” />.
Data Binding
Update fields from managed record<apex:page StandardController=“Account”> <apex:form> <apex:inputField value=“{!Account.Industry}” />
Data Binding
Access properties from controller– Public with public getter:
public String myStr {get; set;}
– <apex:page controller=“MyController”> <apex:form> Enter text: <apex:inputText value=“{!myStr}” />
Action Binding
Access Methods from Controllerpublic PageReference edit() { ... }
<apex:page controller=“MyController”>
<apex:form>
<apex:CommandButton value=“Edit” action=“{!edit}” />
Where Next?
https://developer.salesforce.com– Developer Portal
– Documentation, Wiki, Blogs, Forums
Developer Edition - http://bobbuzz.me.uk/1n2NND2– All Salesforce features
– Restrictions on users and records
Where Next?
Workbook - http://bobbuzz.me.uk/1lGluO9
Developer’s Guide - http://bobbuzz.me.uk/1lrw4d5
Cookbook – http://bobbuzz.me.uk/16BF214
Developer Group - http://bit.ly/DUGLondon
Thank You