Packaging Apps - Enyo http://forums.enyojs.com/categories/packaging-apps/feed.rss Thu, 23 May 2013 17:28:44 +0000 Packaging Apps - Enyo en-CA Ondeviceready being fired twice, Cordova (Phonegap) 2.6/2.7, Enyo 2.2 http://forums.enyojs.com/discussion/1446/ondeviceready-being-fired-twice-cordova-phonegap-2-62-7-enyo-2-2 Tue, 21 May 2013 19:51:40 +0000 Packaging Apps pmarsh 1446@/discussions
Edit: Dave had to go deal with actual work, don't want to seem like I ignored him

We are not using the phonegap package from the extras as it seems that is now baked into enyo itself.

index.html: 


enyo.dispatcher.listen(document, "deviceready");
new App().renderInto(document.body);

App.js 

enyo.kind({
  name: "App",
  kind: "FittableRows",
  components [
    {kind: "Signals", ondeviceready: "deviceReady" }
  ],
  deviceReady: function() {
    //Appears twice in the logs
    //Using other calls like navigator.notification results in two as well
    enyo.log("device ready");
  }
});
]]> onecrayon.Database & Select in webOS with enyo 2.2 http://forums.enyojs.com/discussion/1405/onecrayon-database-select-in-webos-with-enyo-2-2 Fri, 10 May 2013 01:36:05 +0000 Packaging Apps kayphoonstar 1405@/discussions
I've already deployed the app in enyo 1 on webOS and it works pretty well. When I was exploring Enyo 2 last year, I had made some headway with enyo 2 and had the onecrayon.Database kind working fine but I ran into problems with the Select function in the webOS emulator and decided to drop back to get the app released on webOS.

But now, using enyo 2.2 and phonegap 2.4, I'm humming along on an android version that is working really well. In fact, it took less than a week to update my enyo 1.0 app to enyo 2.2 and add some nifty features like tabpanels.

Anyway, I can't figure out how to get the database to load in webOS. If I install my enyo 1 app on the emulator first (or even install an enyo 2.0 build) and then install a 2.2 version built with the same appname and database name, the 2.2 version will see and use the database.

As I said, I'm having no problem using the oncrayon.Database kind in the Android build.

I could use enyo 2.0 for the webOS version but I still have a "picker" problem: I don't seem to have any luck at all getting any kind: "Select" to take any input using any enyo 2.0 builds. It works fine in Chrome and in android. With 2.2, I can just use the onyx.Picker or onyx.DatePicker, but then I'm back to the problem with the db.

It's just any simple Select function such as: 
{kind: "Select", style: "height: 35px;", value: "", 
name: "newSuffix", components: [
{content: "", value: ""}, 
{content: "Jr.", value: "Jr."}, {content: "Sr.", value: "Sr."}, {content: "II", value: "II"}, 
{content: "III", value: "III"}, {content: "IV", value: "IV"}, 
  ]},
or, alternatively, 
{kind: "Select", style: "height: 35px;", value: "0", 
 name: "newSuffix", components: [
{content: "none", value: "0"},
 {content: "Jr.", value: 1}, {content: "2", value: 2}, {content: "II", value: 3}, 
{content: "III", value: 4}, {content: "IV", value: 5}, 
  ]},
I've tried using phonegap versions 2.3 through 2.6 for webOS, and tried just building w/o phonegap but no luck - I don't know what I'm doing wrong . . .

Any help, pointer or directions to important resources for - either/or - would be very helpful!]]> Issues with Deployment http://forums.enyojs.com/discussion/1328/issues-with-deployment Fri, 05 Apr 2013 18:02:21 +0000 Packaging Apps nicks451 1328@/discussions
TypeError: Object function Walker(root) {
if (!(this instanceof Walker)) return new Walker(root)
EventEmitter.call(this)
this._pending = 0
this._filterDir = function() { return true }
this.go(root)
} has no method 'init'
at Object.<anonymous> (c:\projects\ph-forecasting-web\src\main\webapp\enyo\tools\minifier\minify.js:229:8)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:901:3

