Discover Top Posts Tagged with #phonegap tutorial

Technical Perspectives of PhoneGap

PhoneGap an open source development framework also popular as Apache Cordova allow coders to develop cross platform mobile apps for various operating systems including windows, android and iOS. To read more, visit website now!

Click: https://www.chetu.com/blogs/technical-perspectives/technical-perspectives-phonegap.php

#Mobile Development Framework #History of PhoneGap #PhoneGap Tutorial #PhoneGap Technical Architecture #Mobile Applications with PhoneGap #PhoneGap Features

New Post has been published on www.eduonix.com - How to create and write data to a file in phonegap

How to create and write data to a file in phonegap

In this tutorial we will learn how to create and write data to a file in phonegap where we can create our own notes and save it in the sdcard .

To learn how to create and write data to a file in phonegap follow the steps given below :

First of all download and install Xampp server and gitbash in your machine .

Go to Xampp -> htdocs folder .

In this htdocs folder create a new folder called as Note .

Now in Note folder create a new html file called as index.html and open it with Notepad++ or any other text editor and write the given code in it :

<!DOCTYPE html> <html> <head> <meta name="viewport" content="user-scalable=no,initial-scale=1, maximum-scale=1,minimum-scale=1, width=device-width" /> <title>PhoneGap App</title> <script src="js/jquery-1.10.2.min.js"></script> <!-jquery-1.10.2.min is the name of my file> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript"> var fileObject; document.addEventListener("deviceready", onDeviceReady, true); function onDeviceReady() window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,onFileSystemSuccess, fail); function onFileSystemSuccess(fileSystem) fileSystem.root.getFile("readme.txt", create: true, exclusive: false, gotFileEntry, fail); function gotFileEntry(fileEntry) fileObject = fileEntry; $('#saveFile_btn').on('click', function() saveFileContent(); ); function saveFileContent() fileObject.createWriter(gotFileWriter, fail); function gotFileWriter(writer) var myText = document.getElementById('my_text').value; writer.write(myText); writer.onwriteend = function(evt) $('#message').html('<p>File contents have been written.<br /><strong>File path:</strong> ' + fileObject.fullPath + '</p>'); var reader = new FileReader(); reader.readAsText(fileObject); reader.onload = function(evt) $('#contents').html('<strong>File contents:</strong> <br />' + evt.target.result); ; ; function fail(error) alert(error.code); </script> </head> <body> <input type="text" id="my_text" /> <input type="button" id="saveFile_btn" value="Save" /> <div id="message"></div> <div id="contents"></div> </body> </html>

Here are the screen shots for the code :

Now go to jquery.com and click on the link ” Download the compressed product…..” as shown below by an arrow :

After clicking on the link you will be navigated to the next window as shown below :

So now in your Note folder create a new folder called as js and in this js folder create a new file called as jquery.js and copy paste all the above jquery code shown in the above image in jquery.js file.

Thus now in Note folder you will have the following contents :

Now go to Xampp control pannel and start the apache and Mysql modules .

Now enter the following url localhost/Note in your browser and you will have the following output :

Now go through all the given steps to create an apk file of our application .

Hence after writing the code save your document and now sign in into your Github account by visiting github.com :

So now enter a username ,your email id and password in the respective tabs and click on the Sign up for GitHub button .

After you click on the signup button you will get the following window :

Now click on the ‘+’ icon on the right hand side as indicated by the red arrow and then click on the “ New repository ” as indicated by the blue arrow .

After clicking on the New repository you will be navigated to the next window ,specify a Repository name ,select a public radio button and click on the Create repository button as shown in the image below :

So after clicking on the Create repository button you have the following window :

Go to xampp -> htdocs .

In htdocs you have your Note folder created .

Now go to your start menu -> GitBash -> right click on it -> Send To -> Desktop (create a shortcut) of GitBash on Desktop as shown below :

So now on Desktop you will have a GitBash icon .

Now Right Click on the GitBash icon on the desktop and go to properties and in the Start in edit box set the path as : c:\xampp\htdocs as shown in the image.

Now Click on Apply and OK button .

Now start the GitBash application from the desktop and you will have the following screen :

Now insert the following command as shown below in the gitbash command prompt window..

ls cd Note(that is your folder name in htdocs folder) ls

Thus after inserting the commands you will have the following view of your window :

