Changeset 7930

Timestamp:

Dec 21, 2007, 3:02:34 PM (17 years ago)

Author:

mikel

Message:

added more steps to creating UIs with Tiger

Location:

trunk/ccl/examples/cocoa/currency-converter/HOWTO_files

Files:

• images/ibwin-tiger10.jpg (added)
• images/ibwin-tiger11.jpg (added)
• images/ibwin-tiger12.jpg (added)
• images/ibwin-tiger9.jpg (added)
• pages/building_ui_tiger.html (modified) (1 diff)

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

@@ -161 +161 @@
       </div>
 
+      <p>If you drag a view near the edges of a window,
+      InterfaceBuilder displays blue guide lines that show the
+      standard placement of a view near the edge of the window. Drag
+      the text view to the right and upward until the guide lines
+      appear, and then let go. The text view is then positioned in
+      the standard way.</p>
+
+      <p>Now add two more text fields. You can drag them from the
+      palette as you did the first one, or you can duplicate the
+      first one. To duplicate, select the first text view and then
+      choose "Duplicate" from the "Edit" menu. Alternatively, you can
+      option-drag the text field to duplicate it.</p>
+
+      <div class="inline-image">
+        <img src="../images/ibwin-tiger9.jpg"alt="" 
+             border='0'/>
+      </div>
+
+      <div class="section-head">
+        <h2>Label the Text Fields</h2>
+      </div>
+
+      <p>Now add labels to the text fields, to idenitfy their
+      purposes for the user. For each text field, drag a Label object
+      from the palette and drop it next to the field. (Alternatively,
+      you can drop one Label and then duplicate it, just as you can
+      duplicate the text fields.)</p>
+
+      <div class="inline-image">
+        <img src="../images/ibwin-tiger10.jpg"alt="" 
+             border='0'/>
+      </div>
+
+      <p>Just as InterfaceBuilder displayed guidelines to help you
+      position the text field near the edge of the window, it also
+      displays guide lines to help you position the labels near the
+      text fields. Just drag each text field until the blue guide
+      lines appear, and release the label.</p>
+
+      <p>Now change the text of the labels. Click a label to select
+      it. Then show the Inspector by choosing the "Show Inspector"
+      item from the "Tools" menu. Select the "Attributes" item from
+      the pull-down menu at the top of the Inspector window, and type
+      the correct text into the Title field. For example, here is how
+      to enter the text for the top label:</p>
+
+      <div class="inline-image">
+        <img src="../images/ibwin-tiger11.jpg"alt="" 
+             border='0'/>
+      </div>
+
+      <p>Here's how the labels should look after you have entered the
+      text for all three:</p>
+
+      <div class="inline-image">
+        <img src="../images/ibwin-tiger12.jpg"alt="" 
+             border='0'/>
+      </div>
+
+      <p>When you first enter the text for a label, the label may not
+      be wide enough to show it all. In that case, you'll see only
+      part of the text in the label. You can resise the label to make
+      the full text visible. Click the label to select it. Notice the
+      small blue dots that surround it. Grab a dot on the left side
+      and drag it to the left to make the label wider, until you can
+      see the entire text.</p>
+
     </div>
   </body>