at run (c:\projects\ph-forecasting-web\src\main\webapp\enyo\tools\deploy.js:154:9)
at Object.<anonymous> (c:\projects\ph-forecasting-web\src\main\webapp\enyo\tools\deploy.js:168:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:901:3
 I'm using the last version of node (0.10.3) and walker though maybe it's not the correct package.

If anyone has any ideas I would really appreciate it.]]> Local Paths in deployed+minified app http://forums.enyojs.com/discussion/1320/local-paths-in-deployed-minified-app Tue, 02 Apr 2013 19:52:33 +0000 Packaging Apps crolex 1320@/discussions
I deleted both of these from minify.js and all seems to execute fine. Since the directory structure of the target execution machine (as opposed to that of the build machine) will be different, do these enyo.addPath() calls in a deployed app do anything meaningful?]]> Is https://developer.palm.com/ out of duty? http://forums.enyojs.com/discussion/1295/is-httpsdeveloper-palm-com-out-of-duty Mon, 25 Mar 2013 10:44:44 +0000 Packaging Apps chk5e 1295@/discussions
TIA and best regards
Christian]]> Windows Phone 7 - Disabling the default pinch/zoom & scroll-snapback behavior http://forums.enyojs.com/discussion/353/windows-phone-7-disabling-the-default-pinchzoom-scroll-snapback-behavior Fri, 04 May 2012 18:48:27 +0000 Packaging Apps germboy 353@/discussions
When you package an Enyo (or any HTML app) on WP7, the native WebBrowser control is used as the wrapper for your content. Like other platforms, you have the option of setting your viewport to control whether or not the user can pinch/zoom.

<meta name="viewport" content="user-scalable=no">


Unlike other platforms however, the WP7 implementation still allows you to pinch/zoom - it just resets the content/viewport when you remove your finger from the screen. In addition, you are also able to scroll up/down the page, even though your app content doesn't extend past the viewport (like when using fit:true and/or enyo-fit). Like the pinch/zoom behavior, the scroller snaps back to its original position once you remove your finger from the screen. These quirks prevent you from being able to include certain events in your app (drag, mouseover/out, etc) and give you an undesired user experience - one that's immediately distinguishable from native apps.

I found an article where someone found a solution for this: http://www.scottlogic.co.uk/blog/colin/2011/12/a-simple-multi-page-windows-phone-7-phonegap-example/ . This post includes a handful of other interesting tips, so it's worth looking at. That being said, they include a lot of other information/code that's not directly related to the issue I'm trying to fix. Even while using the code provided, I still had to make some changes to make it work, so I wanted to post a quick walk-through that you can easily reference here.

Note: These instructions are assuming that your application's namespace is "App". Change this to match your own namespace.


-----------------

How-to:

-----------------


1) Add a folder named 'Util' to your PhoneGap's main project folder

Your folder structure should now look something like this: 
- App
    - Bin
    - GapLib
    - obj
    - Plugins
    - Properties
    - Service References
    - Util
    - www (your app contents)


2) Add the following 2 files to the new 'Util' folder, and paste in their contents:

LinqToVisualTree.cs - View code on gist
WebBrowserHelper.cs - View code on gist

*Note*: After adding these files, be sure to select the "Include In Project" option for this folder/files in Visual Studio.



3) Now open your MainPage.xaml.cs file and include this line in your list of dependencies, in the top section:

using App.Util


4) In the same file, go down to your namespace (directly under the line you just entered). You will need to change 3 things:
- Add WebBrowserHelper declaration
- Edit MainPage constructor
- Add Browser_ScriptNotify function

The contents of this file should now be similar to this: View code on gist


5) Lastly, open your app's index.html file and add this script in the <head>: 
<script type="text/javascript" charset="utf-8">
	// ensure that this page does not scroll
	window.external.Notify("noScroll");
</script>

That should have your app looking and feeling a million times better.]]> Windows Phone 8 apps http://forums.enyojs.com/discussion/1040/windows-phone-8-apps Sun, 09 Dec 2012 03:02:53 +0000 Packaging Apps rwatkins 1040@/discussions
I got one up and running in Visual Studio Express 2012 with the "Windows Phone HTML5 App" template, but cannot seem to resolve how to hook up the hardware back button to the webview so I can intercept it and handle it in my app, rather than watching my app just exit. Attempts to handle it via the History API pushstate were also unsuccessful. Any good way to hook backbutton up in the default HTML5 Windows Phone 8 container?