After you get this , insert further commands in the same command prompt window as given below :

git config --global user.name “username of your github account” git config --global user.email “email of your github account” git config --list

After inserting this command your gitbash command prompt window will have the following look , check whether your username and email you entered has been generated in the list :

After this insert the following commands :

git init ls –a git add . git commit –am ‘initial commit’

You will have the following window :

Now go to your github account where you had created the Note repository and copy the add origin command and push command and paste it in the gitbash command prompt respectively.

So after adding the commands you will be asked for your github username and password ,so you will have the following window :

Thus now the push operation is complete, so now we are ready to build our application .

Now go to www.build.phonegap.com and click on Sign in tab present at the right.

After clicking on the Sign in button you will get the next page where you have to click on the Sign in with GitHub button as shown by the arrow head ..

After that you will be navigated to the next page where you have to click on the new app button as shown by the red arrow head.

After clicking on the new app button ,you will get the following window where you have to select the open-source tab and click on the dropdown pointer and select your app as shown in the image :

NOTE : Here you will have your own application name that is the name given by you while creating the repository.

When you select your app the fetching process will start as shown in the figure :

After the fetching is complete you will get the following window :

Now click on the Ready to Build button as shown by the red arrow in the image and you will get the following screen :

Click on the android icon and you will have the following window popping up to save the apk file.

Now save your apk file and insert it in your android mobile phone and install it ,you will have the application running on your mobile phone

Thus we have successfully learnt how to create and write data to a file in phonegap .

#android tutorial #Create and write data in phonegap #Create and write data to file #How to create and write data to a file in phonegap #Phonegap Tutorial #Web Development #Android Tutorials #PhoneGap #Web Programming Tutorials #Windows Phone Tutorials

New Post has been published on http://www.toontuts.com/mobile-app-frameworks-hibernate-vs-native-apps/

Mobile App Frameworks( Hibernate ) vs.. Native Apps

At those times, as Java2ME was one of the few opportunities “apps” (if you could call it that this time) to write for a non-smartphone, the question was not how to create applications for a phone.

Since then, the majority of humanity is now migrated to smartphones; always seem more options for the development of apps. The most common variant are Native Apps and Mobile Web Apps.

Here the question arises: “The app you want to build on what technology?” There is no right and no wrong answer. However, a statement is always “Use the right tool for the job”. First must be found out, what requirements of the app. It does not convey the most suitable technology.

Each technology has its advantages and disadvantages over the others. To this end, the advantages and disadvantages of each implementation variant are listed in a simple form. It reveals what is the better tool for the implementation of the app easily.

Advantages Native Apps:

-Graphical representation (3D functionality, animations …) -Performance -Full access to hardware functionality (storage, camera, GPS, sensors …) offline functionality

Benefits Mobile Web Apps:

Low-cost platform-independent maintenance of content -development time -very few device-specific changes

At present, the foundation of Responsive Design and Mobile App frameworks is that based on Java Script and HTML5. It is filed on methods to get native apps advantage positions. This upswing and new possibilities is the reason why more blog entries follow, in which mobile app frameworks be detailed under the magnifying glass.

Hibernate Frameworks are Phonegap, Flex Mobile, Sencha touch…

#PhoneGap Tutorial #Tutorials

New Post has been published on http://www.toontuts.com/push-notifications-with-phonegap/

Push notifications with PhoneGap

With the spread of mobile devices and the accompanying permanent availability of the end user, enjoy ‘Mobile apps’ increasing popularity. They have become so knit that, once installed, inform the user, provided determine events in preferred applications, such as Facebook, WhatsApp or eDarling occur. This article describes an app that after once logged into Google GCM services that can be “fed” by third parties with push notifications.

The PhoneGap (PG) framework allows it based on HTML, CSS and JavaScript hybrid applications to develop and operate under the cloak of a native app. PG is modelled it on by Sun Microsystems for Java invented slogan “Write once, run everywhere” on. A standard PG app can be built using the PG own, cloud based build environment for various end-device platforms, currently up to seven and deployed. It provides interfaces to different hardware components of the respective device which the user via simple JavaScript-based APIs can use such as the compass, the phonebook and the GPS system. For applications in which the provided API is not sufficient, the developer can so-called plug-in the build. Plug ins allows the developer of an HTML page to attract hardware components or native services of the device out and use. For our example, we create a plug-in, which logs on our device with the GCM service notifications contrary.

Google cloud messaging

Google Cloud messaging (GCM) is a Google service that allows sending information from external applications on apps on Android devices. The message can have up to 4 KB in size. The messages are usually much shorter, because they should just tell the user that a State has changed and thus indirectly ask him again to open the app. Google offers a pretty good Guide to.

Installation

At this point, it is useful to “pull the source code for our plug-in from GitHub” and to start in an IDE. To get the code runs, a Version of PhoneGap is required. The downloaded zip file contains the libraries for multiple environments. From the Android directory, we need the Cordova VERSION.jar, which must be set in the libs directory. In addition, we take the Cordova VERSION.js file and place it in the assets/wwwdirectory. At this point, the application should be compiled. In addition to the plug-in source code we need a Google account, which must be unlocked for the GCM service. Google provides very good documentation for the activation of the GCM service. In the course of the document, we will need the project ID as well as the server API key. On both tokens will be entered in the document (fig. 1).

Figure 1: The red bar covers the project ID, the blue bar the API Key

GCM and its predecessor

Google cloud messaging is the successor of C2DM [5], the cloud-to-device messaging service. The plug-in-dropped under GitHub worked in its first version with the C2DM service. According to Google’s migration document works resource-saving the new version, provides a better API and spared a longer registration with Google for the service.

The PhoneGap application

We create a PG-plug-in for our app. This will ensure that our device with the GCM service is activated. Continue to accept all notifications, and distribute. A PG-plug-in consists of the following parts:

JavaScript file (the front-end part of the plug-in the)

Java file (the back part of the plug-in the)

Extension of the res/xml/plugins.xml (registry)

Adjustment of the main activity

Our plug in-JS file is named NPNPlugin.js and is located along with the other HTML and JavaScript files under assets/www. As shown in Listing 1, the plug-in initialization at PhoneGap logs on and gets the right backend part of the plug-in the on. Further functions in the file are used to communicate with the Java layer. Examples for all functions I describe their syntax based on:

Listing 1

In line 4, we check against the passed action (activatePush). We register our app with the GCM service via the activatePush method. In line 7, we prepare the response for the JS layer. The PluginResult is a PG object, which assembles the “answer” for the JavaScript layer.

Functioning of the PluginResults

To get a deeper understanding of the functioning of the PluginResult class, better a look at the original source. As an example the toSuccessCallString method is listed here (listing 3).

The toSuccessCallString method builds together a JS outputs string values passed, which is then brought to the execution by the JavaScript engine of the device. The recess in the front end of our application is performed in this manner.

In line 8 of Listing 2, we ensure that the callback ID can be used to JS page again. If this entry, so the callback ID is removed after each execution of a JS internal map, and is therefore no longer available. Connect we are, so we need to pass the project ID with the GCM service. The value for this is located in the NPNPlugin.java class. The current value (42) to be replaced as follows:

/ / GCM project id public final static String project_id = "42" ;

Next, in the res / xml / plugins.xml added file, the entry for our plug-in. This file identifies all the plug-ins, and PG indicates the Java implementation. What is still missing is the embedding of PG in our main Activity. Listing 4 illustrates this

The start-Activity derives now from the DroidGap from and thus integrates the PG framework. In line 5, we give the framework the file that will act as a home page, and so starts the PG app.This is our described by its very nature, PG-plug-in. Figure 2 shows the sequence diagram for the activation of the push notification, with the ArgoUML was created.

In addition to the permission, to register, to the GCM service, NPNReceiver can accept messages. We look at it the NPNReceiver up close. With the previously obtained expertise in PG-communication through the layers, we already have the bulk of the work behind us. The Central method of aBroadcastReceiver is the onReceive(Context context, Intent intent)method. Here also the notifications by the GCM service set up. For incoming notifications, the app in the States may be online or offline .There is a separate flow for each of these States. The app is in the foreground, is deliverNotification (bundle b) in the class NPNPlugin the notification with the key to the method: msg broadcast. The JavaScript engine is triggered from the method out. It is worth mentioning in this regard that we have defined a fixed JS return point for incoming notifications in the NPNPlugin –(window.plugins.NPNPlugin.notificationCallback(%s);). Is the app in the background, the following actions are performed:

We can add a notification icon in the system status bar of the end-device (listing 6).

We make sure that the app starts, once the icon is clicked (listing 7).

