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


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

Continue reading “Customizing the List control – Sencha Touch 1.0”

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.

Adding events to your Adobe Edge HTML5 animations

Although HTML5 animations using Adobe Edge is very new but the things that you can do with this new tool is breathtaking though, which otherwise would have been very hard to achieve writing code to do the same. I tried some basic animated banners using Edge and it looked just like flash banners. Alright, so we know that we can create cool stuff with Edge but I wanted to add events to the animated banners. Lets say that on click of a text or an image you are taken to a new URL or may be you open a pop up.  The requirements can be different. So lets quickly discus on how to add events to your  HTML5 animation that you have created using Edge.

Continue reading “Adding events to your Adobe Edge HTML5 animations”

Adobe Edge – HTML5 animation

HTML5I have just tried out the new preview release of the Adobe Edge tool and created an animation based on HTML5. As I have posted earlier that Adobe has this thing called Edge with which you can do stuff like Flash, you can add tweening animations, effects, move the objects, ease out, ease in and do a whole lot of stuff. What you can do is that you can download the preview version, its free but only for 142 days, that sounds enough to get you going and may be complete a couple of projects within the time limit. The animation runs in all the latest version of browsers. Some cool stuff can be done. Check out the animation here

Here is a video to get you started: Edge closer look by Adobe Fellow Mark Anders

HTML5: Edition for Web Authors released

HTML5The first working draft of  HTML5 specification has been released on 9th August 2011 for the Web authors. It is a subset of the actual and full specification which is speculated to be released in 2014. It is targeted towards Web authors and others who are not UA implementors and who want a view of the HTML specification that focuses more precisely on details relevant to using the HTML language to create Web documents and Web applications. Here is the official release document page: http://www.w3.org/TR/2011/WD-html5-author-20110809/

Happy Birthday HTML5 !

August 5: Yes, it is here, today is the birthday of HTML5. So HAPPY BIRTHDAY and may you live thousands of years.

Yes I know I do not have any gift to present, but I can become a well wisher of HTML5 by diving into it. HTML5 is getting bigger by the day and even Adobe has started to consider it and had launched the preview version of the Edge tool. Apple already said that they are never going to allow flash run in iOS devices.

Happy BIrthday
Picture from HTML5 Blog : http://www.html5blog.org/2010/08/05/html5-day/

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?

Adobe focusing on HTML5 with its new Edge software

Adobe EdgeAdobe has indeed started considering HTML5 as a big threat to flash technologies and has started to focus on the new web standards of HTML5, CSS3. Adobe’s main answer to doing fancy things on the web was the  flash player, a plugin that needs to be installed with web browsers to view rich contents on the web page. Now with the rise of mobile and tablet devices starting to support the new web standards for HTML5, CSS3 and JavaScript when Flash was either being not supported or not allowed to run in these devices has led Adobe to come up with quick answers.

“What we’ve seen happening is HTML is getting much richer. We’re seeing more workflow previously reserved for Flash being done with Web standards,” said Devin Fernandez, product manager of Adobe’s Web Pro group.

With the public preview release of their new Edge software thay have made this clear that they are serious. This is what they are saying about Edge

“Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.”

You can download the preview version of Edge right now from the Adobe Labs site http://labs.adobe.com/technologies/edge/

This official video will also help you to get started