Category and Inheritance on ObjectiveC

While Category is a nice way to add functionality to the base class, people like me who come from other object oriented technology such as Flash, will find a little difficult to understand as to how this thing relates to the inheritance chain. The same question came up to my mind and I did a quick research on the topic.

The final thing is Category does the same thing as it tells about itself. It adds functionality to the base class. If you remember this, then there would be no confusion at all.

Well, for that to understand, lets take an example. Suppose there is a Class A and Class B is a subclass of Class A. In the application Class B is used in a lot of places. Now, there is a need to add some more functionality to Class A, so a new category is written as “A+newRole”. Once this category is written, the new functionality is added to the base class and in this case, Class A. That means, all those classes which are child classes of Class A such as Class B, automatically gets the functionality. Thats freaking cool. One can straight away go ahead and call the new methods added in the Category from the child classes. The only thing necessary here is to import the Category file to the appropriate place.

Category

Coming from an object oriented programming such as actionscript or java this feature may seem a little different. At least it felt different to me. It took sometime for me to get the understanding. It was un-believable for me, at first, and all magical.
In ObjectiveC there is a feature called Category. Its another way to extend a class. If we compare with inheritance, well it can not be compared to that. As one might be knowing that, ObjectiveC itself, provides option for inheritance.
Category adds functionality to the class itself.
What?!! Yes, its that powerful. I must say it again. It adds functionality to the class itself. Its not inheritance. As with inheritance one must use the child class, to get the added functionality. But with “Category” the added functionality is available to the class itself. Wherever one might have used the class, if a new Category is added, that class just gets the functionality. Thats magic!! Yes, kind of. But then its fun and powerful, when you know the real power of it. “I can do that by adding functionality to my class file itself”, there you said it. Lets talk about situations.

Just imagine, you have a class and used it everywhere, and later you wanted to add some functionality to the class itself without ever touching the class file. The situation may arise, that one is using an external library of some kind. That library is maintained by someone else. So, you never worry about it and just use it. What if, you want to add some functionality to some class of that library. Ohh well, “I will change the class”. What if the licensing policy do not allow you to do it? Or better, lets say, if you change it and the library is updated! You have to change the updated class again! And chances are that, the functionality is now written with some other logic in the library, which makes your implementation of the class unusable. You have to re-write it in the class. And thats a lot of work, if you think the library is getting updated regularly.

Lets take a situation, where one subclasses a class and used it. Well, the same thing may happen, that the root lib is updated and used a different approach this time. All the subclass logic need to be updated!

In another scenario, one may need some more functionality to the class. Well, we subclass it again. Nice and fine as long as you have used it in some places you remember. There may be cases one need to remove the first subclass and add the subclass of the first subclass. And thats a lot of work too.

Lastly, what if one needs to add functionality to the base SDK or the parent library. Subclass it and use it, simple. But we have already seen problems with subclassing. One has already used the base class through out the project, but later on it is required to add some functionality to the class. Either some how one has to add the functionality to the base class or subclass it and use the subclass everywhere, the base class was used previously.

Ok, coming back to Category. It allows a user to add functionality to the base class itself. One need not touch the class itself. It can be done even to the original ObjectiveC classes shipped with Apple SDK. That means, if we have used a class and later decide we need to add some more functionality to it, we are safe on with Category. As soon as it is declared, the functionality is available to all the places, where the base class is used.

Lets see how we can do it, some syntaxes and naming conventions.

Defining a Category, is kind of same a defining an ObjectiveC class. One needs 2 files for it. An interface file and an implementation file. The file naming conventions are generally as “ClassName+CategoryName.h” and “ClassName+CategoryName.m”. Where “ClassName” is the name of the class one needs to extend or add functionality to and “CategoryName” is the name of the Category one is defining now.
Each Category in a project must have a different name.
Categories can not define or add instance variables to a class.
Categories can override methods of the parent class.

Lets define a category :

//file name GameAddition+ShadowText.h
#import 
@interface GameAddition (ShadowText) 
-(SPSprite *)makeText:(NSString *)text 
			withColor:(int)colorValue 
			  andSize:(int)size 
	  withShadowColor:(int)shadowColor;
