Powerful and Intuitive Oracle WebCenter Content Customizations Using jQuery - TYLER DANIELSON & PAUL HEUPEL FISHBOWL SOLUTIONS, INC.
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Powerful and Intuitive
Oracle WebCenter Content
Customizations Using
jQuery
TYLER DANIELSON & PAUL HEUPEL
FISHBOWL SOLUTIONS, INC.
iFishbowl Solutions Notice The information contained in this document represents the current view of Fishbowl Solutions, Inc. on the issues discussed as of the date of publication. Because Fishbowl Solutions must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Fishbowl Solutions, and Fishbowl Solutions cannot guarantee the accuracy of any information presented after the date of publication. This Whitepaper is for informational purposes only. FISHBOWL SOLUTIONS MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS DOCUMENT. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Fishbowl Solutions Inc. Fishbowl Solutions Inc. may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Fishbowl Solutions, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. © 2014 Fishbowl Solutions Corporation. All rights reserved. Fishbowl Solutions is a registered trademarks or trademarks of Fishbowl Solutions Inc. in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. © 2014 Fishbowl Solutions Corporation. All rights reserved.
Contents 1 Introduction – Executive Overview 1 2 What is jQuery? 1 3 Why jQuery is Better than Standard JavaScript 1 3.1 jQuery and AJAX 2 4 Creating More Interesting Interfaces with jQuery UI 4 5 Solutions in WebCenter Content with jQuery 5 6 jQuery’s Future in the Market 7
1 Introduction – Executive Overview
The jQuery JavaScript library is the most popular and widely used JavaScript library in the
market today. Many companies across a large variety of industries utilize jQuery for their
websites due to its ease of use, cross-browser compatibility, and powerful functionality. jQuery
can be used anywhere that JavaScript is used including websites, web applications, and mobile
applications. Fishbowl Solutions uses jQuery to implement smart and quick solutions both to
WebCenter Content’s standard interface and during website development on the WebCenter
Content platform. In this whitepaper, we will discuss the following:
• What is jQuery?
• Why jQuery is better than standard JavaScript.
• Creating more interesting interfaces with jQueryUI.
• Solutions in WebCenter Content with jQuery.
• jQuery’s future in the market.
2 What is jQuery?
jQuery, first released in 2006 by John Resig, is a JavaScript framework and library that builds
JavaScript functionality into an extremely powerful and simple code base. jQuery was created
to lessen the burden of mundane tasks during JavaScript development so that developers
could shift more focus to tasks that yield valuable results. Designed to be lightweight, jQuery
has witnessed rapid adoption due to its ease of deployment and the massive time-savings
developers witness by using it. jQuery was designed to be cross-browser compatible and
supports IE 6+, Firefox 3.6+, Safari 5.0+, Opera, and Chrome.
Additionally, jQuery is both modular and open-source, which allows developers to create plug-
ins to the library to further increase the functionality available. This modular approach has
allowed developers to create a wide array of functional and UI-based plug-ins to speed the
development of professional looking interfaces.
3 Why jQuery is Better than Standard
JavaScript
jQuery is often a better choice than standard JavaScript for website development because it
simplifies the development process. jQuery not only shortens the development cycle when
coding a web application, it also reduces the testing and subsequent bug fixes required in a
normal deployment. For example, take two developers that each want to create a date field on
a web form. In order to ensure users don’t enter invalid dates, both developers want their date
field to use a pop-up calendar from which users can select the appropriate dates.. The firstdeveloper decides to code his pop-up calendar by hand using standard JavaScript. This
developer has to perform the following tasks:
1. Create an onclick function on the date field to open up the pop-up calendar.
2. Create a .css file with subsequent styles to make the calendar look professional.
3. Create image files to be used by the CSS for buttons in the calendar.
4. Code the calendar to properly display all days. This includes all the abilities users
expect from a calendar including being able to jump forward or backwards either by
month or by year and not accidentally mishandling leap years.
5. Fix issues with CSS when inevitably one user calls saying the calendar is popping up
at the top-left hand of the screen when using Opera on his Mac.
The second developer decides to use jQuery to create the popup calendar. After including the
jQuery UI plugin on the page, the developer adds the following line to the document-ready
function:
Code to Add Datapicker to an Input
$("#dateField").datepicker({});
Having finished the pop-up calendar, the second developer moves on to more interesting tasks.
This simple example highlights the benefits of re-using a tested code-base to simplify
development. The datepicker plug-in also has a wide variety of configurations including date
range restriction, animation when opening and closing the picker, and the ability to apply
different skins. More functional methods allow localization for many different languages and
date formats.
3.1 jQuery and AJAX
Another area where jQuery excels is in making AJAX (Asynchronous JavaScript and XML) calls
to a backend server to retrieve data without reloading the page. AJAX is not a new concept,
but only in recent years has it gained widespread attention. This technique for retrieving data is
critical for maintaining a good user experience on a web page. While AJAX is possible with
standard JavaScript, it requires the developer to manually create an XmlHttpRequest object,
and then manually send the request and handle the response to and from the backend server.
jQuery simplifies this process, and even makes it possible to retrieve the response for the
backend server as a JSON (JavaScript Object Notation) object for easier manipulation.
Example of AJAX using Standard JavaScript
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "fishbowl.txt",true);
xmlhttp.send();
Example of AJAX using jQuery
$.get('fishbowl.txt', function(request) {
alert(request);
});
One of jQuery’s largest strengths, and subsequently one of the reasons for its widespread
adoption, is how it simplifies DOM (Document Object Model) parsing and manipulation. jQuery
makes it very easy to select a subset of DOM elements based on standard or custom
attributes, and also makes it trivial to bind events to elements in the DOM. Here is an example
of binding a click event to all the html tables on the page.
$('table').click(function() {
$(this).css('background-color', 'blue');
});
The above example uses .click to bind the click to the element and .css to set the color of the
table’s background color when the table is clicked. To do the same thing in JavaScript would
look something like this.
var i;
var tables = document.getElementsByTagName('table');
for(i = 0; i < tables.length; i++) {
tables[i].onclick = function() {
this.style.backgroundColor = 'blue';
}
}
While both are relatively easy to read, jQuery requires half as much code and is cross-browser
compatible. These small efficiencies add up to big savings over the course of the development
process.Although this section has argued heavily for using jQuery, jQuery and standard JavaScript do
not have to be mutually exclusive. One of the benefits of jQuery is that it can be included on
any page that utilizes JavaScript, even pages that heavily utilize standard JavaScript.
Additionally, jQuery has the ability to namespace the “$” identifier, which allows developers to
use jQuery with other JavaScript libraries.
4 Creating More Interesting Interfaces with
jQuery UI
One of the largest and most heavily developed plug-ins for jQuery is jQueryUI. This large
library of user interface elements sits on top of jQuery and includes everything from low-level
interaction API’s to enable functionality such as drag-and-drop to fully-developed and
functioning interfaces. Some of the more useful widgets available in the jQuery UI library are
date pickers, sortable tables, progress bars, and modal dialogue boxes.
A particularly helpful part of jQuery UI is the ability to create themes. jQuery UI’s website has
an application called ThemeRoller deployed on the site using jQuery and jQuery UI that allows
a user to design a theme for a web application or site. The ThemeRoller application allows a
user to choose colors, sizes and fonts to design an interface that fits their needs. Once
complete, the user can download the theme and begin using it with their jQuery deployments
immediately. The ThemeRoller application can be found here:
http://jqueryui.com/themeroller.
Some of the most helpful elements in the user interface library are tabs and portlets for
organizing and displaying data. Tabs for instance help to separate data into sections while still
maintaining a clean, speedy interface. Using jQuery to create a tabbed interface has the
advantage of helping cut down on the number of bugs a developer would have to deal with;
particularly with cross-browser compatibility should they try to code the interface themselves.
Better yet, the tabs interface in jQuery is created using standard div and list elements which are
common and easy to work with. Here is an example of the jQuery tabs interface:
The code to create this interface involves some simply formatted HTML, and a single line of
jQuery. Just like with the datepicker widget, jQuery exponentially cuts down on the time
required to create very interesting and useful interfaces.Another common way to separate data on an interface is to use portlets. Portlets are
essentially small containers for holding bits of data or functionality on a page. Below is an
example of jQuery portlets which are also available out of the box with jQuery UI:
Like most other jQuery elements, the above portlets are highly configurable. Out of the box,
the portlets can be opened and closed, rearranged on the page using drag and drop
functionality, and can even be sorted. The jQuery portlets highlight some of the visually-rich
animations users have come to expect in modern web applications.
5 Solutions in WebCenter Content with jQuery
Fishbowl Solutions finds jQuery and its interaction with UCM extremely valuable, both in the
time saved for development, and for the increased quality of both functionality and user
experience that can be delivered for clients. Fishbowl has used jQuery on template pages for
standard product offerings within the WebCenter Content space, as well as on HCSF templates
for clients to create a richer user experience in the (typically) boring world of form submission.
In the first example below, Fishbowl Solutions developed a tabbed structure on a Content
Server form that works with the WebCenter Content workflow to let endusers know the status of
the form in the approval process. The interface was even designed to show how much
progress has been made on filling out the form and what still needs to be done to complete it.
The tabs shown below were created using the default jQuery tabbed interface, but were
modified with CSS changes, custom tab names, and additional image manipulation.Fishbowl Solutions has also built an interactive table solution that works with WebCenter Content to pull data when needed and creates an easy, printable table for everyday use. This table has the ability to dynamically add new rows and to recalculate total dollar amounts based on business logic when values in the table change. Like any common form, jQuery also helped maintain the ability to tab between elements on newly created rows, and do all the conversions on the fly with little to no decrease in performance, even on IE6. One of the biggest challenges Fishbowl Solutions has faced when creating complex UI’s with a large user base in WebCenter Content revolves around performance. If the UI has not been coded with performance in mind, the server can easily get overworked with too many requests—as the number of concurrent users increases, this likelihood increases. jQuery helps to relieve the load on the server by moving more processing to the client, and by using AJAX calls back to WebCenter Content to retrieve data as it is needed. This technique removes a lot of work the server would have to perform to retrieve the whole page repeatedly if jQuery (and AJAX) were not used. Additionally, the tabbed interface helps to improve performance by loading the entire form the first time the page is requested. jQuery handles all the showing and hiding of elements and tabs, so there is no need for additional requests back to the server to retrieve more data when a user wants to look at a different tab. Once these interface techniques have been implemented for an interface, the speed differences can be dramatic.
6 jQuery’s Future in the Market
jQuery has managed to hold its ground in a fluid market and is now by far the most actively
used JavaScript library in the world. Nearly 45% of all websites utilize jQuery in some fashion,
and nearly 85% of websites that utilize some sort of JavaScript library are using jQueryi. Major
companies such as Amazon, Microsoft, and Google use jQuery for their web sites and web
applications because of its ease of use and time-saving ROI. The support for jQuery is both
strong and growing, and more developers and designers are finding better ways to use and
extend jQuery every day.
As drag-and-drop functionality becomes more prominent on the web and users start expecting
the same “cool” functionality in their web applications as they see on the public web, jQuery will
be there to help speed development and add the “coolness” factor to WebCenter Content.
iUsage statistics and market share of JQuery for websites. W3 Techs. http://w3techs.com/technologies/details/js-
jquery/all/allYou can also read
