Pariahware, Inc.

iOS & OS X Freelance

Expect Updates Soon

Now that Xojo 2013 R3 is out, and Xcode 5 is no longer under NDA, expect more tutorials soon! Thank you for your support!
Comments

PopUpMenus & ComboBoxes

The Xojo way.

Start a new Xojo desktop project. Drag a PopUpMenu control and a ComboBox control onto the window. Name the PopUpMenu “thePopUp” and the ComboBox “theCombo”. I set both of my controls to 150 pixels. The window should look similar to this:
Pasted Graphic

The first thing we need to do is create a new Boolean property so we won’t see MsgBoxes when we launch the app:
Pasted Graphic 2

Then in the window’s open event, we set up our controls and the property:
Pasted Graphic 3

In the PopUp’s Change event, we put the following notification code:
Pasted Graphic 4

And, almost identical code in the ComboBox’s Change event:
Pasted Graphic 5

Run the project and you will see MsgBoxes when you change the menu selection:
Pasted Graphic 6

The Xcode way.


Launch Xcode, and choose File -> New Project. Choose OS X Application & Cocoa Application. Hit Next. Choose a name for your project, make sure Automatic Reference Counting (ARC) is checked and Document Based Application is unchecked. If you need help with this, check out the first entry
about the PushButton which goes into great detail.

Choose the MainMenu.xib and drag in an NSPopUpButton and an NSComboBox. I made both of mine 150 points wide.
Pasted Graphic 7

Go to your AppDelegate.m file, and under the #import line, type the @interface AppDelegate() and @end lines. Then put Xcode into split pane view so you have MainMenu.xib on one side and AppDelegate.m on the other. Control-Drag from each control to the @interface section. Name the NSPopUpButton thePopUp, and the NSComboBox theCombo. Again, if you need detailed help with this, check out the first entry
about the PushButton which goes into great detail.
Pasted Graphic 8

Now let’s set up our controls in the applicationDidFinishLaunching event, just as we did previously. Notice the differences between filling the two controls with data.
Pasted Graphic 10

In Objective-C, while the NSPopUpButton & NSComboBox look similar, they function differently. The NSPopUpButton will send us an IBAction when the selection has changed while the NSComboBox uses the delegate mechanism. After you’ve typed the above code, you are seeing the “warning” icon next to the _theCombo.delegate = self; line. Let’s fix that by changing to the AppDelegate.h file; you can use keyboard shortcut Control-Command-UpArrow to flip back and forth between any associated .m & .h files. In the header, change the @interface line to look like the image below and flip back to your .m file. After a second or two the warning will disappear.
Pasted Graphic 11

Let’s add our action to receive NSPopUpButton selection changes. In split view, with AppDelegate.m on one side and MainMenu.xib on the other, select the NSPopUpButton on the window, Control-Drag from the NSPopUpButton to the .m file, when the PopUpWindow appears, change it to look like this and hit Connect:
Pasted Graphic 12

Now that the action has been created, enter the code below. First we grab the popUp’s current text, then we display a dialog box, just as we did before.
Pasted Graphic 14

Remember that the NSComboBox uses the delegate mechanism instead of the action mechanism, so we must invoke the proper method, which conveniently is called “comboBoxSelectionDidChange”. Notice we do essentially the same thing as with the NSPopUpButton, but the way we obtain the text is different:
Pasted Graphic 16

Run the project, and:
Pasted Graphic 17
Comments

The Checkbox

The Xojo way.

Start a new Xojo project. In the window, drag in a Checkbox & a Label. Title the Checkbox “Toggle Me”. Title the Label “Checkbox is OFF”, and set it so that the text is right justified. The window should look similar to this:
Pasted Graphic

Double-click the checkbox and add the following code to the Action event:
Pasted Graphic 1

Now in the Label’s MouseDown, put this code:
Pasted Graphic 15

Run the application. Toggling the checkbox on & off alternates between these two images:
Pasted Graphic 3
Pasted Graphic 4

