Adding Attributes and Using Auto-Suggest - Visualforce

The page you created in Tutorial #1 shares a characteristic of every Visualforce page—it starts and ends with the <apex:page> tag. <apex:page> is actually a Visualforcecomponent—and one that must always be present. So all Visualforce pages will look similar to this:

<apex:page>
    Your Stuff Here
</apex:page>

Note the use of angle brackets, as well as how you indicate where a component starts and ends. The start is simply the component name in angle brackets: <apex:page>. The end is the component name prepended with a ‘/’ character in angle brackets: </apex:page>. All Visualforce pages follow this same convention—requiring that the pages you create be “well-formed XML” (with a few exceptions). A few components are self-closing—they have this form: <apex:detail /> (note the position of the /). Think of that as a start and end tag wrapped up in one!

You can generally modify the behavior and/or appearance of a component by adding attributes. These are name/value pairs that sit within the start tag. For example, here’s an attribute: sidebar="false".

Alternative Page Creation - Visualforce

You can also create a new page from this listing, and then edit it just like you did in Step 2 by navigating to the correct URL—taking into account the name of the page you created. Try it!

1. Go to Your Name | Setup | Develop | Pages, then click New.
2. Create and label the page hello2.
3. Click Save.
4. Navigate to the new page using the URL as you did in Step 2: https://your-salesforce-instance/apex/hello2

The Visualforce editor in Setup is good to know about, and a great way to see all your pages. However, the development mode editor we used in previous steps is more powerful, and lets you view your changes immediately. We’ll use it for the rest of this workbook.

Find all Visualforce Pages - Visualforce

Now that you’ve created a Visualforce page, you’ll need to know where to find it.

1. Click Your Name | Setup | Develop | Pages.
2. Scroll down to locate the page created in Step 2—hello.

This views your page, and even allows you to edit it. However, this editor is different from the one we’ve seen in the previous steps—it also doesn’t let you immediately view the changes (unless you have the page open in a separate tab).

Edit the Visualforce Page - Visualforce

Now that you’ve created the Visualforce page, you need to customize it for your own use. You can edit and preview the changes in real time.

1. You don’t want the heading of the page to say “Congratulations,” so change the contents of the <h1> tag to Hello World, remove the comments, and the “This is your new page” text. The code now looks like this:

   <apex:page> 
       <h1>Hello World</h1> 
   </apex:page>

2. Click the Save button at the top of the Page Editor.

The page reloads to reflect your changes. Note that Hello World appears in a large font. This is because of the <h1> tag—a standard HTML tag. Visualforce pages are generally composed of two types of tags: tags that identify Visualforce components (such as <apex:page>), and tags that are standard HTML.

Development mode, which you enabled in Step 1, makes development fast and easy. You can simply make changes, press Save, and immediately see the changes reflected. You can use a keyboard shortcut too—click CTRL+S to save at any time. You can also click the editor minimize button to see the full page.

When you deploy the page in a production environment, or if you switch off development mode, the editor will no longer be available.

Create a Visualforce Page

Now you are ready to create your first Visualforce page:

1. In your browser, add /apex/hello to the URL for your Salesforce instance. For example, if your Salesforce instance is https://na1.salesforce.com, the new URL is https://na1.salesforce.com/apex/hello. You will see the following error:
1. 
   
2. Click the Create Page hello link to create the new page. You will see your new page with some default markup.
   
   
   Note

   
   

   If you don’t see the Page Editor below the page, just click the hello tab in the status bar.

That’s it! The page includes some default text, as well as an embedded page editor displaying the source code. This is the primary way you’ll be creating pages throughout this workbook.

Enable Visualforce Development Mode

Development mode embeds a Visualforce page editor in your browser that allows you to see code and preview the page at the same time. Development mode also adds anApex editor for editing controllers and extensions.

1. Click Your Name | Setup | My Personal Information | Personal Information.
2. Click Edit.
3. Select the Development Mode checkbox, then click Save.

Creating and Listing Visualforce Pages

In this tutorial, you will learn how to create and edit your first Visualforce page. The page will be really simple, but this is the start, and we’ll soon expand on it. Along the way you’ll familiarize yourself with the editor and automatic page creation.

Before you start, please create a free Force.com Developer Edition Environment, as indicated earlier in the “Before you Begin” section