Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Styling Visualforce Pages
HTML Comments and IE Conditional Comments
HTML Tags Added or Modified by Visualforce
Relaxed Tidying for the HTML5 Doctype
Manually Override Automatic <html> and <body> Tag Generation
Creating an Empty HTML5 “Container” Page
Using a Custom Doctype
Using a Custom ContentType
Setting Custom HTML Attributes on Visualforce Components
Offline Caching Using the HTML5 manifest Attribute
Render a Visualforce Page as a PDF File
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Overriding Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrating Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing for Mobile Devices
Adding Visualforce to a Force.com AppExchange App
Using JavaScript in Visualforce Pages
Best Practices
Standard Component Reference
Appendices
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Creating an Empty HTML5 “Container” Page

Use an empty container page when you want to bypass most of Visualforce and add your own markup. A container page is especially useful for HTML5 and mobile development, and other web apps for which standard Visualforce output isn’t desired.

You use Remote Objects, JavaScript remoting, or other Force.com APIs to make service requests and then render the results with JavaScript.

The following code provides a sample container page to start with.
The <apex:page> component and its attributes is the core of a container page’s definition.
  • docType="html-5.0" sets the page to use the modern HTML5 docType.
  • applyHtmlTag="false" and applyBodyTag="false" tell Visualforce that your markup supplies the <html> and <body> tags so that it doesn’t generate its own.

    When you set applyHtmlTag or applyBodyTag to false, the title attribute of the <apex:page> component is ignored.

    Note

  • The showHeader="false", sidebar="false", and standardStylesheets="false" attributes suppress the standard header, sidebar, and style sheets that add the Salesforce user interface and visual design to Visualforce pages.

The <head> tag isn’t required in a container page, but it’s a good idea to include it. If you need to add values to the <head> element, you must add the <head> tag yourself. In that case, Visualforce adds any of its required values to your <head>. Otherwise, Visualforce renders its own <head> to add any necessary values.

You can use Visualforce components, such as <apex:includeScript>, <apex:stylesheet>, and <apex:image>, to reference static resources on the page. The output of <apex:includeScript> and <apex:stylesheet> is added to the <head> element. If you didn’t include one, Visualforce adds its own. The <apex:image> output is rendered wherever you place it on the page.

An “empty” Visualforce page renders the minimum amount of HTML markup, but it isn’t completely empty, or free of resources you don’t control. JavaScript code that’s essential for Visualforce, such as instrumentation, is still added. Visualforce also automatically adds resources required for markup you add. For example, references to Remote Objects or JavaScript remoting resources, if you use them in your code.

Note