@end

And the implementation file will look as

//file name GameAddition+ShadowText.m
#import "GameAddition+ShadowText.h"
@implementation GameAddition(ShadowText)
-(SPSprite *)makeText:(NSString *)text 
                    withColor:(int)colorValue 
                       andSize:(int)size 
        withShadowColor:(int)shadowColor
{
	//custom code goes here
}
@end

the difference here is both in interface and implementation file the declaration is changed to

@interface ClassName (CategoryName)

instead of just

@interface ClassName 

And same happens with implementation file too, instead of

@implementation ClassName 

the category implementation file will declare it as

@implementation ClassName (CategoryName) 

. The category name will be on parenthesis.

Now thats all to it. Wherever we would have used the class “GameAddition”, a new method is available to it. But then we need some work there too. Just to make the application know we are using the category, wherever we have imported “GameAddition.h”, we have to import “GameAddition+ShadowText.h” instead. And there we go.

Hope that helps someone out there.

References :
1. http://cocoadevcentral.com
2. http://macdevelopertips.com

My basic day-to-day Git commands

Ever since I have started using Git, it feels more fun to work on command-line. At first it was very daunting to me. But as with any new thing, we have to practice it until we are comfortable. Same happened to me. As I have promised myself to go Git way, I have started using it more and more. It was not easy for a person coming from SVN with tortoiseSVN client on windows to a pure command-line tool. Though tortoise has released visual client for Git, I must say, if you use command-line there is no way you will love any UI for Git. I am still learning it and not at all a mature user, doing all complicated things with it. That said, I am kind of getting comfortable with it now.
I am putting down here, what are the commands I use on a regular basis.

//very frequently used
git add . //adds everything in the directory to commit
git commit -m 'comment for this commit' //commits to local repository
git push origin master //commits to the remote repository
git status //checks the status of the repository
git log //displays all the log for the current repository

//some one time things
git config --global user.name "Saumya Ray" // done once for a computer
git config --global user.email "name@domain.com" //done once for a computer
git init //start using GIT, initialises the current directory for GIT
git clone URL //URL to get the repository from

Those are some which I use very regularly.

GitHub has got some very nice tutorials to get one started with Git. Here is cheat sheet link of it. And here is the link which talks about dealing with Remote in Git.

javascript library for converting SWFs to HTML/CSS3

When HTML and CSS3 are really catching up, its the animations which need a way to go to the web without flash plugin. Fortunately we have some very promising javascript libraries out there which does this. The two must mention libraries are
Gordon : http://github.com/tobeytailor/gordon/wiki
Smoke Screen : http://smokescreen.us/

While Adobe showed a tool on this years MAX, 2 days back, which converts FLA animations to HTML5/CSS3, its time to wait and watch, when people will have access to the tool.

My first iphone game goes opensource

I have recently finished an iphone game. This is written in Sparrow framework. I have decided to make it opensource and so put it up on github at this link. The game is very simple and is licensed under Unlicense. So there is no restriction as to how to use the code. You can use it to make money or what so ever as this licensing does not force you to do anything you do not need to do.
About the game, its a simple game of Mathematics for small kids. There are options for addition, subtraction, multiplication and division. Choose your type to play and go ahead playing it. There is no score, no time limit. The responses are immediate. So one will know whether correct or incorrect answer.
While I am developing on it too. Will love to see what others can do with it. This can be seen as code example for the Sparrow framework as well.

Making a default icon and a splash screen for your iphone app?

This is a real surprise to me, when I was trying to search as to how to make an icon for my game on the iphone screen. Along with this came in the simplicity to create a splash screen for the same game. First thought there would be some procedure involved in it. Then it seemed the procedure is to name two files as per the naming convention (yes, its not configuration but convention, the principle of convention over configuration) and then rest is just taken care of.
So if we put 2 images inside our project resources folder and name them as “Icon.png” and “Default.png” we are done with the making of our icon and splash screen.
Well, the sizes also take some importance, in my case “Icon.png” is of “57×57″ and “Default.png” is of “320×480″ px. If after naming appropriately the icon and the splash screen do not show, up make sure that their dimensions match exactly as mentioned now.

