So, how is your iOS project coming along? As the Apple Worldwide Developers Conference (WWDC 15) gets underway in San Francisco, we want to make you aware of a few recent developerWorks articles that focus on mobile development with Apple and IBM technologies....
easily create a mobile version of a website, converting existing web
pages into touch-friendly websites and applications. The jQuery Mobile
framework affects the way mobile applications are accessed and distributed
on mobile and tablet devices by allowing users to connect directly to
touch-friendly applications through their web browser.
Mobile and tablet device adoption rates are skyrocketing, and the jQuery
Mobile framework is allowing developers to meet the growing demand for
these mobile web experiences by increasing the speed with which mobile web
sites can be produced.
In particular, jQuery Mobile includes a theme framework that you can easily
customize. The ability to customize color swatches and icon sets provides
custom theming of pages, toolbars, content, form elements, lists, buttons,
and more. This article provides a brief overview of how to create a custom
theme for each of these jQuery Mobile element types. Custom theming allows
you to create mobile versions of websites that follow the same branding
as their desktop versions.
jQuery Mobile has a recommended but optional page structure for standard
web applications that includes a few common constructs, such as a page
element that contains header, content, and footer elements. To define
these elements, the jQuery Mobile framework uses the HTML5
data-role attribute. Listing 1
shows an example of jQuery Mobile's
recommended HTML template using data-role for
each main element.
Listing 1. An element using the page data-role
<p>Page content goes here.</p>
Another important and recommended element is a
<meta viewport> tag. This tag specifies
how a browser should display the mobile website. The following code shows how
to add a <meta> tag to set the
viewport for mobile devices:
The <meta viewport> tag is important for
rendering your mobile web page properly based on the device accessing it.
Without this tag, your web page can appear small, or zoomed out, as any
normal web page not built for mobile would display. Figure 1 shows a mobile web page that uses
the <meta viewport> tag and displays the
content more appropriately for the device being used.
The jQuery Mobile framework includes a page theming system that provides
full control over the look and style of page elements. The HTML5
data-theme attribute can be added to an element
to apply an existing jQuery Mobile theme color swatch or a new color
swatch. The theming system includes five swatches, using a letter to
identify each one—for example, A-E are the swatches the jQuery
Mobile framework provides natively. You can view the existing swatches by
downloading the CSS file that the jQuery Mobile framework provides. To create a
new swatch, you can use any letter of the alphabet not already being used
(namely, F-Z). Once you determine the letter you'd like to use, you can
reference any of the existing swatches to copy and customize classes for
all of the various page elements.
Page theming consists of styling the HTML element that contains the entire
web page. jQuery Mobile's recommended page structure consists of a
<div> element that includes a
data-role attribute with a value for page. To
style this element, apply a data-theme
attribute to it and specify a unique and unused value for a new swatch so
that you can write a custom CSS for it. The following code shows an example of
the page element using a
data-theme value of
<div data-role="page" data-theme="f">
By using this data-role and
data-theme, the jQuery Mobile framework
actually creates and adds a few CSS classes to the
page element. Here's an example of what the
output in the browser becomes after being processed by the framework:
As you can see, a number of CSS classes have been added to the
page element. The
ui-page-active classes have been assigned based
on the data-role value of
page, and the
ui-body-f class has been assigned based on the
data-theme value of
F. You can use any of these classes to style
the page element or its contents. Listing 2
shows an example of
how to use the ui-body-f class to add custom
styling to the page element.
The custom CSS you've added to this class sets the background color and
font used in the mobile web page. Once you have created your page swatch,
you can get more specific with the HTML elements you want to target and
stylize. For example, Listing 3 shows how to target and stylize input text
and password fields that appear within the page
In the jQuery Mobile framework, toolbars are header and footer elements. To
define a toolbar as a header or footer, you use the
data-role attribute. The value of the
data-role attribute should be
header or footer
depending on the element you are creating. Listing 4
provides an example of both header and footer
toolbars included within a page element.
Assigning a theme to a toolbar is as easy as using the
data-theme attribute and giving it a custom
swatch value. By default, header and footer toolbars are assigned the
a color swatch to show visual hierarchy. Here's
an example of a custom theme assigned to the header toolbar:
This new custom CSS class stylizes all the toolbars that have the
data-theme applied. However, there are
often times when you'd like your header and footer to look different. To
achieve this difference, you need to create a new custom theme—name
it G—and create a new CSS class to style
it (Listing 6).
The G toolbar theme sets some basic properties,
but it also includes complex multiple gradients for different browsers.
These gradients are intimidating, but luckily you don't need to memorize
how to create them, as there are websites that will generate them for
you. So, you can simply copy and paste the code into your CSS class. Visit
the Resources section of this article for a link
to generate gradients for your website.
This block will collapse when the page is loaded. When a user clicks the
title bar, it will reveal the login form that you will create shortly. To
style this block, simply assign a data-theme to
it and create a custom CSS class. Listing 8
provides an example of some custom classes
associated with the collapsible block and its contents.
These CSS classes define the non-active, active, and hover state of the
collapsible title bar. The <h3> tag from
Listing 7 is converted
into an <h3> with a
ui-collapsible-heading class; the contained
text—in this case, "Login"—is converted into a hyperlink
with a few classes, depending on the state. The three classes for the
hyperlink are ui-btn-up-f,
ui-btn-hover-f. Each of these classes is
self-explanatory, covering the up, down, and hover state of the title bar
for the collapsible content block. The classes change depending on the
data-theme value, so these classes include an
appended F at the end; if you were to use a
data-theme value of
G, the classes would have a
G appended to the end in place of the
Lists are common on mobile web pages, because they provide a way to quickly
show options for people on the go. To convert a regular HTML list into a
fancy mobile list that's easy to use on touch devices, all you need to do
is set the data-role attribute to
listview, as shown in Listing 9.
Adding a theme to the listview is easy. As
you've done with every other theme, simply assign a
data-theme value. Listing 9
as the theme value. To customize the list items, you need to target them
with CSS, as Listing 10 shows.
The elements you're targeting with the CSS in Listing 10
are the actual hyperlinks within the list
items to set the text color to white. The
ui-btn-hover-f classes are all injected by
jQuery Mobile to handle the different states of the list items.
You create a form for a mobile website using the jQuery Mobile framework
the same way you would for any website: Simply add input elements and
associated labels, which will take on the existing page theme. Listing 11 provides an
In Listing 11, you probably
noticed the fieldset with custom button code.
Each button has a different theme associated with it: The
Reset button uses the default theme, while the
Submit button uses the F
theme. Listing 13 shows the
custom CSS classes created for these two buttons to make them different in
As you can see, the Save button has a custom gradient
associated with it that makes it stand out more than the
Reset button. Using multiple themes for button sets
is a good way to identify which button is the most important or the
Theming a touch-friendly website with the jQuery Mobile framework is easy
once you understand the data-theme attribute
and the elements the framework provides. With the addition of the
data-theme attribute, you can assign custom
values and associated custom CSS classes that will allow you to create
touch-friendly websites using the jQuery Mobile framework. To learn more
about the framework, see the Resources section
or, better yet, test out some custom CSS yourself using the sample code
the Download section.
Download and try
the IBM Mobile Technology Preview, a set of code samples and services
to help you get started building mobile applications that extend and
integrate into the enterprise. The preview includes a RESTful notification
service; PhoneGap, an open source framework for building hybrid mobile
apps; a lightweight WebSphere Application Server runtime; and sample code
to let you see how it all works.
IBM WebSphere Application Server Feature Pack for Web 2.0 and
Mobile includes the IBM Dojo 1.7 Toolkit, new mobile and rich
Internet application (RIA) building blocks, and a Dojo-based diagram
component. With accompanying Rational tools, the Feature Pack helps you
take WebSphere applications developed originally for desktop browsers and
adapt and deploy them to mobile devices.
IBM products in the way that suits you best: Download a product
trial, try a product online, use a product in a cloud environment, or
spend a few hours in the SOA Sandbox learning how to implement Service Oriented
Get involved in the developerWorks
community. Connect with other developerWorks users while exploring
the developer-driven blogs, forums, groups, and wikis.
Kris Hadlock has been a contract web developer and designer since 1996. He has worked
on projects for companies such as SPIN Magazine, IKEA, United Airlines,
JP Morgan Chase, GoDaddy Software, and Fire Mountain Gems. He is the author of
Ajax for Web Application Developers (Sams) and The ActionScript
Migration Guide (New Riders) as well as a featured columnist and writer for
numerous websites and design magazines, including Peachpit.com, InformIT.com,
and Practical Web Design magazine. Kris is also the founder of
www.studiosedition.com, a web design
and software development studio specializing in fusion of form and function.
In this interview at IBM Innovate, Leigh Williamson, Distinguished Engineer, IBM Software Group talks about IBM’s latest announcements, including the capability for mobile developers to record and playback functional tests.
Leigh goes on to explain that DevOps is important for any development organization, but it's especially important for mobile development where release cycles are so fast (e.g. every few weeks) and organizations need to automate and orchestrate deployments. UrbanCode which IBM just acquired has enhanced its support for IBM's mobile portfolio and there is more to come soon.
Leigh points out that IBM has the broadest enterprise mobile portfolio in the industry, but suggests, given the relatively nascent nature of the mobile industry, there is still room to grow.
In terms of key skills needed by students, coding and implementation skills such as Java and HTML5, and knowledge of plaforms like Android and iOS are of course important. But students also need to understand how data is handled. An area that isn't as crucial with traditional and web apps, mobile sluggishness is often due to how data is passed between devices and backend systems.
A high priority coming up is the delivery of mobile platform capabilities as services to take advantage of quicker deployments.
Business students Chris Brooks and Kenneth Trinh from San Jose State University were set the task of looking at the IBM Worklight mobile development platform and thinking about how this could be made more accessible to an audience such as themselves.
The students took a particularly creative turn by using Worklight to develop a mobile application that teaches you how to use Worklight! If you have an Android device, you can find the app in the Play Store. In the process they also created a couple of explanatory videos:
In 1961 IBM did a cool thing, it sponsored Mathematica: A World of Numbers ... and Beyond, an exhibition by husband-and-wife designers Charles and Ray Eames that featured, among a number of other things, a 50 foot-long informational graphic titled Men of Modern Mathematics.The graphic laid out a nearly 1,000-year timeline of math-related events, quotations, artifacts, and, centrally, mathematicians.
Equally cool, in a recent collaboration between IBM and the Eames Office, the graphic has been reworked into a free interactive iPad app called Minds of Modern Mathematics. The app's main feature is the timeline itself, which looks back in history from the Eames' 1960 vantage point, starting with the year 999. Math was apparently off to a rough start, with Pope Sylvester II being accused of wizardry for liking science.
On the iPad the scrolling timeline is about seven feet's worth of information -- I actually measured it -- and tapping each item brings up an enlarged image that gives details about each mathematician or provides context for their discoveries. In a thoughtful use of device orientation, the app designers chose to use landscape for display of the timeline, but then they have it switch to a slideshow-style presentation of events when you rotate to portrait.
There is more to see than I am describing here. If you like math, or history, or both, you owe it to yourself to check it out. No ads, no marketing, just a history of intellectual greatness.
IBM has just introduced support for Apple WatchKit in MobileFirst Platform, which means you can now add MobileFirst Platform Foundation capabilities for security, analysis, and management to Watch apps. And what's really great, especially if you've already set up MobileFirst Platform for iOS, is that setting it up for WatchKit is essentially the same straightforward process.
If you want to see how it's done, check out Andy Trice's blog:
Learn how Xamarin and IBM can help you achieve enterprise mobile success. This presentation from InterConnect 2015 will introduce you to the Xamarin and IBM partnership. Announced in October 2014, the partnership allows enterprises to build high quality, native apps that look and feel like your users' expect with enterprise grade back end capabilities, including the power, security and reliability, that your enterprise demands.
We recently announced the IBM-Xamarin partnership, allowing businesses to build fully native iOS, Android and Windows Phone applications with shared code - while also leveraging IBM Mobile First Worklight’s robust integration, security and connectivity. With this partnership, enterprises are able to deliver both the UI quality consumers demand and the enterprise-grade backend and reliability that corporations require.
Join IBM and Xamarin technical executives on Thursday, December 11 at 8 am PST/ 11 am EST/ 5 pm GMT for a live webinar as they discuss the IBM and Xamarin partnership, demo the IBM MobileFirst SDK for Xamarin, walkthrough the IBM Worklight platform and answer any developer questions.
Ken Parmelee IBM Business Development Executive & Program Director, MobileFirst
Dustin Amrhein IBM Mobile Technical Leader, MobileFirst
Steve Hall Xamarin Director of Enterprise Mobility
We’ll send a recording after the webinar, so we encourage you to register even if you’re unable to attend.
We’re excited to announce IBM as a Diamond sponsor of Xamarin Evolve 2014, the largest multi-platform mobile development event of the year, in Atlanta, October 6-10. Greg Truty, Distinguished Engineer, Chief Architect SWG Mobile Build & Connect at IBM, will lead two sessions at the conference focused on how to easily build cross-platform native apps on the client-side with Xamarin, powered by the Worklight Server on the backend. Xamarin has grown to 730,000 developers in only three years and is now a major player in the enterprise, enabling developers to build fully native, high-performing apps for iOS, Android and Windows devices using a shared code base.
If you’re a C# developer in mobile development, Xamarin Evolve 2014 is your ticket to mobile expertise.
The event starts with 2 days of in-depth training on how to build fully native apps in C# with Xamarin. Three conference days follow training and are packed with mobile development best practices delivered by top speakers from IBM, Microsoft, Amazon, Dropbox, Couchbase, Salesforce, Github, Facebook and more.
“Connecting Xamarin Apps with IBM Worklight” is a hands on session designed to show you the power of Xamarin and Worklight together. Greg will cover how to connect native Xamarin apps to IBM Worklight Server for easy integration into your enterprise’s environment, and you’ll walk away with the ability to leverage existing resources and infrastructure for mobile, as well as manage cloud-based services directly to the end-user device.
“Keeping Apps Relevant: Deployment, Support, and Management Best Practices for Your Enterprise Mobile Apps.”Creating a successful enterprise app that employees actually adopt into their workflow requires much more than just delivering a great UI and UX on the employee’s choice of device. It doesn’t matter how good the app is if employees don’t know about it, can’t easily get it onto their device, or if it fails to keep up with new workflow processes and/or device features that make their lives easier. In this session, you will learn best practices for managing the last, but not least, parts of the mobile application lifecycle.
Don’t miss your ticket to native mobile app expertise - register here to join us at Xamarin Evolve 2014 today.
The webcast is based on an upcoming 'Mobile First' book that Raj Balasubramanian and Carlos Andreu are working on with O'Reilly Media. This hands-on webcast will cater to two class of developers - enterprise or backend developers who have dabbled in building web sites but hasn't spent much time on mobile, and the other class is anyone new to mobile app development be it designers or developers.
This webcast will highlight why the mobile first approach is necessary in building your next user facing app and why it's not a hype. Concrete examples will be provided using both mobile web and hybrid technologies to illustrate how you can get started. We will close by covering how the same concepts relate in the native world for education and awareness. We also touch upon enterprise concerns like integration and security with legacy systems in typical mid to large companies.
Get more info and sign up for the webcast by following the link above to the O'Reilly Community.
This post does not represent IBM's positions, strategies, or opinions.
Short Message Service (SMS) messaging is old news for one-to-one communications, but incorporating text messaging into your web site opens up some interesting possibilities for reaching a mass mobile audience. This article discusses challenges to implementing web-based mobile messaging and then covers several technical approaches to overcoming them. The author, Michael Yuan, writes:
"The 'closed' nature of mobile messaging is a significant barrier to entry for developers. Because of the barrier, however, applications that can handle mobile messaging have distinct advantages. For instance, Twitter started as a text messaging company—hence the 140 char limit to tweets—and then built on its success to become the giant social platform it is today."
If you’re anything like me, you can’t imagine going anywhere without your mobile phone; today’s devices are more than telephones, they are our cameras, our wallets, our libraries and even our fitness partners. There’s no shortage of types of devices and global mobile device growth rates are estimated around 6.9% this year. Today’s leading enterprises are taking note: employees want mobile to work for them. As a mobile software engineer I can tell you making sure applications run on the right device at the right time for the right user can be challenging.
I can tell you that for newcomers, that first step joining open source can be nerve-racking but the Apache Cordova community welcomed me with open arms. I started where most new contributors would start, on documentation and test cases. Eventually the community voted to make me a project management committee (PMC) member, commonly known as a “committer” in the open source world. Being involved in open source has the added benefit of allowing you to network with bright technical leaders from other companies.
If you are leading your enterprise mobile efforts, you need open technologies to integrate your applications and speed your app delivery. If you are a developer looking to grow your role and get involved in open source, Apache Cordova is a fun project to be involved in. We are driving innovation in mobile while aligning with industry standards such as those outlined in W3C specifications. It’s very much an extensible framework and the future of mobile. Need to add bluetooth or near field communication to your application? Easy, just add the plugin. Want developers to tinker with your product or hook into your device? Make a plugin. This is an exciting time for developers!
Does this mean you should just use open source technologies like Apache Cordova? You could, but let’s face it, if you’re an enterprise developer who wants to solve multiple problems and scale quickly you’re going to need the cloud. Rather than reinvent the wheel, companies like IBM have plugins for developers to quickly access their cloud environment. One such IBM offering is IBM Bluemix, a platform based on CloudFoundry that allows for instant services, runtimes, and infrastructures to rapidly build powerful applications. Sign up for a free trial of IBM Bluemix here: https://ace.ng.bluemix.net/. The IBM Bluemix team has even created a set of Apache Cordova plugins that can be added to new or existing hybrid mobile applications. These plugins can be found at http://plugins.cordova.io/#/search?search=ibm. Mobile apps are 5x more likely to be implemented in the cloud which means developers benefit from Open Plus vendor specific offerings that take advantage of open source while offering enterprise grade value built on top of open technologies.
Now is a great time to get involved. Come join me and fork some git repositories. Submit a pull request. If not this one, then check out some of the other great communities out there like Cloud Foundry, jQuery Foundation and OpenStack. I think you’ll find that these communities are where you’ll meet some of the most creative developers today.
Rapid Prototyping has been around for over 30 years. It has been used in the manufacturing industry to quickly develop parts and products. In the software development industry, rapid prototyping is linked to rapid application development and refers to the practice of iteratively creating screens or visuals of increasingly better resolution that project how an application will function in the future (or end state). This is particularly useful for mobile applications where we try to include the minimal set of features that are used most of the time by customers.
Rapid prototyping is highly effective when designing visual interfaces for mobile apps; unfortunately, effective does not mean easy. As with any iterative process, there are a series of steps to follow for each cycle. The rapid prototyping cycle includes three fundamental steps: envision, create and review.
Watch the IBM MobileFirst Tech Talk session on AT&T API adapters for IBM Worklight hosted by Naveed Ahmed from IBM MobileFirst and presented by Giri Bhaskara, Principal Technical Architect and Raj Sesetti, Solution Architect from the AT&T Developer Program.
AT&T spent last week in Portland, Oregon, at O'Reilly OSCON 2013, where we pitched the AT&T Application Resource Optimizer (ARO) tool and promoted our work in open source.
From Tuesday to Thursday we spent the day showcasing ARO to the many participants at the conference. This show marked a slightly different vibe than many of the shows I have previously attended. The main focus was on open source and collaboration. The show had over 300 speakers focusing on the different segments of the open source industry and the big message was about sharing and getting involved in the open source movement. AT&T fit right in with the ARO’s open source.
Learn more about the show, and how you can become a contributor to this great, open source product.
IBM MobileFirst hosts a set of virtual tech talks for developers, ISVs and anyone who is interested to learn more about mobile solutions. On August 6 the AT&T Developer Program kicks off their second series with a session on API adapters for Worklight. Our adapters enable developers to quickly and easily integrate APIs like Speech, SMS, Payment and more from within the Worklight platform.
Register and tune in to hear Giri Bhaskara, Principal Technical Architect and Raj Sesetti, Solution Architect from the AT&T Developer Program.
The Intel App Game Interface gives hybrid HTML5 applications the ability to accelerate canvas tag commands using native device level technologies. Learn the best known methods for writing rich graphical hybrid apps.
IBM and AT&T have broken new ground with a collaboration marrying IBM MobileFirst and the ever-growing portfolio of AT&T APIs and cloud offerings. The combination of the two technical powerhouses has attracted attention from developers, academics and business leaders alike, all hoping to make native app creation easier and less expensive and to deliver a better-quality product.
The partnership came about because IBM and AT&T leadership shared the goal to grow their company’s mobility market share, according to Edward Schmit, Executive Director ATT Developer Program at AT&T.
“IBM had purchased Worklight and was heavily looking at how to get more enterprise developers to use it,” Schmit explains. “AT&T also wants our APIs to be used widely by many different developers. It made sense to have our APIs exposed through the IBM tool. We thought there’d be interest to developers knowing that AT&T and IBM were working together in this space to bring extra value to them.”
Space is at a premium on mobile apps. You can’t simply shrink the full functionality of your web or desktop apps to fit into a mobile screen and expect to provide a compelling user experience. You need to rethink how you obtain and disseminate information. Most complex tasks should be reimagined to be simpler and streamlined; consequently Speech recognition support in apps can be a critical component in bringing sophisticated data entry to mobile devices. Using speech judiciously and in a well-planned out manner can result in greater satisfaction and engagement with your app.
The IBM and AT&T developer programs collaborated to co-host a developer hackathon last week at IBM Impact 2013 in Las Vegas. IBM's Cindy Reyna interviews the winners -- Harry Ho and Brad Sobie from Team OpenLogix -- about their app, their use of the AT&T APIs and IBM Worklight, and their lack of sleep while getting the app ready for final judging.
Last week at IBM Impact we demonstrated our AT&T adapters for IBM® Worklight® for the AT&T API Platform and how you can easily extend your app’s functionality. We built a simple enterprise contact management app that used the Speech API and messaging APIs to search for and distribute contacts via SMS and MMS messaging options.
Ethan Merrill from IBM’s Global Business Service explains some of the new developments of IBM’s SmartCloud, dubbed CloudFirst.
In terms of mobile offerings, Ethan points to new tools and deployment techniques available in the cloud for Worklight applications. He suggests an evolution in the way developers are producing applications for the cloud, described through IBM’s System of Integration framework.
In this interview Dirk Nicol, Director of Practitioner Outreach and Developer Programs at IBM explains how IBM’s MobileFirst initiative now offers a comprehensive strategy around mobile.
You can start at whatever point makes sense or bring together all the elements of the software lifecycle: development, management, security and delivery.
Some industries are currently ahead when it comes to execution of mobile solutions. This includes finance, banking, insurance, travel and transportation, but all industries are incorporating mobile into the customer experience model.
Dirk points out that software development is changing: we’re seeing a new model that brings together cloud, collaboration, big data and mobile. There is also a demand to extend legacy systems of record to this new paradigm.
Dirk talks about the importance of the Agile development methodology in realizing the software needs demanded by the market today.
In terms of gaining access to the latest technologies from IBM, his team has just launched developerWorks Labs: showcasing new technologies from IBM and giving developers the opportunity to try the software and provide feedback.