3 Review(s)

Web applications today generally use at least some JavaScript to enhance the look and feel of the user interface. The jQuery UI toolkit gives web developers a set of widgets as well as a framework for developing and applying themes. jQuery UI Themes: Beginner's Guide is for web developers who want to design professional-looking applications that are resilient to change. It is a step-by-step guide that goes beyond showing how to switch themes in a user interface built with jQuery UI and offers developers a practical guide to designing their own themes and gives them insight as to how themes work. jQuery UI Themes Beginner's Guide starts with themes in general and why they're important in web applications today. We gradually move forward, covering jQuery UI basics, eventually aiming for a full understanding of the theme framework. The Theme Roller application is a powerful tool – allowing developers to easily adjust theme settings. In addition to seeing how the Theme Roller works, we take a more in-depth look at the CSS framework internals allowing readers to develop the ability to adjust themes in ways the Theme Roller cannot. This includes everything from special effects to theming custom widgets. There is no limit to what your theme can change. Once you've read this book, you'll no only be well-versed in theming jargon, you'll also be able to take one look at any jQuery UI application and understand why and how it looks the way it does. This book gives you the opportunity to create jQuery UI themes, learning by example. What you will learn from this book : Understand what themes are and why they matter Learn How The jQuery UI tookit works – what widgets are, and how they relate to themes Understand the details of the Theme Roller application: how to effectively use this tool to design themes in a timely manor Develop an understanding of the top-level CSS constructs. Apply styles to broad portions of the user interface Change the look and feel of widgets based on user interaction and application events Use cues to inform the user, and effectively apply styles to these messages Use the jQuery UI icon sets as well as designing your own Use special effects to enhance the visual appearance of widgets Customize the look and feel of widgets Approach This book is a step-by-step tutorial aimed at beginners to JQuery UI Themes. There is ready-for-use sample code explained with essential screenshots for better and quicker understanding. Who this book is written for This book is for web application developers and CSS designers who want a better understanding of how to build themes for the jQuery UI toolkit. The reader should have a basic working knowledge of JavaScript and why it is used in web applications. Experience with jQuery UI and a general working knowledge of CSS will speed things along but aren't a requirement. Readers can use this book as a starting point to familiarize themselves with the jQuery UI widget details. About the Author Adam Boduch has been programming in Python for nearly a decade. He has experience working with several web frameworks such as Django and Twisted. He likes to experiment with integrating JavaScript tools such as jQuery UI into these frameworks. Adam has been working for Enomaly since 2006. He started working with content management systems before making the transition to ECP, where he designed several user interface components using jQuery UI. He now leads the SpotCoud cloud computing marketplace project. Table of Contents Preface Chapter 1: Them eable User Interfaces What is a theme? Themes in the real world Desktop themes Themes on the Web What are widgets? Widget structure Widgets and themes Styling user interfaces Time for action - creating a style Style colors Style fonts Theme basics Time for action - grouping styles Repetitive style properties Group selectors Time for action - nesting styles Nested selectors Nesting depth Theme layout Time for action - placing elements on the page Layout design Consistent layout jQuery UI themes The widget framework The CSS framework Theme-ready widgets Summary Chapter 2: Using Themes Downloading jQuery UI Time for action - building a download Minimal downloads Time for action - removing downloaded components Theme structure Development bundle File structure Class structure Using jQuery UI Time for action - using widgets Widget options Widget methods Widgets and the DOM Widgets and CSS Switching themes Time for action – exploring the theme switcher widget Time for action - Theme Roller dev tool Other frameworks Dojo Ext JS Summary Chapter 3: Using the Theme Roller Theme Roller basics Instant feedback The dev tool Portability Theme Roller gallery Viewing themes Time for action - previewing a theme Downloading themes Time for action - downloading a theme Themes from scratch Fonts Time for action - setting theme fonts Corners Time for action - changing the corner radius Headers Time for action - setting theme headers Content Time for action - setting widget content styles States Time for action - setting default state styles Time for action - setting hover state styles Time for action - setting active state styles Cues Time for action - changing the highlight cue Time for action - changing the error cue Overlays and shadows Time for action - dialog overlays Time for action - defining shadows Changing existing themes Selecting a theme Time for action - adjusting a theme Summary Chapter 4: Working with Widget Containers What are widget containers? Containers and widgets The ui-widget class Time for action - preparing the example Widget fonts Time for action - changing widget fonts Scaling widget fonts Time for action - scaling down font size Widget form fields Time for action - changing widget form fields The ui-widget-content class Content borders Time for action - styling content borders Time for action - border sides Content links Time for action - changing link colors The ui-widget-header class Header borders Time for action - Styling header borders Time for action - border sides Header links Time for action - header links Summary Chapter 5: Transforming Interaction States What are interaction states? Time for action - preparing the example The default state Default state selectors Time for action - default container selectors Time for action - default link selectors Default state borders Time for action - default border styles Default state font Time for action - default font styles Default state background Time for action - default background styles The hover state Hover state selectors Time for action - hover container selectors Hovering and focusing Time for action - separating the hover and focus states Hover state font Time for action - hover font styles The active state Active state selectors Time for action - active container selectors Active state background Time for action - active background styles Summary Chapter 6: Customizing Interaction Cues What are interaction cues? Time for action - preparing the example The highlight state Highlight borders Time for action - highlight message borders Time for action - highlight button borders Highlight background Time for action - highlight message background Time for action - highlight date-picker background Highlight font Time for action - highlight message font Time for action - highlight tabs font The error state Error borders Time for action - error message borders Time for action - error tabs border Error background Time for action - error message background Time for action - accordion error background Error font Time for action - error message font Time for action - error button font The disabled state Disabled opacity Time for action - increasing disabled opacity Priorities Time for action - button priorities Summary Chapter 7: Creating Theme Icons What are theme icons? Time for action - preparing the example Icons in widgets Time for action - default widget icons Time for action - setting widget icons Standalone icons Time for action - displaying the current user Time for action - identifying entities Icon states Time for action - default icons Time for action - highlight icons Time for action - error icons Time for action - hover icons Sprites What are sprites? Icon categories Theme icon sets Time for action - creating new icons Summary Chapter 8: Special Effects Setting up a jQuery environment Theme corners The legacy approach The style approach The jQuery UI approach Time for action - setting all corners Time for action - setting top corners Time for action - setting individual corners Time for action - increasing corner roundness Time for action - complex radius values Time for action - using percentages Time for action - removing corners Theme shadows Time for action - applying shadows Time for action - altering shadows Time for action - changing perspectives Theme overlays Time for action - adjusting dialog overlays Summary Chapter 9: Theming Custom Widgets What are custom widgets? Widget JS Widget CSS Implementing widgets The widget Time for action – basic markup Goals of the widget Time for action – basic JavaScript Time for action – adding more behavior Styling widgets Time for action – widget CSS Time for action – theme CSS Time for action – finishing touches Summary Pop Quiz Answers Index