Databases Reference
In-Depth Information
Also note the subtle yet important change in reference to
this
. With the majority of code in a widget,
this
will refer to the widget instance. But in the original
create
function, an anonymous function was
bound to the
change
event of the element. When that function executed,
this
referred to the element
that changed. After the refactoring, the element property of the widget instance (available automatically
as part of the factory) was needed to access the same element—the element on which the widget was
instantiated. Additionally, a local variable is declared in each function to hold a reference to
this
. This
technique is optional but can help to avoid confusion and to take advantage of closure in JavaScript.
This introduction to the jQuery UI Widget Factory is by no means complete, but you should now
have a basic understanding of how it can be utilized to write well-structured JavaScript with minimal
plumbing. To learn more about the Widget Factory, find the “official” documentation available on the
jQuery and jQuery UI websites as well as the many tutorials found elsewhere on the Web.
jQuery UI CSS Framework
APEX currently supplies over 20 themes out of the box and many developers and organizations have
created custom themes as well. If your plug-in has a visual component to it, you'll need to take this into
account as the plug-in should look as though it's a native part of the application. To achieve this you
could develop your plug-in using neutral colors. Or you could attempt to support all of the existing APEX
themes out there. But both of these approaches have some obvious drawbacks. A better approach would
be to leverage the jQuery UI CSS Framework.
The following description, taken from the jQuery UI CSS Framework website, says it best:
jQuery UI includes a robust CSS Framework designed for building custom jQuery
widgets. The framework includes classes that cover a wide array of common user
interface needs, and can be manipulated using jQuery UI ThemeRoller. By building
your UI components using the jQuery UI CSS Framework, you will be adopting shared
markup conventions and allowing for ease of code integration across the plugin
community at large.
Like APEX, jQuery UI ships with over 20 ThemeRoller themes ready to go and they are included with
every APEX installation—you need only include the CSS file in your APEX page. A nice touch in any plug-
in with a visual component is to allow the plug-in user to specify which theme they would like to use.
The value, based on the theme name, can then be used to add the appropriate CSS file to the page. A
select list can be used to show display values that better match the theme names seen on the jQuery UI
website. The return value should be the all lowercase name of the theme with spaces replaced by dashes.
Each directory is currently under
images/libraries/jquery-ui/1.8/themes/
.
This technique, while incredibly easy for plug-in users, has some potential downsides. For example,
if multiple plug-ins exist on the same page, each using the same technique, it's possible that entirely
different CSS files will be added to the page. This can both decrease performance and cause confusion as
to which plug-in's theme is being used.
One way around these issues is to make the selection of theme optional. If no theme is selected then
no CSS file should be added to the page by the plug-in. However, the HTML generated by the plug-in still
includes the CSS classes, so all the plug-in user has to do is include the preferred CSS file in the optimal
place once, say, in the page template.
The following HTML code was taken from the item plug-in tutorial found later in this chapter. The
markup is used to display a warning message to end users. The code has been simplified a little so as not
to distract from the important parts.