Alternatively I attempted to get this running in a PhoneGap container. But currently PhoneGap 2.2 creates a Windows Phone 7.1 app, not a Windows Phone 8 one. This seems to have odd 'rubber band' of the window, and more importantly seems to force the viewport to 768x480 and I cant seem to get my 1280x768 app running scaled correctly, despite setting @-ms-viewport to those values.

I also attempted to use the rc1 of PhoneGap 2.3 (and also with HEAD from github.com/apache/cordova-wp8), but after successfully building, the app always immediately crashes on launch - both on Emulator and Device (Lumia 920).

Current instructions on how to get up and running in PhoneGap with Windows Phone also seem out of date:
http://docs.phonegap.com/en/2.2.0/guide_getting-started_windows-phone_index.md.html

This doc refers to "CordovaStarter-x.x.x.zip" -- which doest exist in the current 2.2 download from Phonegap.com So I've used the "standalone" template and directly modified the manifest template.

And Building the Template intructs you to "Export Template ..." from Visual Studio -- but that feature doesnt exist in "Visual Studio Express 2012 for Windows Phone".


Suggestions?]]> PhoneGap survey http://forums.enyojs.com/discussion/1232/phonegap-survey Tue, 26 Feb 2013 22:25:04 +0000 Packaging Apps rwatkins 1232@/discussions
And they list Enyo as an option in their question about Frameworks, so thought it might be good to post about the survey here so Enyo developers using PhoneGap can be sure to provide their input.

Survey: https://docs.google.com/forms/d/1hOuaWBxYTmt6S2KDqbnbD1XAhLgxMf-Cd6wbEEG4hEw/viewform

Here was what they posted in the Newsletter:
We want to learn more about you!

Oh, the things that make PhoneGap great: awesome open source technology, the hardworking community, and delicious beers!

In an effort to get to know our community better, we put together a short survey so we can learn more about you and your development workflow. What platforms are you targeting? What devices do you own? We want to get a more well-rounded picture of who you are and what you're looking for from PhoneGap.

As thanks for filling out the survey, we're giving away 5 PhoneGap t-shirts to those who enter. Be sure to include your email address at the end.

And yes, tell us about your favourite beer too. The PhoneGap team is currently enjoying Parallel 49's Gypsy Tears Ruby Ale in the keg. Cheers!

Fill out the Survey
]]> 2.1 and webOS http://forums.enyojs.com/discussion/923/2-1-and-webos Tue, 30 Oct 2012 15:44:23 +0000 Packaging Apps strider73 923@/discussions ]]> PhoneGap/Cordova App for Android has a very long start time http://forums.enyojs.com/discussion/1156/phonegapcordova-app-for-android-has-a-very-long-start-time Tue, 29 Jan 2013 22:43:48 +0000 Packaging Apps bja 1156@/discussions
I have packaged my Enyo2 webapp as Android app with Phonegap and I have published in the google play store. You can find the app here. I have used the Adobe Phonegap build service.

A lot of users means that my app have a long start time. What I can do?

At first I have setup a new local cordova android project. After that I have added the last deployed version of my enyo webapp into the folder assets/www.

Here ist my new index.html: 

<!DOCTYPE html>
<html>
	<head>
		<title>Mensa Chemnitz</title>
		<link rel="shortcut icon" href="assets/favicon.ico">
		<!-- meta -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<!-- css -->
		<link href="build/enyo.css" rel="stylesheet">
		<link href="build/app.css" rel="stylesheet">
		<!-- js -->
		<script src="build/enyo.js"></script>
		<script src="build/app.js" onerror="alert('No application build found, redirecting to debug.html.'), location='debug.html';"></script>
		<script src="cordova-2.3.0.js"></script>
		<!-- webfont -->
		<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
		<script>
			function onBodyLoad() {
				document.addEventListener("deviceready", onDeviceReady, false);
			}
			
			// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
			function onDeviceReady() {
				// tell enyo to listen for backbutton event
				enyo.dispatcher.listen(document, "backbutton");
				new App().renderInto(document.body);
			}
		</script>
	</head>
	<body onLoad="onBodyLoad();" class="enyo-unselectable">
	</body>
</html>

And the Android main java class: 

public class MensaChemnitzAndroid extends DroidGap
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.setIntegerProperty("splashscreen", R.drawable.ic_launcher);
        super.loadUrl("file:///android_asset/www/index.html", 5000);
    }
}
You can see I have added a splashscreen. The app works in the andoid emulator but the start time is very long.

