Develop cross-platform apps with web standards: Matt Gifford introduces PhoneGap
We live in an ever-evolving technological landscape, and a transition from a normal web for desktop machines to mobile inclination is now of some-more significance than ever.
Mobile record and device capabilities are constantly advancing while user adoption is increasing, too. It’s not startling that some-more organisations and particular developers wish to offshoot into this sparkling format either for selling purposes, for a origination of an extraordinary new focus to beget a income tide and financial income, or simply to examination with a program and solutions available.
Which height do we target? Which denunciation do we write in? The implications of building mobile applications can lift questions such as these. It might meant that we have to cruise training a new denunciation such as Objective-C, Java, or C++ to emanate your applications for any platform.
This alone potentially brings with it a series of costs: a financial cost of training a new denunciation (including time and apparatus material) and a cost of handling your growth workflow effectively. If we afterwards cruise pulling a same focus to a series of platforms and handling systems, these costs boost and a government of any codebase becomes harder to say and control.
This drastically opens a gateway to formulating natively commissioned mobile applications to all web developers and designers, lenient them to use a denunciation skills they already have to rise something privately for mobile platforms.
Displaying network tie status
Your focus might need a user to be connected to a network. This might be for prejudiced updates, remote information send or streaming. Using a PhoneGap API, we can simply detect a standing or existence of any network connectivity.
How to do it…
In this recipe, we’ll build an focus to constantly check a network tie standing of a device.
2. We will also be environment a deviceready eventuality listener after a DOM has entirely loaded, so we’ll also supplement a onLoad() duty call to a physique tag:
3. Let’s supplement a UI elements to a physique of a application. Create a div retard to act as a enclosure for a statusMessage and count elements, both of that we will be referencing directly regulating a XUI library. We will also be inserting calm into a speedMessage element, so safeguard a id charge of those 3 elements compare those shown:
4. Create a new script tab retard before a shutting head tab and conclude dual tellurian variables, that we will use within a tradition code. We can also now conclude a onLoad method, that will set a deviceready eventuality listener:
5. Let’s now supplement a onDeviceready method, called from a deviceready eventuality listener. Within this duty we will supplement dual new eventuality listeners to check when a device is connected or away from a network. Both of these listeners will run a same callback method, checkConnection.
6. We will afterwards set adult an interlude timer to run a same checkConnection routine each second to yield us with consistent updates for a connection:
7. The checkConnection duty sets adult a objConnection non-static to reason a illustration of a device’s connection. This intent earnings a value in a type property, from that we are means to establish a stream tie type. We’ll pass that value into another duty called getConnectionType, that we’ll use to lapse a user-friendly fibre illustration of a tie type.
8. As this routine runs each second, we wish to be means to establish if a stream tie form differs from a prior connection. We can do this by storing a tie form value in a currentType tellurian non-static and check if it matches a stream value.
9. Depending on a returned value of a tie type, we can optionally select to surprise a user that, to get a many out of a application, they should have a improved connection.
10. We will also increment an integer value, stored in a intCheck tellurian variable, that we will use to count a series of seconds a stream tie has been active for:
11. The getConnectionType routine mentioned formerly will lapse a message and value skill depending on a type value sent as a parameter. The value properties have been reserved manually to concede us to control what turn of tie we hold best for a focus and for a knowledge of a users:
12. Finally, let’s supplement some CSS definitions to a bottom of a focus to supplement some character to a UI:
13. Running a focus on a device, a outlay will demeanour something like this:
14. If a user changes their tie routine or disconnects completely, a interlude timer will detect a change and refurbish a interface accordingly, and a timer will restart:
How it works …
We set adult a onDeviceReady method to emanate dual new eventuality listeners to check for a online and offline events respectively. The online event will glow when a device’s network tie is started, and a offline event will glow when a network tie is incited off or lost.
These events will usually glow once, and so in this recipe we combined in a setInterval timer duty to constantly call a checkConnection method to concede us to obtain changes done to a network. The further of this functionality helps severely and identifies when a user’s device switches from a 3G to a WiFi connection, for example. If this happens, a device would not go offline, though simply change a tie type.
There’s some-more …
Your focus might engage streaming data, remote connectors or another routine that requires a certain turn of connectivity to a network. By constantly checking a standing and type of connection, we can establish if it falls next an optimal turn or endorsed type for your application. At this point, we could surprise a user, or shorten entrance to certain remote calls or information streams to equivocate latency in your application’s response and probable additional financial costs incurred to a user from their mobile provider.