Changeset 7712

Timestamp:

Nov 24, 2007, 11:15:52 AM (17 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:

• images/ibwin-leopard5.jpg (added)
• images/ibwin-leopard6.jpg (added)
• images/ibwin-leopard7.jpg (added)
• images/ibwin-leopard8.jpg (added)
• pages/building_ui.html (modified) (3 diffs)
• pages/writing_lisp.html (modified) (1 diff)

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

@@ -136 +136 @@
   launches.</p>
 
+<p>When you use XCode to write an Objective C application,
+  InterfaceBuilder can read the Objective C header files and use the
+  information in them to create descriptions of the classes in the
+  Objective C code. When the application is written in Lisp,
+  InterfaceBuilder can't read the class descriptions from the code,
+  and so we'll have to manually tell the nibfile about any classes
+  that we use in the user interface.</p>
+
 <p>As you will see in the following sections, we'll be using Lisp code
   to define two Objective C classes: Converter, and
@@ -146 +154 @@
   and the rest of the user interface.</p>
 
+<div class="section-head">
+  <h2>Create Instances of Custom Classes</h2>
+</div>
+
 <p>In InterfaceBuilder's Library window, select the Cocoa Objects and
   Controllers view:</p>
@@ -164 +176 @@
 <p>Now tell InterfaceBuilder the name of the new object's class. With
   the Object icon selected in the main CurrencyConverter window,
-  choose the Identity tab of the Inspector:</p>
+  choose the Identity tab of the Inspector. At the top of the
+  Identity view is a "Class" field; type the name of your custom
+  class (in this case, "Converter") into the "Class" field and save
+  the nibfile:</p>
+
+      <div class="inline-image">
+        <img src="../images/ibwin-leopard5.jpg"alt="" 
+             border='0'/>
+      </div>
+
+<p>Repeat the previous steps to create an instance of the
+  ConverterController class: drag an "Object" icon and drop it in the
+  main CurrencyConverter window. Then, change the name of the
+  Object's class to "ConverterController".</p>
+
+<p>That's all it takes to add an instance of a custom class to the
+  nibfile. We do still have to add the ConverterController class, and
+  we need to tell the nibfile a few more pieces of information about
+  the two classes&mdash;specifically, we need to add the names of
+  instance variables and actions, and we need to create the
+  connections between the instances.</p>
+
+<div class="section-head">
+  <h2>Add Outlets and Actions</h2>
+</div>
+
+<p>Now, using the "+" button below the "Class Outlets" section of the
+  Inspector, add outlets to the ConverterController class. The
+  outlets you need to add are named "amountField", "converter",
+  "dollarField", and "rateField".</p>
+
+      <div class="inline-image">
+        <img src="../images/ibwin-leopard6.jpg"alt="" 
+             border='0'/>
+      </div>
+
+<p>We'll connect each of the "field" outlets to one of the text
+  fields in the CurrencyConverter UI, and we'll connect the
+  "converter" outlet to the Converter instance that we created
+  before. When the application launches, it creates the Converter and
+  ConverterController instances and establishes the connections that
+  we specify in the nibfile.</p>
+
+
+<p>First, though, we need to tell the nibfile about actions as well as
+  outlets. With the "ConverterController" instance selected, use the
+  "+" button below the "Class Actions" section to add a new
+  action. Name the action "convert:":</p>
+
+      <div class="inline-image">
+        <img src="../images/ibwin-leopard7.jpg"alt="" 
+             border='0'/>
+      </div>
+
+<p>In this application, the "convert:" action is the only action
+  defined for the user interface, so we are done. In more complex
+  applications you may need to define many actions and outlets.</p>
+
+<p>Now we'll connect outlets to objects and actions.</p>
+
+<div class="section-head">
+  <h2>Add Connections</h2>
+</div>
+
+<p>InterfaceBuilder enables you to connect objects by
+  "Control-dragging" from one to another. To "Control-drag", you hold
+  down the Control key while dragging from one object to the next.</p>
+
+<p>Select the "ConverterController" instance in the nibfile's main
+  window, and Control-drag a connection to the "Exchange rate" text
+  field in the application's main window. When you release the mouse
+  button, InterfaceBuilder pops up a menu that lists the available
+  outlets. Choose "rateField" from the menu. The "rateField" outlet
+  of the "ConverterController" instance is now connected to the
+  "Exchange rate" text field.</p>
+
+<p>Repeat the same steps for the "Dollars" field and the "Amount"
+  field, connecting them to the "dollarField" and "amountField"
+  outlets, respectively.</p>
+
+<p>Finally, Control-drag a connection from the "ConverterController"
+  instance to the "Converter" instance. Choose "converter" from the
+  popup menu to connect the "converter" field of the
+  "ConverterController" instance to the "Converter" instance.</p>
+
+<p>To confirm that the connections are correct, you can use the
+  Connections view in the inspector. With the "ConverterController"
+  instance selected, click the blue arrow icon at the top of the
+  Inspector window to display connections. You should see a list of
+  outlets and the types of objects they are connected to:</p>
+
+      <div class="inline-image">
+        <img src="../images/ibwin-leopard8.jpg"alt="" 
+             border='0'/>
+      </div>
+
+<p>We need to add one more connection: from the "Convert" button in
+  the application window to the "ConverterController"
+  instance. Control drag a connection from the "Convert" button to
+  the "ConverterController" instance. InterfaceBuilder pops up a
+  menu; choose the "convert:" action from the menu to connect the
+  button to the action.</p>
+
+<p>The nibfile now contains descriptions of the needed cusstom
+  classes and their connections. You can continue with the next
+  section, which explains how to write the Lisp code that implements
+  the application's behavior.</p>
 
     <div class="nav">

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

@@ -171 +171 @@
       corresponds to one of the UI fields that you created in
       InterfaceBuilder. For example, <code>amount-field</code>
-      corresponds to the "Amount in Other Currency" text field. The
-      exception is the <code>converter</code> field, which at launch
-      time contains a reference to the Converter object, whose class
-      definition is in the previous section.</p>
+      corresponds to the text field that is connected to
+      the <code>amountField</code> outlet. The Objective C bridge
+      converts Lisp-style names (like "amount-field") to Objective
+      C-style names (like "amountField").</p> 
+
+      <p>The <code>converter</code> field at launch time contains a
+      reference to the Converter object, whose class definition is in
+      the previous section.</p>
 
       <p>The final piece of the implementation is a definition of the