Yesterday was Be-Delph, and I was invited to give a talk on the new LiveBindings in Delphi XE2. Me and a colleague of mine decided to drive up there together, which should have given me some time to relax. Sadly it didn't and I was kinda nervous.

Once we got welcomed by Pascal Lagrou and Bruno Fierens from TMS Software, had a coffee or two and we were ready for the sessions. My session on LiveBindings in Delphi XE2 was only in the afternoon, so I still had some time to build up additional stress. In the end everything went quite well. I was nervous in the beginning, but once I could dive into familiar territory (the Delphi XE2 IDE) everything went a lot smoother.

I would personally want to thank everyone who made this even possible, including Filip Lagrou, Bruno Fierens, Thierry Laborde, Brian Long, Jason Vokes and Bob Swart, and everyone who helped behind the scenes. Also a big thank you for the Be-Delph sponsors TMS Software, Embarcadero, Dr Bob, RemObjects, Fast Report, Expert Team, C-Quel Software Solutions, Raize Software, Devart, Blaise Pascal, and all sponsors who supplied us with prizes. In case I forgot some, you can find the full list of sponsors right here.

I hope everyone enjoyed Be-Delphi and hope we will all meet up at the next Be-Delphi. For those of you who missed Be-Delphi, I have uploaded my presentation and the corresponding White Paper document :

Presentation

BEDelphi - LiveBindings in Delphi XE2 - Devia

View more presentations from Stefaan Lesage

The White Paper

Be Delphi Live Bindings

Unlike building a Mac version of your Delphi XE2 FireMonkey application, creating an iOS application using Delphi XE2 and FireMonkey has some prerequisites.

XCode

First of all you will need to install XCode on your Mac. This can easily be done by downloading XCode from the Mac AppStore, or through the developer portal website. For the iOS versions of your Delphi XE 2 FireMonkey apps you will have to compile them using XCode. From within XCode you will be able to debug those applications and deploy them on a physical device.

FreePascal and FireMonkey

In order to build your Delphi XE2 FireMonkey applications for iOS devices you will need the FreePascal compiler and the necessary FireMonkey files. Luckily this can be found in your Delphi XE2 installation folder. Simply copy the Disk Image File (dmg) over to your mac and run the installation.

Apple Developer Program

If you want to deploy your applications to a physical iOS device, you will need to register for the iOS Developer Program which will cost you about $99 or 79 € per year. You will also have to be part of that iOS Developer program if you ever want to publish you Delphi XE2 FireMonkey apps to the iOS AppStore.

Creating a test iOS application using Delphi XE2 and FireMonkey

Creating a new FireMonkey iOS application

Unlink Delphi XE2 FireMonkey applications for the Mac, FireMonkey iOS applications are a special type of Delphi XE2 project. So you will have to create a new application using the corresponding menu. In our example we will create a very simple application ... noting special ... just to show you everything works nicely.

Exporting the Delphi XE2 FireMonkey Application to XCode