We create a toast notification and give the user a further visual cue that a message has arrived (see Listing 8).

Listing 7 Intent mainIntent = new Intent(Intent.ACTION_MAIN); mainIntent.setClass(context, NPNActivity.class); mainIntent.setFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP); mainIntent.putExtras(intent.getExtras()); mainIntent.putExtra(NOTIFICATION_BOOT,true); PendingIntent contentIntent = PendingIntent.getActivity(context.getApplicationContext(), 0, mainIntent, PendingIntent.FLAG_UPDATE_CURRENT); notification.setLatestEventInfo(context, "Jax", ticker Text, contentIntent); nm.notify(1, notification);

Listing 8 LayoutInflater inflater = LayoutInflater.from(context.getApplicationContext()); View layout = inflater.inflate(R.layout.notification, null); ImageView image = (ImageView) layout.findViewById(R.id.image); image.setImageResource(R.drawable.icon_small); TextView text = (TextView) layout.findViewById(R.id.text); text.setText(tickerText); Toast toast = new Toast(context.getApplicationContext()); toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0); toast.setDuration(Toast.LENGTH_LONG); toast.setView(layout); toast.show(); Notification.FLAG_AUTO_CANCEL;

#PhoneGap Tutorial

New Post has been published on http://www.toontuts.com/phonegap-plugin-for-google-analytics/

PhoneGap Plugin for Google Analytics

Recently we learned about the new Google Analytics API for mobile devices. Unfortunately, my “quick little experiment” was quite horrible, so I thought I would write my experiences to help others avoid the same mistakes that I made.

On the basis of the documentation for PhoneGap Build and this plugin, I went to the plugin README file. The API to initialize, and the track events was pretty darn simple. Everything is asynchronous, but in most cases, you can probably ignore the results. He wants to waste and forget it.

To start we included in the libs folder libraries you downloaded from Google Analytics and we already take for Admob to upgrade to the new version.

Let’s go to the point. The first thing we need to do is to include a new file called analytics.xml in the folder “res/values/analytics.xml”.

<?xml version="1.0" encoding"utf-8" = ?> <resources>  <string name="ga_trackingId">UA-XXXXXXXXX-1</string>  <bool name="ga_autoActivityTracking">true</bool>  <bool name="ga_reportUncaughtExceptions">true</bool> <bool name="ga_debug">false</bool> </resources>

Where UA-XXXXXXXX-1 is the code that Google has given us to register us. We can activate the debug mode in the key ga_debug To begin programming, in the main Activity we overwrite a couple of methods to make use of Google Analytics. With this,we get the Tracker to start and stop next to our application.

/** * start Google Analytics */ @Override public void onStart() { } super.onStart(); EasyTracker.getInstance().activityStart(this )); } /** * stop Google Analytics */ @Override public void onStop(){ } super.onStop(); EasyTracker.getInstance().activityStop(this )); }

To create the Plugin of PhoneGap, declare a class called GoogleAnalyticsPluginToontuts within our package of plugins toontuts.plugins. This class in debut single will have a single action that will be responsible for registering change of page. It is important once registered the change of page do a dispatch to send the data to Google.

/** * Plugin for Google Analytics * @author toontuts * */ public class GoogleAnalyticsPluginToontuts extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { try { if (action.equals("sendChangeView")) { callbackContext.sendPluginResult( new PluginResult(PluginResult.Status.OK, sendChangeView())); return true; }else { callbackContext.sendPluginResult( new PluginResult(PluginResult.Status.INVALID_ACTION)); return false; } } catch (JSONException e) { callbackContext.sendPluginResult( new PluginResult(PluginResult.Status.JSON_EXCEPTION)); return false; } catch (Exception e) { callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.ERROR)); return false; } } /** * Make a page in Google Analytics */ private Boolean sendChangeView(){ GoogleAnalytics myInstance = GoogleAnalytics.getInstance(this.webView.getContext()); myInstance.getDefaultTracker().sendView(this.webView.getUrl()); GAServiceManager.getInstance().dispatch(); return true; } }

To register the component in the config.xml file include the declaration of the new Plugin.

Once registered the Plugin now we can make use of it in our HTML5 making use of Javascript. For this reason, we give an example of a method that is executed in the onDeviceReady registering for the event of jQueryMobile pageshow to own Plugin named to register the change of page in Google Analytics

