Rapid Force.com Pages (Visualforce) UI Prototyping

Rapid Force.com Pages (Visualforce) UI Prototyping

DevelopersWes Nolte: Consultant

Rapid application development is one of the strongest selling points of Salesforce and the Force.com platform. But translating design documents into a cross-browser, standard-compliant site can be challenging.

http://Force.com/

Session Objectives

What CSS is and what it’s capable of.

Contemporary best practices.

More about the use of CSS on the Force.com Platform.

CSS frameworks and how to apply them to Visualforce

when prototyping.

Note that this session is aimed at developers who have at least a

cursory understanding of CSS and HTML/XHTML.

Safe Harbor

Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.

The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our quarterly report on Form 10-Q for the fiscal year ended October 31, 2009 and our other filings. These documents are available on the SEC Filings section of the Investor Information section of our Web site.

Any unreleased services or features referenced in this or other press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

How is this related to the Cloud?

All decent cloud applications use a CSS

Your developers must be expert in 2 things

General Principles of CSS

CSS as applied to Visualforce Pages

Cascading Style Sheets

What is CSS?– Styling Language

– Separates HTML content from Look-and-feel e.g.

http://csszengarden.com

– What is meant by “cascade”?

CSS best practices across the web– Never use inline styles

– CSS class VS CSS using element Id

Cascading Style Sheets

– CSS designed for speed• Style inclusions should be at the very top of the HTML document

• Gzip and minify resources

– Organization of code• Order style definitions alphabetically e.g. body{} should appear

before .content{}. Do the same for style properties within these

definitions e.g. color should come before display

• Indent sub-styles e.g.

.paragraph{}

.paragraph .link{}

CSS in the salesforce.com CRM

Styles in standard components

Mimicking standard component styles– Class names and HTML structure

– It is to be avoided as far as possible. Example can be found at

http://www.forcetree.com/2009/09/using-salesforce-css-styles-

in-your.html

– Overriding standard styles – Don’t do it!

CSS on the Force.com Platform

Static Resources as style sheets– Slow process when using zip-archives

Visualforce pages as style sheets– <apex:page contentType=“text/css”>

– <apex:stylesheet value=“{!$Page.Stylesheet}” />

– Quick prototyping of stylesheets as they can be edited in the

Force.com IDEs

– Can include calls to controller methods and global variables so

values can be dynamic

– Can include static resources as images


Visualforce pages as style sheets– Slower page loads as styles can’t be minified or compressed

– You lose the neat organization of files and folders for your

styles and images

Plaintext Static Resource as style sheets– <apex:stylesheet value=“{!$Resource.StyleSheet}” />

– Quick prototyping of stylesheets as they can be edited in the

Force.com IDEs

– Can’t reference any resource outside of the file & since they

don’t exist in a zip-archive no images can be included


Plaintext Static Resource as style sheets– Not efficient as they’re not minified or compressed

– You lose the neat organization of files and folders, and will

probably end up with a proliferation of CSS static resource files

Zip-archived Static Resource– Have a Software Development Lifecycle for Visualforce & CSS

development

– Combine processes where necessary

– How would you mitigate risk associated with changing

references to styling resources?

Evolution of Programming Languages

Programming language generations– 5 language generations

– Paradigms within these generations e.g. libraries and

frameworks

– What do you understand the difference to be?

So what does this have to do with CSS?– Easy to learn, difficult to master

– CSS frameworks exist to help us

– Blueprint, 960.gs, Elastic CSS Framework

The 960 Grid System

Why would I use a framework?– Pros

• Intuitive

• Cohesive

• Easy to communicate

• Cross-browser compliance

– Cons• Adoption

• Less flexible

• It’s not a magic wand

The 960 Grid System

Why choose this framework?– Mature

– Simple

– Developer Tools

– Business Tools

The Ins & Outs of 960.Gs

What’s in a name?– The magic of 960 pixels

– Grid Systems

Columns and Gutters– Upside-down Tetris!

Framework keywords– Container_XX

– Grid_XX

– Alpha & Omega

– Prefix & Suffix



Simple Wireframe Code Sample


Corresponding widths for 12-column layout’s columns-

numbers are:

1. 60px

2. 140px

3. 220px

4. 300px

5. 380px

6. 460px

7. 540px

8. 620px

9. 700px

10. 780px

11. 860px

12. 940px


Combine Grid Units

960.Gs Grid Units

Nesting Grid Units

Get the Framework

http://960.gs

Wiring 960.Gs up to Visualforce

The 960.gs Static Resource– Style files contained in code/css folder

Include the style sheet– <apex:stylesheet value="{!URLFOR($Resource.Css960Gs, 'css/960.css')}"/>

More Than Just a Framework

Gather business requirements using sketch sheets

More Than Just a Framework

Design templates exist for

all major design

applications

Templates match sketch

sheets and CSS

framework dimensions

precisely

Developing with 960.gs

Work in parallel with the designer

Slot final images into Visualforce wireframe

Developing the 960.gs

Use a “Gridder” to guide your development

Developing with 960.gs

View live demo at

http://thesilverlining-developer-edition.na7.force.com/x960gs

.



In Summary

In this session you’ve learnt about CSS, it’s application and best

practice in the CRM and on the Force.com Platform. You’ve also

seen one of the more popular CSS frameworks and it’s application

in Visualforce. Now you have the necessary insight to rapidly

prototype your Force.com Site designs, all you have to do is

practice practice practice.

I encourage you to sign up for a free Developer Edition Org and read

through the standard documentation on CSS within Salesforce and

Force.com. I also challenge you to go beyond that and look at the

other platforms and see what they’re doing with CSS; and become

a technology pioneer on the Force.com Platform!

Rapid Force.com Pages (Visualforce) UI Prototyping

D I S C O V E R

Visit the Developer Training and Support Booth in Force.com Zone

Discover

Developer

Learning Paths

Developer training, certification and support resources

S U C C E S SFind us in the Partner Demo Area of

Force.com Zone 2nd Floor Moscone West

that help you achieve

Learn about Developer

Certifications

Remember. . .

Check Chatter for additional session information

Get your developer Workbooks and Cheat Sheets in

the Force.com Zone

Visit for more information related

to this topicDon’t forget the survey!

How Could Dreamforce Be Better? Tell Us!

Log in to the Dreamforce app to submit

surveys for the sessions you attendedUse the

Dreamforce Mobile app to submit

surveysEvery session survey you submit is

a chance to win an iPod nano!

OR