As mentioned before ... you currently still need XCode and the FreePascal compiler to Build your iOS application. Due to some limitations in FreePascal your Delphi XE2 FireMonkey code will need to be modified slightly so it can be compiled (one example is the Dotted namespaces which doesn't seem to be working under FreePascal). In order to do this a little utility can be used called dprtoxcode.exe

The Tutorial shows you how you can add this little utility to your Delphi XE2 tools menu so it is easier to use.

Building & Testing your application using XCode

Once everything is ready, you can open the XCode version of your Delphi XE2 FireMonkey project, build it and run it in the Simulator to test it if necessary. From here you could also deploy it to a physical iOS device or the iOS AppStore, but for that you will need to enroll in the iOS Developer Program.

In our Video Tutorial we will be building a small sample application to show you how the process is supposed to be done. It isn't a full blown iOS application though, but just a little example.

Final Words

Well ... this tutorial should have shown you the basics of setting everything up and even showed you how to create your first iOS application. If you have any comments or suggestions ... feel free to post them here as a comment or contact us.

Meanwhile ... have fun with Delphi XE2 and FireMonkey ... and if you want to learn more about Delphi XE2, make sure you also check the Delphi XE2 page or RAD Studio XE2 page on the Embarcadero Website.

If you want, you can also have a look at the video on YouTube. You should be able to find an HD version right here

Well ... now that Delphi XE2 is finally available, the testers are no longer under NDA and I can safely say you can create Mac and even iOS applications using Delphi XE2 and FireMonkey. If you want to know more about FireMonkey, feel free to have a look at the information available on the Embarcadero website, or even have a look at this very interesting post about FireMonkey by Andrano Lanusse (Embarcadero Technical Lead Evangelist for Latin America & Caribeean). Today I won't be going into a lot of detail about FireMonkey or what you can do with FireMonkey though ...

Setting it up

If you were at the World Tour in Brussels, you might have seen and heard Pawel Glowacki talk about using PAServer to deploy and debug Delphi XE2 FireMonkey applications on the Mac. If you have a Mac and already have Delphi XE2 you might be wondering what he was talking about and how you can set up your machines to actually run Delphi XE2 FireMonkey applications on your Mac and still develop and debug them on your Windows Machine. Well ... it actually is a lot easier than you would think.

A Screencast

For those of you who want to get started right away, but are wondering how you should configure everything, I prepared a little Screencast. This Screencast guides you through the setup and configuration and even shows you how to develop / deploy and Debug a simple 'Hello World' application on your Mac which was developed using Delphi XE2 and FireMonkey on Windows. The Video is Hosted on YouTube and I have embedded it on this page. It might be interesting to look at the HD version in FullScreen Mode on YouTube thought ...

Alles moest een groot geheim blijven ... tenslotte zouden we samen iets maken voor Vaderdag en niemand mocht weten wat we zouden doen. Vandaar ook dat het nieuws pas nu 'gelekt' mag worden.

Het Idee

De juffen van het 5 de leerjaar uit de Vrije Basisschool Ertvelde hadden de Trailer gezien die we voor de Basisschool De Regenboog hadden gemaakt. Het filmpje werd goed bevonden, maar natuurlijk speelden ze zelf met een ander idee ... De kinderen van beide klassen uit het 5 de leerjaar hadden een tekst voor Vaderdag verzonnen op een bepaalde melodie. De twee klassen hadden zo hun eigen Vaderdaglied, en hadden de tekst reeds geperfectioneerd en ingeoefend.

Ondertussen werd reeds een afspraak vastgelegde met de mensen van Uptide Studio in Ertvelde om samen met de kinderen daar een bezoekje te brengen, en ondertussen hun liedjes in te zingen in de opnamestudio.

3 weken voor Vaderdag kregen wij dan de vraag of we het geheel niet wilden filmen en er ook een video van maken. Er was echter 1 probleem ... onze Jens zit in het 5 de leerjaar op die school, en ik zou dus al weten wat ik zou krijgen voor Vaderdag.

Ikzelf had daar geen probleem mee, integendeel ... het motiveerde mij nog meer om er iets moois van te maken ...

Filmen op School

2 weken voor Vaderdag sprong ik dus op school even binnen om al wat ‘B-Roll’ materiaal te filmen. B-Roll materiaal is eigenlijk extra beeldmateriaal dat geschoten wordt zonder onmiddellijk een idee te hebben van het gebruik ervan.

Filmen in de klas

Ik had al het idee om beeldmateriaal uit de opname studio te mengen met beeldmateriaal van eventuele repetities in de klas. Ik filmde echter hier en daar ook wat beeldmateriaal van tijdens de lessen in de klas, de spelende kinderen op de speelplaats, ... Dat materiaal had niet onmiddellijk een plaats in de Video Clip, maar ik zou het zeker en vast kunnen gebruiken.

Naar de Uptide Studio

Een week later was het dan zo ver. De kinderen vertrokken richting Uptide Studio in Ertvelde om daar hun liedje in te zingen. De Uptide Studio is een professionele opname studio waar we warm werden onthaald door Theo en Sarah. Na een woordje uitleg mochten de effectieve audio opnames starten, en kon ik alles vastleggen op video.

De Uptide Studio

Nu moet je weten dat liedjes niet in dezelfde volgorde ingezongen worden zoals je hoort in het eindresultaat. In ons geval werden alle strofes eerst ingezongen en het refrein pas helemaal op het einde. Iets lastiger om achteraf de puzzel terug in elkaar te stoppen tijdens het bewerken van de video fragmenten.

De Video Bewerking

Ondertussen was het al bijna Vaderdag ... en het zou mooi zijn mochten de kinderen het resultaat ook op Vaderdag kunnen afgeven. Er zat dus wat druk op de ketel, en ik had maar een paar dagen tijd meer om al het beeldmateriaal op de computer te krijgen, te bewerken en een montage klaar te hebben.

Het Vaderdag filmpje in Final Cut Pro

Zoals ik eerder reeds aangaf, bleek het toch wat puzzelwerk te zijn om alle fragmenten mooi achter elkaar te krijgen en synchroon te laten verlopen met de audio opname die ik van de mensen vanUptide Studio had gekregen, maar 2 dagen later zag het er toch al goed uit.

En wat met het B-Roll materiaal ?

Wel ... het B-Roll materiaal werd hier en daar ook gebruikt in de video montages van het liedje, maar ik wou nog een stapje verder gaan. Ik had immers genoeg beeldmateriaal om voor beide klassen ook een ‘Making Of’ video te maken van ongeveer 10 minuten.

Ook hier was het concept eenvoudig ... een 10 minuten durende video over de aanloop naar de opnames. Beeldmateriaal uit de klas, de repetities, de zangles, de speelplaats, ... Het B-Roll materiaal kwam dus hier goed van pas !

Het Eindresultaat

Om alles mooi af te werken, werd al snel besloten om er een echte Video DVD van te maken, compleet met alles er op en er aan. Het zou ook mooi zijn mochten er 2 versies van de DVD komen, een versie voor 5A en een versie voor 5B.

Bij de versie van 5A begint automatisch hun video clip starten bij het invoeren van de DVD in DVD Speler (of PS3, XBox, Computer, ...). Daarna komen ze op een menu terecht waar ze de videoclip opnieuw kunnen staten, de ‘Making of ...’ kunnen bekijken, een scene kunnen selecteren of hun foto’s kunnen bekijken. Daarnaast is er ook een Extra’s menu voorzien met dezelfde layout maar dan voor de video’s, scenes en foto’s van 5B. De DVD versie voor 5B is dan net omgekeerd.

De Vaderdag Video DVD

De tijd begon te dringen ... het was ondertussen al donderdag en de montage van de DVD moest nog gemaakt worden en van beide versies moesten 25 stuks gebrand worden. Dat was echter niet alles ... op de DVD’s moest nog iets gedrukt worden en ook de bijhorende DVD hoesjes moesten geprint worden en in de doosjes gestopt worden. Mits hier en daar wat late uurtjes was ales op vrijdag middag toch klaar en kon ik het resultaat afgeven in de klas.

De Feedback

Ik had de kinderen beloofd om de DVD te laten zien op school wanneer hij af was ... Met de zogenaamde ‘Golden Master’ trok ik dus naar de klas en liet ik het eindresultaat zien. Niet alleen de Video Clip bleek in de smaak te vallen, maar ook de ‘Making of ...’ de layout van de menu’s, het feit dat ze ook het beeldmateriaal van de andere klas hadden, en de volledige afwerking van het eindresultaat werd positief ontvangen.

Van de Juffen kreeg ik niets dan positieve reacties, en blijkbaar zijn ook de ouders onder de indruk. Ja ... ik hoorde zelfs “het origineelste en mooiste vaderdag cadeau ooit” vallen ... dus ... allemaal tevreden ‘klanten’ en daar doe je het voor :-)

