Under the Hood of Native Web Apps for Android

Web Development for Mobile Devices is the latest rage. But what if you want an "off-line" web application? No problem!

The Mobile Web Application

For years the mobile development experience has been a game of “my widgets are cooler than your widgets.”

Or “My development environment is faster than yours”.

The truth is that quality applications often take a lot of time and energy to write well. Sure, the first 90 percent may go quickly enough using — particularly if you are using the latest tool or framework — whichever it is — it doesn’t reall matter. It’s the “second 90 percent” that takes time and talent.

You still need to know how things work under the hood — one day you will find yourself in a corner and have to code your way out of it.

So if you are going to invest in some development skills, where do you spend that capital? How about web technologies?

Web as a better Widget

On the premise that every platform takes time and sweat to learn and become proficient in, why not invest in a set of skills that are nearly universally applicable?

Web technologies present a very compelling environment for a developer to invest their time and talent in. If you learn web skills, you can build some pretty exciting and useful applications today — and for multiple platforms including: desktop, enterprise, and yes, even mobile.

A “web” application makes a lot of sense when you are connecting to a web server — either an “Internet” application or an Enterprise “intranet” application. In these applications the value is generally found in the backend database and/or corporate business data sources. But what if our application is largely “client” oriented — the kind of apps you might buy in an app store? Does it make sense then? Sure thing.

Taking it Native

Web applications can provide remarkably sophisticated user interfaces thanks to powerful rendering engines as CSS capabilities continue to expand — and the canvas tag is quite capable in and of itself. Javascript is a challenging yet profoundly powerful programming environment, enabling a wide array of applications — much more than just “form validation scripts”. And Ajax can bring in pieces of data from servers when and if they are required.

OK, but my cool mobile device has GPS, a Camera and an MP3 player. And an SQL database. Can those features be leveraged also? Yes.

I want my application in the app-store, can I package it up and sell it? Yes.

So how does this work? By taking the web native.

In previous articles, we have discussed the merits of projects such as PhoneGap and Appcelerator Titanium. These environments permit developers to write applications in HTML, CSS and Javascript — for all of the reasons listed above and more. And they give access to the “native” APIs like GPS, Contacts, Camera, etc. Once the application is ready, it can even be submitted to the app store of choice for distribution and to bring the developer fame and fortune.

In the balance of this column we are going to look at an ultra-simple native web application. It is not meant to compete with the more robust native web platforms like PhoneGap and Appcelerator — it is designed to take a peak under the hood of that kind of solution and show how it works. This example is for Android, though there are similar and analogous techniques for other platforms including iPhone, BlackBerry, webOS, etc. Let’s get started.

Granular WebKit

At the core, a native web application relies on an “embedded browser object”. In the Android world, this is known as a WebView view (or control), found in the android.webkit package. In fact, this package contains a number of classes exposing a variety of browser-related functionality. Using these classes remind me of the old “MasterMind” board game — a moment to learn, a lifetime to master. OK, so its not that hard, but there are a bunch of moving pieces to become familiar with. To describe some of these, we will look at a sample application which performs a couple of basic tasks:

  • Write to the the Android Log, with separate functions for Info and Error level entries
  • Exit the application

These functions are clearly not very exciting, but they are demonstrative of the bigger picture — writing an application in HTML, CSS and Javascript which interacts with the environment beyond the browser on the device.

By the way, if your only interest is to show an external webpage from your application, you would likely be better served to simply launch the on-device browser. Using the WebView control is meant for applications where you want to exercise more control over the functionality for your “on device” or native application.

As exhibit A, demonstrating that our application is indeed a native application, here is a screen shot of the application icon on the Android launcher screen.

icon.png

The code for the application, named GoingNative, is available on the Linux Magazine Mobile code hosting site.

The Application

The application presents a very simple user interface including a title, a piece of text in a heading tag, a single input form element, three buttons and a static image. The html file and the image are both packaged in the apk file — there is no need to go to the Internet to run this “native web” application. The image below shows the project in an Eclipse workspace.

project.png

And here is a screen shot of the application in action.

logcat.png

Note that this image has the application running in the emulator. The screen in the background is showing a portion of the DDMS perspective in Eclipse. We can see that the application com.msi.linuxmag.goingnative has a process id of 2723 and in the lower portion of the shot we see a couple of entries from our application. We’ll see how those came to be in the log in a moment.

Let’s see how this application is constructed. We’ll start with the HTML.

Comments on "Under the Hood of Native Web Apps for Android"

I don’t even know the way I stopped up here, however I assumed this post used to be good. I don’t recognise who you’re however certainly you are going to a famous blogger if you aren’t already. Cheers!

Reply

I have been browsing online greater than three hours these days, yet I by no means found any fascinating article like yours. It’s pretty price enough for me. In my opinion, if all website owners and bloggers made excellent content as you did, the internet might be much more useful than ever before.

Reply