Then, if you click on the Label:
Pasted Graphic 6

The Xcode way.


Launch Xcode, and choose File -> New Project. Choose OS X Application & Cocoa Application. Hit Next. Choose a name for your project, make sure Automatic Reference Counting (ARC) is checked and Document Based Application is unchecked. Notice that there is no screenshot this week; we’re slowing removing training wheels.

Navigate to your MainMenu.xib, click on the window, and drag in a checkbox and a label. Title the checkbox “Toggle Me” & title the Label “Checkbox is OFF”. Like so:
Pasted Graphic 7

Select the label & go to the Inspector Pane. Select the Attributes Inspector, and set the alignment to right-justified:
Pasted Graphic 8

Select the checkbox & return to the Attributes Inspector. Set its State to Off, and check “Allows Mixed”:
Pasted Graphic 9

Enter split pane view. Have your layout view on one side & your code view on the other. On the code side, select AppDelegate.m.
Beneath the #import line, add @interface AppDelegate() and @end. Then control-drag from the checkbox to in between the two lines you just wrote. You will notice that the checkbox is actually an NSButton control. Call the checkbox “checkbox”. Do the same for the label and call it “theLabel”. It should look something like this:
Pasted Graphic 10

Now, control-drag from the checkbox to the @implementation section. Give the method a name, and add the following code. I called my method “checkboxToggled”:
Pasted Graphic 11

Run the app and check the checkbox.
Pasted Graphic 12
Pasted Graphic 13
Pasted Graphic 14
Comments

The Listbox, err, NSTableView

The Xojo way.

Start a new Xojo project. In the window, drag in a Listbox & a PushButton. Label the PushButton “Fill Table”. In the Listbox property panel, set ColumnCount to 2 & ensure the HasHeading property is checked. The window should look similar to this:
Pasted Graphic

In the window’s Open Event, set up the Listbox header:
Pasted Graphic 1

In the PushButton’s Action Event, populate the Listbox:
Pasted Graphic 2

Run the project, push the button, and...
Pasted Graphic 3


The Xcode way.


Launch Xcode, and choose File -> New Project. Choose OS X Application, Cocoa Application as denoted by the arrows & hit Next.
xc_step_1

Type “tabletest” in the first box as denoted by the arrow. Make sure “Create Document-Based Application” is unchecked and “Use Automatic Reference Counting” is checked. Click Next & Save the project.
Pasted Graphic 4

Select “MainMenu.xib” and then the “Window” object. You will see a window in a grid layout, similar to Xojo’s.
Pasted Graphic 5

Find the Table View control by using the filter in the lower-right hand corner, drag it and the Push Button into the window. Double-click the Push Button and label it “Fill Table”. Double-click each table header and label them “Column 1” & “Column 2” respectively.
Pasted Graphic 6

After you’ve labeled the headers, click on the window to remove the highlight & return the window to its normal color. Now, in the white space of column 1, single-click 3 times to give the column focus.
Pasted Graphic 7

In the property pane, select the Identity Inspector and name the Identity Identifier “column1”. Do the same for the second column and name it “column2”.
Pasted Graphic 8

Put Xcode in split view with code view on the left side and the layout view on the right side. Select “AppDelegate.h” and modify the @interface to also be an NSTableViewDataSource as well as an NSTableViewDelegate. This allows the AppDelegate to provide data and other metrics to the NSTableView. This is different from Xojo’s built-in Listbox control and similar to Einhugur’s DataGrid for Xojo.
Pasted Graphic 9

Select “AppDelegate.m”. Beneath the #import line, add the @interface & @end lines.
Pasted Graphic 10

Control-drag from the NSTableView between the @interface and name it “theTable”. Note, make sure you’ve selected the table section, below the header. Otherwise you will be creating an NSScrollView instead of the NSTableView.
Pasted Graphic 17

After the @implementation, define two arrays and call them column1 & column2:
Pasted Graphic 12