De lat ligt dus al redelijk hoog. De eindmontage zou dus bijna even goed moeten zijn als de iMovie trailer ... werk aan de winkel dus.

Nog meer Pers

In mijn vorige post liet ik al even weten dat we tijdens de opnames het bezoek kregen van de pers, en dat we uiteindelijk ook verschenen in Het Nieuwsblad. Ondertussen verscheen er ook een artikel met als titel "GO! Basisschool De Regenboog in Ertvelde lonkt naar Hollywood".

Of we ooit in Hollywood geraken weet ik niet, maar de YouTube trailer werd toch al bekeken door iemand uit de Verenigde Staten. Wie weet ... misschien light Spielberg stiekem mee te kijken.

Werk aan de winkel dus

Na drie opname dagen had ik een hoop beeldmateriaal te verwerken. Ik denk zelfs dat we bijna 3 uur aan video materiaal hebben. Dat alles moet nu in detail bekeken worden, zodat we de beste 'Takes' er uit kunnen halen en die gebruiken in de montage. Niet dat de leerlingen slecht acteerden of zo, maar de cameraman ... die deed soms rare dingen ...

Tijdens het bekijken van het beeldmateriaal moest ik af en toe ook wel eens serieus lachen. Ik heb zo de gewoonte om een aantal seconden voor de effectieve act de camera reeds te laten opnemen. De bedoeling hiervan is om een aantal seconden speling te hebben en zo een minder abrupte overgang te krijgen. Maar hier leverde het af en toe ook wel grappige situaties op ... kinderen die oefenen, tekst repeteren en hier en daar ook een gekke bek ... en niet alleen van de leerlingen !!!

Die stukjes vormen misschien nog een mooie Bloopers reeks of zo ...

De eerste ruwe Montage

