Tutorial: Screen Themes
Home Screen
The following code defines the Home Screen for the Qt Extended theme both with and without PIN entry pad functionality.
The Qt Extended 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"/>
<plug-in name="bgplug-in"/>
</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 Qt Extended 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 Qt Extended 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>
Best Of
Actualités les plus lues
Le Qt Labs au hasard
Les Qt Labs sont les laboratoires des développeurs de Qt, où ils peuvent partager des impressions sur le framework, son utilisation, ce que pourrait être son futur.
Lire l'article.
Communauté
Ressources
Liens utiles
Contact
Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).
Qt dans le magazine
