styleguide.html

qtopiaphone英文帮助,用于初学者和开发人员,初学者可以用来学习,开发人员可以用来资料查询.

<li> Menu options should be hidden when unavailable.
<li> A menu should have the top-most item selected by default.
<li> A menu separator should be used to group options that perform <em>associated</em> functionality such as New, Edit and Delete.
<li> Menus with predefined names such as <em>Cancel</em> should use the appropriate icon.
</ul>
<p> Where an application is structured as a <em>List of items</em> and selecting an item shows its details, the menu for the List should <em>not</em> include any actions that are directly related to a single item. Actions that are applied to an individual item (and never to a list) should be placed in the menu that becomes available when the details of an item are shown. (Menu, Down-past-New, Select-Edit is just as many steps as Select-Item, Menu, Select-Edit).
<p> Menu options should change their functionality when a particular item or component has focus.
<p> <em>NOTE</em>: Drop-down lists should also conform to these rules.
<p> <h3> Menu Names
</h3>
<a name="9-1"></a><p> Menu names should follow all conventions found in the Naming Conventions.
<p> An acronym or abbreviation for a menu item should only be used if the label doesn't fit on the screen OR if an acronym or abbreviation already exists for the current label (promotes consistency in the use of text labels).
<p> <h3> Menu-like Dialogs
</h3>
<a name="9-2"></a><p> Some dialogs consist of a list of items, only one of which the user needs to select in order to complete an operation. In a small number of cases the user may wish to do more with the item, such as edit it via the menu.
<p> Such list dialogs are <em>Menu-like Dialogs</em>, and should behave like menus:
<p> <ul>
<li> Highlighting an item should have no long-term effect.
<li> Selecting an item should close the window and return to the
previous view (even if that means closing the application).
<li> The <a href="contextbar.html">ContextBar</a> icon for Key_Back should be Cancel, not the usual Back.
</ul>
<p> To assist in creating Menu-like dialogs you can call the function
<p> <a href="qpeapplication.html#setMenuLike">QPEApplication::setMenuLike</a>();
<p> which will map the context bar and menu correctly for the dialog.
<p> If the dialog has a menu, consider having 'Activate', or 'Select' in the menu,
but make sure that this command does <em>not</em> close the dialog.
<p> Examples: Profile selection, Speed dial action selection.
<p> <h2> Lists
</h2>
<a name="10"></a><p> A list should either be text only or and icon then text. The default focus of a list should be on the first/top item listed.
<p> <h2> Dialogs
</h2>
<a name="11"></a><p> A dialog should take up either 0%-60% of the screen, or fill it completely. Dialog title names should describe the process that is currently taking place in the dialog. For example, "Editing event", "Creating event".
<p> A dialog title should not have its text appended with "...".
<p> Message dialogs that allow a positive or negative response should be phrased such that the user can answer "Yes" or "No", rather than "OK" or "Cancel".
<p> Informative Message dialogs should only allow the <em>Back</em> or <em>Done</em> context menu options.
<p> <h2> Interprocess Actions
</h2>
<a name="12"></a><p> When an application is activated via QCop message in order to view a document, pressing <em>Back</em> or <em>Done</em> must close the application.
<p> <h2> Application Naming
</h2>
<a name="13"></a><p> Application names should be based on established application names used in the current phone market. They should be nouns and obvious for a user from any background.
<p> <em>NOTE</em>: Check to make sure that the application name fits in the window / dialog, as the name can become partially hidden if it is too long.
<p> <em>NOTE</em>: An application's title should be the same as its link name. On some occasions the title of the application is dependent on what is currently viewed in the application. This sort of functionality is not recommended and should only be used at the developer's discretion.
<p> <h2> Naming Conventions <!-- index naming conventions --><a name="naming-conventions"></a>
</h2>
<a name="14"></a><p> All words should start with a capital letter with the exception of words that
are usually excluded from acronyms such as "of", "and", or "to". These extremely common words are referred to as stop words.
<p> Once a certain name is used for a specific item it should be re-used in each
and every application. For example: if Contacts and <a href="calendar.html">Calendar</a> both have a
"company" info field they should use the same label. This means both applications use either "Company", "Cmpny", or "Comp.". Please see the <a href="#label-names">used label names</a> table for reference.
<p> <h3> Abbreviations
</h3>
<a name="14-1"></a><p> The rules listed below should be followed when using abbreviations:
<ul>
<li> Abbreviations are meant to be self explanatory.
<li> An abbreviation point should occur at the end of a word.
For example: etc.
<li> Abbreviations consisting of initial letters are written as un-spaced and undivided sequences with abbreviation points after each letter. For example: e.g.
<li> Abbreviations should not consist of any characters except a-z A-Z.
</ul>
<!-- http://www.education.bham.ac.uk/onlinelearning/braille/rulebook/part2/section4.htm -->
<p> <em>NOTE</em>: No abbreviation point is required if the last letter of the word is displayed such as "cmpny".
<p> <h3> Acronyms
</h3>
<a name="14-2"></a><p> Acronyms basically follow the same set of rules as those found in the abbreviations section. Always check existing acronyms before creating a new one.
<p> <h3> Using the "..." label
</h3>
<a name="14-3"></a><p> The following rules define the use of the ... in association with menu items.
<p> <ul>
<li> if the command has to be refined before a user can initiate an action then yes, use ...
<li> if the command does not need to be refined before a user can initiate an action then do not use ...
<li> if in doubt, do not apply ... to the menu
</ul>
<p> <h4> Examples of when to use "..."
</h4>
<a name="14-3-1"></a><p> Use ... only when the menu is followed by another dialog that is a direct and integral continuation of the command.
<p> <ul>
<li> Send All...
is appropriate since the next dialog requires the user to select one of Email/Infrared/SMS before anything is sent.
<li> View Category...
is appropriate since the next dialog requires the user to select which category they want to view.
</ul>
<p> <h4> Examples of when not to use "..."
</h4>
<a name="14-3-2"></a><p> Do not use "..." when the menu is followed by another dialog that is related to but not a continuation of the command.
<ul>
<li> Edit (without ...)
is appropriate if the user is immediately shown the entire record and is free to edit any aspect of it.
<li> Delete (without ...)
is appropriate since the user does not have to refine the delete command in order for it to work. A please confirm dialog does not specify additional parameters; it is associated with the command but does not refine its functionality.
<li> Settings (without ...)
should be used when a user is immediately given access to all the features that can be set, such as in the <a href="calendar.html">Calendar</a> application.
</ul>
<!-- index label-names --><a name="label-names"></a><h3> Currently used label names <!-- index used-label-names --><a name="used-label-names"></a>
</h3>
<a name="14-4"></a><p> <center><table cellpadding="4" cellspacing="2" border="0">
<tr bgcolor="#a2c511"> <th valign="top">PDA Label <th valign="top">Phone Label
<tr bgcolor="#f0f0f0"> <td valign="top">Categories <td valign="top">Category
<tr bgcolor="#d0d0d0"> <td valign="top">Time zone <td valign="top">T.Z.
<tr bgcolor="#f0f0f0"> <td valign="top">Anniversary <td valign="top">Anniv.
</table></center>
<p> <h2> Qtopia Phone Keys
</h2>
<a name="15"></a><p> Qtopia requires the following keys:
<center><table cellpadding="4" cellspacing="2" border="0">
<tr bgcolor="#a2c511"> <th valign="top">Name
<th valign="top">Alternative representations
<th valign="top">Usual binding
<tr bgcolor="#d0d0d0"> <td valign="top">Previous
<td valign="top">Left, Up, or Down Arrow*
<td valign="top">Previous item or value.
<tr bgcolor="#f0f0f0"> <td valign="top">Next
<td valign="top">Right, Down, or Up Arrow*
<td valign="top">Next item or value.
<tr bgcolor="#d0d0d0"> <td valign="top">Select
<td valign="top">Yes, OK
<td valign="top">Activate item or confirm changes.
<tr bgcolor="#f0f0f0"> <td valign="top">Back
<td valign="top">No, Cancel
<td valign="top">Delete text or close window.
<tr bgcolor="#d0d0d0"> <td valign="top">1
<td valign="top">
<td valign="top">1 or space
<tr bgcolor="#f0f0f0"> <td valign="top">2..9
<td valign="top">
<td valign="top">Digits with phone key lettering.
<tr bgcolor="#d0d0d0"> <td valign="top">0
<td valign="top">
<td valign="top">0 or Function 1
<tr bgcolor="#f0f0f0"> <td valign="top">*
<td valign="top">
<td valign="top">* or Function 2
<tr bgcolor="#d0d0d0"> <td valign="top">#
<td valign="top">
<td valign="top"># or Function 3
</table></center>
<p> Qtopia supports the following additional keys:
<center><table cellpadding="4" cellspacing="2" border="0">
<tr bgcolor="#a2c511"> <th valign="top">Name
<th valign="top">Alternative representations
<th valign="top">Usual binding
<tr bgcolor="#f0f0f0"> <td valign="top">Menu
<td valign="top">
<td valign="top">Invoke context menu.
<tr bgcolor="#d0d0d0"> <td valign="top">Up
<td valign="top">Up Arrow
<td valign="top">Item physically above
<tr bgcolor="#f0f0f0"> <td valign="top">Down
<td valign="top">Down Arrow
<td valign="top">Item physically below.
<tr bgcolor="#d0d0d0"> <td valign="top">Left
<td valign="top">Left Arrow
<td valign="top">Item physically to the left.
<tr bgcolor="#f0f0f0"> <td valign="top">Right
<td valign="top">Right Arrow
<td valign="top">Item physically to the right.
<tr bgcolor="#d0d0d0"> <td valign="top">Delete
<td valign="top">Cancel, Clear
<td valign="top">Delete item.
<tr bgcolor="#f0f0f0"> <td valign="top">Jog
<td valign="top">Wheel up/down
<td valign="top">Scroll view or values.
<tr bgcolor="#d0d0d0"> <td valign="top">F\ex
<td valign="top">Function keys
<td valign="top">Invoke global operation.
</table></center>
<p> * on some phones, two keys represent both vertical and horizontal directions of suggested motion. Sometimes these are a Left/Up button and a Right/Down button, at other times they are a Left/Down button and a Right/Up button.
<p> <h2> Standard Icons and Usage
</h2>
<a name="16"></a><p> <center><table cellpadding="4" cellspacing="2" border="0">
<tr bgcolor="#a2c511">
<th valign="top">Icon
<th valign="top">Component
<th valign="top">Filename
<th valign="top">Description of Use
<tr bgcolor="#f0f0f0">
<td valign="top"><center><img src="../../pics/contextbar/cancel.png"></center> <td valign="top">Context Bar
<td valign="top">cancel.png
<td valign="top">Cancel: Removes all changes performed on the current item (transaction).
<tr bgcolor="#d0d0d0">
<td valign="top"><center><img src="../../pics/contextbar/back.png"></center> <td valign="top">Context Bar
<td valign="top">back.png
<td valign="top">Done: Finished using the current screen and wish to return to previous window.
<tr bgcolor="#f0f0f0">
<td valign="top"><center><img src="../../pics/contextbar/edit.png"></center> <td valign="top">Context Bar
<td valign="top">edit.png
<td valign="top">Open/Close Text Input Menu: Displays the current text actions that can be performed on the widget.
<tr bgcolor="#d0d0d0">
<td valign="top"><center><img src="../../pics/contextbar/options.png"></center> <td valign="top">Context Bar
<td valign="top">options.png
<td valign="top">Open/Close Menu: Displays the current window's context menu.
<tr bgcolor="#f0f0f0">
<td valign="top"><center><img src="../../pics/contextbar/backspace.png"></center> <td valign="top">Context Bar
<td valign="top">backspace.png
<td valign="top">Delete text: Deletes (backspace) 1 character.
<tr bgcolor="#d0d0d0">
<td valign="top"><center><img src="../../pics/contextbar/select.png"></center> <td valign="top">Context Bar
<td valign="top">select.png
<td valign="top">Engage/Select: Selects the current item, widget or grouping.
<tr bgcolor="#f0f0f0">
<td valign="top"><center><img src="../../pics/contextbar/ok.png"></center> <td valign="top">Context Bar
<td valign="top">ok.png
<td valign="top">Accept: Accepts and disengages the current information/data in the currently selected widget.
<tr bgcolor="#d0d0d0">
<td valign="top"><center><img src="../../pics/contextbar/view.png"></center> <td valign="top">Context Bar
<td valign="top">view.png
<td valign="top">More Information: Selects and displays information about the currently focused item.
<tr bgcolor="#f0f0f0">
<td valign="top"><center><img src="../../pics/icons/14x14/help_icon.png"></center> <td valign="top">Context Menu
<td valign="top">help_icon.png
<td valign="top">Help: Displays the help documentation for the current window.
<tr bgcolor="#d0d0d0">
<td valign="top"><center><img src="../../pics/icons/14x14/beam.png"></center> <td valign="top">Context Menu
<td valign="top">beam.png
<td valign="top">Beam: Sends the currently viewed item via IR.
<tr bgcolor="#f0f0f0">
<td valign="top"><center><img src="../../pics/icons/14x14/new.png"></center> <td valign="top">Context Menu
<td valign="top">new.png
<td valign="top">New: Creates a new item.
<tr bgcolor="#d0d0d0">
<td valign="top"><center><img src="../../pics/icons/14x14/edit.png"></center> <td valign="top">Context Menu
<td valign="top">edit.png
<td valign="top">Edit: Edits the currently viewed item.
<tr bgcolor="#f0f0f0">
<td valign="top"><center><img src="../../pics/icons/16x16/trash.png"></center> <td valign="top">Context Menu
<td valign="top">trash.png
<td valign="top">Delete item: Deletes the currently viewed item.
<tr bgcolor="#d0d0d0">
<td valign="top"><center><img src="../../pics/icons/14x14/find.png"></center> <td valign="top">Context Menu
<td valign="top">find.png
<td valign="top">Find/Search: Locates an item.
</table></center>
<p> 
<!-- eof -->
<p><address><hr><div align="center">
<table width="100%" cellspacing="0" border="0">
<tr>
<td>Copyright &copy; 2001-2004 Trolltech
<td><a href="http://www.trolltech.com/trademarks.html">Trademarks</a>
<td align="right"><div align="right">Qtopia version 2.0.0</div>
</table></div></address></body>
</html>