Na het selecteren van de beste stukjes was ik al in staat om snel een montage in elkaar te knutselen. Niets spectaculairs ... gewoon alle stukjes achter elkaar plaatsen. Best wel ruw en niet echt aangenaam om naar te kijken, maar het geeft al een idee van hoe de show er uiteindelijk uit ziet.

Van al het beeldmateriaal heb ik nu dus een ruwe montage van om en bij de 15 minuten ...

En wat nu ???

De ruwe montage is natuurlijk maar een begin. Ik heb beeldmateriaal dat we opnamen op een grijze dag, en ander beeldmateriaal waarbij er veel licht binnenviel in het klasje waar we de opnames uitvoerden. Er zal dus wat kleur correctie aan te pas komen zodat alles wat beter op elkaar afgestemd is.

Daarna moeten er natuurlijk nog titels toegevoegd worden. De namen van de actuers, dansers, acrobaten, presentatrices moeten mooi in beeld verschijnen, en er moeten nog Rolling Credits gemaakt worden. Je weet wel ... die lijst met namen die verschijnt op het einde van een film of serie.

Deze week hoop ik dus nog wat verder te kunnen werken ... maar er is nog een hoop te doen. Ik hou jullie zeker en vast verder op de hoogte.

Het idee was er dus al ... nu hadden de kinderen de nodige tijd om een en ander voor te bereiden ... wat kostuums mee te brengen en ook wat te repeteren. Ik had beloofd om voor de opnames te zorgen en daar dan iets mee te maken.

De Opnames

Nadat de jongens en meisjes van 2B hun sketches en ideeën verder uitgewerkt hadden, was het dus tijd om de opnames te verzorgen. Al snel kwam het idee om Het Slaapkasteel om te toveren tot de opname studio. De ruimte is er natuurlijk wat beperkt, maar samen met de Kids schoven we alles wat opzij zodat er toch gedanst kon worden.

Twee weken na elkaar hadden we op woensdag voormiddag dus een afspraak ... en werd er opgetreden ... gefilmed ... opnieuw geprobeerd ... Soms was een tweede take nodig, maar meestal was dat omdat de cameraman niet klaar was natuurlijk, want de artiesten hadden alles tot in de puntjes voorbereid.

De Pers

Tijdens de laatste opname dag kregen we zelfs bezoek van de lokale pers. Er kwam een reporter van Het Laaste Nieuws en ook nog iemand van Het Nieuwsblad. Nog geen dag later verschenen we in de Krant !

Onmiddellijk een wereldwijd publiek met YouTube

Samen met de klas in de krant komen is natuurlijk altijd mooi meegenomen, maar we namen ook even de tijd om samen met de klas andere mogelijkheden te bekijken. Waarom zouden we immers niet YouTube en andere kanalen gebruiken zodat zelfs wereldwijd mensen ons filmpje konden bekijken.

Er heerste natuurlijk wat ongeloof bij de kinderen, maar toen ik hen had uitgelegd dat overal ter wereld mensen met een internet verbinding via YouTube ons filmpje konden bekijken ... dan voelden de meesten zich al heuse sterren. Als snel kreeg ik de vraag of ook mensen in China, India, Amerika, Canada, Afrika, Rusland en alle andere landen van de wereld echt het filmpje konden zien. En toen ik daar heel snel altijd 'Ja' op kon antwoorden waren ze enorm Trots.

Een voorproefje

Er is natuurlijk nog een hoop werk aan de winkel voor er van alle opnames een mooie montage kan gemaakt worden, maar ondertussen heb ik toch al een kleine trailer gemaakt, zodat kinderen, ouders en ons wereldwijk publiek toch al van een klein voorproefje kan genieten terwijl ze ongeduldig wachten op het eindresultaat :-)

De 2B Show Trailer

Natuurlijk is feedback altijd welkom ... zowel hier als op de YouTube pagina van het filmpje zelf. Geniet er van ... en aarzel niet om het met anderen te delen !

Wat vooraf ging

Een tijdje terug kreeg ik via een kennis een filmpje te zien van de leerlingen uit de klas 2B van de Basisschool De Regenboog in Ertvelde. Misschien zijn er nog een aantal bezoekers die het vorige filmpje niet gezien hebben, dus snel nog even de YouTube toevoegen in deze post !

Het vorige filmpje<

Ikzelf vond het een leuk initiatief van een school uit de buurt, en nam even contact met hen op. Na het geven van een aantal suggesties stelde ik voor om eventueel wat te helpen bij een volgend filmpje.

Van het ene kwam het andere