function loadGoogleAnalytics(){ } $(document).delegate('[data-role=page]', 'pageshow' ), function() { cordova.exec((result){}, errorHandler, function) "GoogleAnalytics", 'sendChangeView', [$(this( ).attr('id' ))]); } ); }

#PhoneGap Tutorial

New Post has been published on Toontuts | Toonlite Tutorial Blog | HTML5 Tutorials | Web Designing Tutorials

New Post has been published on http://www.toontuts.com/ibeacon-the-vision-is-fine-but-dont-abuse/

IBeacon: the vision is fine but don't abuse

Compile/Amie

Although represented by the Internet technology industry in nearly a dozen years to subvert the traditional industry one after another, but as far as people shop online shopping experience, which seemed not to touched. Now Apple, with its dusty iBeacon technology is here!

On February 19, the Tech Media Re/code published an article, iBeacon technology progress in entering public life a preliminary reviews. In the author’s view, while iBeacon is a reliable and low-cost positioning technology solutions, but if you want to change online shopping patterns, there is still a long way to go.

Being the original translations of the following:

Few technologies can seize opportunities so quickly as iBeacon. Remember a few months ago, iBeacon was made at the Apple WWDC Conference for a less-watched new words. At that time, Apple’s position on it is only “available technologies applicable to iOS 7 system”, they want to get more support from industry. And now it only took a few short months, iBeacon will shine in the business world, countless supermarkets and retailers were handed to “olive branch”, expressed the hope that with their joint cooperation, even the United States National Football League, major league baseball and other famous sports are beginning to adopt this new technology.

In fact, the iBeacon made up the GPS technical deficiencies, provides users with a low-cost, less power consumption indoor location tracking technology. It according to the user’s location and needs through mobile applications to provide intelligent electronic services. It can be said that by indoor positioning technology and data integration experience, iBeacon has created a new type of business model, and in this way achieve a truly “selling the right product at the right time to the right consumer groups” this marketing idea.

For consumers, iBeacon in a new, more convenient way, telling consumers what they need, to go and buy these things. As a new technology of automatic, it not only can accurately tell you at their seats in the gym in the first few rows, at a supermarket planning procurement routes for you according to your needs … … All of these exciting upgrade experience, was brought by the iBeacon indoor positioning technologies. It gives people a real sense of comfort, but also through this unique experience and created a unique brand of value for themselves.

Crisis

However, the dissemination of any of these technologies will inevitably have their own “knee-jerk reaction”, iBeacon is the same. Just like when they push out some people use it for spam pushing, when promotion, any new technology could not guarantee is only used to do good and are not used to do bad things. Therefore, with the popularity of iBeacon technology, was wrong to use such things cannot be avoided, but Apple should do its best to avoid this kind of thing happens, or when it happens, for some companies, they may pay a heavy price.

It is true that iBeacon technology allows businesses to send customers who buy stuff just to welcome, but also do when shopping at the customer end aftermarket survey. This kind of customer-orientated service certainly seems very simple, but if you come to think of it, things would be so perfect? When you push the open and found that this is your third, fourth is received from other stores of similar goods when push, you will begin to fret anymore? By the fifth or sixth time, you might get this annoying program directly phone pushes the delete–rather than shutting down, or some such simple and brutal way more convenient, right? If there were as before Nineth or tenth shop give you push it? If you’ve determined completely from this iBeacon to build back to Phantom, want these machines to say “Goodbye”?

Seriously, for software developers, they should consider, is actually doing to make sure users do not remove their client. Some people fantasize, supermarket retailer can be turned into their own advertising platform, dreaming in each corner of the aisles for a different brand advertising. However, when all kinds of hype surrounds each aisle of supermarkets, selling all the latest “Essentials”, you probably can’t even phone down.

Spent about 100 dollars, based on iBeacon technology for LE Bluetooth headset brings a whole new set of changes. This change is based on innovative interactive experience to customers, it helps to further tap the phone and consumer value. As long as it is in universal time to be more cautious, careful, this innovation will provide us with an unprecedented change.

Recommended

The next six months will be crucial period is the destiny of iBeacon series. Merchant fast positioning, only guarantee their products to be more consumer-focused in order to survive in this competition. For this reason, we also give you a few:

adoption of mobile applications, time pushes information to provide customers with high-value products.

using its application characteristics, adjust push content.