Splashscreen: 5 seconds
white screen: 10 seconds
app loaded

I can say that the reason is not the google webfont.

Thanks in advance,
Cheers Björn
]]> Firebase, touchpad etc. http://forums.enyojs.com/discussion/1005/firebase-touchpad-etc Tue, 27 Nov 2012 18:16:49 +0000 Packaging Apps strider73 1005@/discussions Enyo as native app. http://forums.enyojs.com/discussion/930/enyo-as-native-app Wed, 31 Oct 2012 15:24:17 +0000 Packaging Apps thstart 930@/discussions
What are the options? As I see Enyo developer team favors PhoneGap.
Are there specific reason for that? I see Phonegap generates theoretically
to 7 platforms but how realistic is it? I have a test phone with Android 2.2 -
HTC MyTouch Slide 3G and tried to load my web app in its browser. It is very
slow. I know Enyo 2.0 is supporting Android 2.3 and up but what difference
it would be? I don't think the speed will be much better. As I understand
PhoneGap is using a browser instance for his "native" code which is actually
hybrid not native. I think there would be not speed increase that way?

What about iPhone AppStore. As I see I need mac for this - at least to generate
the certificates.]]> Windows phone and 2.1 http://forums.enyojs.com/discussion/914/windows-phone-and-2-1 Sat, 27 Oct 2012 16:32:28 +0000 Packaging Apps strider73 914@/discussions setInterval is Fail on WebOS http://forums.enyojs.com/discussion/721/setinterval-is-fail-on-webos Mon, 27 Aug 2012 14:57:20 +0000 Packaging Apps RedMage 721@/discussions
setInterval works on my PC in browsers such as firefox and chromium. When I package and deploy to HP Touchpad or Veer my Pomodoro App morphs from a Get Things Done app into a Rip My Own Hair Out app because of its sporadic ticking. I set the tick method to occur every thousand milliseconds.

Anybody have any ideas? BTW, I will be at the boot camp at Groupon this week. Look for a tall and handsome guy who looks somewhat like Gerard Butler.]]> Issue With Deployment http://forums.enyojs.com/discussion/552/issue-with-deployment Sun, 01 Jul 2012 06:12:28 +0000 Packaging Apps tkimmett 552@/discussions ==========
build step
==========
{ enyo: '/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/..',
source: 'package.js',
'no-alias': true,
output: '../../build/enyo' }



node.js:134
throw e; // process.nextTick error, or 'error' event on first tick
^
TypeError: Bad argument
at Object.mkdirSync (fs.js:360:18)
at /home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/minify.js:137:6
at Object.finish (/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/node_modules/walker.js:36:4)
at Object.more (eval at <anonymous> (/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/node_modules/walker.js:11:10))
at Object.more (eval at <anonymous> (/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/node_modules/walker.js:11:10))
at Object.more (eval at <anonymous> (/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/node_modules/walker.js:11:10))
at Object.load (eval at <anonymous> (/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/node_modules/walker.js:11:10))
at Object.depends (/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/node_modules/walker.js:30:16)
at eval at <anonymous> (/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/node_modules/walker.js:11:10)
at /home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/minifier/node_modules/walker.js:11:2
{ enyo: '/home/taylor/Dropbox/Pandora_Stuff/jmtk-deploy/enyo/tools/..',
source: 'package.js',
output: '../build/app' }
 NodeJS is installed (v0.4.9) and I'm using Ubuntu 12.04. Any help is much appreciated.

(On a side note, it might be good to say in the Bootplate wiki that nodejs is required for the deploy script. That was my initial problem until I installed nodejs and got this error.)]]> handling Intents on PhoneGap - avoiding re-launch http://forums.enyojs.com/discussion/724/handling-intents-on-phonegap-avoiding-re-launch Tue, 28 Aug 2012 18:57:47 +0000 Packaging Apps rwatkins 724@/discussions
I have used the WebIntents plugin. I setup AndroidManifest.xml to successfully register for "myprotocol://host/path" and have that callback into the the app.

But currently this appears to restart the application each time. My app comes to the forground, but appears to start up from scratch and get url as the launch parameter in window.plugins.webintent.getUri().

I'd like to be able to pass data to and already-running app via intents. The goal here is a web page with a link to a URL that launches back to the app - brings it to the foreground and takes action based on the data passed back.

