These are my technologies,
- HTML5
- Jquery mobile, Jquery, Java Script
- Css
- Cordova
We are developing app using HTML 5 and we need to access phone (Android,iPhone,Windows Phone) resources, such as alarm (to create reminder).
Questions,
- Can we access native resources of mobile phones through this technologies ?
- Do we need different coding to access different mobile operating systems ?
- What are the pros and cons of this method ?
- what is the Best method of doing this ?
- Any suggestions ?
Sample code or examples for access Android, Iphone and Windows phone 8 alarm manager through javascript?
Did any one use this Background Service Plugin for this task?
I asked question regarding this use for access alarm manager
do any one have sample code or give me a step by step guidance, how to use this for access Android alarm manager ?
I try to access native code through java script like this question and answer but it's not working.
When i clicked the button;
- in eclipse logcat; under cordova tag,
Uncaught TypeError:Object [object Object] has no method 'getTelephoneNumber'
- in eclipse logcat; under chromium tag,
[INDO:CONSOLE(22)]"Uncaught TypeError:Object [object Object] has no method 'getTelephoneNumber'", source: file:///android_asset/www/index.html (22)
my phonegap version is 2.7.0 and Emulator API level 19. what is the problem in here ? did i miss anything ?
After a long running process i manage to come up with solution to the android devices.
1) Access native code using javascript is possible
2) Using javascript interface raise a threat of xss vulnerability, but in Latest API Level 19 eliminated this. (Read more...)
Let the code speak; MainActivity code first
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
public class MainActivity extends DroidGap
1) onCreate method code
super.init();
WebView webView=new WebView(this);
webView.getSettings().setJavaScriptEnabled(true);
//Add these lines according to your requirements
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setSaveFormData(true);
webView.getSettings().setAllowContentAccess(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowFileAccessFromFileURLs(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
//webView.getSettings().setSupportMultipleWindows(true);
webView.getSettings().setSupportZoom(true);
webView.setWebViewClient(new WebViewClient());
webView.setClickable(true);
2) To complete next step you need to have Reminder class with in your MainActivity class and what ever html file in your assets folder. In my case i have Login.html in assets/www/Phone/Login.html
webView.addJavascriptInterface(new Reminder(this), "Reminder");
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/www/Phone/Login.html");
setContentView(webView);
3) Here is my Reminder class and its constructor
public class Reminder {
private Context con;
public Reminder(Context con){
this.con=con;
}
}
4)ReminderReceiver class
public class ReminderReceiver extends BroadcastReceiver {
// Vibrator object
public Vibrator vibrator;
long[] pattern = { 0L, 250L, 200L, 250L, 200L, 250L, 200L, 250L, 200L,
250L, 200L, 250L, 200L, 250L, 200L };
// Ringtone object
Uri ringT;
Ringtone ringTone;
@Override
public void onReceive(Context context, Intent intent) {
String remindText = intent.getStringExtra("text");
int receiverID = intent.getIntExtra("AlrmId", 0);
// Notification creation
NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(
context).setSmallIcon(android.R.drawable.ic_popup_reminder)
.setContentTitle("Reminder").setContentText(remindText);
// Create vibrator pattern
vibrator = (Vibrator) context
.getSystemService(Context.VIBRATOR_SERVICE);
vibrator.vibrate(pattern, -1);// No repetition
// Notification tone creation and play
ringT = RingtoneManager
.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
ringTone = RingtoneManager.getRingtone(context, ringT);
ringTone.play();
// Create toast and show on center of the screen
Toast toast = Toast.makeText(context, remindText, Toast.LENGTH_LONG);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.show();
// end of toast...
// Show status bar notification
NotificationManager mNotificationManager = (NotificationManager) context
.getSystemService(Context.NOTIFICATION_SERVICE);
mNotificationManager.notify(receiverID, mBuilder.build());
}}
5) Method that can call through JavaScript and responsible to add Alarm object into System Alarm Manager. In Reminder class
@JavascriptInterface
public void addReminder(int mYear, int mMonth, int mDay, int mHour, int mMinute){
Calendar c = Calendar.getInstance();
//set Reminder time and date into calendar object
c.set(Calendar.YEAR,mYear);
c.set(Calendar.MONTH, mMonth);//Don't use exact numeric value of the month, use one minus.Ex: April=>as 3
c.set(Calendar.DATE, mDay);
c.set(Calendar.HOUR_OF_DAY, mHour);
c.set(Calendar.MINUTE, mMinute);
c.set(Calendar.SECOND, 0);
//Unique Alarm ID creation,
int alrmId=0;
alrmId=Integer.parseInt(mMonth+""+mDay+""+mHour+""+mMinute);
//Alarm task creation
Intent in=new Intent(con,ReminderReceiver.class);
in.putExtra("text", "You have a Reminder!");
in.putExtra("AlrmId", alrmId);
PendingIntent pi;
pi = PendingIntent.getBroadcast( con, alrmId, in,0 );
AlarmManager am;
am = (AlarmManager)(con.getSystemService( Context.ALARM_SERVICE ));
am.set(AlarmManager.RTC_WAKEUP, c.getTimeInMillis(),pi);
}
6) Now, you need to edit your Android Manifest.xml
set permission,
<uses-permission android:name="android.permission.VIBRATE" />
And Register ReminderReceiver class, add this lines with in tag (not inside of any other tags !!!),
<receiver android:name=".ReminderReceiver">
</receiver>
7) Finally in your html file add button, add javascript function, call it in button click event and inside of that function call addReminder method
function test() {
Reminder.addReminder(2014,3,4,12,30);
}
Hope this answer will help who trying to using Native function of Android phone while developing through Phonegap
Answers:
1.Can we access native resources of mobile phones through this technologies ?
Yes, you can by using javascripts.
2. Do we need different coding to access different mobile operating systems ?
Yes, there isn't one size fit all.
3. Suggestions:
Check the document of each individual mobile system. You will find the guidelines as well as examples.