with information relating to the user’s interests and preferences and feedback, promote divided audiences.

push the corresponding management system, features such as frequency capping, pushes the delay, to ensure that users do not push too much “you go”.

a balanced set from iBeacon to navigate successfully sent the information of the time difference and distance difference.

If you can do it well, then your customers will feel satisfied. This is equipped with a dedicated guide for all customers, as they can buy cheap products, but also access to personalized services tailored for their service–which is what all consumers dreamed.

IBeacon technologies will influence the consumer’s shopping experience? This very moment, millions of people are curious about this. But curiosity and don’t forget, this is an in-depth Interior line, collect customer data, such as an excellent opportunity for expansion into other areas of life.

Interior cellphone technology whose time has come. Although iBeacon is still in its infancy during the beginning, but what WINS is defeated, the answer will soon be announced. But no matter how the situation flips, it is an immutable truth: only the real customer experience as a Center for innovative businesses can have the last laugh.

#PhoneGap Tutorial

New Post has been published on Toontuts | Toonlite Tutorial Blog | HTML5 Tutorials | Web Designing Tutorials

New Post has been published on http://www.toontuts.com/adding-websocket-support-to-phonegap-android-platform-make-the-default-socket-io-preferred-channel-selection/

Adding websocket support to Phonegap Android platform, make the default socket.IO preferred channel selection

HTML+CSS+Javascript can be used to build cross-platform mobile reference, really is very good, highly recommended.

Better yet, can be built using its cloud services (https://build.phonegap.com/apps ), after the native application written (guaranteed Home index.html, involving CSS/JS is stored in), packaged as a zip, upload, automatic deployment packages, automated build different platform for us, is very convenient.

On the surface, everything was perfect, but after a deployment to the Android system, found socket.IO websocket two-way channel cannot be used, socket.IO defaults to the XHR-long polling traffic patterns. Some frustration.

In the case of real-time interaction data are substantial, compared to XHR-long polling and JSONP polling,Websocket/Flashsocket features unsurpassed speed advantages with bi-directional data transfer channel, through observation can clearly feel it.

The causes of

My Android system is 2.3, the native browser websocket Protocol is not supported (ucweb,QQ,opear mini supports a full HTML5 spec).

Phonegap APK package conversion, built-in browser called Android, thus resulting in websocket is not available.

According to research native Android 2/3.* browser does not support the websocket, Android 4.*, haven’t tested.

How to identify browser support for HTML5, the browser visits http://html5test.com can access support for HTML5, and run.

Well, according to rumors, after the 2 version of Phonegap, adding websocket support for Android, but the current version is 1.7.

Solution

Animesh Kumar developed websocket-Android-phonegap project, have done that Phonegap support for websocket client protocol, using Java NIO preparation of websocket client protocol connections, and Phonegap supports a custom component, call each other open architecture supports JS and JAVA code, which led to webscoket.js in disguise.

Its DWR taste, but more flexible.

There is also a simple socket.IO Android client implementation:

https://github.com/koush/android-websockets#readme

Are interested in, you can refer to.

Was going to build a websocket client using the Netty, then combined with js, but there are open source implementations, not behind closed doors.

In the new Android Project in Eclipse project chatdemo

Animesh Kumar websocket-Android-phonegap Java files into the project phonegap-websocket-support.jar the package, stored in a Android project’s libs directory

Websocket.js stored under the assets/www/js directory

Modify the project start class App.java

Add <script src= “js/websocket.js” ></script>

A brief description of 1. App.java modifications:

import org.apache.cordova.DroidGap; import android.os.Bundle; import com.strumsoft.websocket.phonegap.WebSocketFactory; /** * * @author Toontuts * @time 2012-5-10 * @version 1.0 */ public class App extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); / / Bind websocket support appView.addJavascriptInterface(new WebSocketFactory(appView), "WebSocketFactory"); } }

Ensure that inherits DroidGap, and specifying the binding statement:

//Bind the websocket support appView.addJavascriptInterface(new WebSocketFactory(appView), "WebSocketFactory");

JAVA-side setting is completed.

2. modification of client Need to fiddle in the HTML page side, giving priority to set some environment variables loaded websocket.js, socket.IO detected websocket support. Websocekt.js initialization code:

Need to pay attention to its initialization code:

/ / Window object var global = window;

