Trying to make a transparent openGL view which allows the user to paint on a transparent canvas with the background views visible is a problem I faced. Often crashes start occuring once you add multiple openGL views on a single view i.e adding multiple transparent paint canvases on a single view. These crashes are shown to be occuring because of the application receiving memory warning and the delegate “didReceiveMemoryWarning” being called.

After spending a lot of time with OpenGL , trying to figure out  a way to reduce the memory footprint (using instruments in Xcode), one gives up. The solution thus thought turns out that ipad1 cannot support multiple paint layers and the functionality has to be restricted for user to be able to add only a single layer per view, which indeed is not true.

Now comes the boon of UIBeizerPath class. This class introduced in iOS 4 SDK  makes it a lot easier for a developer to make multiple transparent paint canvases and add it to a single view without having a high memory footprint.

Steps on how to make use of UIBezierPath :

-       Add a new UIView class to the project , name it paintCanvasView.

-       Add two objects  in header file,

UIBezierPath *bPath;

UIColor *bColor;

-       Initialize these objects in the init method by overridding it.

self.backgroundColor=[UIColor clearColor]; //Any color

bPath=[[UIBezierPath alloc]init];

bPath.lineWidth=10;

bColor=[UIColor redColor]; //Any color

-       Override drawRect

[bColor setStroke];

[bPath strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];

-       Implement Touches Began

UITouch *bTouch=[[touches allObjects] objectAtIndex:0];

[bPath moveToPoint:[ bTouch locationInView:self]];

-       Implement Touches Moved

UITouch *bTouch=[[touches allObjects] objectAtIndex:0];

[bPath addLineToPoint:[bTouch locationInView:self]];

//We need to reset the display at each finger movement

[self setNeedsDisplay];

That is it.

You can use this PaintCanvasView Object in your code like any other UIView Object.  I hope this post would help some developers who are unaware of UIBeizerPath class and its uses. A further implementation of this is adding pattern to the rendered strokes. This pattern can be rendered on the strokes using pattern image , assuming pattern.png. Replacing the bColor with a pattern image in init method would do this trick.

bColor=[[UIColor alloc]initWithPatternImage:[UIImage imageNamed:@"pattern.png"]];

Update 16May’12

Adding infinite undo and Redo managers:

-   Add two arrays to paintCanvasView.h

NSMutableArray *pathArray;

NSMutableArray *bufferArray;

-   Add two methods to paintCanvasView.h

-(void)undoButtonClicked;

-(void)redoButtonClicked;

-   Allocate the arrays in init method

pathArray=[[NSMutableArray alloc]init];

bufferArray=[[NSMutableArray alloc]init];

-   Modify drawRect in paintCanvasView.m to draw from pathArray

- (void)drawRect:(CGRect)rect

{

[[UIColor redColor] setStroke];

for (UIBezierPath *_path in pathArray)

[_path strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];

}

-   Add bPath to pathArray  in touchesBegan

UITouch *btouch=[[touches allObjects] objectAtIndex:0];

[bPath moveToPoint:[btouch locationInView:self]];

[pathArray addObject:bPath];

-   Define undoButtonClicked and redoButtonClicked to modify pathArray as desired.

-(void)undoButtonClicked

{

if([pathArray count]>0){

UIBezierPath *_path=[pathArray lastObject];

[bufferArray addObject:_path];

[pathArray removeLastObject];

[self setNeedsDisplay];

}

}

-(void)redoButtonClicked

{

if([bufferArray count]>0){

UIBezierPath *_path=[bufferArray lastObject];

[pathArray addObject:_path];

[bufferArray removeLastObject];

[self setNeedsDisplay];

}

}

That is it.

There is no rocket science to make an infinite undo manager for paint or sketch. One can simply maintain two arrays, buffer and path. By easily maintaining all items removed from path array in buffer array, redo functionality is achieved.

It can be downloaded from github.

Features

1. Easy to use, just like normal UIView.
2. Fully customizable
3. Optimized for different resolutions, including iPhone, iPad and iPhone 4 (Retina Display)
4. Callbacks can be implemented to call specific methods on rotating the view.

Usage

Very similar to UIView. For VSRotatingView, you can initialize with “new” method:

VSRotatingView *rv = [VSRotatingView new];
[view addSubview:rv];

Initial Steps

1. Download and add the complete “VSRotatingView” folder in your project from here.
2. You need to add three frameworks in your project – QuartzCore, AVFoundation and Security.
3. Add #import “VSRotatingView.h” to the top of view controller in which you are going to use the above code and you are ready to go.
4. Function “- (void)viewCirculatedToSegmentIndex:(NSUInteger)index;” can be called in its delegate which can be used to know when view is beeing rotated and which segment is the current selected one.

Customizing this view is a lot simple. Variables could be modified in VSConstants.h to get desired functionality and the main image of dial can be replaced easily with image named “pain-cycle.png”. Complete code can be accessed in VSRotatingView.h/.m files and full modification is possible.

Two demo applications are included in the project. Project#1 shows the default functionality of this component. Demo project#2 shows how you can customize this view and show a 360 degree view like the one below:

This component can be used to make various applications like wheel of fortune, etc.

Well! ConfConnect is our answer.

We have been attending RailsConf year after year and really we’d pour through event agendas and printouts of the sessions we wanted to attend, touch base with people we wanted to see and arrange meeting times and places, and then struggle to find meeting places. Networking events were challenging when all we had to go on were people’s name tags, especially if all they displayed were first and last names. We worked towards changing this experience back in 2010 by first launching ConfConnect as a Rails and iOS application.

About ConfConnect

ConfConnect is an intuitive application that lets you organize conference sessions and create your own schedule. It also allows you to post feedback, comments and recommendations about the sessions. The app is particularly useful for multi-track conferences where attendees need to choose the sessions they wish to attend.

With ConfConnect we have made an effort to enhance the attendees experience at the conference by providing them a basic and easy to use application that allows them to create a personalized schedule effortlessly and one which is readily available in their pockets for reference.

We would soon be launching the updated version of ConfConnect in the days to come. This version of the application has been re-envisioned and rebuild from the ground up with the entirely new design, interface and usability.

Amidst the stiff schedule and deliveries for client projects our development has been hard pressed for time but still managed to pull it off by throwing in some extra efforts. And the application is now ready to be launched across MULTIPLE platforms – Web app (Ruby on Rails) and mobile app (for iOS, Android and Windows Phone 7)

ConfConnect iOS and Windows Phone 7 app are in the middle of their respective review process and is expected to be made live soon.

Android App is available to download at – http://bit.ly/HPebRQ

Till the time we are up and running with our new application, take a sneak peek at the upcoming changes and tweaks below:

Statistics show there is a continuous rise in the number of text SMS across the World, but even then more often than not, we miss to send important messages to our family, friends, officemates, or business partners on right time. This is where SMS Scheduler for Android comes to your rescue.

By developing this Android app we have tried to supplement the native messaging service with the ability to auto send messages at later point in time. So with SMS Scheduler installed on your Android Phone you can be the first one to send holiday greetings, occasion wishes, reminders, meetings, etc to your family, friends, peers and colleagues.

If you are a happy owner of Android Phone you definitely need to get your hand on one of the most slick, simple yet powerful SMS scheduling Android application with great interface.

About SMS Scheduler and its Features

Use SMS Scheduler and never forget to send those important sms!

SMS scheduler comes with a nice, simple and easy to use interface that allows you to schedule your messages to be sent on specific date and time. You can either schedule a message to be sent to an individual or a group.

No more reminders needed, never miss birthdays, anniversaries, holiday greetings and important meetings. Simply set the date and time for the message to be delivered and leave the rest to your phone to send the message for you. The SMS would be sent automatically without any user interaction.

So this holiday season don’t forget to send your wishes and greetings to your family, relatives and friends!

Features:

1)    Choose message text from pre-defined templates
2)    Add custom messages to templates
3)    Add your own groups
4)    Recipients can be typed in directly or selected from contacts
5)    Choose multiple recipients to send messages
6)    View history of sent and delivered messages
7)    Enter messages using Google voice
8)    Messages are classified as Scheduled, Sent or Draft

Application Marketplace Link - http://bit.ly/xVFQKi

This is the first version of the application that we have launched. We would be making constant enhancements in our consequent releases to boost its usability. Meanwhile, we would be happy to receive any feedback, opinions and comments that you might have for the application.

“What a spin!”

“Just missed the net!”

“Deuce!”

These aren’t the standard phrases that you would expect to hear at a development company.

But at VinSol, you would hear them many times a day!

Ever since we got a new Table Tennis table, 60 minutes of game play has become a part of our daily routine.

To the average manager / employer, it might seem as a waste of time.

For those who are truly looking to get the best out of their team, this is just what the doctor ordered.

I have seen productivity rise both before and after the game play.

While teams work diligently during the day knowing that their day is shorter by an hour; after the game, they carry the high energy levels to their desk and work with the same zeal they show when trying to win a point during the game.

Not to mention the camaraderie it generates while playing together.

Also, I found an interesting pattern with the teams who are playing regularly.

The sportsman spirit they show during game play is also reflected in their work.

We use Agile frameworks like Scrum and XP to deliver the great work we do.

These frameworks have mature individuals as their cornerstone.

I have seen sportsman spirit transforming into maturity while working with these individuals.

Besides, daily game play also takes care of one’s fitness aspects thereby relieving one of his computer and chair and allowing one to relax his mind and exercise the body at the same time.

I believe that writing good code is an art, not something that can be inculcated by merely reading books and online tutorials.

If we expect such creative skills from individuals/teams, then even we need to think out of the box on how to inculcate such skills in them.

