CSS Styling optional CSS Styling

Document Sample
CSS Styling optional CSS Styling Powered By Docstoc
					Beyond S-Controls: Learn to Use
Visualforce in Your Apps
Track: Admin to App Builder

                       Jon Mountjoy,
                       Jesse Lorenz,
Safe Harbor Statement
“Safe harbor” statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-
looking statements including but not limited to statements concerning the potential market for our existing service offerings
and future offerings. All of our forward looking statements involve risks, uncertainties and assumptions. If any such risks or
uncertainties materialize or if any of the assumptions proves incorrect, our results could differ materially from the results
expressed or implied by the forward-looking statements we make.

The risks and uncertainties referred to above include - but are not limited to - risks associated with possible fluctuations in
our operating results and cash flows, rate of growth and anticipated revenue run rate, errors, interruptions or delays in our
service or our Web hosting, our new business model, our history of operating losses, the possibility that we will not remain
profitable, breach of our security measures, the emerging market in which we operate, our relatively limited operating
history, our ability to hire, retain and motivate our employees and manage our growth, competition, our ability to continue to
release and gain customer acceptance of new and improved versions of our service, customer and partner acceptance of
the AppExchange, successful customer deployment and utilization of our services, unanticipated changes in our effective
tax rate, fluctuations in the number of shares outstanding, the price of such shares, foreign currency exchange rates and
interest rates.

Further information on these and other factors that could affect our financial results is included in the reports on Forms 10-
K, 10-Q and 8-K and in other filings we make with the Securities and Exchange Commission from time to time. These
documents are available on the SEC Filings section of the Investor Information section of our website at, inc. assumes no obligation and does not intend to update these forward-
looking statements, except as required by law.

  S-Controls were cool (really!)
  S-Controls have issues (it’s a shame)
  Introducing Visualforce (good medicine)
  More Visualforce (now you’re just showing off)
  Summary (what we want you to remember)
S-Controls Were Cool
S-Control Foibles
S-Control Foibles: Compatibility

             vs.              vs.
S-Control Foibles: Compatibility

           4?!               4?!   8?!
S-Control Foibles: Productivity

  S-Controls contain both business logic and UI
  Difficult to create and maintain common look and feel
  Small changes may require complete overhaul
  Modifying the UI can lead to unintended changes in the
   business logic
    – Not everyone is a UI expert, not every UI expert is a skilled
    – you must be both to be productive with client programming
S-Control Foibles: Performance

It looks simple

But for most S-Controls...
S-Control Foibles: Performance

 This is what happens under the hood
Welcome to Visualforce
Visualforce: A One Stop Shop

                    Fetch URL
Visualforce solution

  Create pages on server - deliver to client, fully
  Server-side access to server-side data
  addresses browser incompatibilities
  Continue to enable Ajax interactions where needed
  Complete, modular set of components with standard
 look and feel
  Extend the component library with Custom Components
Model View Controller Pattern
Visualforce - MVC Breakdown
Visualforce - MVC in Practice
  Styling S-Control:
Styling - Visualforce:
CSS Styling (optional)
CSS Styling (optional)
CSS Styling (optional)
 <apex:page standardcontroller="Account" showheader="false" extensions="AccountExtension">
        body    { font-family: Arial, Helvetica, sans-serif; }
        table { color:#4d4d4d; width:auto; text-align:left; text-indent:5px; vertical-align:middle;
            text-decoration:none;        border:1px solid #466e92; border-collapse:collapse; min-
            width:375px; font-size:13px; }
        td, th { padding:5px; height:1px; border:1px solid #466e92; }
     <div style="margin: 20px;">
            <div style="font-size:18px; margin-top:0px; margin-bottom:20px; color:#0067ac;">
                            <td>Account Name</td> <td>{!Account.Name}</td>
                            <td>Industry</td> <td>{!Account.Industry}</td>
                            <td></td> <td><apex:commandButton action="{!edit}" value="Edit"/></td>
Build a Public Website
More Advanced Demos

  Visualforce Components
  Email templates
  PDF generation
  File Upload
Call to Action

 Our best advise to you is to embrace Visualforce now:
  Learn how easy it is to code your own Visualforce
   pages by exploring online resources
  Start with a fresh application
    – Simpler than porting an existing S-Control
  Once you're up to speed, with fresh insight and
   inspiration consider rewriting those old, slow and
   inefficient S-Controls

 Performance and Execution
 Browser Compatibility
 Native Styling/Formatting
 Developer Productivity
Session Feedback
Let us know how we’re doing and enter to win an iPod nano!
    Please score the session from 5 to 1 (5=excellent,1=needs
       improvement) in the following categories:
         Overall rating of the session
         Quality of content
         Strength of presentation delivery
         Relevance of the session to your organization

                Additionally, please fill in the name of
                each speaker & score them on overall
                We strive to improve, thank you for filling out our survey.

        Jon Mountjoy Community Manager

        Jesse Lorenz Evangelist
Visit for
more resources.

Shared By: