Sencha Touch Spotlight: Novado and Toyota Europe
Novado — a part of the Vanden Broele Communications Group — develops web and mobile applications and has been operating in Belgium for almost 10 years. We reinforce our clients’ communication strategy using online applications. Innovation is our driving force, and we therefore use the latest technology to shape our ideas.
Toyota has been selling cars in Europe since 1963, and the company currently employs 81,000 people throughout Europe. With more than 200,000 hybrids on the road in Europe, both Toyota and Lexus play a leading role in developing and making environmentally friendly vehicles.
Toyota Europe Newsfeed is a mobile web application that we built using Sencha Touch. The application allows journalists, motoring enthusiasts and bloggers interested in Toyota and Lexus to quickly and easily access the latest news, images and video from Toyota’s European headquarters, Toyota Motor Europe. The application is available from the Apple, Android and Blackberry app stores.
“We chose Sencha Touch because it enabled us to use HTML5 and web standard technologies to build the application in the quickest and most efficient way…”
Why We Chose Sencha Touch
Our customer, Toyota Motor Europe, wanted us to develop a mobile newsfeed application for iPhone, Android and BlackBerry. With these cross-platform, cross-browser requirements in mind, we chose Sencha Touch because it enabled us to use HTML5 and web standard technologies to build the application in the quickest and most efficient way — supporting both iPhone and Android, and now BlackBerry.
We also liked the excellent learning resources available from Sencha — including API documentation, tutorials, screencasts, etc. These resources really helped us to jump-start the development process.
Using Sencha Touch, we developed three implementations of the Bottom Tabs, so we could show a list view and a detail view, both with tabs. We used a root TabPanel for switching between two TabPanel’s (list view and detail view). Both views needed different tabs, and nesting TabPanel seemed to be the easiest solution to accomplish this. Tweaking the buttons was easy, and we used ID-selectors in CSS to get the buttons to look exactly the way we wanted.
To display the images and videos, we used an implementation of the Carousel. We were able to tweak the Carousel using HTML and CSS.
Since we wanted the mobile application to work offline, we used Local Storage to store our data. We used the Ext.data.Store object with an AjaxProxy to get the news from a webservice. Several other Store objects (withLocalStorageProxy) were used to cache this data for offline availability.
Our Advice to New Developers
Sencha provides top-class API documentation and other learning resources for Sencha Touch. We recommend that new developers start by reviewing the documentation to get started with their first application. It will help save time and enable efficient code development.
Sencha Touch is the perfect tool for creating cross-platform mobile web applications. The framework provides a wide range of components that are easy to implement and easy to customize