Changeset 7930


Ignore:
Timestamp:
Dec 21, 2007, 11:02:34 PM (12 years ago)
Author:
mikel
Message:

added more steps to creating UIs with Tiger

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

Legend:

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

    r7920 r7930  
    161161      </div>
    162162
     163      <p>If you drag a view near the edges of a window,
     164      InterfaceBuilder displays blue guide lines that show the
     165      standard placement of a view near the edge of the window. Drag
     166      the text view to the right and upward until the guide lines
     167      appear, and then let go. The text view is then positioned in
     168      the standard way.</p>
     169
     170      <p>Now add two more text fields. You can drag them from the
     171      palette as you did the first one, or you can duplicate the
     172      first one. To duplicate, select the first text view and then
     173      choose "Duplicate" from the "Edit" menu. Alternatively, you can
     174      option-drag the text field to duplicate it.</p>
     175
     176      <div class="inline-image">
     177        <img src="../images/ibwin-tiger9.jpg"alt=""
     178             border='0'/>
     179      </div>
     180
     181      <div class="section-head">
     182        <h2>Label the Text Fields</h2>
     183      </div>
     184
     185      <p>Now add labels to the text fields, to idenitfy their
     186      purposes for the user. For each text field, drag a Label object
     187      from the palette and drop it next to the field. (Alternatively,
     188      you can drop one Label and then duplicate it, just as you can
     189      duplicate the text fields.)</p>
     190
     191      <div class="inline-image">
     192        <img src="../images/ibwin-tiger10.jpg"alt=""
     193             border='0'/>
     194      </div>
     195
     196      <p>Just as InterfaceBuilder displayed guidelines to help you
     197      position the text field near the edge of the window, it also
     198      displays guide lines to help you position the labels near the
     199      text fields. Just drag each text field until the blue guide
     200      lines appear, and release the label.</p>
     201
     202      <p>Now change the text of the labels. Click a label to select
     203      it. Then show the Inspector by choosing the "Show Inspector"
     204      item from the "Tools" menu. Select the "Attributes" item from
     205      the pull-down menu at the top of the Inspector window, and type
     206      the correct text into the Title field. For example, here is how
     207      to enter the text for the top label:</p>
     208
     209      <div class="inline-image">
     210        <img src="../images/ibwin-tiger11.jpg"alt=""
     211             border='0'/>
     212      </div>
     213
     214      <p>Here's how the labels should look after you have entered the
     215      text for all three:</p>
     216
     217      <div class="inline-image">
     218        <img src="../images/ibwin-tiger12.jpg"alt=""
     219             border='0'/>
     220      </div>
     221
     222      <p>When you first enter the text for a label, the label may not
     223      be wide enough to show it all. In that case, you'll see only
     224      part of the text in the label. You can resise the label to make
     225      the full text visible. Click the label to select it. Notice the
     226      small blue dots that surround it. Grab a dot on the left side
     227      and drag it to the left to make the label wider, until you can
     228      see the entire text.</p>
     229
    163230    </div>
    164231  </body>
Note: See TracChangeset for help on using the changeset viewer.