jQuery Mobile and App Studio

NS Basic/App Studio 2.0 introduces support for jQuery Mobile. This will let you develop more powerful and better looking apps. Here’s an actual App Studio program which shows off all the jQuery Mobile controls.

(go ahead – click on it!)

First, a bit of history. jQuery is a library of useful JavaScript functions that is being developed by John Resig and the jQuery Team. Backers of the the jQuery Project include Adobe, Mozilla, BlackBerry, Nokia, Microsoft and many more. Approximately 52% of the top web sites use jQuery.

Development of jQuery Mobile started in 2010: the first release was in November, 2011. This went far beyond what jQuery itself did: it actually contains a full set of visual elements, optimized for mobile devices. It was an instant success: jQuery Mobile is very widely used for Mobile Application development.

When we started development of NS Basic/App Studio, jQuery Mobile did not exist. We realized that having a library of controls was an essential part of the product. The best one at the time, and still a very good one today, was iWebKit. Distributed under the Apache license, we included it in our product. It is now called “Classic” in App Studio.

We started on the integration of jQuery Mobile some time before its actual release. As we worked with it, we realized that it added some very nice features to App Studio, so we accelerated development. Quite a bit of work was needed to make the IDE work well with both Classic and jQuery Mobile. The good news is that it came out great.

There are a number of nice things to the jQuery Mobile controls.

  • Themes – you can customize the look and feel of the controls.
  • Grouped controls – Combine several similar controls into one large one.
  • Icons – a nice built in set of icons that can be used on many controls.
  • Additional Controls: FooterBar, FlipToggle, NavBar
  • More powerful controls: A number of controls have additional features.

Since Classic and jQuery Mobile have conflicting CSS, you cannot use both in the same project. When you create a project, you select which framework you are using. Only controls which apply to that framework will show in the ToolBox.

Some controls have two versions as a result: one for Classic and one for jQuery Mobile. These include Button, CheckBox, RadioButton, TextArea, TextBox and more.

Other controls work fine with both frameworks: Grid, Image, PictureBox, Audio, Video, HTMLview and more.

The best way to convert a project is to open a new App Studio project with jQuery Mobile set as the framework. Create your forms again using the jQuery Mobile controls, giving them the same names as you had in Classic. You will need to reposition and resize many of the controls: the jQuery versions are often larger than the Classic version. Once the forms are done, copy and paste the code. Most of the code will come over without changes.