ICS 665 Jesse Abdul

jQuery UI Overview  jQuery UI javascript library Includes all UI component functionality  jQuery UI CSS framework Includes standard images and CSS for all UI components including icons

jQuery UI Overview  jQuery UI was first released in September 2007  jQuery UI is a curated set of user interface interactions, effects, widgets and themes built on top of the jQuery JavaScript Library. This library provides all of the UI components necessary to develop rich interactive web applications with all of the standard UI functionality available on desktop applications  Free open source software, licensed under the MIT license  Requires on the jQuery library for functionality

jQuery UI Advantages  Quick and easy to implement Can quickly add UI components to your application with minimal effort (e.g. adding a date picker)  Extensive demos available including source code for all examples  Leverages the advantages that the jQuery library provides (e.g. cross browser compatibility, call chaining, etc.)  Themeing ability for all widgets and icons

jQuery UI Components  Interactions  Effects  Methods  Widgets

Interactions  Interactions Interactions add basic mouse-based behaviors to any element and can be used by many of the widgets and effects. You can create sortable lists, resizable elements, and drag & drop behaviors with minimal code

Effects  Effects Extends jQuery’s built-in effects by adding support for animating colors and class transitions as well as providing several easings ○ Easing functions specify the speed at which animation progresses at different points within the animation. jQuery core’s default has two easings: linear (constant speed) and swing (progresses slower at beginning and end of animation) A full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal ○ Examples: bounce, drop, fade, etc. These effects can provide rich user interaction and are very configurable

Methods  Methods are added for convenience. They extend some of the jQuery functionality to provide extra UI functionality Example: jQuery UI show() method functions exactly like the jQuery show() method except it accepts parameters for animations and UI effects for the elements that are affected by the method call

Widgets Plugins ○ Object implementation including options, methods (both private and public) and events ○ jQuery UI widgets maintain state information e.g. Tabs widget maintains information on which tab is selected ○ jQuery UI widgets have a slightly different usage pattern than typical jQuery plugins jQuery plugins will use a named plugin method and supply arguments to the method jQuery UI widgets use the widget name as a method call and then pass in arguments to the call to inform the behavior of the plugin ○ All of the jQuery UI widgets use the same patterns so if you learn how to use one, then you’ll know how to use all of them Fully featured UI controls; each has a range of options and is fully themeable All widgets provide a solid core with numerous extension points for customizing behavior (e.g. specifying options)

Available Widgets (Accordion)  Accordion – displays content panels for presenting information in a limited amount of space

Available Widgets (Tabs)  Tabs – a single content area with multiple panels, each associated with a header in a list  Also includes native ability to load remote content via Ajax for the panel content

Available Widgets (Dialog)  Dialog – Open content in an interactive overlay

Available Widgets (Tooltip)  Tooltip – Customizable, themeable tooltips, replacing native tooltips

Available Widgets (continued)  Autocomplete – Allows users to quickly find and select from a pre-populated list of values as they type  Button – Enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles  Datepicker – Select a date from a popup or inline calendar  Menu – Themeable menu with mouse and keyboard interactions for navigation  Progressbar – Display status of a determinate or indeterminate process  Slider – Drag a handle to select a numeric value  Spinner – Enhance an HTML text input field for entering numeric values with up/down buttons and arrow key handling

Getting Started  Build custom jQuery UI download Choose which version of jQuery UI (stable vs. legacy) Allows a developer to choose which components to download to get a custom version of the library for a particular project. (This reduces the amount of unnecessary code) ○ Download provides a “minified” version of the code to reduce JavaScript file size Select an existing theme or build your own custom theme using the ThemeRoller Interface ○ Allows all aspects of a global jQuery UI theme to be defined from color schemes and fonts to border radiuses. ○ Provides a very flexible framework to allow multiple themes to be implemented on a single web application that will apply to all UI components ○ A new theme can be easily applied to an existing application without disrupting any of the application code itself (just by downloading a new theme and switching the external css reference to the new theme directory)  Extract the zip file to a web-enabled directory The index page contains working examples of all default functionality for the downloaded widgets

Getting Started (Installing jQuery)  Setting up jQuery is very straightforward and easy Include the CSS framework file Include the jQuery file Include the jQuery UI file

Getting Started (Adding a Widget)  Simple example (date picker) To add a date picker to your application create the HTML text field To implement the date picker widget simply initialize the date picker widget and bind it to the text field (using the HTML id attribute) The result is the fully functional date picker widget to help a user pick a date

Getting Started (Customizing Widget)  jQuery UI allows you to customize widgets in several ways including implementation  Using Options Each widget in jQuery UI has a default configuration which is catered to the most basic and common use case. If you want a widget to behave different from its default configuration you can override each of its default settings using options. Options are a set of properties passed into a jQuery UI widget as an argument. The defined set of available options are listed in the API reference

Getting Started (Widget Options)  Example: A slider widget’s default behavior is a horizontal bar for specifying numeric values Configuration options can be specified to modify default behavior If there is more than one option specified they are supplied as comma-delimited name/value pairs

Getting Started (Widget Events)  Widgets can also be customized by specifying event handlers for various widget events. This can modify the default behavior by executing custom client-side code when various widget events occur.

Extending jQuery UI  Widget Factory This module provides a developer with the ability to create stateful jQuery UI plugins using the same abstraction as all jQuery UI widgets. A developer can develop custom widgets from scratch or extend the functionality of an existing widget. ○ Allows a new widget to inherit from an existing parent widget (subclassing)

Widget Factory (Continued)  Inheritance: This simple example creates a new widget called superDialog based on the native jQuery UI dialog widget. The $.widget call defines the new widget using the widget factory The second argument can be an existing widget to inherit from ($.ui.dialog) This widget defines one additional method “red” that changes the color of the dialog text to red. Otherwise superDialog can be called just like a native jQuery UI dialog widget

Widget Factory (Continued)  Instantiating widget To create the instance of the widget simply add the HTML code for the superDialog Instantiate the superDialog widget and call the red() method (supports call chaining) The result is the default dialog widget with red body text

Widget Factory Possibilities  Integrating Ajax into existing widgets by creating new Ajax-enabled widgets based on the core jQuery UI widgets  Creating new widgets that perform application-specific functions that can make development easier by customizing the widgets and making the javascript calling code cleaner.

Sources   factory/how-to-use-the-widget-factory/ factory/how-to-use-the-widget-factory/  factory/extending-widgets/ factory/extending-widgets/