I am developing Sencha touch application that will work on iPhone. Now application is ready and works fine in phone browser. But, now I want to distribute my application so I am using PhoneGap.
All my HTML and JavaScript pages are deployed at http://170.60.26.20:8099/Sencha/Html/index.html. Now i want to load that URL using phonegap. Suggest me the steps how could I do this.
I have installed phonegap-1.2.0-0 version.
Create new Phonegap App in xcode and you just need to modify already exist index.html file in www folder.
You can use window.location javascript method to load your web app in phone app.
In PhoneGap(Cordova).plist, add your server to the ExternalHosts list and make OpenAllWhitelistURLsInWebView to YES.
Please try following code to run your html pages in phonegap app.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LoadUrl
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
window.location="http://web.me.com/djpinter1/iPhone/jqtouch/demos/main_tabbar/#ui";
//window.location="http://170.60.26.20:8099/Sencha/Html/index.html";
}
</script>
</head>
<body onload="onBodyLoad()">
</body>
</html>
In your xcode , start a new project as phonegap project. Then copy the files from your project folder to www folder in the phonegap project.Keep in mind that index.html file should be in the parent folder , otherwise you have to change the url accordingly in the corresponding class that invokes a webview.
You can follow this link
http://wiki.phonegap.com/w/page/39991939/Getting%20Started%20with%20PhoneGap%20iOS%20using%20Xcode%204
Hope it will help
Related
I've noticed while I deploy my flutter web project with nginx, after doing a "flutter build web" that if I don't delete the cache the old files are still in my chrome browser. Is there a way to force a refresh for users automatically if I deploy updates?
Every browser does caching and is completely normal when you don't immediately see the changes on the client browser. It does take some time for the browser to realize the code has been changed on the server and needs to update its local cache. And is completely depends on the client browser settings and client's connection speed.
But if your situations demand the client to have an updated version of the website in no time, there is a workaround.
The main.dart.js file is something like this below
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Flutter App</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
In order to force browsers to reload the app each time we want that, add a unique parameter to the main.dart.js script-src (for example a version, though it can be anything, even just a random number after ?). The new index.html will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Flutter App</title>
</head>
<body>
<script src="main.dart.js?version=1" type="application/javascript"></script>
</body>
</html>
Cons:
You have to manually add the incremented version number every time you want to deploy. Maybe you can write a script for doing that.
It does still take time if the client has slow internet connection. The problem arises when browsers like Chrome show Lite(cached) version of the website untill internet connection is fast enough.
Previous versions still persist to live on the client's browser till timeout
I want to convert my website to mobile application with Intel XDK. So , how to do this with web view.I want to load the URL on the current web view not open it on a new page with the native browser.
Easy way is to use window.location= to load URL:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<script src="cordova.js"></script>
</head>
<body>
<script>
window.location = "http://www.yourwebsite.com";
</script>
</body>
</html>
Better way is to use InAppBrowser and connection Cordova plugins to load website, so that you can handle connection loss and reload, it will load complete website in background and then display, here is code: https://github.com/krisrak/html5-cordova-webapp
I can read english to some degree but I'm not good at writing.
Then I appologize for any rudeness.
I don't know well about wicket but I think it very good.
I want to deploy on wicket Javascript application made by LibGDX ,but on wicket's HTML file it does not work.
LibGDX logo was shown but next is not.(Maybe it seems to be not found next file (xxxx.cache.html) ??)
Please Tell me how to work Javascript(GWT) application on wicket.
Chrome shows this error.
Uncaught ED5709743BB488EF40123B0ADA51D171.cache.html:84393
com.badlogic.gdx.utils.GdxRuntimeException: Invalid assets description file.
My Javascript application is made by GWT which is client only created by LibGDX.
(LibGDX is multi platform game framework.
It can create WebGL application from java by GWT compiled.)
I think it can work in wicket because this GWT application is client only.
Javascript application is
assets
|...(many files used in game)
|-com
|-badlogic
|-gdx
|-...(some directory)
html
|html.nocache.js
|A0B51A68A37B38F9FF8A8855EDF848C7.cache.html
|Bxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|Cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|ED5709743BB488EF40123B0ADA51D171.cache.html
|Exxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|hosted.html
|soundmanager2.swf
|logo.png
|....(many files)
|-gwt
|-chrome
|chrome_rtl.css
|chrome.css
|-images
|-...(some directory)
|...(some files)
soundmanager2-jsmin.js
soundmanager2-setup.js
styles.css
My Javascript application can work in Struts JSP(deployment under webapp).
I wrote at wicket in this way :
src/main/java/.../testwicket/page/xxx.html
<!doctype html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<title>wicket + gwt(client only) test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="soundmanager2-setup.js"></script>
<script src="soundmanager2-jsmin.js"></script>
</head>
<body>
<a class="superdev" href="javascript:%7B%20window.__gwt_bookmarklet_params%20%3D%20%7B'server_url'%3A'http%3A%2F%2Flocalhost%3A9876%2F'%7D%3B%20var%20s%20%3D%20document.createElement('script')%3B%20s.src%20%3D%20'http%3A%2F%2Flocalhost%3A9876%2Fdev_mode_on.js'%3B%20void(document.getElementsByTagName('head')%5B0%5D.appendChild(s))%3B%7D">SuperDev Refresh</a>
<div align="center" id="embed-html"></div>
<script type="text/javascript" src="html/html.nocache.js"></script>
</body>
<script>
function handleMouseDown(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = 'default';
}
function handleMouseUp(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = '';
}
document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
</script>
</html>
Javascript application is in
src/main/webapp/
|-assets
|-html
soundmanager2-jsmin.js
soundmanager2-setup.js
style.css
Even if this code is added in GWT, it do not work(I don't call this code from java...Should I call it?).
public static native void setWindowHref(String url)/*-{
$wnd.location.href = url;
}-*/;
I would like to create web page which has to compatible on iPhone..
i want to know how to design the web page for iphone.
Pls provide me the sample html code for a web page . i mean i would like to know how much should be the screen size of the web page etc...
Kindly guide me on this
Thanks for any help.
UPDATE1
can you give me a sample html code ( layout) which can run on iphone browser
Sample HTML template that will run perfectly on an iPhone:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello world</p>
</body>
<html>
Hi can somebody help me. I can't get rid of this error message in Chrome 9.0 beta, Chrome 8.0 or Firefox 3.6.13:
"Unsafe JavaScript attempt to access frame with URL 'http://apps.facebook.com/myapp/' from frame with URL 'http://myapp.dyndns-office.com/'. Domains, protocols and ports must match."
I'm using the FacebookSDK version 4.1.1 CSMvcFacebookApp in the Samples folder.
I have this script in my Site.Master page located in Views/Shared:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
FB_RequireFeatures(['CanvasUtil'], function () {
FB.XdComm.Server.init("<%= ResolveUrl("~/xd_receiver.htm") %>");
FB.CanvasClient.startTimerToSizeToContent();
});
});
</script>
I have xd_receiver.htm in my root directory, and presumed that the above javascript code was all I needed to do verify my domain with facebook.
Is my presumption correct or has things changed?
I even tried moving the FB code out of the JQuery ready function like so:
<script language="javascript" type="text/javascript">
FB_RequireFeatures(['CanvasUtil'], function () {
FB.XdComm.Server.init("<%= ResolveUrl("~/xd_receiver.htm") %>");
FB.CanvasClient.startTimerToSizeToContent();
});
</script>
But this doesn't work either ...
Can anybody shed some light as to what I'm doing wrong or how I get xd file to work using the SDK/MVC IFrame solution...
FB.CanvasClient.startTimerToSizeToContent() is firing because I don't have the scroll bars appear in my application, so that proves that FB_RequireFeatures function is working. But as to whether FB.XdComm.Server.init is doing it's part I'm just not sure as to how I go about testing this ???
The content of my xd_receiver.html file in my root directory is:
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>cross domain receiver page</title>
</head>
<body>
<!--
As described in: http://wiki.developers.facebook.com/index.php/Cross-domain_communication_channel
-->
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
XdCommReceiver.js exists as I just copied the pasted the url into the browser. Are my paths correct or have facebook up and change the url's etc ... ?
I understand that my main concern here is that Safari won't run my app at all if I don't get this cross domain stuff sorted out now.
Any help here would be much appreciated :-\
Thanks
Rob
<< ADDITIONAL COMMENT >>
Is there a built in mechanism in the latest version of the FacebookSDK v 4.1.1 to make this cross domain stuff just work? Did the developers of the SDK think about this issue? Or have I just brought up a future feature ... :-\
Here's the code you need to have in your cross-domain scripting channel file:
<html><body><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script></body></html>
Here's the code to initialize the FB Javascript SDK. Put this at the very end of your HTML files, substituting in the appropriate values and URLs.
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script><script type="text/javascript">FB.init({appId: '1234567890', status: true, cookie: true, xfbml: true,channelUrl: 'http://example.com/xss_channel.htm'});</script>
Optionally, put this in your web.config where the XSS channel file is located. This lets browsers cache the file indefinitely as recommended by Facebook.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<location path="xss_channel.htm">
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Expires" value="Tue, 01 Jan 2030 16:00:00 GMT" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>
</configuration>
And finally, if you're using XFBML, place this namespace definition in your <html> to make XFBML work in IE:
xmlns:fb="http://www.facebook.com/2008/fbml"
You are using the old Facebook Connect Javascript. The Facebook C# SDK is not compatible with the old Javascript SDK. You should use the new Facebook Javascript SDK (as was included in the sample). http://developers.facebook.com/docs/reference/javascript/