Why use jQuery to create a Visualforce component?
jQuery is a fast and concise cross-browser JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. To learn more about the power of jQuery visit their site at: http://jquery.com/
Combining jQuery with Salesforce.com allows us to leverage the proven UI components of the library with the power of Salesforce.com. The new Visualforce functionality in Salesforce.com allows us to create reusable components that we can insert in any other Visualforce page.
In the following example we will walk through getting jQuery, creating a static resource, creating a custom component, and finally adding that custom component to a visual force page.
Steps 1: Get jQuery
jQuery is a lightweight javascript library that comes with a bunch of very stable UI elements (Dialog boxes, accordion widget, spinners, etc).
Get the latest build of jQuery from the jQuery website. http://jquery.com/
Steps 2: Zip it up
Once you have downloaded the latest build of the jQuery library .zip it up for upload to Salesforce.com. That is right...we will be able to reference all the files in the .zip file from within the custom component we will create. No need to upload all the files individually.
Steps 3: Create a static resource
Next we will log into Salesforce.com and create a static resource calling it "JQuery_UI". Upload the jQuery .zip file to this resource and save it for reference in your custom component.
Steps 4: Create the custom component
Next we will write the code for the reusable Visualforce custom component. Remember that the value of creating a custom component is that you only have to create the code once and you will be able to reuse the component with one line of code in any Visualforce page. Also the static resource will only be loaded once per page no matter how many times you call the custom component in a Visualforce page (reducing page load times).
Below is the simple code for our custom component. It could be extended to accept and pass variables however, our component will be a stand-alone component that simply displays a nicely formatted jQuery dialog box with a message in it for the user.
Items to note in the code:
Lines 5-7: You will see in the code that we simply reference the files in the static resource we created.
Lines 12-24: Creating the architecture of the dialog box
Lines 30-34: Invoking the jQuery library to make the dialog box appear.
Steps 5: Include custom component in a Visualforce page
The last step is to include the custom component on any Visualforce page. As we see below it as easy as adding one tag.
Step 6: Call your Visualforce page
So now we call the Visualfoce page and we see our "mashup" of jQuery and Salesforce.com Visualforce code.
For more information see:
Salesforce.com - http://wiki.apexdevnet.com/index.php/Apex_and_Visualforce
jQuery -http://jquery.com/