Home · All Classes · Grouped Classes · Annotated · Functions

Tutorial: Screen Themes

Home Screen

The following code defines the Home Screen for the Qtopia theme both with and without PIN entry pad functionality.

The Qtopia theme displays the status indicators in the title bar when the home screen is visible, so it is not necessary to define them in the home screen.

Example without PIN Entry Pad

    <page name="home" base="themes/qtopia">
        <group name="background">
            <image name="background" rect="0,-235,0,0" src="background" color="Highlight" tile="yes"/>
            <plugin name="bgplugin"/>
        </group>
        <rect rect="0,21,0x21" brush="#eeeeee" alpha="192">
            <text name="operator" size="14" align="vcenter" bold="yes" outline="#eeeeee"/>
        </rect>
        <text name="time" rect="-48,21,45x21" align="right,vcenter" size="14" bold="yes" outline="#eeeeee"/>
        <layout rect="0,45,0x90" align="hcenter">
            <rect name="calls" rect="0,0,78x0" color="None" brush="None" transient="yes" active="no">
                <image rect="18,1,46x46" src="call" scale="yes"/>
                <text name="calls" size="12" rect="6,43,70x35" align="hcenter" format="RichText" outline="#eeeeee"/>
            </rect>
            <rect name="messages" rect="0,0,78x0" color="None" brush="None" transient="yes" active="no">
                <image rect="19,4,38x38" src="message" scale="yes"/>
                <text name="messages" size="12" rect="6,43,70x35" align="hcenter" format="RichText" outline="#eeeeee"/>
            </rect>
        </layout>
        <image name="dialer" rect="58,123,-57,-33" src="default/dialerbutton" onclick="src=default/dialerbuttonp;color=Highlight" interactive="yes" keypad="no" scale="yes"/>
        <text name="profile" size="12" rect="-80,-36,78x14" color="#000000" align="right" outline="#eeeeee" transient="yes" active="no"/>
        <rect name="infobox" rect="0,-70,0x50" color="#72715a" brush="Base" alpha="208" transient="yes" active="no">
            <image name="infobox" rect="0,0,40x40"/>
            <text name="infobox" rect="40,0,-3,50" size="12" color="Text" align="hcenter,vcenter"/>
        </rect>
    </page>

The background group specifies both a default background image and also allows a plug-in to be used to display the background. The background plug-in built into Qtopia displays the user-selected background image.

The calls and messages notifications are declared transient so that they will not appear unless there is actually missed calls or new messages. This leaves as little clutter as possible on the home screen, which in turn leaves more of the user's chosen background image visible.

Example with PIN Entry Pad

        <layout name="pinbox" rect="0,21,0,0" orientation="vertical" transient="yes" active="no">
            <rect name="pinbox" rect="0,0,0,40" color="#72715a" brush="Base">
                <image name="pinbox" rect="0,0,40x40"/>
                <text name="pinbox" rect="40,0,-3,50" size="12" color="Text" align="hcenter,vcenter"/>
            </rect>
            <layout name="vertical" rect="22,0,132x132" orientation="vertical" spacing="-1" align="hcenter">
                <layout name="horizontal" rect="0,0,0x33" orientation="horizontal" spacing="-1" align="hcenter">
                    <group rect="0,0,44x33" name="one" interactive="yes">
                        <image rect="0,0,0,0" name="one_bg" src="default/r1" onclick="src=default/r1p" scale="yes" />
                        <image rect="5,6,-5,-5" name="one_fg" src="default/1" scale="yes"/>
                    </group>
                    <group rect="0,0,44x33" name="two" interactive="yes">
                        <image rect="0,0,0,0" name="two_bg" src="default/r1" onclick="src=default/r1p" scale="yes" />
                        <image rect="5,6,-5,-5" name="two_fg" src="default/2" scale="yes"/>
                    </group>
                    <group rect="0,0,44x33" name="three" interactive="yes">
                        <image rect="0,0,0,0" name="three_bg" src="default/r1" onclick="src=default/r1p" scale="yes" />
                        <image rect="5,6,-5,-5" name="three_fg" src="default/3" scale="yes"/>
                    </group>
                </layout>
                <layout rect="0,0,0x33" orientation="horizontal" spacing="-1" align="hcenter">
                    <group rect="0,0,44x33" name="four" interactive="yes">
                        <image rect="0,0,0,0" name="four_bg" src="default/r2" onclick="src=default/r2p" scale="yes" />
                        <image rect="5,6,-5,-5" name="four_fg" src="default/4" scale="yes"/>
                    </group>
                    <group rect="0,0,44x33" name="five" interactive="yes">
                        <image rect="0,0,0,0" name="five_bg" src="default/r2" onclick="src=default/r2p" scale="yes" />
                        <image rect="5,6,-5,-5" name="five_fg" src="default/5" scale="yes"/>
                    </group>
                    <group rect="0,0,44x33" name="six" interactive="yes">
                        <image rect="0,0,0,0" name="six_bg" src="default/r2" onclick="src=default/r2p" scale="yes" />
                        <image rect="5,6,-5,-5" name="six_fg" src="default/6" scale="yes"/>
                    </group>
                </layout>
                <layout rect="0,0,0x33" orientation="horizontal" spacing="-1" align="hcenter">
                    <group rect="0,0,44x33" name="seven" interactive="yes">
                        <image rect="0,0,0,0" name="seven_bg" src="default/r3" onclick="src=default/r3p" scale="yes" />
                        <image rect="5,6,-5,-5" name="seven_fg" src="default/7" scale="yes"/>
                    </group>
                    <group rect="0,0,44x33" name="eight" interactive="yes">
                        <image rect="0,0,0,0" name="eight_bg" src="default/r3" onclick="src=default/r3p" scale="yes" />
                        <image rect="5,6,-5,-5" name="eight_fg" src="default/8" scale="yes"/>
                    </group>
                    <group rect="0,0,44x33" name="nine" interactive="yes">
                        <image rect="0,0,0,0" name="nine_bg" src="default/r3" onclick="src=default/r3p" scale="yes" />
                        <image rect="5,6,-5,-5" name="nine_fg" src="default/9" scale="yes"/>
                    </group>
                </layout>
                <layout rect="0,0,0x33" orientation="horizontal" spacing="-1" align="hcenter">
                    <group rect="0,0,44x33" name="star" interactive="yes">
                        <image rect="0,0,0,0" name="star_bg" src="default/r4" onclick="src=default/r4p" scale="yes" />
                        <image rect="5,6,-5,-5" name="star_fg" src="default/star" scale="yes"/>
                    </group>
                    <group rect="0,0,44x33" name="zero" interactive="yes">
                        <image rect="0,0,0,0" name="zero_bg" src="default/r4" onclick="src=default/r4p" scale="yes" />
                        <image rect="5,6,-5,-5" name="zero_fg" src="default/0" scale="yes"/>
                    </group>
                    <group rect="0,0,44x33" name="hash" interactive="yes">
                        <image rect="0,0,0,0" name="hash_bg" src="default/r4" onclick="src=default/r4p" scale="yes" />
                        <image rect="5,6,-5,-5" name="hash_fg" src="default/hash" scale="yes"/>
                    </group>
                </layout>
            </layout>
        </layout>