At VinSol, the new TT table was the one of such solutions.

Game on pal!

The truth is, without proper analysis we only have a vague sense of where our money goes and this where the real need of an expense tracking mechanism becomes essential.  Needless to say, not just any expense tracking application would do. It can be argued that there are many ways to track expenses and one should pick the one that suits the requirements. But at the same time the method should be hassle free and not cumbersome or time consuming. And there is no better way to be able to track your expense on your mobile while you are ‘On the Go’.

After having used a variety of Android applications for expense tracking and management, we were itching to develop our own version of an expense tracking and management app, as we felt there were many apps that lacked user friendly UI, ease of use, were over burdened with features, etc.

What we are able to achieve with our Android application is a simple, clutter free, intuitive yet powerful expense tracking application that addresses the need for monitoring daily expenses.

The application is out in the Android Marketplace and into the hands of many people with Android devices wanting an easy way to track and manage their expenses.

About Expense Tracker and Features

Expense tracking ‘On the Go’ becomes a whole lot easier with this easy to use, intuitive and simple daily expense management application. ‘Expense Tracker’ helps you to manage your money 7 days a week, 24 hours a day.

Just as the expenses do not stop, neither should money management. And with money being a limited commodity (for most of us), it is important to use it judiciously. ‘Expense Tracker’ is developed to help everyone who has the need for financial management and that includes everyone who indulges in economic activity of any nature.

Features:

1)    Set reminder for expense entries
2)    Track exp on daily, weekly, monthly and yearly basis
3)    Graphical representation
4)    Mark expense entries as favorite and later add it as an expense from favorite
5)    Take a picture of the expense receipt and save it for future reference
6)    Save expense as voice recording
7)    Log location of the expense automatically
8)    Date and time of the expense is logged automatically
9)    Expenses can be modified to a previous date

Application Link - https://market.android.com/details?id=com.vinsol.expensetracker

Well, that’s true….sort of…but what on earth does it mean.

Let’s find out.

Every iPhone, iPad, and iPod touch has an identifier unique to that device.

It is called a UDID which stands for Unique Device ID.

Some apps use it directly or some create a hash using it to uniquely identify the user/device.

They use a property called “uniqueIdentifier”.

Apple is now deprecating the method that is used to access the UDID of a device from within the app.

In other words, this method is slated for removal in some time and the apps already using this need to make provisions to transition off it.

Here’s what they say in the documentation.

Now how does Apple’s decision affect the stakeholders.

As for end users, it doesn’t affect them at all.

They have remained oblivious to the presence of UDID and would continue to do so.

There have been some blog posts around users screaming that their privacy is being compromised just because the app is sharing their UDIDs.

Baah! I dont see why that should be a big privacy concern.

There is a significant change for developers / app providers and advertisers however.

Some applications needed to identify individual users, say for subscription purposes.

Either they required all users to have an account at a central location, or they had to identify the user remotely on his device.

UDID helped in the latter scenario.

Using UDID and a little analytics code, the app provider could get valuable insights into the usage of the app.

However, with UDID going away, each app would have to create its own identifier for each device.

While that alone would not be a problem, the issue would be in reconciling this data with the previous data that used other means of identifying a user (UDID or a hash based on it).

So unless the app developers can find out a cunning way to reconcile the data, they would be starting afresh essentially.

Because this analytics data was the advertisers’ holy grail, they have nothing to cheer about either.

But why is Apple doing this anyways?

Well, “Who is John Galt”?

[I am reading Atlas Shrugged by Ayn Rand of late and this phrase stuck.]

Some highlight privacy concerns, including law suits, raised by some users of late (which I find frivolous).

However, there might be a hidden agenda of Apple in seeking to discontinue use of UDID.

Apple gets a share of the revenue generated by selling paid apps on its store.

It also gains from paid subscriptions.

Normally, when you buy a paid app, you can download it on another device at no extra cost by signing in with the same Apple id.

Apple gains on the first purchase, but subsequent installs don’t add to its coffers.

However, there are some paid apps that charge you for every install.

So if you paid a dollar when you bought and installed the app on your iPhone, you might have to pay some more to install the app on a new device, say your iPad.

This model is made possible only by identifying the devices individually and not necessarily the user alone.

Doing away with UDID would do away with this model too.

Could that be the reason?

Well, we would see.

Enough of doom and gloom.

There’s still a way out.

If you don’t really require any feature offered by iOS 5 SDK, you can continue to use any lower version and still access a device’s UDID.

The access is going to be deprecated only for iOS 5 SDK.

So unless you want to use iOS 5 SDK, you are good.

So long.

I have summed up my thoughts below.

On a cold winter morning of 13 Feb 2001, at a ski resort in Utah, the Agile Manifesto was born.

The newborn had 17 fathers (ahem ahem), all stalwarts of the software industry, trying to be Agile in their own way, ahead of their times.