Na wat over-en-weer gemail werd duidelijk dat men graag nog een filmpje zou maken met de kinderen, en dat allemaal in het kader van een project rond het thema Media. Ik herhaalde mijn aanbod om wat te helpen, en gaf ook een aantal ideetjes. De bedoeling was in eerste instantie om een beeld te vormen van het soort filmpje dat de kinderen konden maken.

Op zich kan je natuurlijk alle kanten uit, maar Juf Marie-Rose wou de kindjes zelf wat voorstellen laten maken en op basis daarvan beslissen wat het zou worden.

Brainstormen in het klaslokaal

Vorige week was het dan zover. Ik uitgenodigd in het klasje om samen met de Juf Marie-Rose en de leerlingen van klas 2B wat van gedachten te wisselen. Met 20 kindjes in de klas hoopten we toch een aantal voorstellen te krijgen.

De leerlingen werden verdeeld in 4 groepjes, en elk groepje kon een aantal voorstellen noteren. Achteraf werden de voorstellen van de 4 groepjes werzameld zodat erover gestemd kon worden.

Het werd al snel duidelijk dat er een aantal verschillende pistes waren. Een aantal voorstellen waren best verrassend, en tijdens de stemming hielden we nog een 5-tal voorstellen over. Wat het uiteindelijk zal worden laat ik nog even in het midden ... maar ik ben er zeker van dat het voor iedereen een leuke en leerzame ervaring wordt !

Well, after my previous post I continued doing some more work on my UI and trying to create my own Style for UITableViews and UITableViewCells. I ended up using the same colors over and over again in all different places in my application. In the end I had code in my UITTableViewController which set the Color for the Background and the navigation bar :

- (void)viewDidLoad 
{
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
    [[self navigationController] navigationBar].tintColor = [UIColor brownColor];
    UIImage *img = [UIImage imageNamed:@"BG_Pink"];
    [[self tableView] setBackgroundColor:[UIColor colorWithPatternImage:img]];
}

This was all working out quite nicely ...

Using the same color scheme in other Views

Data entry Screen

Of course, my application consits of a few different UITableViews and I even added a data entry View and a detail view. As you can see, the data entry view is using the same background color for the UITableView and the UITableViewCells are using the same color as my other UITableView as well.

At some point, I wanted to change the color scheme I was using (it was more pinkish at the start), and use something more Orange or brown like. Sadly this required me to change the color in every spot where I was using it. When I tested it on my phone, it looked horrible, since I forgot to change a few colors.

Since I'm still developing some basic ideas for the app, and the color scheme might change a few times during the Development cycle, I started thinking. There surely must be an easier way to handle this, which wouldn't require me to change the colors in 10 different places.

Of course, I could subclass UIColor and add my own colors to it, but I wanted to try a different approach

The Categories Approach

During the iOS bootcamp I took at Big Nerd Ranch Europe a while back, we touched on the subject of Categories. Categories allow you to extend a class without the need to Subclass it. Using Categories I could quickly add a few methods to UIColor whithout the need to create a new Subclass.

Creating a Category in UIColor

Creating a new category is actually quite easy. In my case, I wanted a category on UIColor so I could extend it. I created a new Header and Implementation file and called it UIColor+MyApp.h and UIColor+MyApp.c

The Header File

In the Header file UIColor+MyApp.h I added the following code :

//
//  UIColor+MyApp.h
//
//  Created by Stefaan Lesage on 11/11/10.
//  Copyright 2010 Devia. All rights reserved.
//

#import 

@interface UIColor (MyApp) 

+ (UIColor *)myTableViewBackgroundColor;
+ (UIColor *)myTableCellBackgroundColor;

@end

This simply declares a category MyApp on UIColor, and defines 2 new methods on it. myTableViewBackgroundColor which will return the Default color which should be used as the background for my UITableViews, and myTableCellBackgroundColor which defines the default color which should be used as the background for my UITableViewCells (and in some other places in my app).

The Implementation

In the Implementation file UIColor+MyApp.m I added the following code :

//
//  UIColor+MyApp.m
//  Phocation
//
//  Created by Stefaan Lesage on 11/11/10.
//  Copyright 2010 Devia. All rights reserved.
//

#import "UIColor+MyApp.h"

@implementation UIColor (MyApp)

+ (UIColor *)myTableViewBackgroundColor
{
    UIImage *img = [UIImage imageNamed:@"BG_Pink"];
    return [UIColor colorWithPatternImage:img];	
}

+ (UIColor *)myTableCellBackgroundColor
{
    return [UIColor colorWithRed:255/255.0 green:240/255.0 blue:255/255.0 alpha:100];
}

@end

Well the implementation is pretty straightforward. For the myTableViewBackgroundColor, I simply return a UIColor based on the pattern in my previous post. The myTableCellBackgroundColor then returns the light pink / purple color which gets used as the background for my UITableViewCells.

