Changeset 7712

Nov 24, 2007, 7:15:52 PM (12 years ago)

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

4 added
2 edited


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

    r7711 r7712  
    136136  launches.</p>
     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>
    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>
     156<div class="section-head">
     157  <h2>Create Instances of Custom Classes</h2>
    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>
     183      <div class="inline-image">
     184        <img src="../images/ibwin-leopard5.jpg"alt=""
     185             border='0'/>
     186      </div>
     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>
     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>
     200<div class="section-head">
     201  <h2>Add Outlets and Actions</h2>
     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>
     209      <div class="inline-image">
     210        <img src="../images/ibwin-leopard6.jpg"alt=""
     211             border='0'/>
     212      </div>
     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>
     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>
     227      <div class="inline-image">
     228        <img src="../images/ibwin-leopard7.jpg"alt=""
     229             border='0'/>
     230      </div>
     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>
     236<p>Now we'll connect outlets to objects and actions.</p>
     238<div class="section-head">
     239  <h2>Add Connections</h2>
     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>
     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>
     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>
     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>
     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>
     269      <div class="inline-image">
     270        <img src="../images/ibwin-leopard8.jpg"alt=""
     271             border='0'/>
     272      </div>
     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>
     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>
    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>
     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>
    178182      <p>The final piece of the implementation is a definition of the
Note: See TracChangeset for help on using the changeset viewer.