Hope that helps someone out there.

Selector without any parameter

Well, let me face it. It took me sometime to write a simple selector, which does not take any parameter and then to successfully call it. The solution is overly simplified. If at all one need to define a selector, which does not take any parameter, it should be as below

- (void) myMethod
{
//Do Something
}

The call to this selector is also the simplest of all forms

[myObj myMethod]

Now, that may be confusing at some point as it confused me. The reason being, it is a general convention to see selectors with a “:” at the end. So in general terms a selector is known as with a “:” as

myMethod: , onUserCall:

etc. So the point is, if its defined not to take any parameters or does not take any arguements in its definition, then the method call will be just the selector name else it would always be with a “:”.

Getting used to the terms

Hope you guys are with me from the last tutorial. Lets move on and see what are things or terms we will deal with in a regular basis as a web designer/developer. There will be a lot of new words you will come across if you are starting up new to the web technology. In HTML5 there are going to be new APIs! Well, what API means. API in its fullest form is Application Programming Interface. :) :) I know. Hang on to understand. If terms like this frighten you from getting into a new technology, do not hesitate to join a local group, online forum or search for it in internet, or even ask me, I will try my best as per my understanding to make you understand. In a very rough term, API means there are some predefined key words, available to do certain things. Like, we have “<body>” in html to define the body section of a webpage. Similarly each programming/scripting language has its own set of APIs to define certain things. If we take another example, “gotoAndStop()” is available in Flash/actionscript. This simply takes the play head to a certain place in a flash movie. Now for any new language, one need to learn its API to get going in it. In coming days we will be learning what are the new APIs available to HTML5. Now CSS is another word. Lets understand how and why. If you have already desinged a couple of sites in HTML, then you must be knowing some of its styling. If you are new to web, just understand that its a way to separate content and its style. Style can be background colour of a webpage, font colour, type, size etc. So CSS, basically allows us to define all these styles in a different file and our web content remains in a different file. There are ways to link the style file with the content file. The advantage is, our content is no more linked to its design. We can take the same CSS file and apply all our styles to another HTML page, which will look and feel like the same site we desinged previously.
There are things like “<div>” in an HTML document. These elements define the structural difference of elements. We can put similar type of content in a particular div. If things seems diffficult to understand now, do not worry, just remember the terms we will be using them soon. Each <div> element is associated with an id or class, this is just for us to refer to that particular section of the page. In CSS files we declare styles for these div elements by refereing to their id or class. And once we attach a CSS to an HTML page, the page reads the style and renders itself.
Javascsript, is a scripting language for the web. How it can be used?! This is a nice question and must be understood for moving ahead in HTML. Like CSS can be defined in another file, Javascript also can be defined in another file and attached to an HTML page. This again, makes our content to be alone. All we have is an HTML page with desired content in it. All the style elements are in a CSS file and all the behaviours are in an external Javascript file. Behaviours include rollover a button or image or a certain part of a page, to clicking the button. Everything a user does with the page and how the page reacts to the user can be defined in a javascript file.
So in a basic web page, we should be having 3 files atleast. An HTML file, a CSS file and a Javascript file. That way, a content editor will change the contents as per his/her requirement, never worrying about the design or behaviour of the page. A pure CSS designer can update the design of the page individually with some dummy content. And a javascript developer can start putting in logics inside a separate file without thinking of breaking the page design or content. When one is designing for the web, one must be aware of all these as to get the best out of everything.