Using the Category

Using the Category is now pretty Straight Forward. In my Detail View for example, I have a reference to a UITextField called nameTextField and to the tableView beneath it. So in my viewDidLoad I have the following code :

- (void)viewDidLoad 
{
    [super viewDidLoad];

    /* Load our HeaderView if Necessary */
    [[self view] setBackgroundColor:[UIColor myTableViewBackgroundColor]];
    [[self tableView] setBackgroundColor:[UIColor myTableViewBackgroundColor]];
    [nameTextField setBackgroundColor:[UIColor myTableCellBackgroundColor]];
}

Quite simple, isn't it ?

But what are the advantages ?

For me, it makes my code a little more readable (that is of course a more personal opinion), but what's even better is that my code is a lot easier to maintain. If for some reason I want to change my color scheme to use another pattern or another color for the UITableViewCells, I only need to update the code in one sport. Simply modify the Implementation found in UIColor+MyApp.c, build and it's done !

Once I found the advantages of this approach, I even added more methods to my UIColor+MyApp category. It now also contains methods which return the color I will be using for the UINavigationBar tine, colors I will be using for different texts in my application, ...

Feedback

As with my previous post, there might be better ways to achieve the same thing. If you have a more appropriate approach or solution, feel free to let me know ... I'm eager to learn :-)

Default grouped UITableView

The default Grouped UITableView looks nice but ...

Well, you can use the UITableView in it's Plain mode, but also in a Grouped mode. The Grouped mode uses some kind of pattern as the background for the UITableView. It looks quite nice and is made up of alternating light and darker blue-grayish lines.

I wanted someting a little more 'Special' ...

Although the default look isn't all that bad ... I wanted to have something 'special' for my application. So I was wondering if there was some way to change the color used in that pattern. Since I didn't know the answer myself, I sent out a tweet. I was hoping someone would pick it up and maybe let me know where I could find some more information on this topic.

The feedback I got

I did receive some feedback to my tweet: 'Is there an easy way to create your own UIColor which looks like the 'Group Table View Color' but with another color scheme ? #iphonedev. One of the answers was from Amar Kulo who suggested to supply me with some Photoshop files I could modify.

A few moments later, Amar Kulo even provided me with a complete answer and wrote a blog post about it to help me out. It is actually pretty easy, so I thought i would share it with the world as well.

The Trick

It is actually quite easy to get your own custom background. You simply have to use a custom background image. Amar provides a few samples in his blogpost. The only thing you need to do is open up your favorite Image Editor (in my case Pixelmator), change the colors to you liking and create the necessary versions for your application.

The Code

The result actually looks pretty descent

Once you added the resources to your project, you can simply start using them as the background for your Grouped UITableView. In my case, it was simple a matter of setting the background color in the ViewDidLoad of my UITableViewController :

- (void)viewDidLoad 
{
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
	UIImage *img = [UIImage imageNamed:@"BG_Pink"];
	[[self tableView] setBackgroundColor:[UIColor colorWithPatternImage:img]];
}

Feedback

Well ... This might not be the best way to do it, so if you have any suggestions, feel free to let me know. Next time I'll be delving a little deeper into some more things I did with my UITableView and UITableViewCell ... but for now ... feel free to post a comment and have a look at the result :

Since for some strange reason I couldn't fit everything in a single post, I had to split it up, so this is the rest of it

The TdvStringSetting class

The explanation

Basically the TdvSetting provides us with a skeleton we can use for our new Setting descendants. I ended up with a TdvStringSetting, TdvIntegerSetting, TdvBooleanSetting and quite a few others, but lets start with the TdvStringSetting first.

The Code

  TdvStringSetting = class( TdvSetting )
  private
    function GetDefaultValueAsString: String;
  protected
    function GetAsBoolean: Boolean; override;
    function GetAsDateTime: TDateTime; override;
    function GetAsFloat: Double; override;
    function GetAsInteger: Longint; override;
    function GetAsString: string; override;
    function GetAsVariant: Variant; override;

    function GetValue(var Value: string): Boolean;

    procedure SetAsBoolean(const Value: Boolean); override;
    procedure SetAsDateTime(const Value: TDateTime); override;
    procedure SetAsFloat(const Value: Double); override;
    procedure SetAsInteger(const Value: Longint); override;
    procedure SetAsString(const aValue: string); override;
    procedure SetVarValue(const aValue: Variant); override;
  public
    procedure SaveToRegIni  ( aRegIni : TRegistryIniFile; const aSection : String ); override;
    procedure LoadFromRegIni( aRegIni : TRegistryIniFile; const aSection : String ); override;

    property DefaultValue  : String       read  GetDefaultValueAsString;
    property Value         : string       read  GetAsString
                                          write SetAsString;
  end;