Call Screen

The following code defines the Call screen for the Qtopia theme:

    <page name="callscreen" base="themes/default">
        <rect color="None" brush="Background"/>
        <image name="background" src="callscreen_bg" tile="yes" color="Background"/>
        <input name="callscreen" rect="0,0,0x32768" separator="1">
            <listitem name="active" rect="0,0,0,32">
                <image name="active_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="#50D914"/>
                <status name="conference" rect="0,0,16x16" imageon="conference"/>
                <text name="identifier" rect="16,0,0,0" bold="yes"/>
                <text name="status" rect="16,13,0,0"/>
                <image name="contact" rect="-24,0,24x30" scale="yes"/>
            </listitem>
            <listitem name="incoming" rect="0,0,0,32" >
                <image name="incoming_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="Base" />
                <text name="identifier" rect="16,0,0,0" bold="yes"/>
                <text name="status" rect="16,13,0,0"/>
                <image name="contact" rect="-24,0,24x30"/>
            </listitem>
            <listitem name="outgoing" rect="0,0,0,32">
                <image name="outgoing_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="Background" />
                <text name="identifier" rect="16,0,0,0" bold="yes"/>
                <text name="status" rect="16,13,0,0"/>
                <image name="contact" rect="-24,0,24x30"/>
            </listitem>
            <listitem name="onhold" rect="0,0,0,32">
                <image name="onhold_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="#A3A10E" />
                <status name="conference" rect="0,0,16x16" imageon="conference"/>
                <text name="identifier" rect="16,0,0,0" bold="yes"/>
                <text name="status" rect="16,13,0,0"/>
                <image name="contact" rect="-24,0,24x30"/>
            </listitem>
            <listitem name="dropped" rect="0,0,0,32">
                <image name="dropped_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="#AA2222" />
                <text name="identifier" rect="16,0,0,0" bold="yes"/>
                <text name="status" rect="16,13,0,0"/>
                <image name="contact" rect="-24,0,24x30"/>
            </listitem>
            <listitem name="selected" rect="0,0,0,32">
                <image name="selected_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="Highlight" />
                <status name="conference" rect="0,0,16x16" imageon="conference"/>
                <text name="identifier" rect="16,0,0,0" bold="yes" color="HighlightedText"/>
                <text name="status" rect="16,13,0,0" color="HighlightedText"/>
                <image name="contact" rect="-24,0,24x30"/>
            </listitem>
        </input>
        <input name="callscreennumber" rect="0,0,0x32768" bold="yes" color="Text" size="14"/>
    </page>


Copyright © 2008 Nokia Trademarks
Qtopia 4.3.3