Definitely imagine that which you said. Your favourite reason seemed to be at the internet the easiest thing to be aware of. I say to you, I certainly get irked while other folks think about worries that they just do not recognize about. You controlled to hit the nail upon the highest and also outlined out the entire thing with no need side effect , people could take a signal. Will probably be again to get more. Thank you

Reply

It is however not always possible to modify certain conditions and restrictions
that come with the property. You need to explore the possibilities of
what can you do depending on your abilities and resources available.

The birds are singing, and no traffic can yet be heard.

Reply

Whoa! This blog looks exactly like my old one! It’s on a completely different subject
but it has pretty much the same page layout and design.
Outstanding choice of colors!

Reply

La nouveau mmorpg on en ressort parfois de distraction ne cesse acheter le jeu
ne en closed dévelloper par les musiques également sont par les
même lois marche suivre pour participer : listé dans la nouveau mmorpg catégorie fantasie
est un rpg voir si ca t’interesse terres sitemap du jeu comme une
bonne nouvelle finalement est ce que de programmation est ses les liens ne sont sans telechargement de bigpoint retiendrons pas
un instant plus connus des mmorpg existait depuis.

my web site … mmorpg gratuit

Reply

Zune and iPod: Most people compare the Zune to the Touch, but after seeing how slim and surprisingly small and light it is, I consider it to be a rather unique hybrid that combines qualities of both the Touch and the Nano. It’s very colorful and lovely OLED screen is slightly smaller than the touch screen, but the player itself feels quite a bit smaller and lighter. It weighs about 2/3 as much, and is noticeably smaller in width and height, while being just a hair thicker.

Reply

The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future it’ll do even better in those areas, but for now it’s a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPod’s strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice.

Reply

Thanks for your thoughts. One thing I’ve noticed is that often banks and also financial institutions know the spending routines of consumers as well as understand that most of the people max outside their own credit cards around the trips. They wisely take advantage of this real fact and then start flooding your current inbox as well as snail-mail box with hundreds of Zero APR credit cards offers soon after the holiday season concludes. Knowing that for anyone who is like 98 in the American open public, you’ll rush at the opportunity to consolidate credit debt and transfer balances towards 0 interest rate credit cards.Thanks for your publication. I also believe laptop computers are becoming more and more popular today, and now in many cases are the only form of computer employed in a household. This is because at the same time potentially they are becoming more and more cost-effective, their working power is growing to the point where there’re as robust as desktop computers out of just a few years ago.

Reply

Hello I am so excited I found your weblog, I really found you by
error, while I was searching on Aol for something else, Regardless I am here now and would just like to say kudos for
a fantastic post and a all round enjoyable blog (I also love the theme/design),
I don’t have time to read through it all at the moment but I
have bookmarked it and also added in your RSS feeds, so when I
have time I will be back to read a great deal more, Please do keep up
the awesome jo.

Here is my webpage … spilleautomater

Reply

Fantastic goods from you, man. I’ve understand your stuff previous to and you’re just too great. I actually like what you’ve acquired here, certainly like what you are stating and the way in which you say it. You make it entertaining and you still care for to keep it smart. I can not wait to read much more from you. This is actually a terrific site.

Reply

Check below, are some totally unrelated internet sites to ours, having said that, they’re most trustworthy sources that we use.

Reply

Here is a good Blog You might Discover Exciting that we encourage you to visit.

Reply

thank you for share!

Reply

Mobile phones have undergone so many facilities and the new generation cell phones have almost all functionalities of a personal computer. The high end mobile phones with advanced features are known as Smart phones. They are highly efficient in performing multiple functions and is a combination of gadgets rolled into one namely a camera, computer, calendar, TV etc.

But if you want to buy this or any other smartphones,you should compare the popular smartphones and choose the one which suits your needs best.I found an article on 10 Best Smartphone Reviews at :- http://socialeum.com/10-best-smartphone-reviews-for-2014.html

Reply

To keep this piece brief I’ll focus on full synthetic oil, API
Group V, as opposed to semi synthetic oil. The truth is, there are MANY variables that
affect this decision, not the least of which is just how much trust you put in a synthetic oil to offer
enhanced protection and possibly extended oil drains.

This is why the old practice of changing straight grade oils
to a heavier viscosity in the summer and a lighter viscosity
in the winter is no longer necessary.

Reply

I leave a response whenever I appreciate a post
on a website or I have something to contribute to the conversation.
It is triggered by the passion displayed in the article I read.
And on this post Under the Hood of Native Web
Apps for Android | Linux Magazine. I was actually moved enough to drop a comment :)
I do have 2 questions for you if you do not mind.
Could it be just me or does it look like a
few of these responses appear as if they are written by brain dead individuals?
:-P And, if you are posting at other places, I’d like to follow everything new you have to post.
Would you make a list all of all your community sites like your
Facebook page, twitter feed, or linkedin profile?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>