Home > Apache Pivot > How to use Include Files in Apache Pivot BXML Documents

How to use Include Files in Apache Pivot BXML Documents

Apache Pivot platform offers a useful method of simplifying your bxml documents. BXML is a markup language that is used for designing the GUI of a rich Java desktop application.

BXML offers an alternative to the traditional Java Swing GUI development. BXML uses a markup language that web designers can adapt to quickly.

Include files have been around for years in other web design technologies. An include file allows you to extract content from your document and save in an alternate location.

In BXML for example, you can separate a section of markup and save in another file using the bxml:include tag. This allows for reusable content, structuring large applications into manageable pieces and divide coding responsibilities between multiple developers.

In this silly example, we mimic a Tic Tac Toe board (no functionality). This example demonstrates the benefits of re-usability and simplicity. In the example below you might see how your layout markup can get complicated fast.

<!-- BEGIN BXML LAYOUT -->
<Window title="Application Title"
        maximized="true"
        xmlns:bxml="http://pivot.apache.org/bxml"
        xmlns="org.apache.pivot.wtk">

    <GridPane columnCount="3"
        styles="{ verticalSpacing:1,
            showHorizontalGridLines:true,
            horizontalSpacing:1,
            showVerticalGridLines:true}"
        xmlns:bxml="http://pivot.apache.org/bxml"
        xmlns="org.apache.pivot.wtk">
        <GridPane.Row>
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="O"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="O"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="X"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
        </GridPane.Row>
        <GridPane.Row>
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="O"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="X"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="O"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
        </GridPane.Row>
        <GridPane.Row>
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="X"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="O"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
            <Label xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk"
                text="X"
                styles="{font:'Arial bold 64', color:'#ff0000',
                horizontalAlignment:'center', verticalAlignment:'center'}" />
        </GridPane.Row>
    </GridPane>
</Window>
<!-- END BXML LAYOUT -->

The code above is 65 lines long as I have it in Eclipse. As you can see, its getting lengthy and we only put several labels on the screen. Lets simplify it…

<!-- Begin BXML LAYOUT -->
<Window title="Application Title"
        maximized="true"
        xmlns:bxml="http://pivot.apache.org/bxml"
        xmlns="org.apache.pivot.wtk">

    <GridPane columnCount="3"
        styles="{ verticalSpacing:1,
            showHorizontalGridLines:true,
            horizontalSpacing:1,
            showVerticalGridLines:true}"
        xmlns:bxml="http://pivot.apache.org/bxml"
        xmlns="org.apache.pivot.wtk">
        <GridPane.Row>
            <bxml:include src="LabelO.bxml" />
            <bxml:include src="LabelO.bxml" />
            <bxml:include src="LabelX.bxml" />
        </GridPane.Row>
        <GridPane.Row>
            <bxml:include src="LabelO.bxml" />
            <bxml:include src="LabelX.bxml" />
            <bxml:include src="LabelO.bxml" />
        </GridPane.Row>
        <GridPane.Row>
            <bxml:include src="LabelX.bxml" />
            <bxml:include src="LabelO.bxml" />
            <bxml:include src="LabelX.bxml" />
        </GridPane.Row>
    </GridPane>
</Window>
<!-- END BXML LAYOUT -->

Now we have 29 lines of code. Better! As you look closer to what I have done you will notice I replaced the markup for each label with an include file. This simplifies the markup quite a bit.

Lets have a look at LabelX.bxml and LabelO.bxml. Both of the files have the same markup except for text value which is X or O.

<!-- BEGIN LABEL X "LabelX.bxml" -->
<Label xmlns:bxml="http://pivot.apache.org/bxml"
    xmlns="org.apache.pivot.wtk"
    text="X"
    styles="{font:'Arial bold 64', color:'#ff0000',
    horizontalAlignment:'center', verticalAlignment:'center'}" />
<!-- END LABEL -->
<!-- BEGIN LABEL O "LabelO.bxml" -->
<Label xmlns:bxml="http://pivot.apache.org/bxml"
    xmlns="org.apache.pivot.wtk"
    text="O"
    styles="{font:'Arial bold 64', color:'#ff0000',
    horizontalAlignment:'center', verticalAlignment:'center'}" />
<!-- END LABEL -->

There we have it. We are using the <bxml:include> tag to help simplify our bxml markup. You should consider using the includes to help structure your GUI application as it grows.

You might want to organize your include files into a logical directory. Lets say we moved the labels to a folder conveniently called “Labels”. To reference these nested includes in your layout bxml markup, use a relative path.

<bxml:include src="/Labels/LabelX.bxml" />
Advertisements
Categories: Apache Pivot
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: