HTML

The language in which all websites and web apps are being presented on the web browsers is HTML. This language is what web browsers read, understand and render. In addition to HTML, web applications usually have dedicated JavaScript and style files.

In the dynamic web applications, HTML representation files are generated dynamically, in most cases by the web server. Web server application is using front end templates and data stored in databases to generate final HTML pages.

Static web applications, do not have the server app side. HTML and all corresponding style and JavaScript files are already created and just served by a web server as they are. This approach allows you to host your web pages on different platforms which support static HTML pages but not server side languages. Examples would be GitHub pages or even DropBox.

Here on HTMLCenter we have published several tutorials about designing and developing Cordova / PhoneGap based HTML5 mobile applications.
One of the main strengths of PhoneGap undoubtedly is the native plugin functionality. It allows developers to hook the native mobile OS components with HTML5 and JavaScript code. This way you can use JavaScript methods across the app to access functionality provided by native code.

In fact, any other developers using PhoneGap framework can just import your plugin and use the functionality in their own apps. Developer community has created many such plugins. And Cordova contributors have developed plugin manager called plugman in order to make installation of plugins simple.

We know that many of you are into tech workshops and conferences. Especially if it’s about HTML5, mobile and creating great user app experiences.
If you fall into this category, we have something to give away!

The folks from Apps World have reached out to us and offered couple of gold (full access) passes as a giveaway to HTMLCenter readers.

Apps World is returning to London for the fifth year running and has grown to be the leading global multi-platform event in the app industry.

These days many developers are exploring ways to speed up and to simplify mobile application development process. And I see more an more tools created for this reason.

Today I noticed one such tool which takes slightly different approach. It allows you to build mobile applications by using WordPress CMS. Its called Apppreser.
They help you to convert WordPress based HTML sites to a native mobile applications by wrapping them to PhoneGap framework.

The idea is to use WordPress plugins to talk to PhoneGap APIs and this way connect to mobile hardware.

Even if folks from Apppress are charging quite a few bucks for their plugins and implementation the use case is promising. There are plenty of websites powered by WordPress and theoretically it should be possible to make HTML5 mobile applications from them with a little bit of effort.

As for the high price for the service, I’m sure there will soon be open source versions of such plugins available. WordPress developer community is known for creating great open source plugins.

This is the second part of tutorial for building native mobile application based on AngularJS, HTML5 markup and CSS styles. In the first part you will find how to setup the new project, add routes, controllers, HTML5 views and do simple testing in a standard web browser.

What we are doing in this tutorial?

In this tutorial part we are going to take previously created application and add back navigation button, sliding animations between the views and functionality to retrieve data from web services by using asynchronous HTTP communication. Finally I’ll give some hints how to wrap this application into PhoneGap framework in order to create installable version. Lets get started.

In the part one and part two of this tutorial we have discussed what PhoneGap mobile application framework is, its key components and elements. We have created a new PhoneGap mobile app project for iOS platform and started adding code for most used mobile application components. First such functionality was a communication with remote web services and 3rd party API’s through HTTP protocol by using jQuery library. Our mobile application has got a minimalistic and nice looking design created by using HTML5 markup and CSS styling.

In this part of the tutorial we will be adding data storage functionality and native application controls. Yes, native iOS controls so our PhoneGap based mobile app has a native look and feel native to its users. Such possibility to add native elements to PhoneGap hybrid mobile applications is one of the biggest strengths of this framework.

I’m going to be working with the code from the last tutorial part (you can find it on the bottom of the previous tutorial page). And the link to completed source code of today’s tutorial can be found at the end of tutorial. Lets get started.

First we are going to write a code to store last keyword that was used for search on the mobile device and retrieve it (for refilling search text box) once user launches application next time.