Object Composition

Table of Contents

Markup Tutorial

Interfacing with Java™

Web Services

Month Spinner

Calendar

Object Composition

You can mix elements of any built-in type with object elements that represent instances of user-defined classes. Together, they allow you to create object compositions of arbitrary complexity.

Dynamic Object Composition

Object composition using markup is often more flexible than using a component that is frozen at compile time. Dynamically generated markup provides an opportunity to change the composition and configuration of objects on the fly. See Advanced Table Features for some striking examples of how you can change object configurations using just markup data.

Object composition using markup also enables you to dynamically compose new types of objects out of loosely-coupled reusable classes. As an example, we could reuse the numeric spinner and month picker, that we developed earlier, to create a “Date Picker” similar to the following:

The listing for the Date Picker view is shown below:

<?xml version="1.0"?>
<resource xmlns="http://www.enode.com/xalt">
    <frame title="Date Picker">
        <reserve> <!-- describe objects needed later -->
            <object id="monthController" class="com.enode.xalt.Sequencer">
                <property key="sequence">
                    <object id="monthModel" class="com.enode.calendar.MonthModel"/>
                </property>
            </object>
            <object id="yearController" class="com.enode.xalt.Sequencer">
                <property key="sequence">
                    <object id="yearModel" class="com.enode.xalt.IntegerTextModel">
                        <property key="maximum">
                            <int value="2042"/>
                        </property>
                        <property key="minimum">
                            <int value="1942"/>
                        </property>
                        <property key="value">
                            <int value="2002"/>
                        </property>
                    </object>
                </property>
            </object>
            <action id="previous" icon="images/arrowLeft.gif" target="#monthController" method="decrement"/>
            <action id="next" icon="images/arrowRight.gif" target="#monthController" method="increment"/>
            <action id="up" icon="images/arrowUpTiny.gif" target="#yearController" method="increment"/>
            <action id="down" icon="images/arrowDownTiny.gif" target="#yearController" method="decrement"/>
            <bevelBorder id="myBorder" type="raised"/>
        </reserve>
        <panel preferredSize="300 40">
            <flowLayout horizontalGap="20"/>
            <button action="#previous" preferredSize="26 26" border="#myBorder"/>
            <comboBox model="#monthModel"/>
            <panel border="#myBorder"> <!-- encapsulate spinner -->
                <borderLayout/>
                <textField columnCount="4" model="#yearModel"/>
                <panel constraints="East">
                    <borderLayout/>
                    <button action="#up" preferredSize="16 11" constraints="North"/>
                    <button action="#down" preferredSize="16 11" constraints="South"/>
                </panel>
            </panel> 
            <button action="#next" preferredSize="26 26" border="#myBorder"/>
        </panel>
    </frame>
</resource>

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

The object elements whose id attributes are equal to monthController and yearController, are both realized as instances of the class com.enode.xalt.Sequencer. However, both objects are configured differently.

The sequence property of the former is an instance of com.enode.calendar.MonthModel, while that of the latter is an instance of com.enode.xalt.IntegerTextModel. For details on these model classes, see Synthesizing a Spinner.

Repeating Pattern

The Model-View-Controller Pattern repeats at the component level. The component in this case is the “Date Picker”. But what we have shown above is just the view portion of the component. We could build the remaining pieces of the “Date Picker”, and call it a day, but we decided to go ahead and build an even larger component — a Calendar.