Changeset 7930

Dec 21, 2007, 11:02:34 PM (12 years ago)

added more steps to creating UIs with Tiger

4 added
1 edited


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

    r7920 r7930  
    161161      </div>
     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>
     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>
     176      <div class="inline-image">
     177        <img src="../images/ibwin-tiger9.jpg"alt=""
     178             border='0'/>
     179      </div>
     181      <div class="section-head">
     182        <h2>Label the Text Fields</h2>
     183      </div>
     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>
     191      <div class="inline-image">
     192        <img src="../images/ibwin-tiger10.jpg"alt=""
     193             border='0'/>
     194      </div>
     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>
     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>
     209      <div class="inline-image">
     210        <img src="../images/ibwin-tiger11.jpg"alt=""
     211             border='0'/>
     212      </div>
     214      <p>Here's how the labels should look after you have entered the
     215      text for all three:</p>
     217      <div class="inline-image">
     218        <img src="../images/ibwin-tiger12.jpg"alt=""
     219             border='0'/>
     220      </div>
     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>
    163230    </div>
    164231  </body>
Note: See TracChangeset for help on using the changeset viewer.