Border

Table of Contents

Markup Tutorial

Interfacing with Java™

Web Services

Font

Color

Border

Presentation components can be adorned with a wide variety of borders. Borders, like fonts, can be shared by many presentation components, and are similarly held in reserve until needed.

Etched Border, Titled Border

The following example shows a titled border and two variations of etched border. The value of the border attribute of the titledBorder element as well as that of the panel and label elements must be URIs that reference a border element.

<?xml version="1.0"?>
<resource xmlns="http://www.enode.com/xalt">
    <frame title="Borders" resizable="false" visible="true">
        <panel>
            <reserve>
                <etchedBorder id="border1"/> <!-- by default, type="lowered" -->
                <etchedBorder id="border2" type="raised"/>
                <titledBorder id="border3" title="Titled Border" border="#border1"/>
            </reserve>
            <panel border="#border3">
                <label title=" Etched Border " border="#border1"/>
                <label title=" Etched (Raised) " border="#border2"/>
            </panel>
        </panel>
    </frame>
</resource>

Make this object in eNode Sandbox. The result should be similar to the following:

Bevel Border, MatteBorder, Compound Border

The next example shows a how to construct a compound border consisting of an outer matte border and an inner bevel border. The matte border is constructed using an icon such as the one shown at the beginning of this paragraph. For best results, the icon used in a matte border should be square, and should tile seamlessly on all four sides.

<?xml version="1.0"?>
<resource xmlns="http://www.enode.com/xalt" xmlns:x="http://www.enode.com/xalt">
    <reserve>
        <bevelBorder id="myBevel"/>
        <matteBorder id="myMatte" icon="images/hazard.gif"/>
        <compoundBorder id="hazard" insideBorder="#myBevel" outsideBorder="#myMatte"/>
    </reserve>
    <frame title="Factory Hazard Report" visible="true">
        <scrollPane border="#hazard" horizontalScrollBar="always" verticalScrollBar="always">
            <x:textArea columnCount="30" rowCount="10" foreground="red">
                <text>Enter Factory Hazard Report Here...</text>
            </x:textArea>
        </scrollPane>
    </frame>
</resource>

Make this object in eNode Sandbox. The result should be similar to the following:

The Example Explained

The contents of the reserve element are straightforward. The outsideBorder and insideBorder attributes of the compoundBorder element refer to the matteBorder and bevelBorder elements, respectively, through local URI references. The compoundBorder element is held in reserve, and is subsequently applied to the scrollPane element through the latter’s border attribute in the usual manner.