Hope you guys are with me from the last tutorial. Lets move on and see what are things or terms we will deal with in a regular basis as a web designer/developer. There will be a lot of new words you will come across if you are starting up new to the web technology. In HTML5 there are going to be new APIs! Well, what API means. API in its fullest form is Application Programming Interface. :) :) I know. Hang on to understand. If terms like this frighten you from getting into a new technology, do not hesitate to join a local group, online forum or search for it in internet, or even ask me, I will try my best as per my understanding to make you understand. In a very rough term, API means there are some predefined key words, available to do certain things. Like, we have “<body>” in html to define the body section of a webpage. Similarly each programming/scripting language has its own set of APIs to define certain things. If we take another example, “gotoAndStop()” is available in Flash/actionscript. This simply takes the play head to a certain place in a flash movie. Now for any new language, one need to learn its API to get going in it. In coming days we will be learning what are the new APIs available to HTML5. Now CSS is another word. Lets understand how and why. If you have already desinged a couple of sites in HTML, then you must be knowing some of its styling. If you are new to web, just understand that its a way to separate content and its style. Style can be background colour of a webpage, font colour, type, size etc. So CSS, basically allows us to define all these styles in a different file and our web content remains in a different file. There are ways to link the style file with the content file. The advantage is, our content is no more linked to its design. We can take the same CSS file and apply all our styles to another HTML page, which will look and feel like the same site we desinged previously.There are things like “<div>” in an HTML document. These elements define the structural difference of elements. We can put similar type of content in a particular div. If things seems diffficult to understand now, do not worry, just remember the terms we will be using them soon. Each <div> element is associated with an id or class, this is just for us to refer to that particular section of the page. In CSS files we declare styles for these div elements by refereing to their id or class. And once we attach a CSS to an HTML page, the page reads the style and renders itself. Javascsript, is a scripting language for the web. How it can be used?! This is a nice question and must be understood for moving ahead in HTML. Like CSS can be defined in another file, Javascript also can be defined in another file and attached to an HTML page. This again, makes our content to be alone. All we have is an HTML page with desired content in it. All the style elements are in a CSS file and all the behaviours are in an external Javascript file. Behaviours include rollover a button or image or a certain part of a page, to clicking the button. Everything a user does with the page and how the page reacts to the user can be defined in a javascript file. So in a basic web page, we should be having 3 files atleast. An HTML file, a CSS file and a Javascript file. That way, a content editor will change the contents as per his/her requirement, never worrying about the design or behaviour of the page. A pure CSS designer can update the design of the page individually with some dummy content. And a javascript developer can start putting in logics inside a separate file without thinking of breaking the page design or content. When one is designing for the web, one must be aware of all these as to get the best out of everything.

Introduction to HTML

Before jumping directly into HTML5 and CSS3, it is important to understand, why and what is it. For that lets talk a little about HTML and browser. HTML is a set of instructions written in a difined way. The browsers know, how to understand these instructions. Depending upon these instructions browsers try and display the content. Well, then how these browsers understand these instructions?! This is an important question. The answer is simple, there are instructions written inside the browser itself to read the instructions of the page and understand it how/what to display. Now the question is, ” where it is written, how to write these instructions?” It is W3C, who used to do it for a long time. Then its moved to WHATWG (Web Hypertext Application Technology Working Group). If you visit WHATWG site, there is link toward the end of the home page, which shows what is the relation between W3C and WHATWG. The direct answer to the question is here, in the FAQ section of WHATWG website.
Now coming back to the instructions and how to write it. There are specifications for different types and versions of HTML. Basically there are 2 kinds of instructions one is based on only HTML standard and one is based on HTML and XML standards. So the names are HTML and XHTML. The versions of HTML are version 1.0, 2.0, 3.0, 3.2, 4.01 and then came XHTML1.0 and followed by XHTML 1.1 and XHTML 2.0. There are further more to add to this confusion are 3 different versions of each specification. Do not get scared, just read on. These different options are Strict, Transitional and Frameset. So the HTML instruction version could be HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset. All these versions have there own instruction set as to, how to write an HTML instruction. The part of this specification is, a detailed information about the structure of the HTML instruction as to where and how to write the instructions. This structural information is know as Document Type Definition, in short DTD of that specification.
HTML 3.0 specification
HTML 4.01 specification
XHTML 1.0 Specification
XHTML 2.0 Specification


HTML5 specification
CSS3 specification

