Zulu
Zulu
Documentation
Tutorials.Pet Store.Front End

We will start by defining the main window layout which has an image in the background and the title: 


<?xml version="1.0"?>
<window background="img/background.jpg">
    <description x="180">
        <b><i><font face="Arial Black" color="#f0f0f0" size="55">
            Pet Store
        </font></i></b>
    </description>
</window>

We will add on top a slightly transparent, black window and a welcome text: 


<?xml version="1.0"?>
<window background="img/background.jpg">
    <description x="180">
        <b><i><font face="Arial Black" color="#f0f0f0" size="55">
            Pet Store
        </font></i></b>
    </description>
    <box x="100" y="65" width="375" height="275" bgcolor="0x000000" alpha="75">
        <description x="15" y="100" wordwrap="true" width="350" height="150">
            <b>
            <font face="Arial" color="#ffcc00" size="22">
                Welcome to Pet Store
            </font>
            <br>
            <br>
            <font face="Arial" color="#eeeeee" size="13">
                Welcome to your online source for pets and pet supplies.
                Whether you're looking for information or ready to buy,
                we've created a fun and easy shopping experience.
                The site is tailored to your interests, so as you browse
                for pets, you'll see the products and accessories your pet
                might need. Come back often. There's always something new!
            </font>
            </b>
        </description>
    </box>
</window>

Let's add now, a few links to the store subsections. For testing purposes, the buttons will point to static files. In the next section we'll change the targets to the real back-end calls. 


...
<box x="100" y="65" width="375" height="275" bgcolor="0x000000" alpha="75">
<button width="38" height="38" image="img/birds_icn.jpg"
    onclick="document.location='birds/amazon_parrot.xul'"/>
<button width="38" height="38" image="img/cats_icn.jpg"
    onclick="document.location='cats/manx.xul'" />
<button width="38" height="38" image="img/dogs_icn.jpg"
    onclick="document.location='dogs/bulldog.xul'"/>
<button width="38" height="38" image="img/fish_icn.jpg"
    onclick="document.location='fish/angelfish.xul'"/>
<button width="38" height="38" image="img/reptiles_icn.jpg"
    onclick="document.location='reptiles/iguana.xul'"/>
<description x="15" y="100" wordwrap="true" width="350" height="150">
...

The buttons are not functional because we haven't created yet the target XUL files.

Next: Pet Store sections (coming soon).