Designing reusable component – iOS

Hi All,

I created UIFormattedTextField as a component. I would like to provide the gist of conversation between me and the Architect during development here.
The Architect of my project always encourages the team to develop reusable components and use that in the project.

Current project requirement is to get the amount as input from the user.
Demo1:
So I started working on it. I created a normal textfield which accepts both number and character. But while submitting the form it gives an error, “Please enter only number”. I demoed it.

Architect: Hey we are developing this for mobile device. The current implementation will annoy the user. So modify the text field, which accepts only number instead of giving the error at last.


Demo2:
The real development, googling, coding everything starts here. Changed the text field to accept only numbers and dot and it will format the number by putting commas.

Architect: Good work man. This is a currency field right. why can’t we put a currency symbol?
Me: We can place a label before the text field and put the symbol, simply we can hard code and finish it off.
Architect: Then its not dynamic. Put the symbol in the text Field itself. Also make it localized. So when I change the device location to India it should show Rupee symbol and format the number according to Indian format.
My mind voice: Super. Google will help me.

Demo3:
Done all the comments given in demo2. So now the text field will format and show the currency symbol according to current location.
For India:

For US:

Architect: Super. Its looking good. So why can’t we make it as a component so that I can set the type of the text field as Currency, Number, PhoneNumber, SSN etc and text field should behave according to the given type.
Me: Yes we can.

Demo4:
Everything done. Now we can set the type of the text field.
Architect: Ya good. Ok now we can start using this. Circulate this to all our team members.

Me: Ya sure. But while working on this, I thought, instead of giving the type separately, like PhoneNumber, SSN etc. I will remove all these types and give an option dynamic. So you can set the type “Dynamic” and define your own pattern in the format xxx-xxx-xxxx (for US Phone number), xxx-xx-xxxx (for SSN) so we can avoid lot of options.
Architect: That is also good option. Do that and distribute across team.

Everything done. Now the text field accept the types,
1. Currency
2. Number
3. FormattedNumber
4. Percentage
5. Dynamic

If you look at the code, you can see some other types too which is used before the introduction of Dynamic. Now you can achieve the same using Dynamic and FomatPattern.
After this entire development, I learnt how to think and design before actually start our coding. Thanks to my Architect who taught me how to think “Mobile” while developing each and every feature.

How to use the component in your iOS projects:
1. Drag and drop the “UIFormattedTextField.h” and “UIFormattedTextField.m” files to your project.

2. Import the header in your class, where do you want to use it.
#import “UIFormattedTextField.h”

3. If you are using xib or storyboard, change the class of the text field in the “Identity inspector” to UIFormattedTextField.

4. Create an instance variable to access the text field.
IBOutlet UIFormattedTextField *currency;

5. Set the type and delegate of the text field. Don’t forget to import the delegate <UITextFieldDelegate>
currency.type = @”Currency”;
currency.delegate = self;
currency.numberOfDecimalPlaces = 3;

6. You have to change the delegate function ,
-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
return YES;
}
to
-(BOOL)textField:(UIFormattedTextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
return [textField shouldChangeCharactersInRange:range replacementString:string];
}

7. You are done.
You can download the sample project here FormattedTextFieldDemo.

Screenshot: