Working with Panels, laying out components – Sencha Touch

It has been long since I am writing something on Sencha Touch as I was busy working on HTML5 mobile apps without using Sencha Touch. Soon I will be posting a tutorial on how to build mobile apps using plain JavaScript and HTML5 and not any external library. Ok, let’s get started, in some of the previous tutorials on Sencha Touch we have seen how to work mostly with List controls and customizing the List control to give it a look that you always wanted. However, the List control is a component and to host it, rather display it correctly we need some container element such as the Panel. In this tutorial we will see how to work with Panels.

Read More »

Advertisements

Speaking on Sencha Touch in Guwahati University

Last Saturday I was giving a lecture on Sencha Touch in Guwahati University – Institute of Science and Technology for their annual technical festival and I must say that I was very happy to see the enthusiasm among the students. Through out the day we had sessions on emerging technologies and also some basics for the students as they were only in their 3rd, 5th semesters. They were quite eager to learn new things and the kind of knowledge they already had was very satisfying. I was talking on Sencha Touch and how to create beautiful mobile web apps that run cross platform. Along with how to get started with your first mobile app, I also introduced them to some of the apps that we had already made. My colleagues talked on Android and Drupal. I also introduced them to some of the cool new features of  HTML5 as they were unaware of the recent developments. Overall the day was quite good with nice arrangements and they along with me learnt quite a lot.

Customizing the List control – Sencha Touch 1.0

Update

1. See how to create a simple List in Sencha Touch 2.0 : https://jbkflex.wordpress.com/2012/06/18/creating-a-simple-list-in-sencha-touch-2-0/

Back to actual post,

In this tutorial I am going to discuss and show you how to customize the look and feel of the default Sencha List control. As you might know the normal list control that Sencha provides has a basic structure which looks like the image on the left below. You can see that it has got individual list items which are laid down vertically and can be scrolled down to see more items. List uses an Ext.XTemplate as its internal templating mechanism which defines the look and feel. The data for the List comes from a Ext.data.Store which is bound to it. Whenever there is a change in data in the Store the change is automatically reflected in the List since it is bounded. I have discussed about how to create basic List in my previous tutorials. Now let’s modify the look of the List control. We will make a List that looks like the image on the right. You can see in the new list, it is complete customization of each items. So, now we have more of a <div> block with custom styles and images. Let’s see how this can be done.

Normal List control      Custom List that we will create

Read More »

Introduction to Sencha Touch slides

I had a presentation session on Introduction to Sencha Touch – building  web apps for iPhone, Android and Blackberry. I have shared it in SlideShare and you can access it below

If you are not aware of Sencha Touch, well it is a JavaScript library that allows you to develop mobile web applications that look like native applications on iPhone, Android and Blackberry.

Sencha Touch Mobile application and Drupal mashup

I am working on a Mobile web application (will run on iPhone, Android, Blackberry) that pulls data from a Drupal back end for some time now. I am preparing the screens and data models for the application while my Drupal service mate is preparing the services. Have not attempted this before so a bit vague about how this would turn up in terms of performance and overall compatibility and result.

Here is a sneak peak of the high level architecture.

sneak peak
High level architecture

Any thoughts?

Writing your first Sencha Touch 1 application – Part3

In this tutorial we will add some interactivity to the list that we have created in Part 1 and Part 2. When the user taps on an item in the list a pop up box will show more information about that person. This is how it will look.

Description pop-up
Showing more info on tap

Our list is already showing firstname and lastname of a person. Now, on item tap we need to show let’s say the contact number and address of that person as shown in the figure above. So we need to add the contact and address information to our data array and also reflect the field names in the model. This is how to do it,

Read More »

Writing your first Sencha Touch 1 application – Part2

Till now we have seen how to create a viewport panel and dock a toolbar on top of the Panel. Lets build the rest of the application. Ok, now we need a List and some contact information that the list will hold.

To create a list we will use the standard Ext.List component class and set properties in its configuration object. This is how to create a list

var contactList = new Ext.List({
                             store: store,
                             itemTpl: itemTemplate,
                             height:"100%"
                        });

A list needs data to display as items and to do so we have the store property. This property defines a Ext.data.Store object that holds the data and the schema that defines the structure of the data. I am using the term schema for the data modelling because it seems to make things familiar to me.

Read More »

Writing your first Sencha Touch 1 application – Part1

In this tutorial we will build a simple Sencha Touch application that will help you get started with this new Touch Framework. Sencha Touch is all about developing mobile web applications that look like native in iPhone, Android and Blackberry touch devices. It is a JavaScript library that complies to all the latest web standards like HTML5, CSS3. To start with we will be developing a simple contact list that will store contact information. When a particular contact item is clicked/tapped then an overlay will show more information about that person. This is how it will look at the end.

Contact List
Our application

Read More »

Rounded corners using CSS3

Rounded corners for a div or any container holding your contents in your page looks cool, isn’t it. Good news is that  the latest versions of all the major web browsers support CSS3. So you can use the CSS3  border-radius property directly to create rounded corners. For example to create a 10 pixel border radius this is how it would look. And this works for all browsers.

{
border : 1px solid #afafaf;
border-radius: 10px;
}

There is not much of a work you need to do as you would have done earlier with complex code for handling background images for rounded corners.

CSS3 border-radius compliance for all browsers

Here is an image that shows the compliance table for all major browsers (latest versions at the time or writing this entry). Click here to see a very nice compliance test.

CSS3 compliance table for border-radius

Read More »