For those may not know, Onsen UI offers a rich variety of UI components and tons of ready to implement features, specially designed for mobile apps. However, with all these possibilities one can’t help but be puzzled about how can all these components be combined to create an app. For that purpose, we in the Onsen UI team will show you how to use a combination of Onsen UI components to create a user interface pattern almost identical to the one of the popular music app Spotify!
Posts for onsen ui
The Onsen UI team has been working to provide you with exciting new features at every new release. Behold as here come some more!
In this article we introduce the features added in recent versions
- Swipe to pop (2.5.0)
<ons-page>and Page Lifecycle Hooks (2.4.0)
- Caching / Preloading External Templates (2.4.0)
This is it. After months of grooming the Vue.js bindings to a sweet and stable spot, the Onsen UI team is happy to announce that our bindings for Vue.js are now available as a permanent product.
As the Vue community is growing bigger and bigger, if you were looking for the best mobile UI framework to build your Vue.js mobile apps with, look no further than this blog post. Just as simple, performant and powerful as Vue, keep reading to find out all about the added value Onsen UI can bring to your projects.
Onsen UI provides native-like styles for all the UI components that presumably work for most of the situations. However, sometimes we want to give our apps a personal touch in the shape of custom styles or animations. Let’s learn how to quickly implement custom “modifiers” to alter the style of our components in this article.
You may have happened to read our last blog post about some of the progress we have reached lately in Onsen UI. Well surprise surprise, that’s not all.
We want to take our hybrid app framework one step further, so besides all those recent updates about stability improvement in iOS and so on, in recent version
2.3.0 we have added brand new core components that you can start using right away.
Keep reading if you’d like to get acquainted with these new components.
You may recall that 2 months ago (March 14) we released Onsen UI 2.2.0. Since then we have continuously worked hard to improve Onsen UI according to the feedback we’ve been receiving (e.g. GitHub issues). That effort culminated in the latest version, 2.2.6.
In this post we’d like to explain what the most recent updates of Onsen UI are all about.
In this article, you will learn how to use Twitter Single Sign On (SSO) with Monaca Cloud IDE using Angular 1 and Onsen UI. The authentication is done by using twitter-connect-plugin. This plugin uses Twitter’s Fabric SDK to enable SSO with your Android and iOS apps. After a successful authentication, the user’s basic information will be displayed in the app.
We are excited to announce that the Vue Components for Onsen UI beta version is finally out. `firstname.lastname@example.org` is now available on NPM and you can start creating Vue mobile apps with the power of Onsen UI. Vue UI for mobile devices made easy.
In this article we also show how to create a kitchen sink app that includes most of the components with and without Vuex.
This week we have two news to announce. First of all, following the recent release of Onsen UI 2.2.0 now we also provide support for it in Monaca CLI version 2.2.0.
Therefore, you can use transpirable frameworks Angular 2+ and React with the new Onsen UI and cssnext.
Moreover, from now on, you can create Vue.js 2 project in CLI based on our standard templates: Minimum, Navigation, Splitter and Tabbar.
The new Vue 2 templates support the
2.0.0-alpha.1 version of the Vue binding and the newest Onsen UI.
Below we prepared a short tutorial that shows how to create a Vue 2 project in Monaca CLI.
Onsen UI 2.2.0 has been released! It comes with new features, some breaking changes and many bug fixes not only for the core, but for Angular, React and Vue bindings as well.
Together with Onsen UI, new versions of Monaca CLI and LocalKit will be released to support the latest changes.
It has been 4 weeks since we released
2.0.0-alpha.0. We know, we know, alpha is a scary tag. That’s why we’re looking to move on from it as fast as possible.
In this post we give you Vue developers the latest news regarding just that.
Obsolete methods of our Vue components in
2.0.0-alpha.1 and later
2.0.0-alpha.0 we provided not only props, events and slots but also methods as an API for interacting with and controlling our Vue components.
But since the use of methods does not come naturally because it does not follow the convention of Vue.js, we decided to obsolete the methods API in
2.0.0-alpha.1 and later.
Hey you Angular developers. Even though Monaca is still to support Angular development in its Cloud IDE, there are some good news. Just about a month ago Cordova added type definitions (from DefinitelyTyped) to their core plugin repositories. So although that’s not released yet, you can already add those plugins to your Angular app.
This post shows you how to do that by means of a very simple example app. It assumes you’ve been using Monaca either through the command line (CLI) or the Localkit.
After a long time working on making Onsen UI framework agnostic and releasing bindings for Vue 2, React and Angular, we plan to give some love to the core library in the shape of new components and features. Discover here the next Onsen UI roadmap.
Hi everyone. I’m Júnio, the most recent intern working with the Onsen UI team. Following our last blog post we’ve been focusing on updating the binding for Vue2 in order to accomplish our established deadlines (and all your wildest dreams).
We are happy to announce that we have finally released its alpha version. Keep reading for details.
In a previous article we introduced how to use the Onsen UI components directly from Vue.js 2.
We are now updating a Vue.js binding for Onsen UI called
vue-onsenui in order to support Vue.js 2.
In this article we announce its release schedule and the development status.
A couple of months ago we published an article on how to create a Pokedex application using Angular 2. Since then, the stable version of Angular 2 has been released and we have released the RC version of our Angular 2 bindings.
In this article we will use Onsen UI 2 and Angular 2 to create a simple mobile Pokedex app. We will use some of the code from the previous article, but we will integrate it with Onsen UI. We will also take a look at the Monaca CLI, which is a great tool for creating, debugging, and developing apps with Angular 2 and Onsen UI.
The YouTube Jukebox app has been updated to Onsen UI 2.0 + AngularJS and now includes a Material Design version. This app uses the YouTube Data API v3 to fetch videos and display them in our hybrid apps. Learn more about the included changes here.
Vue.js is a lightweight library used to create user interfaces. Its powerful but still intuitive API makes it very easy to learn. Vue has long been a favorite for us in the Onsen UI team and we know that some of our users are already creating apps using Vue and Onsen UI. We are happy to announce that we are currently working on adding better support.
Vue 2 was recently released and it looks very good. The API for creating components will stay almost the same as in the previous version, which makes migration very easy, but internally a lot of changes has been made to make the library more efficient.
The fact that Onsen UI is built on top of Web Components makes us proud to be framework agnostic. However, there are so many options out there that we can feel overwhelmed when it comes to choosing a front-end framework to develop with. Especially for those who don’t have a large background in web programming, deciding which framework works better for them could be a tedious task.
This time, we have a special treat for all beginners who want to develop beautiful apps, but don’t know where to start. One of our Senior Software Engineers, Bryan Ellis, created a short Udemy course for those that need a little help getting started with Cordova app development. It takes less than 2 hours and is extremely easy to follow. Without any excuses, it’s time to build apps!
Onsen UI is a UI component library built on top of Web Components. Web Components is an emerging standard that is designed to make it easy to create reusable UI components using APIs that are native to the browser. One clear advantage of this is that the components that you make are not tied to a single library or frontend framework.
In this article we will take a look at the advantages of using Web Components and also at the Custom Elements v1 API that was recently finalized and is looking to become the de facto standard for registering and adding behavior to custom tags.
Web Components is in my opinion not only a technology for writing encapsulated components that can be plugged into our apps, it is also a way to help us stop reinventing the wheel and implement the same components for every framework or library out there.
We recently released Onsen UI 2.0, which is framework-agnostic, supports both flat and material design, offers a rich collection of UI components and is just beyond beautiful and performant. Whoever has tried it was mesmerised, and in order to continue great development and gain better community support, we need your help spreading the word. And we will award your efforts!
We are very proud to take part in Europe’s Largest Angular Conference, AngularConnect. Onsen UI Team is getting ready for a 2-day, multi-track conference that brings together world’s leading Angular experts, including the core Angular team at Google. If you are in London as well next week, make sure to get in touch with us (best through our community forum) and meet us there! See you on September 27th and 28th.
It’s been a little over four months since we released the first RC version of Onsen UI 2.0. Since then we have gone through several iterations, ironing out the creases in order to deliver a great UI solution for all hybrid and mobile web app developers out there.
Onsen UI is an UI framework & tools to create native mobile apps with HTML5 hybrid app technology. It is designed to make it easy and efficient for developers to design apps. We aim to make the UI components easy to use while still giving developers a lot of power to customize their behavior.
All your questions will be answered during our Founder and CEO Masahiro Tanaka’s Reddit (I)AMA session
Have questions about Monaca, Onsen UI, hybrid app development, flying planes, or life in Japan? Anything else? Our founder and CEO Masahiro Tanaka will be ready and available to answer all your questions on September 14th, at 1:30PM Pacific Time. Masa will be in San Francisco during the session, and you can check time date and time for your time zone here.
Onsen UI 2.0 final release is around the corner. We’ve come a long way since we started implementing this version and we want to explain you here what were our reasons and issues. This is a short article that breaks down Onsen UI and some of the technologies behind it.
Giro D’Italia, one of the world’s biggest bicycle races, is in full swing! While cyclists are restlessly hoping for the big win on May 29th, our team celebrates a win on our own: We were very honored to learn that the makers of the official Giro D’Italia app chose Onsen UI for creating this marvelous project.
With Cordova it is easy to build functional hybrid apps for all the major mobile platforms, including Android, iOS and Windows Phone. However, making the apps look good is a much harder task. Luckily, with the help of the Monaca CLI and React Components for Onsen UI this became much easier. In this blog post we are going to look at some benefits of using these technologies.
Onsen UI 2.0 Release Candidate was released last week together with React Components for Onsen UI. Angular2 extension is on the way and at the same time we are focusing on improving Onsen UI development stack, e.g. tools and services complementing our framework that will make your development process much smoother. Here you have the latest news around Onsen UI.
We’re proud to be supporting the new developer survey run by our friends at VisionMobile! This is the 11th developer survey. We’re happy to support Developer Tools Benchmarking and hope you will be willing to participate and help determine most accurate results.
Proudly presenting another Ninja App Contest winner, the patient waiting time monitoring app, Opal.
Redux is inspired by Flux, which was developed by Facebook. Unlike Flux, Redux is quite flexible and does not require any specific infrastructure like GraphQL. We will use Redux in combination with Onsen UI to build a simple Calculator mobile app. One of the nicest things about this app is that it will look native, both on Android and iOS, due to Onsen’s autostyle feature.
We just released docs for the React components: Check them out!
In this article we will take a look at how some of the more complex components are used. Since this extension is still in development we would like to get all the feedback we can so we can refine the APIs and iron out all the creases.
We just released docs for the React components: Check them out!
React has gotten immensely popular in the last couple of years. I don’t know how many times we have been asked if Onsen UI can be used with React or when we are going to add support for React. When we first announced Onsen UI 2.0 we promised that it will ship with React support and I am happy to say that we will fulfill that promise.
We have developed a collection of React components for Onsen UI 2.0. In this article we will take a look at some of them and show how they are used.
As we mentioned in a previous post, we just released a new killer feature called automatic styling for Onsen UI 2.0. This feature allows you to style your app for both iOS and Android automatically with little to no effort.
The new beta version of Onsen UI 2.0 is out! Apart from several fixes and performance improvements, we are introducing a bunch of new features that will make you fall for Onsen UI 2.0 if you didn’t already. Automatic styling, new structure for list items, promises for asynchronous methods and more.
Adobe wrapped up the PhoneGap Day US about two weeks ago. The conference was held at the beautiful Adobe office in Lehi, Utah. Monaca x Onsen Team was very proud to attend this event and make a contribution to the PhoneGap community.
Electron, formally known as Atom Shell, allows people to use web technologies to build cross-platform applications. Unfortunately, Electron hasn’t supported any Hybrid App Framework so here comes Onsen UI! In this blog post, we will try to integrate Onsen UI framework into a demo Electron app to see how it works.
I would like to take some time to expand on what Material Design is and the approach we have been taking when implementing it in the new version of Onsen UI.
In the previous version of Onsen UI, there was only one theme and it only tried to mimic the visual design of iOS. This is not a problem as long as you only target iOS, but since the app will look like an iOS app, the users might not feel at home when they run the app on an Android device. Things like the navigation bar, tabs, buttons all look completely different in iOS and Android. There are even some components that exist in Android that don’t even have a counterpart in the visual language of iOS native apps.
An important thing to note when talking about hybrid apps is that even though the developer might regard it as nothing but a web app, from a user’s perspective the app is actually more often compared to native apps since that is what the user is normally running on his or her device. In this case the user’s perspective more important. You should not be able to distinguish an ideal hybrid app from it’s native equivalent. Of course, it might be impossible to get the exact same performance from a hybrid app, but for the visual appearance it is possible to get very close. That is what we’re trying to do with Onsen UI. By adding Material Design we are getting one step closer to that ideal.
In this tutorial we are going to learn how to use the Foursquare API and Google Static Maps API to create a Places App with Onsen UI and AngularJS. In this app we will be able to search for a particular place and filter the results by food, shops and outdoor places. There will be also an integrated static map which will lead to the Google Website once clicked.
Los Angeles, Dallas, Boston, New York City, Seattle
Get ready for us!
Our team is organizing a series of meetups throughout the United States. In addition to our presence at the PhoneGap Day US in Salt Lake City, we are kindly inviting you to join ur meetups in Los Angeles, Dallas, Boston, New York and Seattle. For information about each city, please check the links inside the article.
The new version of Onsen UI is coming and we are paving the way. We are happy to announce that the new Monaca x Onsen UI Community Forum has been released! Many developers have requested a forum for Onsen UI and Monaca Tools where they could ask questions, share their progress, get community feedback and meet other developers. We hope you like it and join our brand new community!
Gary Meyer, a Colorado volunteer ski patroller, won our Monaca x Onsen UI App Ninja Monthly Contest for creating a flawless hybrid app that solves real-world niche problems.
Kintone by Cybozu lets you quickly and easily build your own customized business applications such as daily reports, minutes, time-card, and surveys. It also lets you create applications using Excel or CSV files to satisfy your own needs.
Kintone provides a lot of features in the web browser but here we focus on developing using Kintone API and Monaca to transform your custom business application into a hybrid mobile application.
I’m very excited by the possibilities Firebase has for mobile apps. Using Onsen UI, AngularJS and Firebase I’ve made a simple app to illustrate how it can be used. Instead of creating my own database, I’ve used the Hacker News API since it already has a lot of data and new items are added frequently so we can try out the live syncing functionality in Firebase.
The road that will bring us to Onsen UI 2.0 becomes more exciting every day. That’s why we are happy to introduce a new Onsen UI element: The
The element has been developed with the purpose of offering even more UI customization than before, as well as making it easier to make responsive hybrid apps! With
<ons-splitter> you can easily support both tablets and phones with the same code. The element will automatically transform depending on the size/orientation of the device. Wouldn’t it be great to support iPhone and iPad with the same code? With this element it’s not only possible. It becomes a simple task.
What are you waiting for? Let’s take a look at it and see what it has to offer!
As you probably already know, Onsen UI is based on AngularJS. Nevertheless, many of our users asked if it’s possible to use it with other frameworks, especially React. In this tutorial, we will show you how to develop a very simple Instagram app by using Onsen UI and React. We will create a simple gallery using React and Onsen UI!
Although the current stable version of Onsen UI is 1.3.11, we will be using the development version of Onsen UI 2.0. We are getting close to releasing the alpha version and it is already quite stable. Onsen UI 2.0 is framework agnostic. It is no longer dependent on Angular, which means it integrates a lot better with other frameworks.
We have some exciting news for all of you developing hybrid apps for Android! Onsen UI 2.0 is adding Material Design!
Since Onsen UI hybrid app framework can be used to create apps for iOS and Android, it makes sense to provide native-like UI components for both platforms. That’s why we are currently implementing Material Design, adding new components alongside the current iOS based ones.
Many users have requested the Material Design support. We’ve listened to those voices and are working hard to make it available for you as soon as possible. Material Design is currently being implemented in parallell with Onsen UI 2.0, so get ready for native-like Android components included in the next major version.
We would like to give you an update on what we’ve been working on lately and what we have in store for the future.
Onsen UI 1.3.4 was just released with a bunch of improvements. As we’ve mentioned earlier we’re also hard at work with the next major release of Onsen UI which will be version 2.0.
We’re really excited about this release and we hope you are too!
AngularUI Router is perhaps one of the most used modules out there for AngularJS that allows you to organize the parts of your interface into a state machine. Onsen UI doesn’t use URL routing but navigates from one page to another programmatically using the custom elements. However, since in ui-router we can define state transitions and not only URL routes we are able to combine Onsen UI and ui-router in the same app. Learn here how to do it.
Dear followers, as many of you probably already know, this week, in San Francisco, the Angular U Conference 2015 will be held. For those of you who never heard of it, Angular U is an Angular conference covering Angular 1.x, 2, TypeScript, ECMAScript 6, Web Components and more. That’s why we couldn’t miss this event!
Andreas Argelius, core developer on Onsen UI and Monaca, will attend the event and talk about “Angular + Cordova + Monaca = Killer mobile app development”!
Ohalog (オハログ) is a new and free Onsen UI application which analyzes and logs your sleep and helps you to find the optimal conditions to rest better. This app was made by the same team that also developed the famous Unlog (ウンログ) app, which already has more than 300.000 users in Japan.
After having introduced how to create a Simple App for Windows Phone 8.1 using Onsen UI, it’s time to demonstrate the potentialities of our framework with a new tutorial! This time we will create a Todo App with Onsen UI, using the services provided by Azure, to host our data, and the new Onsen UI Templates for Visual Studio 2015.
We are releasing a set of Cordova + Onsen UI templates prepared to run on Windows Phone 8.1, so we now have a good way to develop for this platform using Onsen UI. These templates follow the Cordova App structure, what means that they are appropriate for Cordova CLI but also for the new Visual Studio 2015, as we will explain in this post. And to top it off, these templates are also available for TypeScript!
Onsen UI has a wide set of premade themes, which cover a rich set of color combinations. Although the default colors look good, when creating an app with Onsen UI we recommend customizing the theme to give the app a personal touch. Branding is important since it differentiates your app from others and makes it easily recognizable.
How can the developer modify these themes, to give the Onsen UI components the desired colors? There are two ways to accomplish this.
The first one is to use our Theme Roller Tool, which provides, thanks to an intuitive graphical interface, an easy way to customize Onsen UI themes.
The second way to customize themes is by modifying and compiling the Stylus files. Using an automated gulp task and live reloading this approach also powerful and easier to integrate into a normal developer workflow.
As you know, last week we announced the new version of Onsen UI, which offers Windows Phone support. If you have missed it, take a look here. We promised updates and guides about the new tools implemented to develop hybrid applications compatible with Windows Phone 8.1. That’s why, in this tutorial, we will explain how to develop a Cordova app based on Onsen UI and compatible with Windows Universal platform, which includes Windows Phone 8.1.
As part of the new utilities introduced in version 1.3, Onsen UI now supports TypeScript. Don’t worry, we won’t port Onsen UI to TypeScript, but we’ve got type definitions to support those who prefer a strongly typed development!
These definitions will inform you about the existing objects, functions and parameters while you develop with Onsen UI, and will automagically check that your app doesn’t mess up with function and variable types.
More hybrid and cross-platform than ever: your mobile apps developed with Onsen UI now run on Windows Phone!
Miscrosoft’s platform is getting popular and its popularity is expected to keep rising when Windows 10 arrives. Onsen UI will help you to reach this market with the same code that is already running on Android and iOS. You can now support three platforms with the same effort as supporting one would take!
We are happy to announce that Onsen UI 1.3 has just been released! In the new version you will find not only bug fixes and improvements but also some awesome new features that will improve the experience of using Onsen UI. We also believe this is the most stable release of Onsen UI to date.
One of the main features introduced with this version of Onsen UI is a Window Universal (Windows Phone 8.1, Windows 8.1 and IE 11) partial support! We will release another blog post in the upcoming days describing exactly what this entails.
In this article we will introduce some of the main changes and additions in the framework. For a full list of changes, please refer to the Changelog.
Petoom is an original application made with Onsen UI that is becoming popular among people who want to find the proper partner for their beloved pets (dogs and cats).
The app allows the user to save its pet’s profile with information such as race, age and gender. Pictures and even copies of pedigree can be uploaded if desired.
As you know, we are entering the final stretch of the Onsen UI 1.2.2 release, that’s why, after the introduction of the Lazy Repeat feature, we want to introduce another new feature of this release. The Pull Hook feature can be accessed using the
This feature is very convenient for fetching data from external sources (like a database, RSS feed or web API) into our application, when the user wants to check for updates. It is also a very convenient feature for the developer, since it allows to “hide” the fetching process of big amounts data with a nice graphical interface that gives to the user an impression of a shorter waiting time.
One of the features that the upcoming release of OnsenUI provides is the
ons-lazy-repeat component. Frequently we need to load lists of elements that are large enough to slow down the app or even freeze it until the loading is finished, worsening the user experience. Here is where the new
ons-lazy-repeat comes in.
ons-lazy-repeat will consider the item heights in order to display enough elements on the screen but wait to load the rest of them, thus improving the loading times and the user experience while avoiding possible problems for slower devices or connections. Further, at the same time it loads new elements that come into view,
ons-lazy-repeat will also unload items when they are not visible anymore. With this approach, a list with millions of items can be rendered without a drop in performance.