A must read, which shows a little inside of browser implementations of the specification, if you read about the HTML version 3. A little history of HTML versions. By this time you must be getting an idea of relations between specification,browser and their behaviour.

Well, enough of this, lets move on to browsers and see how these specifications affect us. As we already have known that browsers can read our HTML instruction and display the content, the thing to remember here is different browsers understand these instructions differently. Thats because there are different logics put inside different browsers. These processing of the instruction is done by the part of the browser know as browser engine. This is basically the part which understands the HTML instruction and tells other part of the browser, how to go ahead for the instruction received. Previously these engines were kind of one per browser, but now these engines are also getting specific as to their implementation and responsibility, browser displaying engine, javascript engine etc. Lets consider the browser engine and see how specifications affect it. Since there are different browser engines to process one single set of instructions, there are different kind of behaviour happening in different browsers for the same HTML page. Now, I think, it makes sense to you as to why your html page looks different in 2 different browsers :)
Since HTML 4.01, CSS (Cascading Style Sheets) are introduced, more on it later. The browser vendors like Safari, Opera, Firefox, Internet Explorer update their engines to support new features according to the new specifications. Now you must see the reason, why there are different updated versions are coming for the same browser. Well, so the point is, if specification is updated to a new standard (supporting new feature), browser vendors must update their browser engine to support the specification so that a web designer using the latest specification can use the new browser to see it in action. There is always a race between the browsers as to who supports the new specification and to what level. Now as we see, there are browser enhancements happening, the browser vendors sometimes put their innovation into action by supporting some features, which might not be in the specification but their own choice to support. There comes the difference in the support for features. So when we see something is supported in a particular browser, and not supported in another browser, there might be a chance that each browser is having their own features or may be all the specifications are not yet implemented in a particular browser.
Coming back to CSS, its basically putting all our style definitions into a different file and saving it as .css extention. Thatway, any change to the content in the HTML page, does not affect us to re-write the styles and the same styles can be applied to different pages. Since these styles can be combined together, its known as cascading of styles and so the name, cascading style sheet. Similarly one can put javascript in a different file and link it to the html document, this is just to add behaviour to our html pages. We will be covering that more on coming days. Like HTML instruction processing, different browser owners make their own javascript processing engine and layout or style processing engines. Since implementation of these different kind of engines are different we generally get different behaviour on different browsers. All these CSS, javascsript have their own version specifications too like HTML. Now, it should be getting clear as to what web technology is and how easily browsers are hiding all these complexities inside themselves. Seems intereting ? Yes, its a lot of interesting things going on.
Now, coming back to our original discussion, HTML5 and CSS3, now probably it is a little clear to you as to what it is? Its basically the next version of HTML specification and CSS specification. Since there were no updation to the HTML for a long time, no browser updated it, till now in that area, we were kind of living with the older technologies for a long time. But things are changing very fast. The HTML5 specification is still a draft, that means its not finalised yet. Still the browser owners are putting their efforts to support all these draft specifications. That means, browsers are constantly updating themselves to support new features in the specification, even though these specifications are just ideas, which may or may not be in the final version of the HTML5. Same thing is happening for CSS3, there are new features and specifications coming up and browsers are trying to catch up.
Does that mean we should try HTML5, CSS3 or ignore it till the specifications are final. well, the decision is yours but then with this fast changing technology age, you never know what could come up next. So its better to be trying out new things. All most all major browsers support HTML5 and CSS3 upto certain level, so there is a good chance that we can leverage the ability of the technology while going forward.

Would love to listen your comments and feedbacks.

Where are my blog design gone?

There seems to be something wrong in this blog!! Really! Well, the images and styling are all gone!
This is not accident but intentional. I have started porting my blog to HTML5 . Yeah, you heard it right. For those of you asking me to learn HTML5, lets start here. You can right click on the page and view source. That way, you can go through the HTML5 tags. Do not worry, if things look similar/different to/from previous version of HTML. I will be posting updates and tutorials about HTML5 and CSS3 here only. Stay tuned.