BCD Tackles Mobile App Development with WebSmart Mobile

April 9, 2013 Alex Woodie

Business Computer Design Int’l. yesterday unveiled a beta version of WebSmart Mobile, a new component of its WebSmart development environment. The new software, which was announced at the COMMON conference in Austin, Texas, uses jQuery Mobile to enable IBM i developers to create Web-based mobile apps that deploy to smartphones and tablets running iOS, Android, Windows 8, and Blackberry platforms.

BCD customers have been creating IBM i-powered mobile apps using WebSmart for some time. After all, BCD added jQuery support in early 2011, which gave customers the capability to generate Web clients that use the latest HTML, CSS, and JavaScript technologies (prior to jQuery, BCD used its own JavaScript library). Since most mobile apps are simply slightly tweaked versions of full Web clients, it wasn’t a stretch for clever WebSmart customers to tailor their jQuery-derived interfaces to run as Web apps on smartphones and tablets.

So, you ask, what’s so special about WebSmart Mobile? There are several noteworthy differences that will boost mobile app development, according to BCD product manager Marcel Sarrasin. For starters, built into WebSmart Mobile is jQuery Mobile, a version of the standard jQuery library that is specifically tailored to smartphones and tablets. Also, BCD includes several templates with WebSmart Mobile that will give customers a head start in their mobile development efforts.

jQuery Mobile

The use of the jQuery Mobile framework ensures that WebSmart Mobile apps run equally well on the various Web browsers running on all popular mobile devices. It also provides easy access to user interface elements, or “screen widgets,” such as buttons and sliders, that are optimized for touch-screen devices such as iPads and smartphones.

“When you add a button using jQuery Mobile to your screen, it’s a big chunky button that’s touch friendly,” Sarrasin says. “When you add radio buttons, they’re not little dots, they’re big, almost like blocks. You can also have things like sliders, which allow you to change a quantity by just sliding your finger on a button.”

Anybody who’s used one of the latest mobile apps–say, the Facebook app, with its slide-out menus–will find these user interface elements familiar. The use of jQuery Mobile gives IBM i developers access to these mobile capabilities in the same development environment they use to write the back-end RPG or PHP logic.

Templates Galore

Also boosting programmer productivity are the three templates that BCD includes in WebSmart Mobile. The first template is used to generate a log-in screen. BCD allows developers to authenticate a user against IBM i user profiles or a database file. It includes a “keep me logged in” checkbox for the user. Developers also have power over any screen redirection that occurs after a successful log-in.

The second WebSmart Mobile template, called List, allows the developer to present a view of data residing in one or more DB2 for i tables. This template is where the bulk of mobile application development work will occur in the product, Sarrasin says, and allows users to add, delete, and edit records from mobile devices.

What’s nice about the List template is it uses a finger scroll and is touch-friendly, Sarrasin says. “When you hit the bottom of the list, there’s a little button that says ‘more.’ When you click that, it will load the next 20 records,” he says. The feature utilizes AJAX to eliminate the need to refresh the entire page, which boosts performance.

Simple Page is the third template in WebSmart Mobile. This template includes little else besides a header and footer, and allows users to add whatever content they want to the middle, which could be in-house developed Web services or third-party widgets or plug-ins. “A big advantage of WebSmart Mobile is you have access to all the code, all the CSS, HTML, and JavaScript. If you find plug-ins on the Internet, you can just plug them into WebSmart,” Sarrasin says.

BCD plans to add more templates in the future.

The RPG Advantage

JQuery Mobile also provides what Sarrasin calls “responsive design.” That is, the interface has to be responsive not to different screen sizes–from 4-inch iPhone displays to 10-inch Android tablets–but also changes in aspect ratio, such as when a user rotates the device 90-degrees, and shifts between landscape and portrait modes.

“Our templates have responsiveness built in,” Sarrasin says. “People want to have a real mobile experience, so when you rotate your device, it’s going to adjust the size of everything to fit in the screen. Let’s say you’re editing a record and you have field labels to the left and input to right. On a tablet, they fit nicely side by side. On a phone, usually it doesn’t fit, so the program put them below instead of to the right of it.”

BCD is by no means the first IBM i tool vendor to release a mobile application development tool to the market. In just the first three months of 2013, it seems as if a new mobile development tool has been released every week. Most of them have either jQuery Mobile or Sencha Touch, the other popular JavaScript library for mobile devices. Some also have integration with PhoneGap (Adobe Cordova), which enables Web-based mobile apps to behave just like native apps for iPhones and Android devices. (BCD has plans to add more PhoneGap integration.)

What will make WebSmart Mobile a success in such a crowded field, Sarrasin says, is the capability to generate both the front-end (HTML, CSS, and JavaScript) and back-end (RPG or PHP) code required by mobile apps, and to do so in a single development environment. After users generate a mobile app with the template, they can continue to customize it by working either on the front-end or fine-tuning the backend code.

“The templates are not only generating the UI, but also server-side code,” he says. “The reality is the template stage is just a three-minute process. Once you’ve done that, it’s just about how many customizations you want to make. This is all built on the WebSmart IDE, so all the functionality we have in ILE or PHP editions, such as calling backend RPG programs or using the debugger–that’s all accessible to your mobile applications as well.”

WebSmart Mobile is expected to become generally available later this month. The software will be offered to customers of WebSmart ILE and WebSmart PHP who are current on maintenance. There are no plans to make it a standalone product at this time. For more information, see www.bcdsoftware.com.