Do I need to specify multiple activities somehow in AndroidManifest.xml?
Or somehow setup the intent to not launch the Main activitity again?

I currently have something like this in AndroidManifest.xml: 
<application android:icon="@drawable/icon" android:label="@string/app_name"
    android:debuggable="true">

    <activity android:name="MyApp" android:label="@string/app_name" 
              android:screenOrientation="portrait"
              android:configChanges="orientation|keyboardHidden">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>

        <intent-filter>
          <data android:scheme="myprotocol" />
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.BROWSABLE" />
          <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>

    </activity>
</application>
]]> Android hardwareAcceleration setting http://forums.enyojs.com/discussion/626/android-hardwareacceleration-setting Fri, 27 Jul 2012 23:30:04 +0000 Packaging Apps ekdikeo 626@/discussions <application android:hardwareAccelerated="true" ... >

seems to make a -huge- difference in Enyo 1 scrollers. haven't tried much else yet.
]]> Enyo2 vs Android Tablets http://forums.enyojs.com/discussion/664/enyo2-vs-android-tablets Mon, 06 Aug 2012 21:07:07 +0000 Packaging Apps bja 664@/discussions
I use phonegap to deploy my enyo2 app on android. The android emulator 4.1 (Tablet) means, that my app not ready for tablets. What can I do to disable this behaviour?

Regards
Björn]]> about PhoneGap:build service http://forums.enyojs.com/discussion/516/about-phonegapbuild-service Wed, 20 Jun 2012 05:59:06 +0000 Packaging Apps hyuna 516@/discussions Then, I have a problem.
I packaged a app named 'A'.
And, I packaged another app named 'B'.
I uploaded zip file included index.html, package.js. source files, enyo lib.
I installed these apps on android/webOS emulator.
After installing A app, I installed B app. Then, A app is replaced as B app, not another app.
How can I install both A app and B app?
Because the ID of appinfo.json file is unique, I can do to distinguish each other in Enyo 1.0. But Enyo 2.0 doesn't support appinfo.json file.]]> InputDecorator Styling http://forums.enyojs.com/discussion/654/inputdecorator-styling Fri, 03 Aug 2012 16:42:25 +0000 Packaging Apps tkimmett 654@/discussions How to build a desktop application with AppJS (http://appjs.org/) http://forums.enyojs.com/discussion/651/how-to-build-a-desktop-application-with-appjs-httpappjs-org Fri, 03 Aug 2012 13:04:38 +0000 Packaging Apps chk5e 651@/discussions It's easy!

Assumptions

  • You got the binary distribution from http://dists.appjs.org
  • I use the enyo.js bootplate from Github or from the enyo.js zip as an example app

Howto

  1. Unpack the AppJS distribution to your hard diskinto an empty folder, say appjs
  2. Go to the tools folder of your bootplate app and run the deploy script
  3. Replace the contents of appjs/app/content with the deploy version of your app, i.e. the contents of yourapp/deploy/yourapp-<timestamp>/
  4. Adapt var window = app.createWindow({... in appjs/data/app.js to match your requirements, i.e. screen width and heigth
  5. Run appjs/app.sh or appjs\app.exe
  6. Enyjoy!
If you decide to use the whole development tree of the bootplate app then copy debug.html to index.html. I further suggest that you change the following in appjs/data/app.js: 
window.on('ready', function(){
  console.log("Window Ready");
  window.require = require;
  window.process = process;
  window.module = module;
// add this for easy invocation of dev tools:
  window.addEventListener('keydown', function(e){
    if (e.keyIdentifier === 'F12') {
      window.frame.openDevTools();
    }
// end of addition
  });
});
Then you can invoke the development tools of the Chromium engine with F12.

Findings

  • I tried this with the enyo-sampler app. The 'deploy' version does not show the source. The pane just stays empty and the dev tools report a '500' server error. The 'debug' version does show the source.
  • Both versions are quite laggy. Esp. choosing from the menu pane on the left seems to depend on where the click goes to, text or empty space.
Hope this helps
Christian]]> Enyo 2.0 on Android http://forums.enyojs.com/discussion/620/enyo-2-0-on-android Fri, 27 Jul 2012 04:56:54 +0000 Packaging Apps tkimmett 620@/discussions Enyo 2.0 and phonegap 2.0 on WP7 http://forums.enyojs.com/discussion/624/enyo-2-0-and-phonegap-2-0-on-wp7 Fri, 27 Jul 2012 16:15:58 +0000 Packaging Apps strider73 624@/discussions Windows Phone 7 http://forums.enyojs.com/discussion/283/windows-phone-7 Sun, 08 Apr 2012 03:36:11 +0000 Packaging Apps rsanchez1 283@/discussions webOS Deployment instructions http://forums.enyojs.com/discussion/604/webos-deployment-instructions Tue, 24 Jul 2012 00:53:43 +0000 Packaging Apps pempey 604@/discussions Platform Specific Deployment section of the Enyo github wiki found from the enyojs.com/docs/. Having read these forums since inception I was able to figure it out through some old posts, but some instruction and guidance on the official wiki would be much appreciated.]]> Packaging Your Enyo 2 Application for Windows Phone 7.5 http://forums.enyojs.com/discussion/456/packaging-your-enyo-2-application-for-windows-phone-7-5 Wed, 30 May 2012 07:47:42 +0000 Packaging Apps germboy 456@/discussions Getting Started
Packaging your Enyo application for Windows Phone (WP7) is a fairly straight-forward process, thanks to PhoneGap's support for the platform. For developers who are just getting started with PhoneGap/WP7, you will need to take the following steps:

