Skip to content

Creating A Simple UIKit App

galiro edited this page Jul 7, 2012 · 1 revision

Hello everyone! Today I will go through the steps of creating a simple Mac Application using the Chameleon Framework! To start, you will need to have downloaded the chameleon framework and unzipped it somewhere you can access it with ease. =D I am using Xcode 4.3.3 during the writing of this tutorial.

Step 1. Open Xcode and create a Mac OSX Cocoa Application and name it Demo App. Step 1

Step 2. Now you have to import the UIKit Framework. Head on over to File->Add New Files to "Demo App". Go to the folder where you downloaded the Chameleon and click on the UIKit folder. Then, choose the UIKit.xcodeproj file and add it to your project. Make sure that the "Copy Files to Destination" Checkbox is selected!

Step 3.The Next step is to link the Framework to your project. In the "Demo App" Summary Page, under "Linked Frameworks and Libraries", click the + button an select the UIKit Framework that is found under Workspace. Step 3

Step 4. THANK GOODNESS! Now we can get some real work done ;) Head on over to the AppDelagate.h file. At the top, where that #import is located, add the following:#import <UIKit/UIkitView.h> Now in your interface, add instance of UIKitView called chameleonView: Step 4

Step 5. Lets put a pause with the AppDelegate. Go and create a new subclass of NSObject and name it ChameleonAppDelagate. This can be done in File->New File. This is where you will be creating your User Interface and your "brain" code. Think of it as both the model and the controller. In ChameleonAppDelagate.h, import the UIKit/UIkit.h header and remove the Foundation header that was included. Now, next to ChameleonAppDelagate: NSObject, add the following delegate: <UIApplicationDelegate>. Place parenthesis thereafter.Next, we will add the following code in the parenthesis: UIWindow *window; UILabel *label1; UILabel *label2; UIButton *button; Your end result should look like this: Step 5

Step 6. It is time for le implementation. Open up ChameleonAppDelagate.m After the @implementation add the following Step 6 (I would have wrote it out, but I had some problems with the GitHub editor)

Now, if you are an iOS developer (I don't see why your not) you should somewhat understand this code. The applicationDidFinishLaunching method acts like the ViewDidLoad method in iOS. This is where you create your view objects to load. Here, the window was implemented, as well as the labels and the button. Then we added the the windows view using [window addSubView: (view)]. A selector was given to the button to perform. The method code (changeText) was then created after the applicationDidFinishLaunching method and was programmed to change the Text of the UILabel.

Step 7. If you run the project, none of this will actually show up in your application. You have to make them appear by implementing the ChameleonAppDelegate in the AppDelegate file, which is the file that does all the real loading work. Go ahead and open up the file and add the following code:

Step 7a

This code creates an instance of the ChameleonAppDelagate and UIKitView. The property for the UIKitView will be implemented shortly. Now open up the AppDelegate.m file and type in the following: Step 7b

This code implements the ChameleonAppDelagate in the applicationDidFinishLoading method. What [chameleonNSView launchApplicationWithDelegate:chameleonApp afterDelay:1]; does is take the view and launch it with the ChameleonAppDelegate instance you created. That means that all the stuff you made in the ChameleonAppDelegate will be loaded up into the View. The afterDelay is the time it should wait to load this.

Step 8. Wait!! It still won't work!! We haven't set up the outlet for the view! Open up MainMenu.xib and click on Window. Now search up a Custom View and drag it to the window, making all the side meet. Then, in the identity inspector, set the class to UIKitView. Next, control drag from the AppDelegate (the blue box ) to the UIKitView and set the connection to the chameleonNSView. It should look like the following: Step 7b

Step 9. Run the Code.

If everything was done right, you should see a window that look like this: Step 7b

I can be emailed at [email protected]

The Sample Code can be downloaded from here

Clone this wiki locally