Dev401-024:Visualforce Pages: Visualforce Componets (Tags) Library Part III
Static Resources
1.Static resources are a new kind of Salesforce storage,designed for use with Visualforce.
2.Static resources are items required by your Visualforce pages,such as archives,images,stylesheets,javaScript,etc.
- These resources can be referenced using the $Resource global variable.
- They can be a collection of related files into a directory hierarchy (.zip,.jar).
- This is the recommended method over uploading these files to the Document tab,as these resources can be cached for better performance.
3.Upload files is Setup|Develop|Static Resources.
- There is a 5MB limi per file and a 250MB overall limit for static resources.
Static Resources Components
1.The following tags can all be used ti include other HTML-renderable technologies into your page.
- <apex:flash>
- <apex:image>
- <apex:stylesheet>
2.THese can be stored in the static Resources object or elsewhere on the internet.
Apex:flash
A Flash movie, rendered with the HTML object and embed tags.
<apex:page sidebar="false" showheader="false">
<apex:flash src="http://www.adobe.com/devnet/flash/samples/drawing_1/1_coordinates.swf"
height="300" width="100%" />
</apex:page>
Apex:stylesheet
1.A link to a stylesheet that can be used to style components on the Visualforce page. When specified, this component injects the stylesheet reference into the head element of the generated HTML page.
2.Example
<apex:stylesheet value="/resources/htdocs/css/basic.css"/>
Apex:variable
1.A local variable that can be used as a replacement for a specified expression within the body of the component. Use <apex:variable> to reduce repetitive and verbose expressions within a page.
2.Note:<apex:variable> does not support reassignment inside of an iteration component, such as <apex:dataTable> or <apex:repeat>. The result of doing so, e.g., incrementing the <apex:variable> as a counter, is unsupported and undefined.
Apex:facet
1.A placeholder for content that is rendered in a specific part of the parent component, such as the header or footer of an <apex:dataTable>.
2.An <apex:facet> component can only exist in the body of a parent component if the parent supports facets. The name of the facet component must match one of the pre-defined facet names on the parent component. This name determines where the content of the facet component is rendered. Consequently, the order in which a facet component is defined within the body of a parent component does not affect the appearance of the parent component.
3.See <apex:dataTable> for an example of facets.
Apex:param
1.A parameter for the parent component. The <apex:param> component can only be a child of the following components:
- <apex:actionFunction>
- <apex:actionSupport>
- <apex:commandLink>
- <apex:outputLink>
- <apex:outputText>
- <flow:interview>
2.Within <apex:outputText>, there is support for the <apex:param> tag to match the syntax of the MessageFormat class in Java. See the MessageFormat class JavaDocs for more information.
Visualforce Components & JavaScript Events
1.Many Visualforce tags relate to different UI components.
2.These often have attributes quivalent to Javascript events to handle user actions to those components.
Apex:component
Note that you cannot define attributes with names like id or rendered. These attributes are automatically created for all custom component definitions.
Apex:componentBody
1.This tag allows a custom component author to define a location where a user can insert content into the custom component. This is especially useful for generating custom iteration components. This component is valid only within an <apex:component> tag, and only a single definition per custom component is allowed.
2.Simple Example
<!-- Page: -->
<apex:page>
<apex:outputText value="(page) This is before the custom component"/><br/>
<c:bodyExample>
<apex:outputText value="(page) This is between the custom component" /> <br/>
</c:bodyExample>
<apex:outputText value="(page) This is after the custom component"/><br/>
</apex:page>
<!-- Component: bodyExample -->
<apex:component>
<apex:outputText value="First custom component output" /> <br/>
<apex:componentBody />
<apex:outputText value="Second custom component output" /><br/>
</apex:component>
Exercise 3-6: Creating a Custom Component
1.Goal(s):
- Create a custom component for the slider widget used earlier.
2.Scenario:
- Universal Containers has grown to like the slider widget and wants to use it else where in other pages. However, to make things easier, they want it to be component.
3.Tasks:
- Be sure that the slider flash file is in your static resources.
- Complete the slider component.
- Add the pre-existing Visualforce page tp your org.
- Overrite the Review Edit button.
- Test the page.
Module Review
1.How many controllers can a page have? Where is the controller for a page assigned?
One.
3.What are the names of the coarse metadata tags?
detail,listview
4.which tags should be used to automatically bring in the Salesforce label and default widget for a field?
inputField
5.What are static resources?
styleSheet, JS,CSS