1) Download the Windows Phone SDK - http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=27570
2) Download the latest PhoneGap build - http://phonegap.com/download

The next step is optional for development, however it will be necessary for installing applications on your device & submitting your application to the Marketplace

3) Register as a developer on Microsoft's App Hub - http://create.msdn.com/en-US/home/membership

Head to PhoneGap's “Getting Started” page for WP7, for instructions and links to the most current SDK & PhoneGap builds. http://phonegap.com/start#wp


Important Note: It is worth noting that the PhoneGap project is a distribution of Apache Cordova. Starting with PhoneGap version 1.5.0, the references to the name “PhoneGap” in the PhoneGap project have been changed to “Cordova”. When referencing the PhoneGap website for instructions on setting up a new application project, they may tell you to look for a reference to the name PhoneGap, when you should really be looking for the name Cordova. With that in mind, I will reference the name Cordova for the remainder of this article.
Reference: http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/


Starting a New Project
After installing the WP7 SDK and Cordova, you are ready to create your first project.

- Open Visual Studio Express for Windows Phone and select File > New Project
- Select CordovaStarter
- In the bottom area of the screen, you are able to name your project. For this article, we'll accept the default name CordovaStarter.

image



The Project Structure
When your project has been created, look at the “Solution Explorer” window on the right to view your project structure. If it is not visible by default, you can open it by selecting View > Other Windows > Solution Explorer.

The “www” folder is the folder that will contain your Cordova resource and all of your application content (Enyo, CSS, images, etc).

image



Adding Your Enyo Application to the Project
Copy your application files to the “www” folder of your project. Any required files or resources added here must be “included” into your project. Files not included in the project are not visible by default. You will have to click the Show All Files option in your Solution Explorer window.

image

If your files/folders aren't included, you will see a white icon next to its name. Right-click and select Include In Project.

image


An important thing to understand is that all of your application content must be specified as “content” in Visual Studio. When importing your application into the project, most of your files will default to “content”, however images will not. If you tried to launch your application now, you would notice that your images would not be displayed. Take the following steps to make your images viewable.


1) Select your image in the Solution Explorer window
2) Make sure the image has been included in the project (as described above)
3) In your Properties window (View > Other Windows > Properties Window), go to the Build Action drop-down list and select Content

image




Enyo & Cordova
Now that your project is set up and your application has been included, it's important to understand the relationship between Enyo and Cordova.

When your application is first launched, Codova will send a “deviceready” event to the document body. This event tells us that the application has been launched and Cordova has been loaded. It is at this point, where we can use Enyo to render our application. Fortunately, Enyo 2 has added native support for listening to this event.

