Dev401-021:Visualforce Pages: Visualforce Componets (Tags)
Module Agenda
1.Tag Basics
2.Tag Bindings
Tag Basics
1.Visualforce includes a tag library similar to HTML and XML markup languages.
2.You can include text directly into the Visualforce page.
4.You can use HTML tags within a Visaulforce page, including:
- HTML comment tags.<!-- comments -->
- Formatting tags.
5.You can use JavaScript within a Visualforce page as well, but you will often find it easier to use the equivalent Visualforce tags.
.Note:You cannot use JavaScript line commenting except within <script>tags.
Tag Basics
1.Visualforce components (tags) all begin with the apex: prefix.
2.All pages must be enclosed by a set of <apex:page> tags.
3.Tags may contain arrributeds that have values (in quotes) to help further define them.
- Attributevalues are typed to be strings, collections,ids,etc.
- For a full list of tags and attributes, check the documenttation.
Tag Bindings
1.Binding are ways to relate Visualforce components with either the page controller or other page components.
2.There are primarily three types of bindings for Visualforce components:
- Data bindings:using the expression syntax to pull in data from the data set made available by the page controller.
- Action bindings:using the expression syntax to call action methods for functions coded in the page controller.
- Compinent bindings:using componentattribute values to reference other components' IDs.
. These other componentts must have set a value for the id attribute.
API Naming Syntax
1.Before discussing data binding in greater detail, it is important that you understand the API naming syntax.
2.This information is available as a separate resource and should have been completed before comming to class.
3.Tags refer to objects and fields by their API anmes.
- Custom objects and fields use the __c suffix.
- Custom objects referenced through relationships use dot notation and the __r suffix.
Expression Syntax
1.Tags use the same expression syntax as formula fields and other areas of the application.
2.Dynamic object data can be inserted using the {!objectName.PropertyName} syntax.
3.Glaobal data can be inserted with the added $ syntax, such as:
- {!$User.fieldName}
- {!$Page.otherVisualforcepage}
- {!$Component.otherVisualforceComponet}
- Note that you can also access custom labels and translations using the $label variable.
4.Local variables can be created to stand in for these expressions as they can become long and unwieldy using the <apex;variable> tag.
5.Bindingg can reference custom Apex class types as well as their inner classes using dot notation.
Action Binding
1.Data binding works because the page can access the data made available through the controller.
2.In a similar manager,actions that are available through the controller can be called using the same expression syntax. These can be:
- Standard actions,such as save and edit.
- Custom actions that provide custom functionality.
. More on this later in the discussion about controllers. Note that at his point, only actions that are the shared across all objects are exposed through standard controllers.
Component Binding via Component IDs
1.All Visualforce tags have an optional id attribute that can be used to refer to the tag component.
- This id is used ad the document model access(DOM) ID when the page is rendered.
- The tag can be referenced by the id by other tags, JavaScript, or other Web-enabled languages.
2.Salesforce recommends using unique ids within each page.
- If not unique, you may need to specify the hierarchy of ids to locate the correct component.
- The hierarchy prevents the possibility of duplicate IDs on HTML elements generated by components.
.However, raw HTML could produce dupes.
Exercise 2-1:Generating a PDF from Visualforce
1.Goal(s):
- Create a printable PDF using Visualforce.
2.Scenario:
-Universal Containers wants to create a PDF for offer letters to merge relevant candidate and postion data into an offer tempplate.
3.Tasks:
- Add the pre-existing Visualforce page to your org.
- Create the custom button.
- Add the custom button to the page layout.
- Test the button.