Though some leading software practitioners were following some form of Agile (without calling it that), the real precipitation of thoughts happened in February 2001.

And thus emerged the Agile methodology of software development as we have come to know it.

In 2011, while the whole Agile community was united in celebration of 10 years of Agile, there were a lot of Agile practitioners who felt the need for a change – maybe a change from Agile to another methodology (like Agile was to Waterfall), or changes in the basic foundation of Agile (the Agile Manifesto and its 12 core principles).

This whole dissonance stemmed from not achieving the kind of success we had hoped for.

Their concerns did resonate with me but when I dug a little deeper, I realised that difference between our results and expectations arose from the way Agile was implemented, the way it was morphed into something else, a commonly known phenomena as “Agile-but”. (You might have hears people saying, “we do Agile but….instead of X we do Y”).

It is completely okay to let Agile fit your organisation as it is not a set of commandments one ought to follow. But there is a “spirit” that is embodied in the Manifesto and the principles which should never be compromised.

I agree that it is really tough to explain that spirit in words but you would get a sense of it once you start “living” Agile, not just following it, or doing it, or practicing it.

(God! I am sounding like Yoda instructing Luke Skywalker: “You must feel the Force around you. Here, between you, me, the tree, the rock… everywhere!”)

While I was preparing for this presentation, I came across a wonderful tongue-in-cheek take on Agile

We have heard about new ways of developing software bypaying consultants and reading Gartner reports. Through
this we have been told to value:

Individuals and interactions over processes and tools

and we have mandatory processes and tools to control how those
individuals (we prefer the term ‘resources’) interact

Working software over comprehensive documentation

as long as that software is comprehensively documented

Customer collaboration over contract negotiation

within the boundaries of strict contracts, of course, and subject to rigorous change control

Responding to change over following a plan

provided a detailed plan is in place to respond to the change, and it is followed precisely

That is, while the items on the left sound nice
in theory, we’re an enterprise company, and there’s
no way we’re letting go of the items on the right.

The above conveys my sentiments on the current state of “Agile” well.

And let me not stop there.

I have come across enough real-life examples to illustrate this.

These examples are from companies / projects based on Agile methodology.

I have mentioned them under the statement that they seem to violate

Individuals And Interactions Over Processes And Tools

1. “This part was not implemented because it was not written in the user story. So what if it was discussed.”
2. “Please create a ticket/story for whatever you want to be done”
3. QA/Tester: “Wait. Don’t fix the issue now. Let me first create a ticket on it”

Working Software Over Comprehensive Documentation

1. “We are Agile. We don’t document”
2. “User stories need to include even the last bit of detail”
3. After a sequence of changes over time with a functionality, “Make sure you reflect the changes in the stories”

Customer Collaboration Over Contract Negotiation

1. “Lets write detailed user stories about the features that would go into the project so that the customer/developer is bound by them”…(later)…“Hey, that was not in the scope”

Responding To Change Over Following A Plan

1. “We are Agile. We don’t plan”…(LOL)
2. “We never discussed this feature”
3. “I don’t care if your system crashed, I want this functionality delivered by weekend”

I would like to share a quote that, I believe, truly represents that spirit of being Agile

Float like a butterfly,
sting like a bee
- Boxing legend Muhammad Ali.

Wrapping this up, saying that Agile needs change when we were not able to implement it properly is akin to saying that one has wrong feet when he is wearing shoes wrongly.

This is the first major upgrade to iOS ever since it was rechristened from iPhone OS.

Apple’s iOS 5 page says that they are “taking iOS to a whole new level”.

Scott Forstall, SVP iOS Software, says that this is the “widest and most extensive update for iOS, ever”.

The update boasts of 200 new updates.

Let’s look at the new features to see if that is really true or is it just old wine in a new bottle.

I am able to review some of these on an iPad running iOS 5 Beta 7.

1. Notifications

This is not a new feature. iOS users are already familiar with notification pop-ups and badged icons. What is new is the way these notifications are lending themselves to the user.

With the device in an unlocked state, you can drag down the notification bar on top and see a list of notifications from various apps. Tapping any would take you straight to that app.

While iOS users may drop their jaw on this, Android users are only yawning as this was already on Android since version 1 !!! (do I hear someone shouting “copy-cats”)

Additionally, the iOS notification drop-down also shows weather and a stock ticker.

Even in a locked state when the device shows a list of notifications, you can swipe a notification directly and open its app instead of having to unlock the device first. Now that is something that would make Android users jealous.

2. Newsstand

Apple had caused a lot of heartburn to publishers earlier this year over its seemingly atrocious terms of engagement.

However, after the two parties agreed to mutually respectable terms, it was the end user who emerged as a winner.

Newsstand is a single repository of all your newspaper and magazine subscriptions purchased from App Store.

The magazines and dailies are downloaded in the background and are available for offline reading.

