Onsen UI Lessons -1

1) What is Onsen UI ? Why we need it?

You might be thinking I already have knowledge of Bootstrap why then I need another framework need to learn for hybrid app development? The question is right you can integrate the boostarp in phonegap very easily , but…

We are making Hybrid apps, not just only web view applications for mobile devices. There are many things rather than just responsiveness for mobile applications. So we need more than the bootstrap, that will make our hybrid apps feels like native ones. So the Onsen UI is front end framework for hybrid mobile app development.

Hybrid Apps are the mobile applications made using the front end web technologies like HTML5, CSS3 & JS. One of the way to make it is using PhoneGap, the PhoneGap is developed by Adobe for hybrid app development. The most beautiful thing about these apps is that they are cross platform, means code once and make app for diffrent platforms like Android . iOS, Windows Mobile.

2) Basic Requirements for Learning Onsen UI?

If you are web developer then it is easy for you to start with Onsen UI. BUt if you are not then don’t worry ! It require just some basic knowledge of HTML , JS & CSS i.e. front end web development technologies. If you want to know basics of these will have posts about basics those technologies on the site too.  

Following Are links :

 
3) Installation of Onsen UI You Can Either Use CDN’s or Download it. A] CDN’s for OnsenUI ..    
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
B] Download Latest Vesion Of Onsen UI from GitHub Click Me To Go Github Onsen UI Repository. C] If you want to install with NPM then just use this command npm install onsenui –save
4) Creating You First Onsen UI App Create The Simple HTML file N use following Code.

<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
</head>
<body>
  <ons-button onclick="alert('Hello World!')">Click Me</ons-button>
</body>
</html>
The Above Code Will Create an Click Me Button. When User Clicks on that, I will show Alert saying “Hello World”. Thats easy to use it.

This is just starting tutorial , nothing new we just added CDN’s n Create simple Code to show alert of “Hello World”. But Stay Tuned will increased usefull tutorials daily..

Please keep your thoughts with me using the messenger icon on right bottom or in commnets.

Thanking You !!!!!!

Leave a Comment

Your email address will not be published. Required fields are marked *