jQuery UI 1.6: The User Interface Library for jQuery



Price: $37.98


jQuery UI 1.6: The User Interface Library for jQuery (Packt Publishing) - February 2009Publisher: Packt Publishing - February 03, 2009

ISBN-10: 1847195121, ISBN-13: 9781847195128

Author: Dan Wellman


440 pages


jQuery UI 1.6: The User Interface Library for jQuery - book reviews: 6



Book Description
Modern web application user interface design requires rapid development and proven results. jQuery UI, a trusted plugin for the jQuery JavaScript library, gives you a trusted platform on which to build rich and engaging interfaces with maximum compatibility, stability, and a minimum of time and effort.

jQuery UI has a series of ready-made, great-looking user interface widgets and a comprehensive set of core interaction helpers designed to be implemented in a consistent and developer-friendly way. With all this, the amount of code that you need to write personally to take a project from conception to completion is drastically reduced This book has been written to maximize your experience with the library by breaking down each component and walking you through examples that progressively build upon your knowledge, taking you from beginner to advanced usage in a series of easy to follow steps.

In this book, you'll learn how each component can be initialized in a basic default implementation and then see how easy it is to customize its appearance and configure its behaviour to tailor it to the requirements of your application. You'll look at the properties and methods exposed by each component's API and see how these can be used to bring out the best in each component.

Events play a key role in any modern web applications if it is to meet the expected minimum requirements of interactivity and responsiveness, and each chapter will show you the custom events fired by each component and how these events can be intercepted and acted upon.

Approach