Simulating your book shelf, the exploded view of the newsstand shows you the cover of each magazine and daily that you have subscribed to.

3. Twitter

Twitter app for Apple was already available since but what is new is the OS wide support for it.

Integrating Twitter into iOS and offering it as a single sign-on is a smart move by Apple and great news for the Twitterati.

Now you can sign-on with Twitter and login to any other application permitting a Twitter login without having to specify your credentials again.

Not to mention, that the OS wide integration allows you to Tweet from a lot of native applications like Photos, YouTube, Safari, Maps, etc.

Additionally, you can complement your contacts information with their Twitter information like photo, @username, etc.

4. Safari

Mozilla’s Firefox has always been my personal favourite (at least on a PC*) but the additions iOS has done to Safari really tempt me to switch.

When you are reading an article (blog post, news article, etc.) on Safari and switch on the Reader mode from the address bar, you see the article freed of all the clutter (like side bars, ads, related stories, all the junk that web developers like us put in a page). The article is displayed in a neat (I am tempted to say “sexy”) fashion with Serif fonts, a la hardcopy publication. Just focus on the article without any distractions.

Reading list is another interesting addition. It allows you to save articles for later viewing. And more importantly, this list is accessible across devices by using iCloud. So you can view articles on your iPhone while commuting home that you had saved earlier on iPad while in office.

And to top the Safari cake is the cherry of tabbed browsing. Switch among multiple tabs the same way you would on your PC*.

5. Reminders

I have always had trouble managing my to-do lists, at least on a PC. Simple text document, Excel sheet, Ta-da lists, I have tried it all.

But this simple application can be a solution to all your woes about managing to-do lists, at least on iOS.

You can create new lists and quickly add list items. Check them off as you complete them.

View all completed list items in a separate list and in the list you created.

You can mark a date and time to be reminded about an individual list item (without which it would not make sense to call the feature as “Reminders”).

Here comes the best part about reminders: in addition to specifying time and date, you can also specify place. That is, be reminded of a chore when you arrive at a place (pick up groceries from supermarket) or when you leave a place (call your wife when you leave from office so that she can be prepared with a new set of chores when you reach home).

And you can sync these reminder with your other Apple devices using CalDAV or iCloud or with your Outlook using Microsoft Exchange.

6. Camera

Now Apple claims to have the most popular camera among mobile phones and as popular has regular cameras using Flickr as a reference for this statistic.

Even if that were to be true, the new features would only serve to bolster iPhone’s camera’s position.

The chances of missing a moment worth capturing are even less with the quick access to camera even from the lock screen.

Just double click the home button to reveal the camera button and dive straight into the camera app.

And click like a regular camera with your iPhone held in landscape mode and using the volume-up button. :)

Also you can view grid lines on your screen so that you can align the picture even before taking it.

Want to zoom in, just pinch to zoom!

Another great feature which I doubt if any other mobile camera has is an AE/AF Lock.

Now I am not a photography expert but as I understand, on iPhone, if you select an area and lock the AE/AF (auto exposure, auto focus) and even pan a little, the exposure and focus of the selected area would not change despite the change in background light.

I would have to check this on an iPhone running iOS 5 but as I gather from Scott’s# demo, it seems to work.

7. Photos

All that beautiful pictures can me made too look even better by some handy tools now offered by the Photos app.

I hate it when my eyes in the photo appear red as if I am a Sith lord. You need not make your loved ones look like that if you use the red-eye reduction tool.

Then you can also crop, rotate, organise into albums the photos you took on your iPhone on the phone itself.

8. Mail

While the mail app on iOS devices used to appear like makeshift mail, it is going to become lot better and would come close to appearing like the mail on Mac (well, almost).

With the addition of rich text editing (bold, italics, underlines, etc.) and indentation, mails sent from iOS devices would look lot more like their Mac cousins.

Besides, you wont have to type again if you mentioned a contact name by mistake in CC instead of To or BCC. Just drag them to the other field.

Messages can be flagged / unflagged on the device itself, searching would include the mail body in addition to the to, from, and subject fields, swipe to view/hide the inbox, yada yada yada.

But one feature really made me skip a beat (I actually said “Whoa” when I saw the demo) is the split keyboard on iPad

You can split the keyboard and drag it upwards so as to type by just using your thumbs while holding the iPad. Awesome!

9. PC Free

This is actually a goood one (that wasn’t a typo, I use the ooo sound when I really like something, like “hey, that girl is goood”)

The pre-requisite of having a PC to sync your device with has been done away with.

The iOS device can be the only computing device in your home for all you care.

Activate, update it over-the-air. Not to mention that updates are now delta-updates so you just download what has changed, not everything including the kitchen sink.

10. iMessage

Well, I am not saying that Apple is trying to emulate the success that BlackBerry achieved through its BlackBerry Messenger, but…umm…yes, I think I am saying that.

But its a great feature to have anyhow.

