Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

Tutorial: Title Bar Theme

Constructing a System Title Bar

The Qt Extended theme is unique in that it has a different mode of display in the home screen versus application screens.

It is important to note that there is a distinct rectangular area used by the system title bar. This area is not available to applications. It corresponds to the area set aside for the window decoration title of maximized windows. A minimal title bar theme and window decoration configuration may look like:

    <page name="title" base="themes/qtopia" rect="0,0,0x21">
        <image rect="0,0,0x21" src="titlebar-gradient" tile="yes" color="Highlight">
        </image>
    </page>

This describes a title bar, with no content, using the image "titlebar-gradient" to tile across the screen, tinting it the Highlight color.

    [Decoration]
    Name = Qtopia
    Base = themes/qtopia

    [Maximized]
    TitleHeight = 21

    [Normal]
    TitleHeight = 19

This describes the window decoration to use with this theme. The only information required is the height of the window decoration title such that the maximized title height is the same height as the system title.

Basic Title Bar Development

The title bar has a number of elements that require defined positions including:

  • Battery level
  • Signal level
  • Window caption
  • Time
  • Status indicators:
    • Roaming
    • Messages
    • Call active

Other items that can be displayed in the title bar are discussed later in this section. The following example title bar is designed with the above elements only:

    <page name="title" base="themes/qtopia" rect="0,0,0x21">
        <image rect="0,0,0x21" src="titlebar-gradient" tile="yes" color="Highlight">
            <text rect="4,0,-50,20" name="caption" size="10" bold="yes" shadow="200" color="HighlightedText" align="left,vcenter" transient="yes"/>
            <rect name="inputmethod" rect="-22,1,22x19" brush="Highlight" color="None" transient="yes" active="no"/>
            <image rect="-100,3,-26,17" src="statusbar" stretch="7,8">
                <status name="roaming" rect="4,3,9x9" imageon="roaming"/>
                <status name="messages" rect="16,3,9x9" imageon="mailalert"/>
                <status name="call_active" rect="28,1,5x12" imageon="incall"/>
                <text name="time" rect="-30,0,-4,12" size="10" align="right,vcenter" color="#000000"/>
            </image>
            <level name="battery" rect="-20,2,6x16" src="battery-small" count="6"/>
            <image rect="-12,2,3x16" src="plusminus"/>
            <level name="signal" rect="-7,2,6x16" src="signal-small" count="6"/>
        </image>
    </page>

This places the window caption to the left, then the white status area is created and populated with the status icons, and time field. Finally, the battery and signal level indicators are placed to the right of the screen. The level indicators are described by an image containing a number of frames, given by the count attribute, for example, the battery indicator image is show below:

The inputmethod element is not mentioned above. This element is a placeholder for the input method status icon and is replaced by the IM status icon when the cursor is placed in a text input field. It is common in Qt Extended themes to place this element over the area used by the battery and/or signal level indicators to save space.

Extending the Title Bar

The Qt Extended theme provides two different modes for the title bar. The mode described above is used in most screens with the home screen however, the following design is used:

This version displays the following elements:

  • Battery level
  • Signal level
  • Status indicators:
    • Alarm
    • Lock
    • Call divert
    • Roaming
    • Messages
    • Call active

This can be realized using the following:

    <page name="title" base="themes/qtopia" rect="0,0,0x21">
        <image rect="0,0,0x21" src="titlebar-gradient" tile="yes" color="Highlight">
            <level name="battery" rect="4,4,44x11" src="battery-big" count="6"/>
            <level name="signal" rect="-48,4,44x11" src="signal-big" count="6"/>
            <rect name="inputmethod" rect="-48,0,44x0" brush="Highlight" color="None" transient="yes" active="no"/>
            <image rect="50,3,-51,17" src="statusbar" stretch="7,8">
                <status name="alarm" rect="3,3,9x9" imageon="bell_on"/>
                <status name="lock" rect="14,3,9x9" imageon="lock_on"/>
                <status name="calldivert" rect="25,3,9x9" imageon="calldivert"/>
                <status name="roaming" rect="-36,3,9x9" imageon="roaming"/>
                <status name="messages" rect="-25,3,9x9" imageon="mailalert"/>
                <status name="call_active" rect="-14,1,5x12" imageon="incall"/>
            </image>
        </image>
    </page>

The final task is to enable switching between the two modes. This is achieved using the exclusive element. The exclusive element will display only one of its children at a time. The caption is used to decide which state is shown since there is no caption in the home screen.

    <page name="title" base="themes/qtopia" rect="0,0,0x21">
        <image rect="0,0,0x21" src="titlebar-gradient" tile="yes" color="Highlight">
            <image rect="0,0,1x21" src="titlebar-endcap" color="Highlight"/>
            <image rect="-1,0,1x21" src="titlebar-endcap" color="Highlight"/>
            <exclusive>
                <group>
                    <level name="battery" rect="4,4,44x11" src="battery-big" count="6"/>
                    <level name="signal" rect="-48,4,44x11" src="signal-big" count="6"/>
                    <rect name="inputmethod" rect="-48,0,44x0" brush="Highlight" color="None" transient="yes" active="no"/>
                    <image rect="50,3,-51,17" src="statusbar" stretch="7,8">
                        <status name="alarm" rect="3,3,9x9" imageon="bell_on"/>
                        <status name="lock" rect="14,3,9x9" imageon="lock_on"/>
                        <status name="calldivert" rect="25,3,9x9" imageon="calldivert"/>
                        <status name="roaming" rect="-36,3,9x9" imageon="roaming"/>
                        <status name="messages" rect="-25,3,9x9" imageon="mailalert"/>
                        <status name="call_active" rect="-14,1,5x12" imageon="incall"/>
                    </image>
                </group>
                <group name="caption" transient="yes" active="no">
                    <text rect="4,0,-50,20" name="caption" size="10" bold="yes" shadow="200" color="HighlightedText" align="left,vcenter" transient="yes"/>
                    <rect name="inputmethod" rect="-22,1,22x19" brush="Highlight" color="None" transient="yes" active="no"/>
                    <image rect="-100,3,-26,17" src="statusbar" stretch="7,8">
                        <status name="roaming" rect="4,3,9x9" imageon="roaming"/>
                        <status name="messages" rect="16,3,9x9" imageon="mailalert"/>
                        <status name="call_active" rect="28,1,5x12" imageon="incall"/>
                        <text name="time" rect="-30,0,-4,12" size="10" align="right,vcenter" color="#000000"/>
                    </image>
                    <level name="battery" rect="-20,2,6x16" src="battery-small" count="6"/>
                    <image rect="-12,2,3x16" src="plusminus"/>
                    <level name="signal" rect="-7,2,6x16" src="signal-small" count="6"/>
                </group>
            </exclusive>
        </image>
    </page>
Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt qtextended4.4
Copyright © 2012 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur ? Un bug ? Une redirection cassée ? Ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !
 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Qt

Blogs

Hébergement

 
Partenaires

Hébergement Web