If you are using the latest Enyo 2 build in github ( https://github.com/enyojs/enyo ), you already have the needed file for this ability (enyo/source/dom/phonegap.js).

If you are using the recent public release (Enyo 2.0 beta 4), you will need to download the support package, found in the enyojs/extra repo ( https://github.com/enyojs/extra ). Then you will need to be sure to include that package in your application: 
<script src="lib/extra/phonegap/package.js" type="text/javascript"></script>
Enyo 2 uses its “enyo.Signals” kind, in order to listen for when Cordova is ready to render our application. To do this, we need to add an Enyo listener to our document body. 
<body>
    <script type="text/javascript">
        // tell enyo to listen for deviceready event
        enyo.dispatcher.listen(document, "deviceready");
        
        new App().renderInto(document.body);
    </script>
</body>
* Note that we must use App().renderInto(document.body) instead of App.write().


In order to respond to the event we have a listener for, we must add a “enyo.Signals” kind to our application. 
enyo.kind({
	name: "App",
	components: [
		{kind: "Signals", ondeviceready: "deviceReady"},
		{content: "Hello world!"}
	]
});



Building and Deploying to the Emulator
Now that we have made the changes needed in our application, we are ready to build and deploy it to the emulator, for testing and debugging.

1) In Visual Studio, make sure the Windows Phone Emulator option is selected in the drop-down menu at the top of your screen.
2) Click the green play button (or press F5), found directly to the left of the drop-down menu mentioned in step 1.

image


Your application should now successfully launch in the Windows Phone Emulator. Congrats!

image


Quirks
When developing javascript applications for Windows Phone 7.5, there are certain pain-points that you will need work through. I address some of these issues on another forum thread: http://forums.enyojs.com/discussion/454/windows-phone-7-5-quirks]]> Chrome Packaged Apps & Enyo http://forums.enyojs.com/discussion/602/chrome-packaged-apps-enyo Mon, 23 Jul 2012 15:41:03 +0000 Packaging Apps unwiredben 602@/discussions Packaged Apps. They look like a really nice innovation, and we hope to fully support this model.

However, the Chrome team has deprecated some web features for this platform. http://developer.chrome.com/trunk/apps/app_deprecated.html has the list. Looking at this list shows a few problems for the current enyo 2.0 code -- the package loader uses document.write, so a debug build of an Enyo-based app won't be able to start. A minified version should be able to load into an app window, since that has all the dependencies turned into a couple of .js files you pull in with script tags. We're working on rewriting this code to remove that dependency (https://enyojs.atlassian.net/browse/ENYO-580).

While Enyo 2 doesn't rely on localStorage, cookies, or synchronous XHR, note that these features are also disabled. I suspect this was done to improve app performance, as all of these can block execution of code for some time due to external I/O.]]> Issues with PhoneGap or PhoneGap:Build or build chain http://forums.enyojs.com/discussion/565/issues-with-phonegap-or-phonegapbuild-or-build-chain Sun, 08 Jul 2012 23:38:56 +0000 Packaging Apps rrix 565@/discussions application I am writing as a weekend project; It's a frontend to the Hackerspaces.org SpaceAPI. The application works mostly fine when I run it on a Node express server, barring a few endpoints that aren't setting Access-Control-Allow-Origin * on their ends (I just ignore them currently4)

However, when I run my application through phonegap build, and install the webOS or Android builds, there are some strange things happening:

- the minified app.js contains this addPath, which is obviously not going to work: enyo.path.addPaths({layout: "/home/rrix/dev/projects/webos/spaceexplorer/enyo/tools/../../lib/layout/", onyx: "/home/rrix/dev/projects/webos/spaceexplorer/enyo/tools/../../lib/onyx/", onyx: "/home/rrix/dev/projects/webos/spaceexplorer/enyo/tools/../../lib/onyx/source/", maps: "/home/rrix/dev/projects/webos/spaceexplorer/enyo/tools/../../lib/maps/"});
- webOS log output is void of anything besides failed gets to file://home/rrix..../stuff in the maps library
- Android log output only has "D/DroidGap(29223): Origin to allow: http://127.0.0.1*"

When I run the application in Chrome or even the webOS browser or Android Chrome, there is a handmade scrim based on jmtk's spinner, and it is hidden when the last space is fetched, and the UI updates.

This doesn't happen in the PhoneGap'd versions, the spinner takes about a minute to first appear (the scrim itself should only be onscreen for 15-30 seconds while the XHRs finish) and disappears a moment later, but the data never properly loads.

With that all on the table, what would cause this to happen? If my XHRs are failing, it would keep it from going away, but not the issues I am having with the loads. Why would the XHRs fail on devices but not from a local express server? My code is up on gifhub here running tools/express.js in Node will spin up a server we can test on. There are PhoneGap:builds here.