An example-based approach leads you step-by-step through the implementation and customization of each library component and its associated resources in turn. To emphasize the way that jQuery UI takes the difficulty out of user interface design and implementation, each chapter ends with a `fun with' section that puts together what you've learned throughout the chapter to make a usable and fun page. In these sections you'll often get to experiment with the latest associated technologies like AJAX and JSON.



Table of Contents Summary

About the Authors
Dedications
We Want to Hear from You!
Part I Thinking in WPF

The WPF Design Philosophy

Data and Behavior
Working with Data
Templates
Presenters
Binding and Converters
Layout
Styles
Working with Behaviors
The User Experience
The User Experience Benevolent Circle
A Note on Sample Source Code
Summary

The Diverse Visual Class Structure

Introducing the Visual Classes
The DispatcherObject Class
The DependencyObject Class
The Visual and DrawingVisual Classes
The FrameworkElement Class
The Shape Class
The Text Classes
The Control Class
The ContentControl Class
The ContentPresenter Class
The ItemsControl Class
The UserControl Class
The Panel Class
The Decorator Class
The Adorner Class
The Image Class
The Brushes
The DataTemplate, ControlTemplate, and ItemsPanelTemplate Classes
The Viewport3D Class
The MediaElement Class
The InkCanvas
Summary

Getting Started Writing Custom Controls

Overcoming the “Start from Scratch” Instinct
Using Data Transformations
Find the Behavior You Want, Then Extend
The Power of Attached Properties
Custom Control Creation Checklist
Thinking in Layers–The Art of Decomposition
Sample: Building a Circular Minute Timer
Enhancing and Extending the ProgressBar
Creating the Arc Shape
Working with the ControlTemplate
Summary

Building Custom Panels

Layout Defined
How Layout Works
Working with Visual Children
Creating a Custom Panel: The VanishingPointPanel
Building a Panel with Attached Properties: WeightedPanel
Using Transformations with Layout
Enter the LayoutTransform
Layout Events
Summary

Using Existing Controls

Customizing Existing Controls
Customizing Controls Using Properties
Customization Using Control Templates
Customization with Data Templates
Using a ControlTemplate and a DataTemplate
Customizing the ItemsControl
Customizing a ListBox
Customizing the ItemContainerStyle
Customizing the ItemTemplate and the ItemsPanelTemplate
Creating a Custom ScrollBar
Using Brushes to Create Advanced Visuals
Using the VisualTreeHelper and LogicalTreeHelper
Customization Sample–The Radar Screen
Moving Enemies in a ListBox
Concentric Circles and a Sweeping Cone
Summary

The Power of Attached Properties

Overview of Attached Properties
Building the UseHover Attached Property
Using Attached Properties as Extension Points
Data Templates
Property Abstraction
Layout Animations
Constraining Panels
Application Services
UI Helper Objects
Implementing Drag and Drop with Attached Properties
Summary
Part II Adding Complex Features 

Advanced Scrolling

The Anatomy of a Scrollbar
The Magic of IScrollInfo
Responding to User-Requested Horizontal and Vertical Scrolling
Controlling the Bounds for the Track and Thumb
Managing the Location of the Thumb
Logical Scrolling
Building a Custom Panel with Custom Scrolling
Creating the Layout Logic
Adding the Scrolling Functionality
Animated Scrolling
Taking Scrolling to the Next Step
Scrolling Without IScrollInfo
Summary

Virtualization


Virtualization Distilled
Building Blocks of UI Virtualization
UI Virtualization in WPF
Component Interaction
A Deeper Look at the ItemContainerGenerator
Making Our Own Virtualized Control: The StaggeredPanel
Deferred Scrolling
Container Recycling
Virtualization in 3D
Summary

Creating Advanced Controls and Visual Effects

Lasso Selection Using the InkCanvas
Building a Dock Slide Presenter
Docking and Undocking Controls
Building a Transition Abstraction: The TransitionContainer
Handling Transitions
Applying a Transition
Implementing Popular Visual Effects
Reflection
Drop Shadows
Opacity Masks
Gloss Effects
Summary

Control Skinning and Themes

Introduction to Skins and Themes
Resource Lookups in WPF
Building Default Styles
Using Resources in Default Styles
Creating Theme-Specific Styles
Enabling Runtime Skinning
Using the ApplyTemplate Override
Control Customization Through Property Exposure
Summary
PartIII BuildingInteractivity, 3D, Animations 

Bridging the 2D and 3D Worlds

A Brief Introduction to 3D Worlds
Using the Viewport3D Element
Embedding a Viewport3D Element
Mapping 2D Visuals on 3D Surfaces
Getting Interactive with ModelUIElement3D and
ContainerUIElement3D
2D Bounds of a 3D Object
Hints on Layout in 3D
Interactive 2D-on-3D Surfaces
Summary

Custom Animations

Procedural Animations
Animating Using the DispatcherTimer
Animating Using CompositionTarget.Rendering
Animating with Storyboards
Simple Type-Based Animations (From, To, and By)
Keyframe Animations
Using Storyboards with Parallel Timelines
Using Path-Based Animations
Creating Custom Animations
Creating the 3D Surfaces
Animating Within the DrawingContext
Summary

Pixel Shader Effects

New and Improved Bitmap Effects
Working with Shaders
Setting Up the Environment
An Overview of HLSL
Writing Custom Shaders
Grayscale Shader
Building a Parameterized Shader: TwirlEffect
Animating the Shader Effects
Effect Mapping for GUI Interaction and Eventing
Multi-Input Shaders
A Useful Tool
Summary
Part IV Bringing the Controls to the Real World 

Events, Commands, and Focus

Routed Events
Routed Events, Event Triggers, and Property Mirrors
Attached Events
Class Handlers
Weak Events Using Weak References
Implementing the Weak Event Pattern
Subclassing the Weak Event Manager
Delivering Events Via the IWeakEventListener
Commands
Routed Commands
Commands Versus Events
Request Requery
The ICommandSource Interface
Focus Management
Logical and Keyboard Focus
Focus-Related Events and Properties
Keyboard Navigation
Summary

Advanced Data Binding


Dependency Properties
Dependency Property Precedence
Using AddOwner Instead of Creating a New DependencyProperty
Listening to Property Changed Events on Dependency Properties
Special Data Binding Scenarios
Using RelativeSource.PreviousData
Using NotifyOnSourceUpdated and NotifyOnTargetUpdated
The Dispatcher and DispatcherPriority
Deferring UI Operations
Posting Messages from Worker Threads
The BackgroundWorker Class
Introduction to Continuous LINQ (CLINQ)
Summary

Control and Visual Design Tips

Control Design Tips
Use Internal Resource Dictionaries
Define Complex Controls as Partial Classes
Use Scoped Dependency Properties for Internal State Management
Use Attached Properties for Adding Functionality
Compose Graphics Using Simpler Building Blocks
Communicating Between a Control and Its Subparts
Use a State Machine to Handle Multiple Events and Property Changes
Use Low-Priority Delegates for Noncritical Tasks
Use x: Shared for Cloning Resources
Use Markup Extensions to Encapsulate Object Creation
Useful Patterns for GUI Development
The Strategy Pattern
The Builder Pattern
Model-View-Controller
Model-View-View Model
Factory Method
Composed Method
State Pattern
Code Should be Idiomatic with Regard to“Framework Design Guidelines”
Visual Design Tips
Using Tile Brushes
Using Gradients with Relative Transforms
XAML Coding Conventions
Use the Vista Interface Guidelines
Using Nonstandard Fonts for Icons
Using Transparent PNGs
Import from Photoshop and Illustrator
Opacity Masks
Using Clip Geometries
Some Useful Tools
Snoop
Mole
Kaxaml
Summary

Performance


Different Kinds of Performance
Choice of Visuals
Brushes and Caching
Resource Management
Reference Handling
Data Binding and Freezables
Background Threads for Long-Running Operations
Scrolling and Virtualization
Storyboard Animations
Pixel Shaders
Framework Property Metadata Options
RenderCapability–Hardware and Software Rendering
Optimizing the Render Pipeline
3D
Measuring Performance
Visual Profiler
Perforator
Third-Party Tools
Perceived Responsiveness
Summary

Control Automation

The Need for UI Automation
The Automation Object Model
Assemblies and Namespaces
AutomationElement, AutomationPeer, and Control Patterns
Automation Properties
Navigating the Automation Tree
Using the Automation API
Locating Elements in the Automation Tree
Checking for Control Patterns
Looking Up Property Values
Listening to Events
Navigating to the Parent, Child, or Sibling
Performing Operations on Automation Elements
Automation of a Custom Control
Picking a Base Peer Class
Picking Pattern Interfaces, aka the Control Patterns
Building RangeSelectorAutomationPeer
Additional Resources
Summary
Index



Most helpful customer reviews

Book rating: 3This is a good commute book

This book is ideal for for reading while you are not in front of a computer, e.g. while commuting, as much of the code is listed, property controls are usually listed out in full for you to read, and code that is added in the examples is in bold, so that you can get an idea what is possible with jQuery UI without trying every example out. Reading the book through gives you a good idea of the extent of jQuery UI and how much time it would save you in a real project.

However, when I sat down with the book to try out the examples I found it missing the "get up and started" section and seems to assume I had already been using jQuery UI. Chapter 1 devotes only a couple paragraphs and a picture talking about downloading and setting up a "programming environment" (which was nothing more than "copy the files to c:jqueryui"). I found I had to spend my own time at http://jqueryui.com/download figuring out which of the components to download for what, which theme to use, which version to use and what it all meant in terms of using jQuery UI in a project. I want an author of a book to have done all this homework and then show me the "paths of least resistance" so I can get the technology up and running for me as quickly and easily as possible. In the end I created my own "how to" for others to get jQuery UI up and running which complements this book well: http://tanguay.info/web/index.php?pg=howtos&id=21.

So I would say that if you need to read a book about jQuery UI while commuting or sitting beside the pool on vacation, this book is perfect, and it is the first of its kind. Otherwise if you just need to get up to speed on jQuery UI and get a couple of examples running so you know how it works, go to http://jqueryui.com/download, unzip, locate the demos directory and spend a weekend tweeting the examples: you'll be a quasi jQuery UI expert on Monday. Then, put this book in your backpack and read through it during commute time to get ideas on how to tweak the various jQuery UI controls.

Edward Tanguay
03 May, 2009


Book rating: 5Perfect blend of reference manual and tutorial

Last night, I finished reading jQuery UI 1.6 by Dan Wellman (published by PACKT Publishing). Released in January 2009, it's slightly behind the times - jQuery UI 1.7 just came out a few weeks ago. But, even if it's not completely up to date, it is still a great book that covers the fundamentals of the jQuery UI library, all the existing widgets, and even touches on the CSS widget framework (something that was really fleshed out in v1.7).

I have never used any of the jQuery UI widgets before, so this is a topic that I was excited to explore. I've been looking for a good UI framework that I could build into and extend within my applications. I know that jQuery is the only Javascript framework that I want to work with, and after reading jQuery UI 1.6, I believe that the jQuery UI library is something that will add tremendous value to my software.

jQuery UI 1.6 is the perfect mix of reference manual and real-world tutorial. It covers every aspect of the jQuery UI behaviors, utility classes, and widgets in a systematic way; but, it keeps it interesting by iteratively applying new ideas to easy-to-follow examples. It does a great job of getting you familiar with all the configuration options, methods, and events, and really gets you to start thinking about where you might apply such aspects in your own programming.

One of the most impressive things about the jQuery Javascript Framework in general is the large amount of functionality that you get with just a little bit of code. The jQuery UI library takes this concept and almost makes a caricature of it; with just a constructor call and some simple settings, the jQuery UI library provides extremely rich, highly interactive features to your software. Take that and then add things like internationalization (i18n) and the ThemeRoller and you have a really robust library with very little effort.

The jQuery framework really brought event-driven programming to Javascript by simplifying and unifying the way events are captured and handled. The jQuery UI library follows nicely on this path. Every action that takes place in jQuery UI widgets or behaviors triggers a number of events, all of which can be listened for and reacted to. For example, with the sortable behavior, dragging an item from list to another triggers the following events:

start
activate
sort
change
beforeStop
stop
remove
update
receive
deactivate

You'll have to look at the book or the documentation to see what each of these events represents; but, with such a robust event model, the jQuery UI library gives you ample ability to monitor and react to all aspects of the UI library behaviors. The jQuery UI library black-boxes its implementation, but it gives you plenty of opportunity to follow along and even modify the way things are working.

The jQuery UI library is narrow in its API but extremely deep in its functionality. Learning how to leverage its entire set of features is not going to take place overnight. But, for anyone looking to get more comfortable with the jQuery UI library, I highly recommend jQuery UI 1.6 by Dan Wellman as a starting point. Like I said above, it's the prefect mix of real world tutorial and reference manual. It will get you solid on the basics and itching for mastery.

Ben Nadel
30 March, 2009


Book rating: 3Great but dated on publication

This book was a good book. Yet the author had a couple of obstacles. First version 1.7 came out about the same time as the book and it wasn't compatible. So make SURE you use the exact files he says. He also sticks the JS code at the end of the body section... hopefully in the next version of the book this will move up into the head section of the code. Now aside from those two issues he wrote a wonderful book but had staff go through the book and those were frustrating issues for them. Keep those two things in mind, use this book to learn jQuery UI and then learn the new features and it will be worth your buy.

John Farrar
19 March, 2009


Book rating: 3Some credit for being first to market, but...

First and foremost, I would like to mention that this book review and the opinions contained within it reflect my own personal thoughts. While I might contribute and participate on the jQuery & jQuery UI open source project, my intent here is to speak as an individual representing my opinions as an individual.

The author Dan Wellman, of the jQuery UI 1.6: The User Interface Library for jQuery book from Packt Publishing should be applauded for bringing the first jQuery UI book to completion. You will learn a lot from this well written book about the general usage and implementation of the UI widgets, interactions, and effects. However, the book suffers from an unavoidable downfall: its content is already deprecated. And with technical books timeliness matters.

The books downfall is that it does not cover the most recent advancements and significant changes made in the evolution of the jQuery UI project. The book's focus is clearly based on versions 1.5.3 to 1.6rc2 of jQuery UI (using jQuery 1.2.6). This needs to be mentioned because the release of this book is unfortunately close to the release of version 1.7 of the library. This new release is a significant update.

Specifically, the book differs from the new 1.7 release in the following ways:

- In 1.7 each plugin has been significantly re-factored and optimized from its previous condition.

- As of 1.6rc3, the CSS framework has evolved from the previous system mentioned/used in the book to a new and improved system. All plugins have been significantly updated/modified to use this new framework.

- ThemeRoller (v2.0) has been updated and uses the revamped CSS framework. The book for the most unfortunately ignores this invaluable feature of the Library.

- jQuery UI 1.7 requires and uses jQuery 1.3+

- jQuery UI 1.7 includes a new plugin, the progressbar, which was not featured in the book.

- The autocomplete widget was removed in 1.7, but is covered in chapter 7 of the book.

Now in all fairness to the author, the jQuery UI team and project have been in a transition/growing phase in the last year. Bringing this book to fruition with any sort of up-to-date technical completeness would have been challenging if not impossible. So, as a potential purchaser of this book what you need to clearly understand is that it is specific to the 1.5.3 to 1.6rc2 releases of the UI library. And that release compared to the most recent release are significantly different.

Setting aside the book's lack of coverage of 1.7 and judging it on the merits of what it covers, I would have to say that the book itself is actually very good. It's well written and contains in-depth information about the jQuery UI widgets, interactions, and effects as it pertains to releases 1.5.3 to 1.6rc2. Additionally, it provides in-depth implementations of the widgets and interactions in a realistic context (real world scenarios).

A reader should pick up this book with confidence, but also be prepared to bridge the gap between the information it provides and the current release of the library (highlighted above). With all that said, I recommend giving the book a read, even if only because it's the sole book written on the topic to date.

To sum up, JQuery UI 1.6 provides thorough instruction on how to configure and style the widgets released with jQuery UI 1.5.3 to 1.6rc2. If you're currently working with jQuery UI 1.5.3 to 1.6rc2, or would like to add jQuery UI to a project that must be compatible with jQuery core 1.2.6 or earlier versions, then this book is for you.





Cody Lindley
06 March, 2009


Book rating: 5Good, practical uses of the jQuery UI detailed

Dan Wellman covers the jQuery UI library in a thorough, clear, interesting and useful way. Not only do you get a clear explanation for how to get things working in quick easy basic ways, but configuring more advanced options is covered well. And, every chapter has an elaborate, realistic, interesting example showing the true real-world utility of the portion of the UI just covered. Several of the examples are more than useful, but very interesting and inspire one to make similar applications. One widget example shows how to use ajax with the jQuery UI Dialog, which is very nice and highly practical. jQuery UI 1.6 covers not only the high level widgets but also very important, interesting, and extremely useful "interaction helpers", including drag-and-drop and reorderable lists ("sortables") - with information provided on how to do callbacks (this, including information on how one might use callbacks for database manipulation and/or with cookies). All the points at which events occur and where you could wire-in your own custom functionality within the widgets and interaction helpers are exposed.

B. Jesness
24 February, 2009