I've an example sencha touch2 application. It is working fine in my localhost browser(http://localhost/sencha/examples/navigationview/index.html).
Now i need to integrate this sencha applicaiton to android using phonegap 1.5.0.
i've downloaded phonegap libraries from phonegap
phonegap-phonegap-1.5.0-0-gde1960d.zip from phonegap website.
in that i've got cordova-1.5.0.js and cordova-1.5.0.jar file instead of phonegap.
I've gone through with phonegap site got to know that cordova-1.5.0 and phonegap is same.
I've followed this Get Started Guide
In that they have not given how to integrate sencha touch2 MVC file architecture. The basic example in get started guide is working fine for me.
My Problem is i couldnt able to integrate my sencha2 MVC file architecture. I've googled this but didnt get succeed. I'm doing any thing wrong here? Can you suggest me the right way to do this.
Thanks in Advance.
this is my index.html file
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script id="microloader" type="text/javascript" src="development.js"></script>
</head>
<body>
</body>
</html>
In app.js file i'm getting Error:
//<debug>
Ext.Loader.setPath({ // line no. 2
'Ext': 'src'
});
//</debug>
Ext.Loader is what allows your JS files to live in different folders inside the app folder. Sencha Touch can dynamically load your files from the appropriate directory if you have configured Ext.Loader as described in the tutorial
Then just put the index.html the app folder and everything else into www for Phonegap. It works just the same as a web page. To be completely explicit:
www
|
|-index.html
|-app/
|-css/
|-whatever else
For a production build you need to use the command line tool which gives you a single js file including all the MVC components and extras like API's or libs you need PLUS all the necessary EXT and sencha stuff stuff and no more.
Getting to that stage is quite an achievement and then you should have your index.html file ready to make into an APK.
I would suggest you to use MDS applaud phone gap http://wiki.phonegap.com/w/page/34483744/PhoneGap%20Eclipse%20PlugIn%20for%20Android
for developing sencha 2 applications with phone gap .
It will give you a way to work with phonegap+sencha
you can then add the path to ur sencha js and css file in the index.html and manually need to add the app folder.
the index would look like
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Demo with Sencha Touch</title>
<link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha/sencha-touch-all.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegapdemo-w-sencha.js"> </script>
</head>
Take a look at phonegap-build. See my answers here on the forum about phonegap.
You get your sencha app running immediately on iphone, android, blackberry and everything else !!
You don't even need to use phonegap API calls!
You only have to make a copy of app.html into index.html.
If you DO want to use the phoneGap API, simply use it. No added files needed or anything else.
In the index.html you have to add the line
<script... phonegap="cordova-1.0.7" />
or whatever version is then valid.
(This info is true as of June 11, 2012 -- I suppose when beta period is over it will cost)
Related
I have a basic Cordova application with a simple console.log() function at the end.
My index.html file looks as follows:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("Device is ready!");
}
</script>
</body>
</html>
As you can see it's basically the same as the automatically generated file with some console.log script at the bottom.
Unfortunately when I run the app on Android using cordova emulate android, I cannot seem to find the output from console.log(..) anywhere. However, it works fine on browsers.
console.log(..)only works on browser console, not on command line.
To get log that appears on your app use alert(...);.
Anyway if you wanted to see your logs by consol.log() you should use an IDE like Android Studio or use ddms located where your adb is installed. (run ddms.bat)
Use
cordova plugin add cordova-plugin-console
This plugin will enable console logging.
It has various methods for console printing
console.log
console.error
console.exception
console.warn
console.info
console.debug
console.assert
console.dir
console.dirxml
console.time
console.timeEnd
console.table
By default plugin is not installed so you will have to add it manually.
Reference.
Regards.
I was trying to build a sample app through phonegap(3.7)(build.phonegap.com) made using polymer(0.5).The build was successful.
However, when I installed the app in my android(v4.4+) device, I could not see the polymer element(I just inserted a <paper-checkbox> to test). All other simple HTML elements were rendered normally.
I read about the android webview support of HTML import, so I tried to vulcanize the index.html, but it didn't help. But I can see the polymer element by running the python SimpleHTTPServer on my laptop, and there's no error in the browser javascript console (other than failed to load resource.. cordova.js).
Here's the index.html (non-vulcanized version) I have created:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="import" href="res/bower_components/paper-checkbox/paper-checkbox.html">
<script type="text/javascript" src="res/bower_components/webcomponentsjs/webcomponents.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<h3>POLYMER!</h3>
</div>
<br>
<p>Introducing Polymer element next...</p>
<hr>
<paper-checkbox></paper-checkbox> This is a polymer checkbox
<hr>
</div>
<script type="text/javascript">
app.initialize();
</script>
</body>
Here is the directory structure of the project
config.xml
hooks
platforms
plugins
www
config.xml
css
icon.png
img
index.html
js
index.js
res
bower_components
polymer
webcomponentsjs
icon
screen
spec
spec.html
Is there anything I'm missing?? Please help. Thanks!
Regards,
Soumya
I saw this issue in from a library that uses Polymer in github. It says its not supporting devices below Android 4.4 (Probably). I am trying to integrate with Cordova Crosswalk and see if I can get it to work. The stock browsers from lower version of Android before 4.4 are really crappy. I am really having hard time making my web apps work on lower-end devices.
Some issues like abysmally slow js performance, exceptions, bugs are rampant on older webviews. What we can do for now is to wrap our app using a different webview such as using Cordova with Crosswalk as also suggested from the link I provided above.
Hope this helps.
I have created a new project in VisualStudio 2013, when i run it on windows emulator and device it works fine, but when I run it on Ripple and Android phones it does not run and gives me 1 Error and 1 Warning.
Warning 1 The TypeScript Compiler was given no files for compilation,
so it will skip compiling. Error 2 EPERM, open
'C:\Users\rao.burugula.cordova\lib\npm_cache\cordova-android\3.6.4\package.tgz'
When I looked for package.tgz it was a zip file so I unzipped and placed it there. but still its the same issue.
Other PhoneGap projects work fine which are created in VS2013, only the new ones I create get this error.
Could you please suggest how to resolve this issue.
Following the code which is auto generated when I create a new Blank App (Apache Cordova).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TestRestWebservices</title>
<!-- TestRestWebservices references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Hello, your application is ready!</p>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Update:
I also tried using this
The TypeScript Compiler was given no files for compilation, so it will skip compiling
but could not find the 'build action' for any typescript files. I looked in properties but none there. Path to locate it ??
Thanks in advance
Rao
I am integrating famo.us application with apache cordova, i've followed the following steps to achieve this task
1) Installed the cordova , famo.us and all the other packges necessary to build cordova as well as famo.us applications
2) I've created a famo.us project using yo famous, as per suggested on this link : https://github.com/Famous/famous and have also served it using grunt serve
3) i copied the timbre tutorial from the famo.us starter kit and pasted into the app folder of the famo.us project (build through yo famous ).
4) Then again i served the project using grunt serve and it worked absolutely fine in browser (chrome and Firefox both)
5) Then i created a project in netbeans by new project -> html5 -> cordova application
6) Then i copied all the content in app folder of famo.us application and pasted in www folder of cordova project and built it using net beans and tested it on browser and it worked absolutely fine (both chrome and firefox)
7) Then i built the cordova project on my Android and it's not showing the strip view of the Timbre Sample Application of famo.us, it opens the menu drawer but there all i can see the blank white background and nothing where it was supposed to show the strip view options of the timbre project
8) Then i copied the package from cordova project platform -> android -> AndroidManifest.xml and pasted it into the DDMS of eclips and opened the menu drawer and see the following error on it:
err: has no method 'now' at http://code.famo.us/famous/0.2/famous.min.js:48
I don't know where i am going wrong, I've also tried download http://code.famo.us/famous/0.2/famous.min.js file and saved it into the js folder in www folder of cordova project and included it into the html and also check it is including, but facing the same problem.
I am doing Google on it from so many time but no success. Please guide me in this regards. it's working absolutely fine on browser but not on the Android.
Also please let me know if there is any other more efficient way to integrate Famo.us Project with Apache Cordova.
EDIT
I've added the code.famo.us in my whitelist, the config.xml code is:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.coolappz.coda" version="1.0.0">
<name>coda</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html"/>
<access origin="*"/>
<access uri="code.famo.us" subdomains="false" />
<access uri="*" subdomains="true" />
</widget>
but still i got the error
err: 09-17 13:23:58.666: E/Web Console(13557): Uncaught TypeError: Object #<Performance> has no method 'now' at file:///android_asset/www/js/famous.min.js:48
index.html file is:
<!DOCTYPE HTML>
<title>famo.us App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- module loader -->
<script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>
<!-- <script type="text/javascript" src="js/famous.min.js" ></script>-->
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>
<!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script type="text/javascript">
require.config({
baseUrl: './src/'
});
require(['main']);
</script>
<body></body>
I'm creating an app with Phonegap 2.2.0 and I'm trying to play videos locally in my tablet. I'm using MacDonst videoplayer and I'm testing my app in a Galaxy Tab 10.1 with Android 3.1, but I'm no able to see the videos. The links simply don't do any action when I touch them. This is mi html in my assets\www folder:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/jquery-1.10.1.js"></script>
<script src="js/cordova-2.2.0.js"></script>
<script src="js/video.js"></script>
<script type="text/javascript">
function init(){
document.addEventListener("deviceready", console.log('ready'), true);
}
function playVideo(vidUrl) {
window.plugins.videoPlayer.play(vidUrl);
}
</script>
</head>
<body onload="javascript:init()">
<h1>MacDonst videoplayer</h1>
<h3>videos</h3>
Play File MP4<br><br>
Play File WEBm<br><br>
</body>
</html>
I followed the instructions in https://github.com/macdonst/VideoPlayer
And I tried several aproaches found here in stack overflow, but I can't make it work :/
My tablet doesn't have an external sdcard, could that be the problem?
I'm new to Phonegap and Android developing, but I can´t se any erros in LogCat, and I only get 2 warnings:
The field Context.MODE_WORLD_READABLE is deprecated VideoPlayer.java
Using MODE_WORLD_READABLE when creating files can be risky, review carefully
Can you please help me? I really appreciate your help.
"The field Context.MODE_WORLD_READABLE is deprecated" is just a warning. It is not stopping you from playing any video.
all you have to do is-
1. open VideoPlayer.java file in eclipse and press ctrl+shift+o. This will update your plugin.
2. add <plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/> line in your res/xml/config.xml file.
And done.