Changeset 7712


Ignore:
Timestamp:
Nov 24, 2007, 7:15:52 PM (12 years ago)
Author:
mikel
Message:

added explanation of how to add custom classes and connections in IB 3.0

Location:
trunk/ccl/examples/cocoa/currency-converter/HOWTO_files
Files:
4 added
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/ccl/examples/cocoa/currency-converter/HOWTO_files/pages/building_ui.html

    r7711 r7712  
    136136  launches.</p>
    137137
     138<p>When you use XCode to write an Objective C application,
     139  InterfaceBuilder can read the Objective C header files and use the
     140  information in them to create descriptions of the classes in the
     141  Objective C code. When the application is written in Lisp,
     142  InterfaceBuilder can't read the class descriptions from the code,
     143  and so we'll have to manually tell the nibfile about any classes
     144  that we use in the user interface.</p>
     145
    138146<p>As you will see in the following sections, we'll be using Lisp code
    139147  to define two Objective C classes: Converter, and
     
    146154  and the rest of the user interface.</p>
    147155
     156<div class="section-head">
     157  <h2>Create Instances of Custom Classes</h2>
     158</div>
     159
    148160<p>In InterfaceBuilder's Library window, select the Cocoa Objects and
    149161  Controllers view:</p>
     
    164176<p>Now tell InterfaceBuilder the name of the new object's class. With
    165177  the Object icon selected in the main CurrencyConverter window,
    166   choose the Identity tab of the Inspector:</p>
     178  choose the Identity tab of the Inspector. At the top of the
     179  Identity view is a "Class" field; type the name of your custom
     180  class (in this case, "Converter") into the "Class" field and save
     181  the nibfile:</p>
     182
     183      <div class="inline-image">
     184        <img src="../images/ibwin-leopard5.jpg"alt=""
     185             border='0'/>
     186      </div>
     187
     188<p>Repeat the previous steps to create an instance of the
     189  ConverterController class: drag an "Object" icon and drop it in the
     190  main CurrencyConverter window. Then, change the name of the
     191  Object's class to "ConverterController".</p>
     192
     193<p>That's all it takes to add an instance of a custom class to the
     194  nibfile. We do still have to add the ConverterController class, and
     195  we need to tell the nibfile a few more pieces of information about
     196  the two classes&mdash;specifically, we need to add the names of
     197  instance variables and actions, and we need to create the
     198  connections between the instances.</p>
     199
     200<div class="section-head">
     201  <h2>Add Outlets and Actions</h2>
     202</div>
     203
     204<p>Now, using the "+" button below the "Class Outlets" section of the
     205  Inspector, add outlets to the ConverterController class. The
     206  outlets you need to add are named "amountField", "converter",
     207  "dollarField", and "rateField".</p>
     208
     209      <div class="inline-image">
     210        <img src="../images/ibwin-leopard6.jpg"alt=""
     211             border='0'/>
     212      </div>
     213
     214<p>We'll connect each of the "field" outlets to one of the text
     215  fields in the CurrencyConverter UI, and we'll connect the
     216  "converter" outlet to the Converter instance that we created
     217  before. When the application launches, it creates the Converter and
     218  ConverterController instances and establishes the connections that
     219  we specify in the nibfile.</p>
     220
     221
     222<p>First, though, we need to tell the nibfile about actions as well as
     223  outlets. With the "ConverterController" instance selected, use the
     224  "+" button below the "Class Actions" section to add a new
     225  action. Name the action "convert:":</p>
     226
     227      <div class="inline-image">
     228        <img src="../images/ibwin-leopard7.jpg"alt=""
     229             border='0'/>
     230      </div>
     231
     232<p>In this application, the "convert:" action is the only action
     233  defined for the user interface, so we are done. In more complex
     234  applications you may need to define many actions and outlets.</p>
     235
     236<p>Now we'll connect outlets to objects and actions.</p>
     237
     238<div class="section-head">
     239  <h2>Add Connections</h2>
     240</div>
     241
     242<p>InterfaceBuilder enables you to connect objects by
     243  "Control-dragging" from one to another. To "Control-drag", you hold
     244  down the Control key while dragging from one object to the next.</p>
     245
     246<p>Select the "ConverterController" instance in the nibfile's main
     247  window, and Control-drag a connection to the "Exchange rate" text
     248  field in the application's main window. When you release the mouse
     249  button, InterfaceBuilder pops up a menu that lists the available
     250  outlets. Choose "rateField" from the menu. The "rateField" outlet
     251  of the "ConverterController" instance is now connected to the
     252  "Exchange rate" text field.</p>
     253
     254<p>Repeat the same steps for the "Dollars" field and the "Amount"
     255  field, connecting them to the "dollarField" and "amountField"
     256  outlets, respectively.</p>
     257
     258<p>Finally, Control-drag a connection from the "ConverterController"
     259  instance to the "Converter" instance. Choose "converter" from the
     260  popup menu to connect the "converter" field of the
     261  "ConverterController" instance to the "Converter" instance.</p>
     262
     263<p>To confirm that the connections are correct, you can use the
     264  Connections view in the inspector. With the "ConverterController"
     265  instance selected, click the blue arrow icon at the top of the
     266  Inspector window to display connections. You should see a list of
     267  outlets and the types of objects they are connected to:</p>
     268
     269      <div class="inline-image">
     270        <img src="../images/ibwin-leopard8.jpg"alt=""
     271             border='0'/>
     272      </div>
     273
     274<p>We need to add one more connection: from the "Convert" button in
     275  the application window to the "ConverterController"
     276  instance. Control drag a connection from the "Convert" button to
     277  the "ConverterController" instance. InterfaceBuilder pops up a
     278  menu; choose the "convert:" action from the menu to connect the
     279  button to the action.</p>
     280
     281<p>The nibfile now contains descriptions of the needed cusstom
     282  classes and their connections. You can continue with the next
     283  section, which explains how to write the Lisp code that implements
     284  the application's behavior.</p>
    167285
    168286    <div class="nav">
  • trunk/ccl/examples/cocoa/currency-converter/HOWTO_files/pages/writing_lisp.html

    r7709 r7712  
    171171      corresponds to one of the UI fields that you created in
    172172      InterfaceBuilder. For example, <code>amount-field</code>
    173       corresponds to the "Amount in Other Currency" text field. The
    174       exception is the <code>converter</code> field, which at launch
    175       time contains a reference to the Converter object, whose class
    176       definition is in the previous section.</p>
     173      corresponds to the text field that is connected to
     174      the <code>amountField</code> outlet. The Objective C bridge
     175      converts Lisp-style names (like "amount-field") to Objective
     176      C-style names (like "amountField").</p>
     177
     178      <p>The <code>converter</code> field at launch time contains a
     179      reference to the Converter object, whose class definition is in
     180      the previous section.</p>
    177181
    178182      <p>The final piece of the implementation is a definition of the
Note: See TracChangeset for help on using the changeset viewer.