de

In making MicroCRM, I wanted to display some temp information to the user when a table list was empty. I wanted to make it as clear as possible a ‘lead’, ‘job’ or ‘invoice’ needs to be added first.

This is not a new concept in iPhone/Mac apps, but I want to share my implementation.

1. Firstly, I made the picture I wanted to display in my app.  Then it was added to my Xcode project. Below is the actual artwork the app uses.

2. The following code is placed in  (void)viewWillAppear: for the ViewController I wanted to place the image. (I have commented it well to help the reader).

//de.009 - FirstRun Image if ArrayCount is 0

[firstRunImage removeFromSuperview];

int InvoiceCount = [appDelegate.Array count];    //get number of Invoices<br />
NSString *arraycount = [NSString stringWithFormat:@"%d", InvoiceCount];<br />
NSLog (@"Leads Page Loaded: %@ Entries",arraycount);    //Log code for number of items in array

if (InvoiceCount==0) {       //If there are no invoices<br />
NSLog (@"Adding First Run Image");     //Log code<br />
firstRunImage=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"img-FirstRun.png"]];     //Allocate UIImageView to hold the image, and define the image<br />
firstRunImage.frame = CGRectMake(0,0,320,100);      //Define Frame Size<br />
[self.view addSubview:firstRunImage];    //Add ImageView to current view<br />
} else {<br />
[firstRunImage removeFromSuperview];    //Otherwise remove it<br />
[firstRunImage release], firstRunImage=nil;  //release memory<br />
}

See it in action

And thats it. I have the same code for all three sections of my app. To get the app, goto http://microcrmapp.com and follow the app store link.

Other implementations of a similar idea are found in many different apps. Apple’s own included apps, the facebook app and so on. There is a particularly common UI element that seems to be an imitation of apple’s own included ‘no data/history/updating’ page (see below). This is becoming more and more common place and it does seem to be a nice way to show the user ‘theres nothing!’.

I have even found a way to implement this, its using the amazing TapkuLibrary. I’ll let you work it all out for yourself now and it may even become a new post in the future

My latest app MicroCRM implements inAppSettings to easily manage the app settings. InAppSettings is all about not duplicating the existing settings view in the iPhone SDK (using Settings.bundle). It allows for a simple call inside your app to open up the settings page as a modal view.

InAppSettings lives over at bitbucket, made by InScopeApps. I chose it over InAppSettingsKit, because it was just that little bit easier to use. As far as I see, they both do almost exactly the same thing. There is a head to head VS here.

The project even comes with an elaborate settings.bundle with all sorts of example settings in it. I just modified this (cutting out heaps).

Installation

• Dragged the InAppSettings folder into my Xcode project (copying files)
• Added #import “InAppSettings.h” to my appDelegate
• Hooked up a button in my app to the below IBAction presentSettings (in Interface Builder)
• Then modified settings.bundle to contain the settings my app was going to use

Example Code

- (IBAction)presentSettings {
InAppSettingsModalViewController *settings = [[InAppSettingsModalViewController alloc] init];
[self presentModalViewController:settings animated:YES];
[settings release];
}

In a slight change of pace, I’d like to post some of the behind the scenes with my latest App MicroCRM. Its now available on the app store!

One of the most interesting aspects of app design is the UI Design Progression, so I have shared by initial sketches, photoshop mockups and final comparisons.

UI Design – by Hand

UI Concept in Photoshop (vs Finals)

An improvement for my next app I am going to use mockapp.com, they provide a fantastic keynote/powerpoint template set to use.

Graphics Development

This shows the progression of a couple key graphics, from my photoshop drafts to final production. (Before on the left, after on the right).