iMessage allows you to exchange messages over 3G/Wi-fi with your friend if he/she also has an iOS device.

iMessage is built into the existing messages and allows you to exchange photos, videos, group messages, and of course simple texts.

You can receive delivery receipts (no more excuses like “I never received your message”), read receipts (or “I didnt read your message”) and even get to know when the other party is typing a message.

Besides, these messages are synced across all your iOD devices so you can resume the conversation from your iPad if, for example, your iPhone got run over by  a truck.

11. Wifi-Sync

This is another feature that aims at making your iOS device truly wireless.

No need to plug in your device to your PC to sync with iTunes. A shared wi-fi connection between your device and the PC would handle the syncing.

But, I am wondering what would be left of the poor battery if you are syncing a lot of audio and video.

These were some of the new features that iOS offers to the end users.

But even iOS developers have a lot to cheer about.

With more than 1500 new APIs, developers can unleash their creativity and develop really useful apps (and some weird ones too).

Apple claims to have done significant enhancements to Xcode, Instruments, and Simulator.

Then they have incorporated the CoreImage framework from Mac OSX to iOS that allows the developer to weave some real magic in their apps that handle images (red-eye reduction for example).

Hope you enjoyed reading the post.

Stay tuned for more (especially my soon to come blog post on Android).

Feel free to comment on this post or you can reach me at rajat(at)vinsol(dot)com.

* The term PC has been used to differentiate desktop computers, laptops from mobile iOS devices.
# iOS5 introduced and demoed by Scott Forstall, SVP iOS Software

References

1. Keynote Video: http://www.apple.com/apple-events/wwdc-2011/
2. iOS Video: http://www.apple.com/ios/ios5/gallery.html#video-ios
3. Features: http://www.apple.com/ios/ios5/features.html
4. Title Image Source: http://images.apple.com/ios/ios5/images/overview_hero.png

Note: If you don’t have a smart phone with a webkit browser in it, you can view Sencha demo in any webkit browser preferably Safari.

This is a simple application backed by Rails where you can ask questions and those can be answered. For no specific reason I name it ‘Tarot’. With Tarot we want to be able to ask a question, answer to it, show a list of question for a given tag and show a question with its answers.

Before we go further I would suggest you to clone the code from my github account. As a matter of fact we like short and sweet blogs and I won’t be giving full application code in the blog. After you have cloned in the application directory, don’t forget to run:

bundle install
rake db:setup

Without doing much of the the talk lets dive in to building the Rails part first.

Use of Rails in this application is minimal. It simply serves a few ajax requests and sends back json response. Everything else you expect from a mobile application could be achieved with Sencha Touch.

AR Models

On the server side we are going to have two models Question and Answer.

As it is expected our question has_many answers. There is one thing to mention, I have used acts_as_taggable gem to tag the questions. Simple run all the migrations and run server.

Controllers on Server:

As we just want to do the minimal with our rails part of the application.

Keeping things simple I have setup the index and tags action to respond with the array of all tagged questions and list of all tags to create the tag cloud respectively in the JSON format, which we would finally be parsing at the client end with the help of Sencha.

The client expects JSON data in the following format:

{
	data: {
		   question: {
				 title: 'Title'
				 description: 'Description'
				 answer_count: 4
                                           }
	         }
}

By writing “render :json => {:sucess => true, :data => [question]}” we have made create action to respond accordingly.

def create
    question = Question.new(params[:questions].first.except(:answer_count))
    respond_to do |format|
      question.save
        format.json {
          render :json => {:sucess => true, :data => [question]}
        }
    end
 end 

It seems to be enough of rails and the time when we start giving our Tarot some touches of Sencha.
First thing first, you must have sencha library somewhere in your application where views have access to it and the most appropriate place I find is the public directory where all your .js and .css files go.
Fortunately you don’t have to download the library separately if you have already cloned the application from github. If not I would suggest you do it now.

Note: Sencha Touch comes with lot of other things bundled with it which we can always get rid of. The files of our interest are sencha-touch-debug.js and sencha-touch.css in the development mode and sencha-touch.js and sencha-touch.css in the production mode.

As mentioned earlier Sencha Touch is an MVC framework, its directory structure can be made to look somewhat like a rails application, though it is not mandatory. As it turns out I am a rails guy and love the rails way. Let’s check the public directory where all our Sencha code is placed. Sencha directory structure look like:

public/app    #main application folder
app/app.js    #Tarot boots up from here
app/util.js    # Extra utility function go inside this

#Try to get the significance of following from their names, its easy
app/models
models/questionModel.js
models/answerModel.js
models/tagModel.js

app/conrollers
controller/questionController.js

app/views
views/home.js
views/list.js
views/tarotViewport.js
views/new.js
app/resources
resources/terot.css

If you check application.html.erb, all the the .js files are included in it.

Tip: You should compress all your Javascript files when you run your application in production.

Sencha Digging Deeper:

The first step for most of the Sencha Application is to create a namespace by registering the application. Simply open up app.js file(the starting point of the application) and the check the code in there:

Ext.regApplication({
    name: 'tarot',
    launch: function() {
        this.views.viewport = new this.views.Viewport();
    }
});

The above represents a Sencha Application. Most Applications consist of at least the application’s name and a launch function.

Instantiating a new application automatically creates a global variable using the configured name property and sets up namespaces for views, stores, models and controllers within the app:

//this code is run internally automatically when creating the app (Senncha way of creating namespace)
Ext.ns('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');

The launch function usually creates the Application’s Viewport and runs any actions the Application needs to perform when it boots up. The launch function is only expected to be run once.

A few snapshots of the application viewport:

Fig 1: Home

Fig 2: Create Question

Before we create our viewport or any other viewable component, lets create our models and avail the data to play by creating a store(remember sencha touch is MVC framework). A store simply fetches data from the remote server via proxies and keeps it stored in the local storage of the browser. You can get whole lot of information about the store object from the sencha documentation.

We have three model on the client part of Tarot and their corresponding stores. The minimum requirement for a model is its field object. It can also be stuffed with validations, associations, proxy( can be moved to the store).….

Our models/tagModel.js file look like:

tarot.models.Tag = new Ext.regModel('Tag', {
    fields: [
    {
        name: 'name',
        type: 'string'
    },

    {
        name: 'id',
        type: 'int'
    }],
    proxy: {
        type: 'ajax',
        url: 'tags',
        id  : 'taggings',
        reader: {
            type  : 'json',
            record: 'tag',
            root: 'data'
        }
    }
});

tarot.stores.Tags = new Ext.data.Store({
    autoLoad: true,
    model: "Tag",
    sorter: [{
        property : 'name',
        direction: 'ASC'
    }],
    getGroupString: function(instance) {
        return instance.get('name')[0];
    }
});

The official documentation of proxy says:

Proxies are used by Stores to handle the loading and saving of Model data. Usually developers will not need to create or interact with proxies directly.

proxy: {
        type: 'ajax',
        url: 'tags',
        id  : 'taggings',
        reader: {
            type  : 'json',
            record: 'tag',
            root: 'data'
        }
    }

tarot.stores.Tags uses the proxy which has been defined in the model to fetch the initial set of tags from the server. We have made our store to fetch the tags when the application first boots up by specifying

autoload: true

It sends a get(ajax) request to the pathname ‘tags’ wich inturn invokes the tags action within QuestionController and response with the requested data.

The ‘reader’ object specify the format of the record data it should expect from the server. By default it takes ‘records’ as the root value.

The store:

tarot.stores.Tags = new Ext.data.Store({
    autoLoad: true,
    model: "Tag",
    sorter: [{
        property : 'name',
        direction: 'ASC'
    }],
    getGroupString: function(instance) {
        return instance.get('name')[0];
    }
});

Having autoLoad set to true loads our store with the initial set of tags when the application boots up.
The similar can be achieved by calling tarot.stores.Tags.load() in the Application launch function.

‘getGroupString’ takes the instance of the model and should return the string by which the data is grouped in the store. We’d be using formed groups later in the application.

The other two models are written similarly, if you still get stuck, refer to the Sencha Touch documentation.

Finally we have reached the point where we can watch things moving on the screen. Back in the application launch function we create and object of Viewport. But what actually is a Viewport?

Note: Before going further you should keep the app/tarotViewport.js file open.

The basic building block(viewport) of a sencha app is a panel which contains subpanel and other components. Our viewport panel has a toolbar with back(initially hidden) and ‘askme’ buttons and the list of tags docked on the left. This consists of the navigation part of our application and makes it nicer and easier to navigate.

this.tagList = new Ext.List({
            id: 'tagindexlist',
            title: 'Tags',
            store: tarot.stores.Tags,
            itemTpl: '<div>{name}</div>',
            grouped: true,
            indexBar: true,
            emptyText: 'Tags Empty',
            ui: 'round',
            style: {
                minWidth: '250px',
                borderRight: '5px solid #4D80BC'
            },
            onItemDisclosure: function(record){
                Ext.dispatch({
                    controller: tarot.controllers.questions,
                    action: 'index',
                    animation: {
                        type: 'slide',
                        direction: 'left'
                    },
                    extras: record.data.name
                })
            }

        });

The store attribute above instructs list the load the data from. For every record in the store the itemTpl is rendered. Back in the tag store definition we grouped our store with the first character of every instance. Grouped: true takes the advantage of the same and shows the list items grouped together. ‘onItemDisclosure’ adds a disclosure icon to the list item and a listener to it which is fired when the icon is tapped and invokes the index function of our ‘tarot.controllers.questions’.

this.backButton = new Ext.Button({
            text: 'Back',
            ui: 'back',
            hidden: true,
            handler: this.onBackTap,
            scope: this
        });

