home
products
education
support
partners
company

introduction

get started

articles

manual

tutorials

reference docs

case studies

knowledge base

goodies

screenshots

demos

echoes

Carousel zone


SourceForge.net Logo

home

forums

downloads

bugs

mailing list
XUI Zone - articles

number of ratings 0
average rating 0.00

<< back

Carousel Components Demo, First Looks

download the source code for the project (Does not include Carousel source code or jars).

The Carousel Components Demo is a webstartable demo of some of the user interface components in the Carousel Suite. Carousel is a commercial extension to the open source XUI platform sponsored by Xoetrope.

The objective of this demo is to introduce the new components included in Carousel and show that good looking/refined applications can be constructed with XUI. (at the time of writing the demo is incomplete and is not full featured, however it shows the essentials of the components)

The opening page is largely a XUI creation with only some minor use of Carousel components. In the top left the logo is actually an 'Easter Egg', i.e. a component that allows access to hidden functionality. This version simply pops up a password dialog but with a little extra work the access mechanism can be refined so that a special key sequence is needed to access the hidden functionality. The welcome screen also features some animation with a marquee running across the bottom of the screen. Some of the new features of XUI 2.0.6 are used on the welcome page with the explanatory text being displayed on a translucent, rounded panel.

 
 
The home page
 
 

 
 

Charts

Following in order of the buttons, the charts page displays a chart component which can display various different charts

 
 
A stacked chart
 
 

 
 

The chart type transitions are animated in a number of ways with the fade checkbox toggling the animation mode.

 
 
A pie chart
 
 

 
 

The chart component also features rollovers and toolips to aid user selection and interaction. Legends can also be positioned at various locations. Backing up the chart is a lightweight pure Java embedded database (HyperSQL) which is loaded in a background thread on startup.

Video

The video component can function in a number of ways (this webstart demo is so far only setup for Windows - you can download the full project to see the video on other platforms). Firstly the component can be used as any other component, simply painting its own client area and no more, or it can be used as a panel containing otehr components. In the example the video component hosts some children to form a logon dialog. Running looping background video in this way can be very impressive for things like retail applications. The video included is a low resolution video but a full application could include a better quality version of the clip.

 
 
A video logon screen
 
 

 
 

Text components

The demo features several text components that can flow text over or around sibling components. The text can be split into columns or even flowed around user defined shapes.

 
 
Some flowed text
 
 

 
 

Text may also be rotated within the component's client area, so with all of these text effects you can begin to brings some desktop publishing features to your XUI application.

 
 
Some rotated text
 
 

 
 

The shape component can also be used for simple drawing or to mask other components. In the example below an image component is embedded in an ellipse shape, the image is thereby masked and the text flows around the composite object.

 
 
Some flowed text and components masked within a shape
 
 

 
 

Data handling

XUI and Carousel make extensive use of data bindings and Carousel introduces a couple of new components along these lines. The tree table component is a remarkably powerful component and now it can be quickly and easliy used with XUI applications.

 
 
A tree table component
 
 

 
 

The checked list component is another useful component, particularly when many options may need to be chosen. Some miscellaneous input component are also shown in the example including a date edit with a popup calendar, a progress bar, a slider, a keypad (for use in point-of-sale/touchscreen application) and a reflected image component. The demo at present doesn't show much of these components so check back soon for updates.

 
 
Other components
 
 

 
 

What's to come

So far the demo doesn't do an awful lot but in the coming weeks this will be expanded to incorporate more Carousel features as they are rolled out. On the UI side of things we will add demos of the survey components, printing and exporting, and the shopping cart components and this should help give a better flavor of what can be achieved.

Running the demo

You can either download the entire project (include the NetBeans project) from the links below or you can choose the Webstart link below. The download is a little large as the Java Media Framework is included for the video playback, as is a full version of the HyperSQL database, however as this is just a demo we have not bothered optimizing resource usage very much.

<< back

comments


If you were logged in you could rate this article or add a comment.