ULC SwingX

Purposes

The ulc-swingx project aims to integrate these components into the UltraLightCLient (ULC) framework, allowing the usage of these components in the context of a ULC application.

The SwingX components are being developed by the SwingLabs folks and represent extended Swing components such as collapsible task panes, date pickers, and many more. These are useful, powerful, and well-designed, pure Swing components.

Supported Components

So far, the following components have been integrated into ULC:

ULC Component Name SwingX Component
ULCXHyperlink JXHyperlink Example
ULCXCollapsiblePane JXCollapsiblePane Example
ULCXTaskPane JXTaskPane Example
ULCXTaskPaneContainer JXTaskPaneContainer Example
ULCXPanel JXPanel Example
ULCAbstractPainter Painter Example
ULCAbstractGradientPainter AbstractGradientPainter Example
ULCBasicGradientPainter BasicGradientPainter Example
ULCCompoundPainter CompoundPainter Example
ULCLinearGradientPainter LinearGradientPainter Example
ULCMattePainter MattePainter Example
ULCPinstripePainter PinstripePainter Example
ULCRadialGradientPainter RadialGradientPainter Example
ULCTextPainter TextPainter Example
ULCXDatePicker JXDatePicker Example
ULCXMonthView JXMonthView Example
ULCXMultiSplitPane JXMultiSplitPane Example
ULCXTable API as JXTable Example

More components are subject to be supported in the future. Please come back and check for other SwingX components integrated into ULC.

Examples

ULCXHyperlink

The following example shows how to create a hyperlink and bound an action to it. The action is performed when the link is clicked.

        // Create the sample action
        SampleLinkAction action = new SampleLinkAction();
        action.putValue(IAction.NAME, "XHyperlink");

        // create hyperlink and bound sample action to it
        ULCXHyperlink hyperlink = new ULCXHyperlink(action);
        // set link colors
        hyperlink.setUnclickedColor(Color.blue);
        hyperlink.setClickedColor(Color.magenta);

        // add link to root pane
        // ...

        // sample action
        private static class SampleLinkAction extends AbstractLinkAction {
            public void actionPerformed(ActionEvent event) {
                System.out.println("sample link action was performed");
            }
        }
    

Instead of creating a custom action the convenience classes LinkAction and AbstractLinkModel can be used. The action will open the hyperlink's URL in the default browser when performed. According to the underlying link model changes the link's text and URL will change.

        // create link sample action using a link model
        DefaultLinkModel linkModel = new DefaultLinkModel();
        LinkAction action = new LinkAction(linkModel);

        // create hyperlink and bind action to it
        ULCXHyperlink hyperlink = new ULCXHyperlink(action);

        // set link colors
        hyperlink.setUnclickedColor(Color.blue);
        hyperlink.setClickedColor(new Color(0x99, 0, 0x99));

        // add link to root pane
        // ...
    

ULCXCollapsiblePane

The following example shows how to create a collapsible pane and using the built-in toggle action to collapse and expand it.

        ULCXCollapsiblePane collapsiblePane = new ULCXCollapsiblePane();
        collapsiblePane.setOrientation(ULCXCollapsiblePane.VERTICAL);

        // create the content
        ULCContainer controlPanel = createControlPanel();
        // by default the collapsible pane has a ULCBoxPane as content pane
        // 'add(ULCComponent, Constraints)' will add the component to the collapsible pane's content pane
        collapsiblePane.add(controlPanel, ULCBoxPane.BOX_EXPAND_EXPAND);

        // set icons for the toggle action
        collapsiblePane.setCollapseIcon(new ULCIcon(getClass().getResource("/expanded.gif")));
        collapsiblePane.setExpandIcon(new ULCIcon(getClass().getResource("/collapsed.gif")));

        collapsiblePane.setAnimated(true);

        // add collapsible pane to container
        // ...

        // Show/hide the "Controls"
        AbstractAction toggleAction = collapsiblePane.getToggleAction();
        ULCButton toggleButton = new ULCButton(toggleAction);
        toggleButton.setText("Show/Hide Search Panel");
        // ...
    

ULCXTaskPane / ULCXTaskPaneContainer

