Electra Iris Code
Below is the listing for the What's On TV magazine app, comprising the XML for the presentation and a separate XML document for the data.
Application/Layout
An application uses a set of layouts to define elements of the UI, either entire pages or sub-elements of a page. Layouts hold UI primatives and, if needed, a map for how focus will be handled within the layout.
Sub-layouts attach to slots which only hold one layout - thus activating a sub-layout can automatically close the existing one.
config_whats_on_tv.xml
<?xml version="1.0" encoding="utf-8"?>
<config>
<app path="com/electra/canister/iris/res_mag_wotv/" graphic_debug="n">
<include path="#config_mag_wotv_data.xml" />
</app>
<ads subsystem="TM" />
<colour_table>
<colour id="5" val="0x990000" />
<colour id="6" val="0xE0E0E0" />
<colour id="7" val="0xBE000F" />
<colour id="8" val="0xFFDC00" />
<colour id="9" val="0xFFDC00" />
<colour id="10" val="0xBE000F" />
<colour id="11" val="0xE0E0E0" />
<colour id="12" val="0x8c4040" />
<colour id="13" val="0xE0E0E0" />
<colour id="14" val="0x38936C" />
<colour id="15" val="0x38936C" />
<colour id="16" val="0xE0E0E0" />
<colour id="17" val="0xE0E0E0" />
<colour id="18" val="0x00C000" />
<colour id="19" val="0x004741" />
<colour id="20" val="0x730000" />
<colour id="21" val="0x910000" />
<colour id="22" val="0xBE000F" />
<colour id="23" val="0x910000" />
<colour id="24" val="0xE0E0E0" />
<colour id="25" val="0x000000" />
</colour_table>
<pix_table>
<pix id="1" path="#../res_common/thin_scroll_up.png" />
<pix id="2" path="#../res_common/thin_scroll_down.png" />
<pix id="3" path="#../res_common/wide_scroll_up.png" />
<pix id="4" path="#../res_common/wide_scroll_down.png" />
</pix_table>
<root>
<background colour="0xBE000F">
<fbox x="0" y="212" w="720" h="278" colour="0x990000" />
<fvgbox x="0" y="212" w="720" h="12" colour1="0xb3000000" colour2="0xFF000000" />
<fvgbox x="0" y="478" w="720" h="12" colour1="0xFF000000" colour2="0xb3000000" />
<image x="60" y="82" path="#whatsontv2.png" />
<image x="60" y="52" path="#banner_top.png" />
<image x="174" y="150" path="#banner_ad_box.png" />
<image x="60" y="496" path="#banner_bottom.png" />
<image x="444" y="82" path="#tv_border.png" />
<tv x="446" y="84" w="214" h="124" />
</background>
<create_ui>
<pane id="2000" coords="0 0 0 0" />
<ad id="5000" coordswh="174 82 265 65" ad_slot="0" key="48" hide_key="y" delay="10" />
<label id="56" coordswh="184 150 0 0" colour="0xF0F0F0" txt="Press 0 to view this advertisement" />
<time id="1508" coordswh="70 51 0 0" colour="0xF0F0F0" format="1" align="tl" />
<time id="1507" coordswh="655 51 0 0" colour="0xF0F0F0" format="2" align="tr" />
<label coordswh="66 186 0 0" colour="0xF0F000" txt="Top TV listings guide, plus soaps, news & previews" font="2" />
<slot id="100" />
<action_button id="1001" colour="0xF0F0F0" coordswh="550 499 142 32" image="#../res_common/but_fast_blue.png" xoff_img="-24" yoff_img="3" key="B" action="tv" txt="LIVE TV" />
</create_ui>
<startup>
<swap data="10000" layout="1" />
</startup>
</root>
<layouts>
<lay id="10" slot="101">
<action_button id="52" coordswh="0 0 0 0" />
<box id="1014" coordswh="224 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="2" oref="." />
<box id="1015" coordswh="372 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="2" oref=".n" />
<box id="1016" coordswh="520 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="2" oref=".nn" />
<image id="501" parent_id="1014" coordswh="224 224 142 119" oref="." delay="5" />
<text id="502" parent_id="1014" coordswh="224 342 142 69" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref="." />
<action_button id="-504" parent_id="1014" coordswh="227 414 20 20" key="55" action="swap" lay="2" oref="." image="#but_7.png" />
<label id="-505" parent_id="1014" coordswh="250 410 116 25" oref="." attrib="time" />
<text id="-506" parent_id="1014" coordswh="250 433 116 47" oref="." tag="channel" font="2" margin="0" v_space="-2" />
<image id="511" parent_id="1015" coordswh="372 224 142 119" oref=".n" delay="6" />
<text id="512" parent_id="1015" coordswh="372 342 142 69" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref=".n" />
<action_button id="-514" parent_id="1015" coordswh="375 414 20 20" key="56" action="swap" lay="2" oref=".n" image="#but_8.png" />
<label id="-515" parent_id="1015" coordswh="398 410 116 25" oref=".n" attrib="time" />
<text id="-516" parent_id="1015" coordswh="398 433 116 47" oref=".n" tag="channel" font="2" margin="0" v_space="-2" />
<image id="521" parent_id="1016" coordswh="520 224 142 119" oref=".nn" delay="7" />
<text id="522" parent_id="1016" coordswh="520 342 142 69" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref=".nn" />
<action_button id="-524" parent_id="1016" coordswh="523 414 20 20" key="57" action="swap" lay="2" oref=".nn" image="#but_9.png" />
<label id="-525" parent_id="1016" coordswh="546 410 116 25" oref=".nn" attrib="time" />
<text id="-526" parent_id="1016" coordswh="546 433 116 47" oref=".nn" tag="channel" font="2" margin="0" v_space="-2" />
<focus map="h">
<item id="1014" />
<item id="1015" />
<item id="1016" />
</focus>
</lay>
<lay id="113" slot="101">
<action_button id="1502" coordswh="0 0 0 0" />
<box id="11014" coordswh="224 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="4" oref="." />
<box id="11015" coordswh="372 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="4" oref=".uun" />
<box id="11016" coordswh="520 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="4" oref=".uunn" />
<image id="1501" parent_id="11014" coordswh="224 224 142 119" oref="." delay="5" />
<text id="1502" parent_id="11014" coordswh="224 342 142 90" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref="." font="2" />
<action_button id="1504" parent_id="11014" coordswh="227 436 20 20" key="55" action="swap" lay="4" oref="." image="#but_7.png" />
<text id="-1506" parent_id="11014" coordswh="249 433 117 48" oref=".uu" font="2" margin="0" tag="soap" v_space="-2" />
<image id="1511" parent_id="11015" coordswh="372 224 142 119" oref=".uundd" delay="6" />
<text id="1512" parent_id="11015" coordswh="372 342 142 90" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref=".uundd" font="2" />
<action_button id="1514" parent_id="11015" coordswh="375 436 20 20" key="56" action="swap" lay="4" oref=".uundd" image="#but_8.png" />
<text id="-1516" parent_id="11015" coordswh="397 433 117 48" oref=".uun" font="2" margin="0" tag="soap" v_space="-2" />
<image id="1521" parent_id="11016" coordswh="520 224 142 119" oref=".uunndd" delay="7" />
<text id="1522" parent_id="11016" coordswh="520 342 142 90" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref=".uunndd" font="2" />
<action_button id="1524" parent_id="11016" coordswh="523 436 20 20" key="57" action="swap" lay="4" oref=".uunndd" image="#but_9.png" />
<text id="-1526" parent_id="11016" coordswh="545 433 117 48" oref=".uunn" font="2" margin="0" tag="soap" v_space="-2" />
<focus map="h">
<item id="11014" />
<item id="11015" />
<item id="11016" />
</focus>
</lay>
<lay id="114" slot="101">
<action_button id="2502" coordswh="0 0 0 0" />
<box id="21014" coordswh="224 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="6" oref="." />
<box id="21015" coordswh="372 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="6" oref=".n" />
<box id="21016" coordswh="520 224 142 256" colour="0xBE000F" hi_colour="0xFFDC00" key="13" action="swap" lay="6" oref=".nn" />
<image id="2501" parent_id="21014" coordswh="224 224 142 119" oref="." delay="5" />
<text id="2502" parent_id="21014" coordswh="224 342 142 112" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref="." />
<action_button id="2504" parent_id="21014" coordswh="227 457 20 20" key="55" action="swap" lay="6" oref="." image="#but_7.png" />
<image id="2511" parent_id="21015" coordswh="372 224 142 119" oref=".n" delay="6" />
<text id="2512" parent_id="21015" coordswh="372 342 142 112" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref=".n" />
<action_button id="2514" parent_id="21015" coordswh="375 457 20 20" key="56" action="swap" lay="6" oref=".n" image="#but_8.png" />
<image id="2521" parent_id="21016" coordswh="520 224 142 119" oref=".nn" delay="7" />
<text id="2522" parent_id="21016" coordswh="520 342 142 112" bk_colour="0x730000" hi_colour="0xe0e0e0" tag="tag" oref=".nn" />
<action_button id="2524" parent_id="21016" coordswh="523 457 20 20" key="57" action="swap" lay="6" oref=".nn" image="#but_9.png" />
<focus map="h">
<item id="21014" />
<item id="21015" />
<item id="21016" />
</focus>
</lay>
<lay id="12" slot="102">
<menu id="216" coords="387 224 663 394" vertical="y" wrap="n" h_margin="4" item_v_space="28" animate="12" scroll="n" font="2" bar_size="0" style="1" oref="2" action="swap" lay="2" key="13" faction="">
<function action="oswap" atag="a_layout" />
<prompts prev="121" next="122" />
</menu>
<action_button id="-121" coordswh="392 215 28 7" pix="1" />
<action_button id="-122" coordswh="392 398 28 7" pix="2" />
<focus map="h">
<item id="216" />
</focus>
</lay>
<lay id="11" slot="101">
<menu id="206" coords="223 224 385 394" vertical="y" wrap="n" h_margin="4" item_v_space="28" animate="11" scroll="n" font="2" bar_size="0" style="1" layout="12" oref="1" key="13" akey="57380">
<prompts prev="111" next="112" />
</menu>
<action_button id="-111" coordswh="228 215 22 7" pix="1" />
<action_button id="-112" coordswh="228 398 22 7" pix="2" />
<slot id="102" frames="2" out="20" in="25" />
<focus map="h">
<item id="206" />
<item id="102" />
</focus>
</lay>
<lay id="21" slot="101">
<menu id="306" coords="223 224 663 394" vertical="y" wrap="n" h_margin="4" item_v_space="28" animate="11" scroll="n" font="2" bar_size="0" style="1" oref="1" action="swap" lay="6" key="13" faction="">
<prompts prev="211" next="212" />
</menu>
<action_button id="-211" coordswh="228 215 22 7" pix="1" />
<action_button id="-212" coordswh="228 398 22 7" pix="2" />
<focus map="h">
<item id="306" />
</focus>
</lay>
<lay id="33" slot="133">
<menu id="417" coords="509 224 664 394" vertical="y" wrap="n" h_margin="4" item_v_space="28" animate="12" scroll="n" font="2" bar_size="0" style="1" oref="3" action="swap" lay="4" key="13" faction="">
<prompts prev="331" next="332" />
</menu>
<action_button id="-331" coordswh="514 215 22 7" pix="1" />
<action_button id="-332" coordswh="514 398 22 7" pix="2" />
<focus map="h">
<item id="417" />
</focus>
</lay>
<lay id="32" slot="132">
<menu id="416" coords="401 224 506 394" vertical="y" wrap="n" h_margin="4" item_v_space="28" animate="12" scroll="n" font="2" bar_size="0" style="1" layout="33" oref="2" key="13" akey="57380">
<prompts prev="321" next="322" />
</menu>
<action_button id="-321" coordswh="406 215 22 7" pix="1" />
<action_button id="-322" coordswh="406 398 22 7" pix="2" />
<slot id="133" frames="2" out="20" in="25" />
<focus map="h" activate_focus="416">
<item id="416" />
<item id="133" />
</focus>
</lay>
<lay id="31" slot="101">
<menu id="406" coords="224 224 398 427" vertical="y" wrap="n" h_margin="4" item_v_space="28" animate="11" scroll="n" font="2" bar_size="0" style="1" layout="32" oref="1" key="13" akey="57380">
<prompts prev="311" next="312" />
</menu>
<action_button id="-311" coordswh="228 215 22 7" pix="1" />
<action_button id="-312" coordswh="228 432 22 7" pix="2" />
<slot id="132" frames="2" out="20" in="25" />
<focus map="h">
<item id="406" />
<item id="132" />
</focus>
</lay>
<lay id="13" slot="105">
<paged_text id="505" coordswh="69 290 579 190" v_space="0" bar_size="20" line_scroll="y" />
</lay>
<lay id="1" slot="100">
<box id="1004" coordswh="0 0 0 0" colour="0xb3ffffff" />
<menu id="205" coords="61 224 221 394" vertical="y" wrap="n" h_margin="4" item_v_space="28" animate="2" scroll="n" font="2" bar_size="0" style="1" layout="10" data="10000" action="swap" lay="11" key="13" oref="0" akey="57380">
<function focus="oswap" ftag="f_layout" action="oswap" atag="a_layout" />
<prompts prev="103" next="104" />
</menu>
<action_button id="-103" coordswh="65 215 22 7" pix="1" />
<action_button id="-104" coordswh="65 398 22 7" pix="2" />
<action_button id="502" colour="0xF0F0F0" coordswh="69 480 120 30" xoff_img="36" yoff_img="3" key="27" action="exit" txt="" />
<focus map="h">
<item id="205" />
<item id="101" />
</focus>
<slot id="101" frames="0" />
</lay>
<lay id="5">
<box id="1500" coordswh="62 345 142 134" colour="0x730000" />
<image id="1504" coordswh="62 226 142 119" />
<box coordswh="213 449 449 30" colour="0x730000" />
<action_button id="-111" coordswh="612 458 36 12" pix="3" />
<action_button id="-113" coordswh="585 458 36 12" pix="4" />
<action_button id="1503" colour="0xF0F0F0" coordswh="217 451 120 30" font="2" xoff_img="-42" yoff_img="4" key="27" action="swap" lay="1" txt="for menu" image="#../res_common/but_back.png" />
<text id="-102" coordswh="65 430 138 49" colour="0xF0F000" oref="." tag="channel" font="2" margin="0" />
<label id="-114" coordswh="500 452 142 26" colour="0xF0F0F0" txt="" />
<paged_text id="1506" coordswh="213 226 449 225" bk_colour="0xAC0008" v_space="0" line_scroll="n" vertical="y" margin="4" yoff="-5">
<prompts prev1="111" next1="113" page="114" />
</paged_text>
</lay>
<lay id="2" slot="100">
<label id="-101" coordswh="65 408 138 22" colour="0xF0F000" oref="." attrib="dt" />
<include lay="5" />
<text id="1505" coordswh="65 344 136 65" tag="tag" margin="0" bk_colour="0x730000" />
</lay>
<lay id="4" slot="100">
<label id="-101" coordswh="65 408 138 22" colour="0xF0F000" oref="." attrib="time" />
<label id="-103" coordswh="65 451 136 28" colour="0xF0F000" oref="." />
<include lay="5" />
<text id="1505" coordswh="65 344 136 65" tag="tag" margin="0" bk_colour="0x730000" />
</lay>
<lay id="6" slot="100">
<label id="-101" coordswh="65 408 138 22" colour="0xF0F000" oref="." attrib="time" />
<label id="-103" coordswh="0 0 0 0" colour="0xF0F000" txt="" />
<include lay="5" />
<text id="1505" coordswh="65 344 136 133" tag="tag" margin="0" bk_colour="0x730000" />
</lay>
<lay id="3" slot="100">
<box coordswh="62 345 142 134" colour="0x730000" />
<action_button id="7502" colour="0xF0F0F0" coordswh="217 451 120 30" font="2" xoff_img="-42" yoff_img="4" key="27" action="swap" lay="1" txt="for menu" image="#../res_common/but_back.png" />
<top_x id="72011" coords="212 224 662 476" bk_colour1="0xb3000000" bk_colour2="0xFF000000" />
<image id="72013" coordswh="62 225 142 119" path="#reel_a.png" />
<label id="-72014" coordswh="64 346 140 25" colour="0xF0F0F0" txt="UK box office" font="3" />
<label id="-72015" coordswh="64 371 140 25" colour="0xF0F0F0" txt="top ten movies" font="3" />
</lay>
</layouts>
</config>
Data
The data (objects) XML file defines objects as any combination of text, images and references to child items. In this way objects can create tree-like hierarchies which can be represented by nested menus within layouts. Navigating menus cause updates to the current 'path' through any given tree with the terminal node being the current object (equivalent to XAML's 'data context').
Objects can trigger a layout swap on focus or activation if they require an over-ride to the default presentation the UI defines. This is perhaps the only area where the data has any influence on UI. Introducing some kind of "presentation" attribute could have put the UI in full control. I'll file that one under "technical debt". Many such evolutions of the XML design occured during development without introducing breaking changes.
config_whats_on_tv_data.xml
<?xml version="1.0" encoding="utf-8"?>
<config>
<objects>
<obj id="10000" type="menu" txt="Main" c="t">
<item id="11000" />
<item id="12000" f_layout="113" />
<item id="13000" />
<item id="14200" />
<item id="14100" />
</obj>
<obj id="11000" type="menu" txt="TV Picks" c="t">
<item id="11100" />
</obj>
<obj id="11100" type="menu" txt="Today" c="t">
<item id="11110" />
<item id="11120" />
<item id="11130" />
<item id="11140" />
<item id="11150" />
<item id="11160" />
</obj>
<obj id="11110" type="node" txt="Moving On: The Test" image="#img_11110.jpg" time="2:15pm" channel="BBC1" c="n" q="65" z="0" dt="2:15pm Today">
<tag>Moving On: The Test</tag>
<copy>Today's slice of daytime drama stars Maggie Steed and Hannah Gordon as friends Cyn and Theresa - and if you're in any doubt about which one likes to bend the rules and which one's a bit of a saint, the clue is in their names. After failing her driving test, Cyn persuades Theresa to take it in her name, even though she could lose her van-driving job if they're found out. Theresa has just met musician Gabe (played by Corin Redgrave, who died earlier this year) and is smitten - 'He uses fabric softener!' - but Cyn warns her off him. Has Theresa just lost her last chance of happiness?</copy>
<channel>BBC1</channel>
</obj>
<obj id="11120" type="node" txt="The Zoo" image="#img_11120.jpg" time="8:00pm" channel="ITV1" c="n" q="65" z="0" dt="8:00pm Today">
<tag>The Zoo</tag>
<copy>A trip to the zoo makes for a fun day out, but for some, it's another day at the office. For the first time in 10 years, cameras have been given 'access all areas' to both London Zoo and Whipsnade Zoo to see the work that keepers put in every day - and it makes for heartwarming and often quite tear-jerking stuff. Tonight, we meet gorillas Mjukuu, Effie, and recent arrival to London Zoo, Yeboah. Keeper Dan Simmons' affection for these hairy creatures shines through, as does all of the other zoo workers' admiration and dedication for the animals in their care.</copy>
<channel>ITV1</channel>
</obj>
... etc ...
</objects>
</config>