|
|
introduction  get started articles manual tutorials reference docs case studies knowledge base goodies screenshots demos echoes Carousel zone home forums downloads bugs mailing list
|
XUI Zone - articles
Introducing the GuideLayout, Part II: Java
26-May-2005 Part I: Introducing the GuideLayout In part I of this introduction to the GuideLayout we introduced the GuideLayout and showed how it could be interactively configured within the XuiEditor. Part II of this introduction demonstrates how the same layout can be used from Java. The Java classes for the GuideLayout may also be used outside of the context of XUI. A single panel To remind ourselves of the layout covered by this example we have again included a screenshot of the layout within the XuiEditor. The same arrangement of labels and edit fields is used within the Java example.
Figure 1 - The layout in the Kalideoscope editor
In Java the first thing to do is setup the new GuideLayout():
Listing 1 - Setup the new GuideLayout
GuideLayoutEx guideLayout = new GuideLayoutEx(); GuideSupport gs = new GuideSupport(); gs.setPageBounds( 0, 0, designWidth, designHeight ); The code actually creates an extended GuideLayout that some may find a little easier to use than the basic GuideLayout, particularly when adding components. The GuideSupport class is a helper class that manages the guide information on behalf of the layout class. We also tell the helper about the design size at which the form is laid out. Next we must setup the guides. The guides are organized in two sets, the vertical and the horizontal guides. Since the constraints for the guides are simple indexes into the guide store it is important to get the order of the guides correct. (Within the XuiEditor the guides are automatically arranged to enforce these requirements. The guides can easily be sorted or rearranged but for the purpose of the example we will specify them in the order in which they are used). The guides are added as follows:
Listing 2 - Adding the guides
Guide guide0 = new Guide( padding, 0, designWidth, true ); gs.addGuide( guide0 ); // Guide 1 is relative to guide 0 at a distance of 150 pixels, Guide guide1 = new Guide( 150, 1, designWidth, true ); guide1.setPreviousGuide( guide0 ); guide1.setPositioning( Guide.RELATIVE_POSITION ); gs.addGuide( guide1 ); The above setup covers most of the arrangements used in this example. The first guide, guide0 is specified as having a fixed position (padding is set to 10 pixels). The second guide, guide1 is setup relative to guide0 at a distance of 150 pixels. Skipping ahead a little the two middle guides are specified relative to the page size, as a percentage of the page width (the design width isn't actually used at present).
Listing 3 - Adding more guides
// Guide 3 and 4 - Span the mid point (50% of the width) Guide guide3 = new Guide( 50.0 - pad, 3, designWidth, true ); gs.addGuide( guide3 ); Guide guide4 = new Guide( 50.0 + pad, 4, designWidth, true ); gs.addGuide( guide4 ); This arrangement continues for the rest of the guides and similarly for the horizontal guides. Once the guides are setup we need to add the components. The components are added in the usual manner with the constraint being a string listing the four guides for the left, top, right and bottom edges of the component:
Listing 4 - Add the components
// Add the components ------------------------------------------------------ add( new JLabel( "First Name" ), "0, 0, 1, 1" ); add( new JLabel( "Second Name" ), "0, 2, 1, 3" ); add( new JLabel( "Title" ), "0, 4, 1, 5" );
Figure 2 - The example running at its default size
The full source can be viewed here and a NetBeans 4.1 project can also be downloaded. Spanning Panels The GuideLayout really starts to become useful when we want to use the guides to align components across panels. In a second example we nest the labels and edit fields within three panels. The labels and edits are aligned as before. The panels themselves are also aligned using guides. There are a few more guides to configure for this setup but once that is done the code for adding the components is pretty much the same:
Listing 5 - Adding components spanning panels
// Add the components ------------------------------------------------------ JPanel panelTopLeft = new JPanel(); panelTopLeft.setBorder( BorderFactory.createEtchedBorder()); panelTopLeft.setLayout( guideLayout ); add( panelTopLeft, "0, 0, 5, 7" ); panelTopLeft.add( new JLabel( "First Name" ), "1, 1, 2, 2" ); panelTopLeft.add( new JLabel( "Second Name" ), "1, 3, 2, 4" ); panelTopLeft.add( new JLabel( "Title" ), "1, 5, 2, 6" );
Figure 3 - The started application
Figure 4 - The resized application
The complete source code for this second example is available here. And from XML As of beta 2 the XML format for the guides has been revised to make it easier to hand code the XML. Here's an example XML fragment:
Listing 6 - The guides declared in XML
Figure 5 - Using guides in the Kalideoscope editor
This should be relatively straight forward to setup. The 'Guide' attributes are:
Listing 3 - Basic startup properties
Practical Use Setting up the guides can be a little cumbersome within a Java (remember the XuiEditor does this interactively). If the layout is shared by more than one page it might be worth considering offloading setup of the guides to another class. Since the GuideSupport class that stores most of the layout information is distinct from the actual layout manager class the same guide setup can be used in multiple locations or on multiple forms. comments If you were logged in you could rate this article or add a comment. |
|||||||||||||||||||||||||||
;)
;)
;)
;)
;)