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.
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.
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
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.
I 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
The 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/
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.
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.
Thought of sharing some slides from the Bar camp 2010. It is targeted for someone who has some knowledge about Flex and ofcourse beginners can also have a look. A cool Flickr gallery follows the slide. Download the slides from this location Cool web applications with Flex
This is the link to the demo Flickr gallery.
“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
You can download the preview version of Edge right now from the Adobe Labs site http://labs.adobe.com/technologies/edge/