...

{ TdvStringSetting }

function TdvStringSetting.GetAsBoolean: Boolean;
var
  S: string;
begin
  S := GetAsString;
  Result := (Length(S) > 0) and (S[1] in ['T', 't', 'Y', 'y']);
end;

function TdvStringSetting.GetAsDateTime: TDateTime;
begin
  Result := StrToDateTime(GetAsString);
end;

function TdvStringSetting.GetAsFloat: Double;
begin
  Result := StrToFloat(GetAsString);
end;

function TdvStringSetting.GetAsInteger: Longint;
begin
  Result := StrToInt(GetAsString);
end;

function TdvStringSetting.GetAsString: string;
begin
  if not GetValue(Result) then Result := '';
end;

function TdvStringSetting.GetAsVariant: Variant;
var
  S: string;
begin
  if GetValue(S) then Result := S else Result := Null;
end;

function TdvStringSetting.GetDefaultValueAsString: String;
begin
  Result := FDefaultValue;
end;

function TdvStringSetting.GetValue(var Value: string): Boolean;
begin
  Value  := FValue;
  Result := True;
end;

procedure TdvStringSetting.LoadFromRegIni(aRegIni: TRegistryIniFile;
  const aSection: String);
begin
  inherited LoadFromRegIni( aRegIni, aSection );

  Value := aRegIni.ReadString( aSection, Identifier, DefaultValue );
end;

procedure TdvStringSetting.SaveToRegIni(aRegIni: TRegistryIniFile;
  const aSection: String);
begin
  inherited SaveToRegIni( aRegIni, aSection );

  aRegIni.WriteString( aSection, Identifier, Value );
end;

procedure TdvStringSetting.SetAsBoolean(const Value: Boolean);
const
  Values: array[Boolean] of string[1] = ('F', 'T');
begin
  SetAsString(Values[Value]);
end;

procedure TdvStringSetting.SetAsDateTime(const Value: TDateTime);
begin
  SetAsString(DateTimeToStr(Value));
end;

procedure TdvStringSetting.SetAsFloat(const Value: Double);
begin
  SetAsString(FloatToStr(Value));
end;

procedure TdvStringSetting.SetAsInteger(const Value: Integer);
begin
  SetAsString(IntToStr(Value));
end;

procedure TdvStringSetting.SetAsString(const aValue: string);
begin
  FValue := aValue;
end;

procedure TdvStringSetting.SetVarValue(const aValue: Variant);
begin
  SetAsString(aValue);
end;

What does it do ?

Since we had the skeleton of the TdvSetting in place, the only thing we needed to do was to override the necessary methods and implement our own features. As you can see, we added approximately the same code as can be found in the TStringField in the VCL.

The only additional code is the implementation of the SaveToRegIni and LoadFromRegIni methods. These methods will actually load and save the value of the Setting to the Registry. Additionally when loading the value we will be using the Default value if the setting can't be found in the regsitry. The Section where we will read / write the value can be supplied to the method and we will be using the identifier (name) of the setting as the key

Creating the TdvSettings class

The explanation

Well, now that we can make different type of Setting objects, we also need some kind of container to hold them. For example our application might have quite a few settings : PrintInColor, CheckForUpdates, AutoConnect, ... but we will need some way to access them. As mentioned before I created the TdvSettings class as a simple TObjectList. It will hold a reference to the individual TdvSetting objects and we will be able to access them

The Code

  TdvSettings = class( TObjectList )
  private
    FRootKey: String;
  protected
    procedure CreateSettings; virtual;

    function GetItems(Index: Integer): TdvSetting;
    procedure SetItems(Index: Integer; ASetting: TdvSetting);
  public
    constructor Create( const aRootKey : String );

    function Add(ASetting: TdvSetting): Integer;
    function Extract(Item: TdvSetting): TdvSetting;
    function Remove(ASetting: TdvSetting): Integer;
    function IndexOf(ASetting: TdvSetting): Integer;
    function First: TdvSetting;
    function Last: TdvSetting;
    function SettingByIdentifier( const aIdentifier : String ) : TdvSetting;

    procedure LoadFromRegistry;
    procedure SaveToRegistry;

    procedure Insert(Index: Integer; ASetting: TdvSetting);
    property Items[Index: Integer]: TdvSetting read GetItems write SetItems; default;
    property RootKey : String read FRootKey write FRootKey;
  end;

  ...

{ TdvSettings }

function TdvSettings.Add(ASetting: TdvSetting): Integer;
begin
  Result := inherited Add(ASetting);
end;

constructor TdvSettings.Create(const aRootKey: String);
begin
  inherited Create( True );
  FRootKey := aRootKey;
  CreateSettings;
  // Read the settings from the Registry once the Settings object list has
  // been initialised.
  LoadFromRegistry;
end;

procedure TdvSettings.CreateSettings;
begin

end;

function TdvSettings.Extract(Item: TdvSetting): TdvSetting;
begin
  Result := TdvSetting(inherited Extract(Item));
end;

function TdvSettings.First: TdvSetting;
begin
  Result := TdvSetting(inherited First);
end;

function TdvSettings.GetItems(Index: Integer): TdvSetting;
begin
  Result := TdvSetting(inherited Items[Index]);
end;

function TdvSettings.IndexOf(ASetting: TdvSetting): Integer;
begin
  Result := inherited IndexOf(aSetting);
end;

procedure TdvSettings.Insert(Index: Integer; ASetting: TdvSetting);
begin
  inherited Insert(Index, aSetting);
end;

function TdvSettings.Last: TdvSetting;
begin
  Result := TdvSetting(inherited Last);
end;

procedure TdvSettings.LoadFromRegistry;
var
  lIndex   : Integer;
  lSetting : TdvSetting;
  lRegIni  : TRegistryIniFile;
begin
  lRegIni := TRegistryIniFile.Create('');
  try
    for lIndex := 0 to Pred( Count ) do
    begin
      lSetting := Items[ lIndex ];
      lSetting.LoadFromRegIni( lRegIni, RootKey );
    end;
  finally
    FreeAndNil( lRegIni );
  end;
end;

function TdvSettings.Remove(ASetting: TdvSetting): Integer;
begin
  Result := inherited Remove(aSetting);
end;

procedure TdvSettings.SaveToRegistry;
var
  lIndex   : Integer;
  lSetting : TdvSetting;
  lRegIni  : TRegistryIniFile;
begin
  lRegIni := TRegistryIniFile.Create('');
  try
    for lIndex := 0 to Pred( Count ) do
    begin
      lSetting := Items[ lIndex ];
      lSetting.SaveToRegIni( lRegIni, RootKey );
    end;
  finally
    FreeAndNil( lRegIni );
  end;
end;

procedure TdvSettings.SetItems(Index: Integer; ASetting: TdvSetting);
begin
  inherited Items[Index] := aSetting;
end;

function TdvSettings.SettingByIdentifier(
  const aIdentifier: String): TdvSetting;
var
  lcv : Integer;
begin
  Result := Nil;

  for lcv := 0 to Pred( Count ) do
  begin
    if ( Items[ lcv ].Identifier = aIdentifier ) then
    begin
      Result := Items[ lcv ];
      Break;
    end;
  end;
end;

What does it do ?

Well, it is simply a container for a number of TdvSetting objects. It has some basic code which will allow us to access the individual TdvSetting objects using their index or their Identifier (name). We will be able to set the RootKey of the TdvSettings object and that is the base key which will be used when loading / storing the individual TdvSetting objects.

You willl notice that I added a CreateSettings method which is currently empty. The goal is to implement this in descendant classes. At the TdvSettings level we don't yet know which individual settings we will need, how they are called and what type they are ... Yet, I wanted to be able to create those settings from within the base class and once that is done read the settings if necessary.

In my TdvMyApplicationSettings I will override this method and add the necessary code to set up the individual TdvSetting objects I need for my applicaiton.

What's next ?

Currently we have a basic skeleton in place and we are able to continue from here. If you're up for a challenge, you might want to create your own TdvSetting descendants. I noticed I needed one for Integer values, DataTime values and Boolean values, so you could try to implement those.

As I mentioned at the end of the previous article, this isn't the only way, nor THE way to solve this problem, and I actually did try a few other approaches as well. It did take me a few iterations to get to this stage. For example, initial versions had the actual code for creating the TRegistryIniFile class inside the individual TdvSetting objects.

Quickly I noticed though that I had the exact same code in all my TdvSetting descendants LoadFromRegIni and SaveToRegIni methods so I started thinking again. I thought that constructing & destroying the TRegistryIniFile might be something I don't want to execute for the 20 individual application settings so I ended up refactoring the code to it's current status

Feedback

I'm quite sure the code could be simplified and maybe improved, and I do welcome all suggestions and feedback. So feel free to post all comments on this blog and I'll try to respond ASAP. Maybe your feedback will shape the next article in this series ...