/ / WebSocket Object. All listener Methods are cleaned up! var WebSocket = global.WebSocket = Function (url)

......

socket.io client websocket snippet:

Look at the websocket test function: WS.check = function () { return ('WebSocket' in global && !(' __addTask' in WebSocket)) || 'MozWebSocket' in global; }; Naturally, custom websocket.js and socket.IO is able to naturally link them together.

Must therefore be JS page load order is:

<script src="js/websocket.js"></script> <script src="js/socket.io.min.js"></script>

At the end HTML page, we only need to add a line references, do the websocket socket.IO preference, the Android platform is very simple, is also used.

For other platforms, you do not need to be considered, simply packaged into ZIP package under the/chatdemo/assets/www directory (remember to get rid of), can be automatically uploaded to the cloud to build platform to build on.

Small summary

Phonegap Android platform under support for websocket, steps are simple:

Build Android in the Eclipse project

Copy jar, and socekt.js to the directory

Modify App.java (other Android startup class method name is not the same, but the method body)

At Home or if you need to page socket.IO js medical front, add references

#PhoneGap Tutorial

New Post has been published on Toontuts | Toonlite Tutorial Blog | HTML5 Tutorials | Web Designing Tutorials

New Post has been published on http://www.toontuts.com/phonegap-splash-screen-example/

PhoneGap Splash Screen Example

In the Eclipse development environment, developed with phonegap+jquerymobile, how to set up the SplashScreen? Quite simply, in the Java file in the src folder 1.super.setIntegerProperty(“splashscreen”,R.drawable.splashscreen); 2.super.loadUrl(“file:///android_asset/www/index.html”, 5000); Two codes, 5,000 for sustained 5s splash time clock.

#JavaScript and JQuery #PhoneGap Tutorial

New Post has been published on Toontuts | Toonlite Tutorial Blog | HTML5 Tutorials | Web Designing Tutorials

New Post has been published on http://www.toontuts.com/adding-websocket-support-to-phonegap-android-platform-make-the-default-socket-io-preferred-channel-selection/

Adding websocket support to Phonegap Android platform, make the default socket.IO preferred channel selection

HTML+CSS+Javascript can be used to build cross-platform mobile reference, really is very good, highly recommended.

The causes of

My Android system is 2.3, the native browser websocket Protocol is not supported (ucweb,QQ,opear mini supports a full HTML5 spec).

Phonegap APK package conversion, built-in browser called Android, thus resulting in websocket is not available.

According to research native Android 2/3.* browser does not support the websocket, Android 4.*, haven’t tested.

How to identify browser support for HTML5, the browser visits http://html5test.com can access support for HTML5, and run.

Well, according to rumors, after the 2 version of Phonegap, adding websocket support for Android, but the current version is 1.7.

Solution

Its DWR taste, but more flexible.

There is also a simple socket.IO Android client implementation:

https://github.com/koush/android-websockets#readme

Are interested in, you can refer to.

Was going to build a websocket client using the Netty, then combined with js, but there are open source implementations, not behind closed doors.

In the new Android Project in Eclipse project chatdemo

Animesh Kumar websocket-Android-phonegap Java files into the project phonegap-websocket-support.jar the package, stored in a Android project’s libs directory

Websocket.js stored under the assets/www/js directory

Modify the project start class App.java

Add <script src= “js/websocket.js” ></script>

A brief description of 1. App.java modifications:

Ensure that inherits DroidGap, and specifying the binding statement:

//Bind the websocket support appView.addJavascriptInterface(new WebSocketFactory(appView), "WebSocketFactory");

JAVA-side setting is completed.

Need to pay attention to its initialization code:

/ / Window object var global = window;

/ / WebSocket Object. All listener Methods are cleaned up! var WebSocket = global.WebSocket = Function (url)

......

socket.io client websocket snippet:

Must therefore be JS page load order is:

At the end HTML page, we only need to add a line references, do the websocket socket.IO preference, the Android platform is very simple, is also used.

Small summary

Phonegap Android platform under support for websocket, steps are simple:

Build Android in the Eclipse project

Copy jar, and socekt.js to the directory

Modify App.java (other Android startup class method name is not the same, but the method body)

At Home or if you need to page socket.IO js medical front, add references

#PhoneGap Tutorial

#phonegap tutorial

Trending Tags

Recently Viewed Tags

#phonegap tutorial