The next step is to tell the NSTableView to get its data from us, so, in applicationDidFinishLaunching:, add the following two lines:
Pasted Graphic 13

Control-drag from the PushButton after applicationDidFinishLaunching: and add an action. After doing so, populate the 2 arrays signified by the first arrow and tell the TableView to populate as denoted by the second arrow.
Pasted Graphic 14

We need to tell the TableView how many rows to display by adding the following routine. Note, we will be returning the number of elements in the array.
Pasted Graphic 15

Now to populate the table with data. Add this method. When called, we ask the column which column it is by polling the identifier we set in layout mode.
Pasted Graphic 16

And we’re done. Run the project & click the button. Success!
Pasted Graphic 18
Comments

(Wrapping) Text Fields

The Xojo way.


Start a new Xojo Desktop project and design the window to look like the image below.
(2 Labels, 1 TextField, 1 TextArea, and 2 PushButtons)
Pasted Graphic

Double-click the “Push Me” button and add the following code:
Pasted Graphic 1

Now, double-click the “Push Me, Too” button and add the following code:
Pasted Graphic 2

Run the project, add some text to each text control, and then test the two separate buttons:
Pasted Graphic 3
Pasted Graphic 4

The Xcode way.

Launch Xcode, and choose File -> New Project. Choose OS X Application, Cocoa Application as denoted by the arrows & hit Next.
xc_step_1

Type “textfieldexamples” in the first box as denoted by the arrow. Make sure “Create Document-Based Application” is unchecked and “Use Automatic Reference Counting” is checked. Click Next & Save the project.
Pasted Graphic 5

Select “MainMenu.xib” and then the “Window” object. You will see a window in a grid layout, similar to Xojo’s.
Pasted Graphic 6

Find the label control by using the filter in the lower-right hand corner and drag two labels into the window. Double-click each of them to change their text values.
Pasted Graphic 7

Drag a Text Field, a Wrapping Text Field, and two Push Buttons. Make it look like the following image:
Pasted Graphic 8

Now put the editor into split view/assistant mode:
Pasted Graphic 9

On the left side, place your code by selecting the “AppDelegate.m” and keep the window layout on the right.
Pasted Graphic 13

If you are having trouble getting the panes to look correct, click on the breadcrumbs and force them to look the way we want.
Pasted Graphic 14

Although you could put upcoming information in the .h header file, the common thought these days is to only place public information into the header. So, right under the #import line of the .m file, add some private Interface code, like so:
Pasted Graphic 15

Control-Drag from the Text Field to between your Interface, I named mine “textField”. This is how you will identify the Text Field in code. Do the same for the Wrapping Text Field. I called mine “textArea”.
Pasted Graphic 16

Pasted Graphic 17

Pasted Graphic 18

Now add actions for the Push Buttons by similarly Control-Dragging from each button to the @implementation section:
Pasted Graphic 19

Setup is done. Time to code!

Make your “pushMeButton” & “pushMeTooButton” actions look like this:
Pasted Graphic 20

And test!
Pasted Graphic 21

Type some text in “textField” and push its button to test:
Pasted Graphic 22

Looks right! But, try typing in the multi-line field. Pressing the “Return” key doesn’t add a new line, does it? It’s not user-friendly, but you can type “Opt-Return” to add new-lines. Let’s fix that.
Select the header file:
Pasted Graphic 23

Change the @interface line to read:
Pasted Graphic 24
You’re really just adding “, NSControlTextEditingDelegate” before the “>”, which allows your app to respond to messages from TextFields.

Back to the .m (Implementation) file… add the designated line to the “applicationDidFinishLaunching” event. This tells “_textArea” to send the messages to your app.
Pasted Graphic 25

Finally, copy the
following routine from Apple’s site and paste it into your file somewhere between @implementation & @end.
Pasted Graphic 27

Run the project, test the field, and…
Pasted Graphic 28
Comments