Customizing Ionic App Look and Feel

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In previous blog post we started exploring the Ionic Framework for building the Hybrid Mobile Applications. This is just a continuation of previous blog post. In this blog post we will see,

  • Various Color Options from Ionic
  • Setting up SASS for our Ionic Application
  • Customizing the Login page with Background Image

So let's get started.

Various Color Options from Ionic

Ionic Framework comes with at least 9 different color schema as of this writing. Let's quickly look at what they are and how can you use one of them while building your application. In the previous example we looked at one of the color schema named assertive. Following is the list of other color schema.

  • light
  • stable
  • positive
  • calm
  • balanced
  • energized
  • assertive
  • royal
  • dark

If you want to change the look and feel of your Ionic App but do not want to spend a lot of time in designing, all you have to do is decide on one or few of the color schema above and start assigning them as CSS classes to your UI elements. Please refer to following CodePen example. I have different buttons applied with different out of the box styles.

See the Pen XbmbNQ by Keyur (@kraval) on CodePen.

So now you know what different theme options you have, you can start appending these classes to all the elements provided by Ionic.

Setting up SASS for our Ionic Applications

Not every application is going to be bound to these set of 9 themes, although they are pretty good to build your simple to moderate application. You might need to change the styles all together or introduce a new color. You can do that very easily by setting up SCSS for ionic project.

Run following command while you are in your application directory.

ionic setup sass

You will see the .scss file in your project structure where you can override the basic or extend the existing classes with your own styles and CSS rules. For now let's just update the color for one of the theme,positive.


Getting Started With Ionic

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In this blog post we will explore the Ionic Framework for building the Hybrid Mobile Applications. Before we jump into the actual framework let's briefly understand what a Hybrid Mobile application is and why it is becoming more and more popular approach for building the Cross Platform Mobile Applications.

What is Hybrid Mobile Application ?

As we all know, there are three major Mobile Ecosystem are widely popular these days. iOS, Android and Windows and than there are rest of them. And I am sure you have switched between at least 2 of these major Ecosystems in last few years. And while switching the platform you expect that the apps you love on one platform is available on other one. Which is a fair expectation but if you are developer you what that means.

  • You need to learn Objective C, Java and C# to build your application on three major platforms.
  • Continue enhancing, upgrading your applications as the new version are released by platform vendors.
  • Take this approach to an Enterprise and they are faced with even bigger challenges.

In order to solve these type of problems Developer community in general has come up with the idea of building Hybrid applications. Hybrid application is the approach of building your mobile apps using Native Device features along with Web Technologies and deliver them in a Native shell so it just feels like any other regular app. The benefits..

  • Reuse existing Web Technologies/skills HTML5,CSS3,JavaScript
  • Write your code only in JavaScript
  • And still run your application on wide range of devices from different vendors
  • Utilizing the Native Device specific features like Camera,Mic and other sensors (And that is possible through the Cordova platfrom.)

So hopefully this gives you some idea of what a Hybrid application is. There are numerous frameworks out there helping you build these types of apps but Ionic seems to be getting a lot of popularity in the community. So I decided to explore that a bit and this blog post series is a result of that.

Prerequisites for Ionic

Ok so it's not so much of a prerequisite but if you have some idea about following technologies it certainly make life litter easier while learning Ionic framework. So it's good to have basic idea about,

  • NodeJS
  • AngularJS
  • Corodova
  • Web API (At a later point in the series I will show you how to connect your Ionic App with .Net Web API)
  • Basic Sublime Text

Installing Ionic

First things first, in order to work with Ionic you need to have NodeJS installed. If you already have it installed great, if not you can read the blog post I did for on how to install NodeJS on Windows 8.

Once NodeJS is installed, we will use the npm packages provided by Ionic framework to download and setup the Ionic Framework.

Install Ionic & Cordova globally.

npm install -g cordova ionic

And that's it. We are now ready to build our first Ionic application. The framework comes with a very powerful CLI so we can pretty much stay with the command line tool and build our Ionic application right form there, let's do it.

Create Ionic Blank Application

That's right. Ionic out of the box gives you template to create one of the 3 Types of application.

  • Tabs
  • Sidemenu
  • Blank

We will start with the blank first.

ionic start IonicDemo blank

Now it might ask you to create ionic.io account. You can go ahead and create one if you don't have or simply say no if you have one.

Next navigate into the Project directory for our application. We need to add platforms for which we are building the application. For this blog we will only add the Android platform.

ionic platform add android

Next, let's build the application for android.

ionic build android

You might get the error saying "Command failed with exit code 2 You may not have the required environment or OS to build this project".

One of the reason this might happen is that you do not have Android SDK installed or it's not configured properly. To fix this issue, visit this site and download the Android SDK installer.

Again, this could be just one of the reasons. Other reasons might be, not having proper environment variables setup up, version conflict on Andorid build tools. So you will have to do little digging on the web to find the solution.


Introducing generator-efrepo for yeoman

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In this blog post I will show you how to use the new generator-efrepo that I wrote couple of days ago. The idea behind this Yeoman generator is to automate some of the boaring tasks while starting on a brand new project such as,

  • Creating Model classes
  • Adding EntitiFramework NuGet package
  • Creating EntitiFramework Context class
  • Creating Repositories and UnitOfWork on top of your context
  • During public demos you have to create multiple class and integrate EF for data access

This blog post assumes that you have basic idea about the Yeoman generator itself along with EntityFramework CodeFirst and Repository/UnitOfWork design patterns. If not,please do some basic reading on here before you start using this generator. Alright, let's get started.

Installing Yeoman(If you do not have it already)

Then make a directory where you want the Yeoman generator to create the EntityFramework project. Navigate to that folder in your command line tool.Make sure you have nodejs and npm installed on your system by runing following commands.

Check nodejs $ node -v

Check npm $ npm -v

Install Yeoman

$ npm install -g yo


ToDo Manager With AngularJS and Web API Part V

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

Okey,So far in last 4 posts, we have a basic AngularJS project with CRUD opderations on one business entity, Project. If you have missed any of them please follow the below links.

In this post we will do some refactoring to see how we can extract the data access logic into some sort of a service.

Creating the Service

Let's create the new JavaScript file named ProjectService.js in the services folder.


ToDo Manager With AngularJS and Web API Part IV

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

So far in last 3 posts, we have created a basic AngularJS application that brings data from server and displays that as list. If you have missed them following are the direct links.

In this post we will extend the application to allow Create/Update/Delete from the AngularJS UI.

Creating the ADD button

<input ng-show="!vm.ShowForm"
       ng-click="vm.ShowForm=!vm.ShowForm"
       type="button" class="btn btn-primary" value="Add Project" />

As you can see it's simple input button but it is manipulating the property from the scope called ShowForm. We will use this variable to control the visibility of the form. Let's add this property along with one other object and event in our Controller.