can anyone provide some insight and see what I am missing here?]]> How to have the same webOS load behavior on Android http://forums.enyojs.com/discussion/29/how-to-have-the-same-webos-load-behavior-on-android Fri, 27 Jan 2012 23:26:36 +0000 Packaging Apps juliano_moraes 29@/discussions
perhaps it can be useful for the people that are trying to use Enyo apps on Android.
As you may know Android architecture makes all apps keep running in background even if you close them.
On webOS when you close a card the index.html will be reloaded next time you launch it. On Android it is not true.

In order to have the same behavior on Android you can overwrite the resume method adding the following code to your phonegap main app java file: 
protected void onResume()     {
       super.loadUrl("file:///android_asset/www/index.html");
       super.onResume();
    }
]]> Getting an Enyo 1.0 App in Chrome Web Store http://forums.enyojs.com/discussion/12/getting-an-enyo-1-0-app-in-chrome-web-store Thu, 26 Jan 2012 03:45:11 +0000 Packaging Apps erupnu 12@/discussions
So, you've likely been building your app in Chrome or Safari. Thankfully, the hard work is already done!

Now, there are only three main things you need to consider:

1.) If you use any device specific calls (such as Media Indexing, Cross App Launching, etc), this will not transition to Chrome App Store.
2.) If you use enyo.cookies, it will not work. Cookies require a browser param to work in your browser. Transition to localStorage, or my personal favorite: lawnChair. Both work great to store data in.
3.) If your app makes WebService calls, then you might have issues. See my later explanation to get rid of this browser param.

If you want to build it as a "hosted web app" as I have done, the rest is really simple. For reference, you should read up on this:
http://code.google.com/chrome/webstore/articles/apps_vs_extensions.html

1.) Upload the full package to your site. This includes the Enyo framework.
2.) Test in browser without the browser params. Mine: http://api.flashcardstogo.com/webapp/
3.) Build a manifest.json file. This is mine: 
{
	"name": "FlashCards",
	"description": "The perfect Study Companion for mobile devices, now for your desktop.",
	"version": "2.6.8.8",
	"app": {
		"urls": [
			"http://api.flashcardstogo.com/", 
			"http://www.flashcardstogo.com/&quot;
		],
		"launch": {
			"web_url": "http://api.flashcardstogo.com/webapp/&quot;
		}
	},
	"icons": {
		"16": "icon-16.png",
		"48": "icon-48.png",
		"128": "icon-128.png"
	},
	"permissions": [
		"unlimitedStorage",
		"notifications",
		"clipboardRead",
		"clipboardWrite"
	]
}
4.) Get a 16px, 48px, and 128px app icon ready.
5.) Build a .zip file with the icons and manifest.json file.
6.) Login to the Chrome Web Store "Developer Dashboard" here: https://chrome.google.com/webstore/developer/dashboard
7.) Select "Add new item"
8.) You will need:
a.) At least 1 1280x800 or 640x400 screenshot (png) of your app.
b.) At least the Small tile - 440x280 Promotional Image.
c.) The package.zip file created in step 5.
9.) Fill out the form and submit.

It's that easy, just requires a little bit of work. Hopefully this jump starts you right away.


WORKING WITH WEBSERVICES IN HOSTED APP

Depending on how you publish your Chrome app, WebService (aka XHR (aka HTTP Calls)) can be tricky with the "Same Origin Policy". Basically, a browser page can only make an HTTP call to the same domain from which it is using. It prevents XSS attacks (cross domain scripting attacks). Good security, bad for a web app using a 3rd party service.

FlashCards for the moment calls http://api.flashcardstogo.com for it's APIs. It is also a webapp. Therefore, the app had to reside on the http://api.flashcardstogo.com domain (could not use http://www.flashcardstogo.com) so that it could make those calls. Instantly, my issue was solved 90%. In cases where I needed Quizlet, FlashCard Exchange, or a 3rd party URL, I simply used a passthrough in my api. The call goes to my server, uses and XMLHTTP request on the 3rd party server (no same origin policy restriction there), and spits it back to the app. It's tricky, but there are ways around it.

If you publish your Chrome Web Store as a "packaged app", then you can specify which domains get approved and thus work around the same origin policy.

Read more on the Same Origin Policy: http://en.wikipedia.org/wiki/Same_origin_policy]]>