Over the horizon a new version approaches with fierce determination. The next generation of UI reveals itself to a anxiously awaiting world. Wijmo v3 approaches…

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.

As you can see the same accordion widget adapted itself for mobile development when jQuery Mobile was referenced. Literally using the same JavaScript file and calling the same API. This is not two libraries. It is one library that can adapt. This is the power of the Adaptive Widget Framework.

Explore our Adaptive Widgets in our mobile demo. Learn more about our Adaptive Widget Framework.

You can reference Wijmo v3 from our CDN and use the Adaptive Widgets with jQuery Mobile like so.

<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.3.0.0a1.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.0.0a1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.3.0.0a1.min.js" type="text/javascript"></script>

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>

On an tablet the AppView will result in a multi-column layout with an always visible menu.

Meanwhile, on a phone, the AppView will have a single-column layout and automatically add the back button for navigating back to the main menu.

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.

Take a look at a live demo of AppView, or read more about it in our docs.

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.