AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Windowmanager typephone11/28/2023 Add all needed references for CSS and Javascript files.Customize the assets/www folder structure including all needed JS libraries.Test the basic sample shell to make sure everything is working correctly.Creating the actual app shell using PhoneGap’s Getting Started Guide for the platform you want to start out with.Note: this tutorial builds upon the previous four tutorials and assumes you have built a rich interactive web application using view models, view mediators, and modularized views.īefore we get started, here is a bird’s-eye-view of the steps we will be going through in details in later sections: In the next sections I will use the Android platform as an example. In the rest of this tutorial I will assume that your mobile development environment is configured and working, and that you have successfully followed the PhoneGap Getting Started Guide. Then you can follow the PhoneGap Getting Started Guide for Android. Note: I recommend the basic tutorial to create a basic Android app to ensure all the prerequisites are installed correctly. Android Development Tools (ADT) plugin for Eclipse / Aptana Studio.To get started you will need to install the following tools (in order): If you have limited overall experience, starting out with the Android platform and the Aptana Studio IDE (a custom version of the Eclipse IDE optimized for HTML5/CSS3 and Javascript development) might be easier as you can run it on any OS (Windows, Mac, Linux). Note for IOS: an Apple Developer License will be required if you want to deploy the app to your device (otherwise you will only be able to use the emulator). You will benefit from a more integrated experience and faster device emulation. Mac OSX with XCode, or Windows with Visual Studio), then download the SDK for your platform and follow the corresponding Getting Started Guide. If you already have a significant development experience on a given platform (e.g. Your starting point may differ based on your current skills and experience: Partitioning application logic between view models and view mediators.Modularizing pages and views using a templating engine.Expand the web app functionality while:.Theme the app using CSS3 including transitions.Leveraging jQuery Mobile UI widgets for a consistent look and feel.Hosting the web app in a PhoneGap “ launcher” app (based on the desired mobile platform).Creating (or leveraging parts of) a minimal web app using HTML and Javascript.The majority of your app components will be based on standard HTML5 + CSS3 + Javascript. Consequently the minimum skills and associated learning curve for each platform we’ll want to target will also be more manageable. So with PhoneGap, we will keep the launcher part of our mobile app fairly small and trivial. html web page into a full-screen web view, and exposes underlying platform features through a Javascript API. In summary, for each platform, PhoneGap is used to create a sort of “ launcher” application, which starts a “ controller“, which in turns loads your main. ![]() a CordovaView including a browser window hosting the main page (index.html) of your app.a XAML application with a phone application page containing a CordovaView.On Windows Mobile Phone, the SDK and application consist of: a DroidGap parent class used for your own Java Droid activity class loading the main page (index.html) of your app.an Apache Cordova JAR containing the Java implementation of PhoneGap for the Android platform.On Android, the SDK and application consist of: a ViewController loading the main page (index.html) of your app into a WebView.an AppDelegate class launching a ViewController.a main module launching a UIApplicationMain. ![]() On IOS, the SDK and application consist of: Let’s take a look at the 3 most common platforms: For each platform you intend on supporting, you will use the corresponding SDK, code project templates and PhoneGap runtime. ![]() So PhoneGap will serve as our foundation. The idea behind PhoneGap is to provide a cross-mobile-platform framework allowing a self-contained web app built using HTML5 + CSS3 + Javascript to run inside a full screen web view, while allowing access to the device features such as for example: geolocation, accelerometer, camera, storage, etc. (Of course you can take a peek at the “So What?” section) How could we leverage our browser-side markup and logic to create a mobile app, portable across multiple platforms such as IOS, Android, Windows Mobile? Well, the goal of this post is to present a potential approach. ![]() In part 4 we built a complete working version of the Savings Goal Simulator as a rich web app where each view model, view and view mediator is nicely modularized. Creating Mobile Apps With KnockOutJS, PhoneGap & jQuery Mobile Intro
0 Comments
Read More
Leave a Reply. |