In a world where phones and tablets rule and data streams without limits, Wijmo must adapt or be swallowed up by the swarm of devices.
As the shroud of fog parts, a new, yet familiar Wijmo emerges. Wijmo v3 is a metamorphic beast that adapts itself to any device or desktop.
Adaptive Widget Framework
Meet the new Adaptive Widget framework from Wijmo. All of our widgets will automatically adapt to jQuery Mobile or jQuery UI environments. Simply by swapping out jQuery UI for jQuery Mobile, you can convert your widgets to be mobile without changing a single line of code! That’s right, Wijmo v3 supports both jQuery UI and jQuery Mobile including both Themerollers and Themes. Wijmo is offering something that no other tool can: a set of widgets that automatically adapts to its environment.
If you want to do full-web development with Wijmo you can continue to reference jQuery UI as a dependency. However, if you are looking to do mobile development, just reference jQuery Mobile instead of jQuery UI.
Let’s take a look at an example. Traditionally, you would reference jQuery UI as a dependency and add a widget to the page. Here you can see what accordion would look like rendered along with jQuery UI.
Now, if we add jQuery Mobile as a dependency and remove jQuery UI the same exact accordion will render like so.
You can reference Wijmo v3 from our CDN and use the Adaptive Widgets with jQuery Mobile like so.
New jQuery Mobile AppView Widget
Responsive Web Design is a great way of building websites, but what about mobile web applications? We love jQuery Mobile and wanted to make it even easier to build responsive applications with it. AppView is an all-in-one widget for mobile applications. It has built-in navigation, ajax-loaded content and a responsive layout system. AppView is ideal for building a single application that works on both phones and tablets while optimizing screen real estate.
Let’s look at an example of how AppView works. Using really simple markup, we can create this application with navigation and layout. The markup requires a header, content, and menu like so.
<div data-role="page" data-theme="b"> <div data-role="wijappview"> <div data-role="appviewpage"> <div data-role="header" data-position="fixed"> <h2>Appview</h2> </div> <div data-role="content"> Default content, not displayed on a small screen. </div> </div> <div data-role="menu" class="ui-body-a"> <ul data-role="wijlistview" data-theme="a"> <li><a href="nuncTincidunt.html">Nunc tincidunt</a></li> <li><a href="proinDolor.html">Proin dolor</a></li> <li><a href="aeneanLacinia.html">Aenean lacinia</a></li> </ul> </div> </div> </div>
AppView is a powerful tool for creating responsive mobile applications. It makes responsive layout in jQuery Mobile easy.
jQuery Mobile ListView
Our philosophy is to embrace community standards instead of replace them. So we chose to extend jQuery Mobile instead of writing our own mobile framework. We literally extended jQuery Mobile ListView. In this release you will find it identical to the jQuery Mobile API, but we will be adding features soon. We chose to extend it and use it internally (our AppView widget uses it heavily) so that when we add these features we will not cause breaking changes moving forward. If you haven’t used it yet, jQuery Mobile’s ListView is an outstanding widget for mobile development. Here is what it looks like in action.
Go Get It!
Download Wijmo v3 Alpha, explore the new mobile widgets or learn more about v3. If you have any feedback or questions about please post them in the v3 Alpha forum. We have also published some documentation for the widgets to help you get started. The docs will be updated during the Beta process so please be patient if something is missing momentarily.