O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building UIs with Wijmo

Book Description

Wijmo lets you use widgets on your websites for more flexibility and ease of use in the user interface. This book shows you how with a refreshingly logical and example-led approach that makes learning a pleasure.

  • Learn to configure Wijmo components for common usage scenarios
  • Build adaptive websites that work on desktops and mobile devices
  • Integrate Wijmo with Knockout to develop real-time applications

In Detail

Until recently, writing applications using JavaS cript and HTML was difficult, because developers had to make the user interface by themselves; however, this started changing with the introduction of JavaScript libraries such as jQuery, jQuery UI, and KnockoutJS. An extension of jQuery UI, Wijmo adds features and widgets on top of jQuery UI and makes it easier to add user interface widgets to HTML documents.

Building UIs with Wijmo gives you a tour of what Wijmo offers at a glance. With code recipes and well-explained examples, you will be able to use Wijmo in no time. The book gives details on options not explained in the documentation and helps you avoid those that don't work. The examples only feature the necessary code, with recommendations and best practices.

This book introduces Wijmo, grouping widgets by their common application area or usage. It walks the user through the features of the dialog widget with examples as an introduction to the library. Then, widgets for forms, images, tootips, and other topics are explored.

Features only available in the Wijmo dialog widget compared to the jQuery UI widget are thoroughly explained with examples. Common form components such as checkboxes, dropdowns, and inputs have Wijmo counterparts which keep the theme consistent and add functionalities. When Wijmo is used with Knockout, the UI automatically refreshes when the data changes. This book takes it further with WebSockets for two way communication between the server and client. With Building UIs with Wijmo, you will learn all the common web development components in Wijmo. You will get started using Wijmo in no time.

Table of Contents

  1. Building UIs with Wijmo
    1. Table of Contents
    2. Building UIs with Wijmo
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started with Wijmo
      1. Setting up Wijmo
        1. Installing Wijmo the quick way via a CDN
        2. Installing Wijmo for development
          1. Customizing jQuery UI for download
          2. Downloading Wijmo
          3. Installing jQuery UI for development
          4. Installing Wijmo for development
          5. Adding Wijmo to an HTML document
        3. Wijmo licensing
      2. Required background
      3. Summary
    9. 2. The Dialog Widget
      1. Wijmo additions to the dialog widget at a glance
        1. Adding custom buttons
        2. Configuring the dialog widget's appearance
        3. Loading external content
      2. Summary
    10. 3. Form Components
      1. Checkbox
      2. Radio buttons
      3. Dropdown
      4. ComboBox
      5. InputDate
      6. InputMask
      7. Summary
    11. 4. Working with Images
      1. Using the carousel widget
        1. Creating the carousel widget
        2. Configuring the carousel widget
        3. Using the display options to show multiple images
        4. Specifying the navigation options
        5. Adding the timer and autoplay
      2. Using the gallery widget
        1. Creating the gallery widget
        2. Playing videos in the gallery widget
      3. Using the lightbox widget
        1. Creating the lightbox widget
        2. Changing the lightbox widget's appearance
      4. Summary
    12. 5. Advanced Widgets
      1. Using the tooltip widget
        1. Positioning the tooltip widget
        2. Loading AJAX content in the tooltip widget
        3. Styling the tooltip widget
      2. Using the upload widget with the ProgressBar element
      3. Applying Wijmo themes to HTML5 videos
      4. Using the editor widget
        1. Using the editor widget with BBCode for forums
      5. Summary
    13. 6. Dashboard with WijmoGrid
      1. Introduction to MVVM
      2. Introduction to Knockout
        1. Building a rating system with Knockout
      3. Building the dashboard
        1. Sending a message with Knockout and Socket.IO
        2. Displaying messages on the Dashboard
      4. Summary
    14. 7. Wijmo Mobile
      1. Getting started with Wijmo mobile
        1. Setting up Wijmo mobile
          1. Obtaining jQuery mobile
          2. Installing jQuery mobile
          3. Using a mobile browser emulator
      2. Creating an expander widget
        1. Passing options to the expander widget
      3. Creating a ListView widget
      4. Creating an AppView widget
        1. Adding the AppView pages
        2. Reusing non-mobile pages
      5. Summary
    15. 8. Extending Wijmo
      1. Extending Wijmo Open
        1. Modifying the Dialog widget
        2. Modifying a Wijmo theme with ThemeRoller
      2. Summary
    16. Index