For some time, I was playing with an idea to create an article series covering different mobile HTML5 frameworks. I’ve already started with Ionic Framework but now I also want to do the same thing with OnsenUI, which is also currently one of the best available mobile frameworks. I will not go into great details describing OnsenUI here, if you want to know more about it take a look at my previous article.
 
This tutorial series is going to be written from the perspective of Windows OS and Android development. If readers show enough interest I will also add a Linux chapter, Windows will suffice for now. Roughly 90 % – 95 % of a stuff written here will work in any environment (things will change when we start playing with Cordova plugins) so keep reading if you’re a Linux/MacOS user.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

Preparations

 
Before we start this tutorial make sure you have everything installed/configured to handle Android development (Apache Ant, Java SDK and Eclipse/Android Studio). Also, unlike Ionic framework, OnsenUi requires several additional steps.
 
You will need to download and install:
 
  1. Install nodeJS
  2. Install Yo, Bower, onsenui-phonegap, OnsenUI
  3. Install Cordova
 

1. Install nodeJS

 
Before we can start with OnsenUI, make sure you have Node.js installed. Depending on your Windows platform (32 bit or 64 bit) select Windows Installer (.msi) and download it. During the installation you must remember instalation location. In my case it’s:
 
c:\Program Files\nodejs\
 
Download Link
 
It should look like this:
 
Ionic Tutorial 1001
 
Now go to the node.js installation folder (one I mentioned before), go even deeper until you reach a bin folder:
 
C:\Program Files\nodejs\node_modules\npm\bin\
 
Copy this location and add it to your environment PATH. Take a look at this tutorial if you don’t know how to do that, you will find an examples for Windows XP, Windows 2000 and Windows 7. It should look like this:
 
Ionic Tutorial 1002
 

2. Install Yo, onsenui-phonegap, OnsenUI

 
This next part is optional. Before we install anything using node.js we could change a default installation folder. Original default folder is strangely placed in this hidden location: C:\Users\{username}\AppData\Roaming\npm. We can change this destination folder manually, just go to this folder: C:\Users\{username}\ and create an empty file called: .npmrc (make sure you have administration privilegies over that folder). Edit it and add this line (don’t forget to save):
 
prefix = "C:\\{your location}"
 
Remember you should use double \\ instead of a \. In this article we are using this location: prefix = “D:\\JavaScript\\nodejs”
 
This is the end of the optional part.
 
Yo and Bower are next in the line. Open windows command prompt and type/execute this:
 
npm install -g yo bower
 
Output should look like this:
 
D:\JavaScript\nodejs>npm install -g yo
npm WARN engine yo@1.4.6: wanted: {"node":">=0.10.0","npm":">=2.1.0"} (current: {"node":"0.10.33","npm":"1.4.28"})
D:\JavaScript\nodejs\yo -> D:\JavaScript\nodejs\node_modules\yo\lib\cli.js

> yo@1.4.6 postinstall D:\JavaScript\nodejs\node_modules\yo
> yodoctor

Yeoman Doctor
Running sanity checks on your system

? Global configuration file is valid
? NODE_PATH matches the npm root
? No .bowerrc file in home directory
? No .yo-rc.json file in home directory

Everything looks all right!
yo@1.4.6 D:\JavaScript\nodejs\node_modules\yo
+¦¦ titleize@1.0.0
+¦¦ array-uniq@1.0.2
+¦¦ figures@1.3.5
+¦¦ user-home@1.1.1
+¦¦ opn@1.0.1
+¦¦ async@0.9.0
+¦¦ lodash@3.5.0
+¦¦ humanize-string@1.0.1 (decamelize@1.0.0)
+¦¦ sort-on@1.0.2 (dot-prop@1.0.1)
+¦¦ string-length@1.0.0 (strip-ansi@2.0.1)
+¦¦ cross-spawn@0.2.6 (lru-cache@2.5.0)
+¦¦ yeoman-character@1.0.1 (supports-color@1.3.0)
+¦¦ findup@0.1.5 (commander@2.1.0, colors@0.6.2)
+¦¦ root-check@1.0.0 (sudo-block@1.1.1, downgrade-root@1.1.0)
+¦¦ yosay@1.0.3 (ansi-regex@1.1.1, word-wrap@1.0.2, pad-component@0.0.1, ansi-styles@2.0.1, strip-ansi@2.0.1, minimist@1
.1.1, taketalk@1.0.0)
+¦¦ chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.0, strip-ansi@2.0.1, has-ansi@1.0.3)
+¦¦ update-notifier@0.3.1 (is-npm@1.0.0, latest-version@1.0.0, semver-diff@2.0.0)
+¦¦ package-json@1.1.0 (registry-url@3.0.0)
+¦¦ meow@3.1.0 (object-assign@2.0.0, minimist@1.1.1, camelcase-keys@1.0.0, indent-string@1.2.1)
+¦¦ npm-keyword@1.1.1 (registry-url@3.0.0)
+¦¦ fullname@1.1.0 (npmconf@2.1.1)
+¦¦ got@2.4.0 (object-assign@2.0.0, timed-out@2.0.0, is-stream@1.0.1, lowercase-keys@1.0.0, infinity-agent@1.0.2, read-a
ll-stream@1.0.2, prepend-http@1.0.1, statuses@1.2.1, duplexify@3.2.0)
+¦¦ configstore@0.3.2 (object-assign@2.0.0, xdg-basedir@1.0.1, osenv@0.1.0, graceful-fs@3.0.6, uuid@2.0.1, mkdirp@0.5.0,
 js-yaml@3.2.7)
+¦¦ yeoman-doctor@1.3.2 (log-symbols@1.0.2, object-values@1.0.0, each-async@1.1.1, twig@0.7.2)
+¦¦ insight@0.5.3 (object-assign@2.0.0, lodash.debounce@3.0.2, tough-cookie@0.12.1, os-name@1.0.3, request@2.53.0)
+¦¦ yeoman-environment@1.2.4 (escape-string-regexp@1.0.3, untildify@2.0.0, diff@1.3.0, text-table@0.2.0, chalk@0.5.1, lo
g-symbols@1.0.2, grouped-queue@0.3.0, debug@2.1.2, mem-fs@1.1.0, globby@1.2.0)
L¦¦ inquirer@0.8.0 (ansi-regex@1.1.1, mute-stream@0.0.4, through@2.3.6, lodash@2.4.1, readline2@0.1.1, rx@2.4.3, chalk@0
.5.1, cli-color@0.3.2)
 
Note: I already had Bower so you will not see any logs regarding it here.
 
Continue Reading