The handler of a button specifies the function to call when the button is tapped. The button in our viewport is hidden for the first card. Once any other card is set as an activeItem the back button is shown. For the same purpose we have added a listener to the viewport:

listeners: {
        beforecardswitch : function( viewprt,newCard,oldCard,index){
            if(index == 0)
                viewprt.backButton.hide();
            else
                viewprt.backButton.show();
        }
    }

Our viewport has the tarot.views.home as its first item which would be set as active item(card) of the panel by default. The code can be in app/views/home.js.

tpl: new Ext.XTemplate('<div><div class="question-blk"><div class="ques-title">{title}</div><span class="answerCount">Answer<p>{answers_count}</p></span></div>'),

Our home defines a Data View view which renders the list of all question autoloaded by the the tarot.stores.questions store. A dataview if capable of displaying data with custom templates. Just like a list in our viewport it can also be bound to the store. Tpl Represents an HTML fragment template. The html inside is rendered for every record inside the store by looping through it.

It also adds a listener to the items rendered which on being tapped invokes the show function of the controller. The similar code has been written in the app/views/list.js which can be refered in our application by tarot.views.questionList (the magic of the namespaces).

tarot.views.answerList in the app/views/show.js file does extra efforts to render two more components. It docks the current question on the top and a form to give answers to that question at the bottom. tarot.views.questionNew simply has almost code and it is self explanatory.

Its time when we move to the ‘C’ part of our Sencha MVC.

Our controllers/questionController.js has defined a few function which can be invoked from our application using Ext.dispatch as we have previously been doing. The index function is called when the tag disclosure from the tag list is tapped and is responsible for loading tarot.stores.taggedQuestions and setting tarot.views.questionList to be the current activeItem which inturn renders the template for each question.

It merges options with some more attributes and calls the loader function from util.js file.

loader: function(options){
        var mask = tarot.util.actions.createLoadingMask();
        mask.show();
        options.store.data.clear();
        options.model.proxy.extraParams = {
            filter_param: options.extras
        }
        options.store.load(
        {
            scope   : this,
            callback: function(records, operation, success) {
                mask.hide();
                if(success){
                     tarot.views.viewport.setActiveItem(options.activeItem, options.animation);
                }
                else{
                    alert('Error while loading the questions');
                }
            }
        });
    }

The loader function does a number of things. The previous data from the store in cleared and sends a fresh request to the server by options.store.load() with an extra parameter to filter the records. In this case it is going to be the tag name. The load() function accepts a parameter as an object which should define the callback function, that gets invoked when the response is received from the server. This function is passed the records that are fetched from the server, the operation object which avails more information about the current operation and a boolean success specifying whether the operation was a successful. If the operation was a success we hide the mask which was shown at the very first. At last it sets the activeItem of the viewport to be the tarot.views.questionList.

In the similar fashion tarot.views.answerList is loaded. One thing is to mention here is, every time the store is updated the corresponding views(DataView) are automatically updated to render the current state of the store. No extra work is to be done, isn’t it nice! Just in case you have not associated any store with the data view check out the update() function.

Creating a new question:

On tapping the save button from tarot.views.QuestionNew the create function is called from the tarot.controller.question. The create function takes the from values and creates a model object filling in the parameters pulled from the form. As we like to keep our code DRY, we use our saveRecord() function to create both the question and answers. We merges options in the create action with the required properties and pass it onto saveRecord().

create: function(options) {
        options.form = tarot.views.questionNew;
        options.activeitem = tarot.views.home;
        var params = options.form.getValues();
        options.record = Ext.ModelMgr.create(params, tarot.models.Question);
        options.store = tarot.stores.questions;
        this.saveRecord(options)
    },

if (errors.isValid()) {
            record.save({
                success: function(){
                    options.form.reset();
                    if(options.activeitem){
                        Ext.Msg.show({
                            title: 'Saved',
                            msg: 'Record has been saved',
                            buttons: Ext.MessageBox.OK,
                            fn: function() {
                                tarot.views.viewport.setActiveItem(options.activeitem, options.animation);
                            }
                        });
                    }
                    options.store.load();

                }
            });
            return true;
        } else{}

Our saveRecord() takes validations into and proceeds only if the record is valid else it shows up a message box with the validations errors. Again the magic of the proxy spreads here, which is hidden from the developer. When the save function is called the it sends the POST(Ajax) request to the ‘questions’ path with record fields in the parameters and extra parameters(if any). On success the success callback is called. Few other callbacks are ‘failure’ and ‘callback’ (get called whether success or failure) .

Our answers to the questions are created the same way but no card of the viewport is switched and being on the same card tarot.views.DataView object is updated automatically.

I hope this gives you a nice overview of building mobile web application with Sencha Touch. But this is not it! There is lot more and can be used to build amazing cross platform application efficiently.