Book Image

Building UIs with Wijmo

By : Yuguang Zhang
Book Image

Building UIs with Wijmo

By: Yuguang Zhang

Overview of this book

Until recently, writing applications using JavaScript 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 (15 chapters)

Applying Wijmo themes to HTML5 videos


The Wijmo video widget works with the HTML5 video tag and adds controls using jQuery UI theming. The video player has the common play/stop, volume, and full-screen controls. To initialize the widget, just call the wijvideo method on a video element. To support all browsers, the video element needs to have the video encoded in at least two formats. The browser support for each format is as follows:

Browser

MP4

WebM

Ogg

Internet Explorer 9+

YES

NO

NO

Chrome 6+

YES

YES

YES

Firefox 3.6+

NO

YES

YES

Safari 5+

YES

NO

NO

Opera 10.6+

NO

YES

YES

For older browsers that don't support HTML5 such as IE8, it is recommended to not use the video widget. However, you can insert text content to display a message in place of the video. The full markup looks like the following:

<video width="520" height="340"controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    Your browser...