I am trying to make a mobile app in html 5 using PhoneGap.
For this i am going to use button(like the menu button)
When i am searching in google i can find code, but it seems to me that only doesnt work for me.
My code so far from what i have tried(copied and not working):
http://pastebin.com/0U6ipFa7
Is there something wrong in the code?
Do i need to change something in the config so this will work?
document.write() can only be used when your script is inline with the HTML, for example:
<html>
<head>
<title>Foo</title>
</head>
<body>
<script language="javascript">
document.write("bar");
</script>
</body>
</html>
In your case you should use innerHTML:
<html>
<head>
<title>Foo</title>
<script language="javascript">
function onMenuKeyDown() {
document.getElementById("barCntr").innerHTML += "<h1>Menu</h1>";
}
</script>
</head>
<body>
<div id="barCntr"></div>
</body>
</html>
document.addEventListener("deviceready", function () {
document.addEventListener("menubutton", menuKeyDown, true);
}, false);
function menuKeyDown() {
alert('Menu button pressed.');
}
Refer this phonegap link for reference.
You should install phonegap plugins first.
Follow this tutorial here.
Install phonegap/cordova here and even in Eclipse IDE install phone-gap plugin by going to help --->eclipse market
for getting menu option in the mobile on click on mobile option you are supposed to get like setting ,logout....
menu option...
Related
I'm trying to create an app that can run on Android, iOS and Windows Phone using PhoneGap. Currently, I have only phones with Android so I can't know if the problem I'm having exists on iOS and WP.
I tried the notification (alert, beep and vibration) and the camera APIs.
I took the code lines from the Apache Cordova Documentation. I built the app on PhoneGap Built site, scanned the barcode etc. The app is installed and launched perfectly on the phones but nothing is working (for example, when I clicked on the "Vibrate" link, it doesn't vibrate).
The install and all were done by my tutors (I'm in intership), so I guess it's okay for that part.
I checked for the uses-permissions in the AndroidManifest.xml and it's okay.
I've been looking for answers by searching on google, forums etc. but so far, I've found nothing that matches or fixes my issue. That's why I'm posting this message (please don't pay to much attention for language mistake, I'm not an english native speaker).
Thank you in advance for your help.
Edit : 1st phone : Samsung Galaxy Grand Plus (GT-I9060I), Android : 4.4.4. 2nd phone : Samsung Galaxy S5 Prime (SM-G901F), Android : 5.0.2
Using Cordova version 5.0.0. Necessary plugin features have already been added.
Code from the Apache Cordova Documentation for the notifications :
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
// Empty
}
// Show a custom alert
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
'Game Over', // title
'Done' // buttonName
);
}
// Beep three times
//
function playBeep() {
navigator.notification.beep(3);
}
// Vibrate for 2 seconds
//
function vibrate() {
navigator.notification.vibrate(2000);
}
</script>
</head>
<body>
<p>Show Alert</p>
<p>Play Beep</p>
<p>Vibrate</p>
</body>
If you are having cordova version prior to 3.0.0 then you must include plugins manually in config.xml which resides in resources folder.
If cordova version is >= 3.0.0 then you must include these native features via command line.
You need to provide the events such as click, touchend, pagebeforeshow etc. in OnDeviceReady() method. i.e. you have to register listeners to the HTML elements so that they listen to the events.
It seems that I was not using the correct version of the Apache Cordova Documention (5.0.0) but an older version. The following code is taken from the doc and is working only for vibrate(), and once again, nothing is happening for playBeep() and showAlert(). It doesn't make sense.
I also tried the Camera API (from the correct version of the doc) and it's not working either. I really don't understand why it's okay for vibration and not for the other API.
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.notification);
console.log(navigator.vibrate);
}
function alertDismissed() {
alert('Dismissed');
}
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
function playBeep() {
navigator.notification.beep(2);
}
function vibrate() {
navigator.vibrate(3000);
}
</script>
</head>
<body>
<p><a href="#" onclick="showAlert();
return false;">Show Alert</a></p>
<p><a href="#" onclick="playBeep();
return false;">Play Beep</a></p>
<p><a href="#" onclick="vibrate();
return false;">Vibrate</a></p>
</body>
</html>
I have weird behaviour using regular HTML input type button with phonegap (android/eclipse). This is the HTML that is causing my headache:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<form>
<input type="button" value="Rest Call" onClick="restCall(); />
<button type="button" onClick="restCall();">Rest Call</button>
</form>
</body>
</html>
The result of this is two buttons with the correct label/value, "Rest Call". But, to the left of both buttons the same text is also shown. So the label/value is shown twice.
I have spent some time on this now, not finding a solution. Hope someone can help.
Cheers,
OMA
I just tried to create a PhoneGap 1.4.1 project with your HTML in it.
I couldn't reproduce the problem until I added :
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
I thought this was a problem with that specific file but then I remove
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
and it worked fine.
So I think there is a conflict between these two files.
I'm no jQuery/jQMobile expert but are you sure you need both these files (especially jQuery-1.7.1.js) ?
Why don't you change your code to :
<input type="button" value="Rest Call" name="hei" onClick="restCall();"/>
There is some conflict between the two scripts, I get the same behaviour as mentioned by TDeBailleul.
I am doing some ajax calls etc which needs jQuery-1.x.x.js. All the how-to's on using phonegap with jquery also says to do this.
I found now that I need to use a specific version of jquery mobile (jquery.mobile-1.0a4.1.min.js), which is weird. Thanks for pointing me in the right direction TDeBailleul.
I'm taking my first steps in PhoneGap with Android (How come you have to pick a platform, anyway? It's supposed to be cross-platform!). I'm trying to call a RESTful service, get some JSON in return and put it on the screen. Tutorials for this are incredibly hard to find. I'm using the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>JSON Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$.getJSON('http://MyServerIP/json/GetJobDetails/717/MyKey?callback=?', {
success:function(data)
{
data = evalJSON(data);
$('body').append('<strong>X </strong>');
},
error: function()
{
$('body').append('<strong>Error </strong>');
}
});
</script>
</head>
<body>
test 10
</body>
</html>
...But I get no response, neither success nor error. The server reports that it has been hit though, and returned the data. Browsing to the same URL also returns data. How come nothing appears in the emulator?
You can find a good tutorial about Android + jquery mobile here in the official wiki of PhoneGAP here:
http://wiki.phonegap.com/w/page/36868306/UI%20Development%20using%20jQueryMobile
For your problem Make sure this line is in phonegap app manifest file:
< uses-permission android:name="android.permission.INTERNET" >< /uses-permission >
Plus, you can set the server headers to: 'Access-Control-Allow-Origin: *'
Good Luck!
For some reason the success: and error: were killing it, ie this works:
<script type="text/javascript">
$.getJSON('http://MyServerIP/json/GetJobDetails/717/MyKey?callback=?', function(data)
{
data = evalJSON(data);
$('body').append('<strong>X </strong>');
});
</script>
We're developing a jQuery Mobile application using ASP.NET 3.5, and we've run into a problem with lots of large, strangely shaped, and quite distracting tap highlights. I discovered that the inclusion of a ScriptManager in the page seemed to be the culprit, in our case. Here's a simple .aspx page that should reproduce the problem (I'm testing on Android 2.2.2 and iOs 4.2.6).
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
<h1>Oh Hai!</h1>
</form>
</body>
</html>
With the ScriptManager, that h1 tag will produce a tap highlight each time it's touched. Lose the ScriptManager, and the tap highlight goes away. Assuming that the ScriptManager is necessary, is there anything better than doing something like:
<script type="text/javascript">
$(function () {
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
})
</script>
Adding a css rule to our stylesheet doesn't work, because the client-side initialization of the ScriptManager seems to override it somehow.
ScriptManager is adding a click handler to the form element, so in fact webkit is intercepting clicks on the form - H1 just happens to be within it from a DOM perspective.
You could prove this by moving the <form> tag after the <H1></H1> tags, naturally that won't be practical for all your elements.
I think the approach of adding "-webkit-tap-highlight-color" is valid but perhaps you need to do this after script manager does its stuff:
$(document).ready(function(){
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
});
You could also experiment with adding the css inline to specific form/h1 elements just to eliminate css cascading or script issues.
I wanted to use FusionCharts with android 2.2 (may be on emulator).
I tried using Javascript and the HTML but did not get the expected result.
Any help??
My code is as follows :
WebView web;
/** Called when the activity is first created. */
#Override
public void on Create(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
web=(WebView)findViewById(R.id.webView1);
web.loadUrl("file:///android_asset/Fusioncharts/myChart.html");
}
}
Also my html,xml files :
<html>
<head>
<title>My First chart using FusionCharts
</title>
<script type="text/javascript" src="JavaScripts/FusionCharts.js">
</script>
</head>
<body>
<div id="chartContainer">FusionCharts will load here!
</div>
<script type="text/javascript">
<!--
var myChart = new FusionCharts("Pie2D.swf? dataURL=Data.xml","myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
and Data.xml :
The above code just displays me : FusionCharts will load here!
Thanks
Sneha
EDIT> NEW CONTENT:
You might need to enable JavaScript and plugins for the WebView:
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setPluginsEnabled(true);
http://developer.android.com/reference/android/webkit/WebView.html
What does "install Flash plugin" in WebView mean?
How to Enable Flash Plugin in Webview?
Also you might need to set proper path to the SWF and JS files. Please debug or attach code here.
OLD CONTENT:
There seems to be a JavaScript error or FusionCharts not getting loaded to do the rendering as stated by Duniyadnd.
Please check the Android debug (using adb logcat or other processes) if it traces any error.
Moreover, I did an implementation using PhoneGap which you can check-out from:
PhoneGap API to query call-logs
This is a small PhoneGap Android application which has FusionCharts to show call logs from the device. The post though showcases creation of plugin to get the calllog, you might derive the other elements which you require. Hope this might help.