Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Building the Interface
When I create an AppleScriptObjC project, I usually start by designing the interface. This approach allows me to experiment with the look and feel of my app, before I begin to write any of the code. This technique translates to fewer code changes down the line.
So we'll start with the interface here. In the Project Navigator (Command-1), click the MainMenu.xib file, which is the main interface file for the app. By default, the Xcode project's interface file contains an empty window. In the interface editing area, click the window's icon in the left sidebar (see Figure 5).
)
Figure 5 Displaying the project's main window.
Your new interface contains three areas:
- The Photo area allows the user to choose a photo. It will then display the photo's path and a small preview of the photo.
- The Processing Options area allows the user to specify the desired options for processing the chosen photo: scaling, rotation, and so on.
- The Output Options area allows the user to select an output folder and specify the desired format for the processed image.
We'll build the interface in sections, beginning with the Photo area.
Building the Photo Area
In the Object Library (Control-Option-Command-3), search for a Label element and drag it to the upper-left corner of the window, as shown in Figure 6.
)
Figure 6 Adding a label to the project's window.
Double-click the label and change its title to Photo. Then use the same technique to search the Object Library for the following elements and add them to the window:
- Position a Text Field element below the Photo label. This field will be used to display the path of the selected image. In the Attributes Inspector (Command-Option-4), deselect the Enabled attribute for this text field (see Figure 7), to prevent the user from manually entering a path.
- Add a Button element beneath the lower-right side of the text field, changing its title to Browse. After you've wired it up, the user will be able to click this button to search for an image.
- Add an Image Well element, adjusting it to be square, and positioning it to the right of the text field and Browse button. This element will display a preview of the selected image.
)
Figure 7 Disabling the Enabled attribute of the photo path text field.
The completed Photo area should resemble Figure 8.
)
Figure 8 Interface elements for photo selection and display.
Building the Processing Options Area
Now we'll build the Processing Options portion of the interface. The elements in this area will control the behavior of our app—that is, what happens to the selected image. Search the Object Library for the following elements and add them to the window as shown in Figure 9:
- Add a Label element to serve as the header for the section. Use Processing Options: for its title.
- Add three Checkbox elements. Change the title of the first checkbox to Flip Horizontal, placing it under the header label. Call the second checkbox Flip Vertical and position it beneath the Flip Horizontal checkbox. Use Scale to: as the title for the third checkbox, placing it to the right of the Flip Horizontal checkbox.
- Position a Text Field element to the right of the "Scale to:" checkbox. The user will be able to enter a scaling amount here.
- Place a Pop Up Button element to the right of the new text field, configuring it to have the menu items pixels and percent.
- Place a fourth Checkbox element beneath the "Scale to:" checkbox and give it the title Rotate.
- Position a Text Field element to the right of the Rotate checkbox. The user will be able to enter a rotation amount here.
- Add a Label element to the right of the Rotate text field, changing its title to degrees.
)
Figure 9 The interface now contains processing options.
Building the Output Options Area
Finally, we'll design the output options for the interface. Here the user will choose an output folder for the processed image, and initiate processing. Search the Object Library for the following elements, adding them to the interface as shown in Figure 10:
- Add a Label element as the header for this set of options, setting Output Options: as its title.
- Position a Text Field element below the header label. This field will display the path of the chosen output folder. In the Attributes Inspector (Command-Option-4), deselect the Enabled attribute for this text field.
- Drag a Button element beneath the lower-right corner of the output folder text field. Set the title of the button to Browse. The user will click here to search for an output folder.
- Add a Label element at lower left below the output folder text field, using Save as: for its title.
- Position a Pop Up Button element to the right of the label above. Change its menu items to BMP, JPEG, and TIFF. This button will let the user choose the desired format when saving the processed file.
- Drag a Button element to the lower-right corner of the window, changing its title to Process. The user will click this button to begin processing the specified image.
)
Figure 10 Output option elements in the interface.