The following example shows how to create two task panes and how to add them to a task pane container. In addition, an expansion listener is added to each task pane that is notified when the user expands / collapses a specific task pane.

        // create two task panes having a title and containing each a label
        ULCXTaskPane taskPaneOnw = new ULCXTaskPane();
        taskPaneOnw.setTitle("Task Pane One");
        taskPaneOnw.add(new ULCLabel("Label One"));

        ULCXTaskPane taskPaneTwo = new ULCXTaskPane();
        taskPaneTwo.setTitle("Task Pane Two");
        taskPaneTwo.add(new ULCLabel("Label Two"));

        // create and register an expension listener being notified when
        // a task pane gets expanded or collapsed
        IExpansionListener expansionListener = new IExpansionListener() {
            public void stateChanged(ExpansionEvent event) {
                System.out.println("Task Pane       : [" + event.getTaskPane().getTitle() + "]");
                System.out.println("Expansion State : [" + (event.isExpanded() ? "expanded" : "collapsed") + "]");
            }
        };
        taskPaneOnw.addExpansionListener(expansionListener);
        taskPaneTwo.addExpansionListener(expansionListener);

        // create a task pane container and add the two task panes
        ULCXTaskPaneContainer taskPaneContainer = new ULCXTaskPaneContainer();
        taskPaneContainer.add(taskPaneOnw);
        taskPaneContainer.add(taskPaneTwo);

        // add the task pane container to a frame ...
        // ...
    

ULCXPanel / ULCAbstractPainter

The following example shows how to create a ULCXPanel, setting a painter as background and change its translucency. According to the panel the translucency of all its components will change.

        // Create a layered pane with Mars image on bottom layer and descriptive
        // text on top layer.
        ULCLayeredPane layeredPane = new ULCLayeredPane();
        layeredPane.setPreferredSize(new Dimension(ICON_WIDTH, ICON_HEIGHT));

        // Create the bottom layer.
        ULCIcon icon = IconFactory.getIcon("/mars.jpg");
        ULCLabel label = new ULCLabel(icon);
        layeredPane.add(label, 1, new Rectangle(0, 0, ICON_WIDTH, ICON_HEIGHT));

        // Create the top layer.
        String[] facts = {
                "Mars is the fourth planet from the Sun",
                "Orbit: 227,940,000 km (1.52 AU) from Sun",
                "Diameter: 6,794 km",
                "Mass: 6.4219e23 kg"
        };

        // create new ULCXPanel
        fXpanel = new ULCXPanel();

        // set the panel's border
        fXpanel.setBorder(BorderFactory.createBevelBorder(ULCBevelBorder.LOWERED));

        // set the alpha value which will specify the panel's translucency
        fXpanel.setAlpha(0.5f);

        // set a gradient painter as background
        ULCBasicGradientPainter gradientPainter = new ULCBasicGradientPainter(new GradientPaint(0.0, 0.0, Color.white, 1.0, 0.0, Color.lightGray));
        fXpanel.setBackgroundPainter(gradientPainter);

        // add components to panel
        ULCBoxPane contentPane = new ULCBoxPane(true);
        for (int i = 0; i < facts.length; i++) {
            ULCLabel factsLabel = new ULCLabel(facts[i]);
            Font font = factsLabel.getFont();
            factsLabel.setFont(new Font(font.getName(), Font.BOLD, font.getSize()));
            contentPane.add(factsLabel, BOX_CENTER_CENTER);
        }
        contentPane.add(ULCFiller.createVerticalStrut(30), BOX_EXPAND_EXPAND);
        contentPane.add(new ULCButton("Button for Demo"), BOX_CENTER_BOTTOM);
        fXpanel.add(contentPane);

        // add the panel container to a layered pane / a frame ...
        // ...
    

ULCXPanel / ULCAbstractPainter, ULCAbstractGradientPainter, ULCBasicGradientPainter, ULCCompoundPainter, ULCLinearGradientPainter, ULCMattePainter, ULCPinstripePainter, ULCRadialGradientPainter, ULCTextPainter

ULCXDatePicker

The following example shows how to create a date picker, set the link date, and how to set the accepted date formats.

        // create date picker
        fDatePicker = new ULCXDatePicker();

        // add date picker to root pane
        // ...

        // set date formats
        // e.g. 14.12.2006
        SimpleDateFormat germanDateFormat = (SimpleDateFormat) DateFormat.getDateInstance(DateFormat.MEDIUM, Locale.GERMAN);
        // e.g. 2006-12-14
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        SimpleDateFormat[] dateFormats = new SimpleDateFormat[]{germanDateFormat, simpleDateFormat};
        fDatePicker.setFormats(dateFormats);

        // set link date to 01.01.2000
        GregorianCalendar date = new GregorianCalendar(2000, 0, 1);
        fDatePicker.setLinkDate(date.getTimeInMillis(), "{0,date, dd MMMM yyyy}");

        // add check box to change enabled state
        // ...
        fDatePicker.setEnabled(fEnabledCheckBox.isSelected());

        // add check box to change editable state
        // ...
        fDatePicker.setEditable(fEditableCheckBox.isSelected());
        
        // add check box to toggle orientation
        // ...
        fDatePicker.setComponentOrientation(fOrientationCheckBox.isSelected() ?
                        ComponentOrientation.LEFT_TO_RIGHT : ComponentOrientation.RIGHT_TO_LEFT);
    

