Put in some code (intention explained below):
- Code: Select all
IBOutlet theLabel As NSTextField
Event AwakeFromNib()
Alert("Hello")
End Event
IBAction buttonPressed(sender As id)
Alert("I have been hit!")
theLabel.StringValue="Katze"
End IBAction
Let the compiler check if everything is fine from a syntactic point of view by activationg "Compiler->Build" or just press [cmd]+B. If you run ([cmd]+R) the application, only an empty window will show up. This is not what the code should do.
Let's rush through:
- We expect to have a label on the user interface to give us some feedback, let's name it theLabel. It is marked as an IBOutlet, so we can expose it to the user interface (see below).
- The AwakeFromNib event is taken as such from the template. This code is inserted when you create a new project. This event is fired as soon as your application finished loading and the user interface has been initialized.
- At last we have defined buttonPressed as IBAction. This code should be called if you press a button in the user interface.
So we need to create a label and a button on a window for our code to interact with. How could you do this?
Objective Basic has no user interface designer on its own, Apple built such a decent one. Good functionality shouldn't be duplicated without a reason.
Please follow "Project->XCode for MainMenu.xib...". I hear you asking: How should I know the user interface designer is hidden behind this option? Perhaps it would be easier if it just reads "Project->Interface Designer...". But add this as a feature request on Objective Basic's wish list.
If you want to shortcut, click the IB (short for Interface Builder) icon in the IDE and you'll be taken to the UI designer.
You are greeted by XCode and it presents the empty user interface of your application:
- interfaceBuilding.jpg (126.39 KiB) Viewed 1251 times
OK - you see the user interface I have already patched together for this tutorial.
I have put two different controls in the window and you can do so as well. To the right you see a button with the caption "Udo sagt Hallo" ("Udo says hello") and a label which reads "Huhn" ("chicken"). They are taken form the left pane where you can see thing like "Rounded Rect Button" and "Square Button". You place them in the window using drag and drop.
So now you have code in the ObjB IDE and a user interface in XCode and the question should be: "How do we connect these separate parts?". You do this in the interface designer as well. Each code element you marked as either IBOutlet or IBAction in your code is available in the UI designer.
Let's look at another snapshot:
- objectPanel.jpg (33.92 KiB) Viewed 1230 times
If you turn your attention to the the left column you can see program objects as they are represented in the UI designer. If you move the mouse over these icons they will reveal their name and some should sound familiar to you, because you have seen them in the ObjB IDE already. Global is one of those. If you switch back to your code you'll see that you have inserted the code into the Global namespace. Actually the cube represents the object you have created this way.
We have to dig a little deeper to reveal the outlets and actions you have defined in your code. You do so by right clicking the Global object.
- objectInspection.jpg (24.32 KiB) Viewed 1230 times
You see two identifiers you have defined in your code: theLabel and buttonPressed. Looks promising!
To connect the code with your UI you click the hole to the right of the name (it turns to a +) and drag it (keep the mouse button pressed) to the control you want to wire it to. Here I have wired theLabel to the "Huhn" label. And I have wired buttonPressed to the "Udo sagt Hallo" button. As these are the only controls in the window it shouldn't be to hard to find them.
The job can get harder if you have a densely populated window - but then it should be time to rethink the layout.
This is it - no more work separates you from your first windowed application.
Return to the ObjB IDE and press the play icon in the top row. The application should compiles, starts and an alert should greet you. It just reads "Hello".
Turn your attention to the code and you'll notice that this is exactly what you wanted the application to do, when the user interface is loaded and initialized (AwakeFromNib).
Now the window shows up and presents the information and controls we have arranged in the UI designer. If you click the button buttonPressed is fired. You are greeted again with an alert and the label changes its caption to "Katze" (cat). The alert will be shown every time you hit the button. The caption will be set as well. But you won't see a difference - it reads "Katze" from now on.
At last here is the project to download:
helloUdo.zip- the project to download and test
- (729.44 KiB) Downloaded 165 times
Please tell me if this post is helpful and what you like to be covered in further tutorials.