ULCXMonthView

The following example shows how to create a month view and how to change its properties.

        // create month view
        fMonthView = new ULCXMonthView();

        // add month view to root pane
        // ...

        // set number of displayed months (by default the component will display as many months as possible in the area provided)
        fMonthView.setPreferredCols(2);
        fMonthView.setPreferredRows(2);

        // set abbreviations for days of the week
        fMonthView.setDaysOfTheWeek(
                new String[]{"Su", "M", "T", "W", "Th", "F", "S"});

        // set first day of the week
        fMonthView.setFirstDayOfWeek(Calendar.MONDAY);

        // Create some dates that we want to flag as being important.
        Calendar cal1 = Calendar.getInstance();
        cal1.set(2006, 11, 25);
        Calendar cal2 = Calendar.getInstance();
        cal2.set(2006, 11, 26);
        long[] flaggedDates = new long[]{
                cal1.getTimeInMillis(),
                cal2.getTimeInMillis()
        };
        fMonthView.setFlaggedDates(flaggedDates);

        // set first date to display
        fMonthView.setFirstDisplayedDate(new GregorianCalendar(2006, 10, 1).getTimeInMillis());

        // toggle component orientation
        fMonthView.setComponentOrientation((fMonthView.getComponentOrientation() == ComponentOrientation.RIGHT_TO_LEFT) ?
            ComponentOrientation.LEFT_TO_RIGHT : ComponentOrientation.RIGHT_TO_LEFT);

        // change selection mode
        mode = ULCXMonthView.WEEK_INTERVAL_SELECTION;
        fMonthView.clearSelection();
        fMonthView.setSelectionMode(mode);

        // turn on/off anti-aliased text
        fMonthView.setAntialiased(true);

        // display buttons that allow the user to traverse to previous/next month
        fMonthView.setTraversable(true);

        // display the week number
        fMonthView.setShowingWeekNumber(true);

        // set the color for painting a specific day of the week
        fMonthView.setDayForeground(index + 1, new Color(0, 205, 102));
        fMonthView.repaint();
    

ULCXMultiSplitPane

This example shows how to create a multisplit pane defining its layout in a string.

        // create default split pane
        fMultiSplitPane = new ULCXMultiSplitPane();

        // use layout definition string
        String layoutDefinition = "ROW (LEAF name=left weight=0.5) (LEAF name=right weight=0.5))";
        fMultiSplitPane.setLayout(layoutDefinition);

        // set the divider size
        fMultiSplitPane.setDividerSize(2);

        // add components to the split layout's leafs
        fMultiSplitPane.add(new ULCButton("Left Column"), "left");
        fMultiSplitPane.add(new ULCButton("Right Column"), "right");
    

ULCXTable

This example shows how to create a sortable ULCXTable and add a Filter and a Highlighter to it.

        // Create the ULCXTable with a data model.
        // The table is sortable so the data model will be wrapped in a SortedTableModel and a FilteredTableModel.
        fTable = new ULCXTable(new MembersTableModel(MembersDB.getMembers()), true);

        // install boolean renderer
        ULCTableColumn availableColumn = fTable.getColumnModel().getColumn(MembersTableModel.AVAILABLE_COLUMN);
        availableColumn.setCellRenderer(new BooleanRenderer());

        // set filters on the table: both filters will be applied
        ITableRowFilter functionFilter = createFunctionFilter((String) functionComboBox.getSelectedItem());
        ITableRowFilter availabilityFilter = createAvailabilityFilter((String) availabilityComboBox.getSelectedItem());
        ITableRowFilter[] filters = new ITableRowFilter[]{functionFilter, availabilityFilter};
        fTable.setFilters(filters);

        // set a highlighter on the table that will decorate the installed renderer
        fTable.setHighlighter(new ULCRolloverHighlighter(Color.white, Color.black, fTable.getForeground(), fTable.getBackground()));

        // add the table to a scrollpane
        ULCScrollPane scrollPane = new ULCScrollPane(fTable);
        // add scrollpane to a frame
        // ...
    

Dependencies

On the client side the SwingX classes and thus JDK 5.0 have to be available. Furhtermore the ULCXTable component relies on the FilteredTableModel extensions.

Resources