IntelliJ UIDesigner Guide
-
 Working with layout
- Align components
-
 Fill and size for components
- Binding components
- Localizing form
- Preview form
- Using of components in standard palette
- Using of expected components in standard palette
- Adding custom components
You can create a JPanel which automatically lays out your components horizontally.
- Place some components which you want to lay out horizontally on the UIDesigner area. You must align components approximately horizontally.
- Select the components.
- Press the "Lay Out Horizontally" button.
You can create a JPanel which automatically lays out your components vertically.
- Place some components which you want to lay out vertically on the UIDesigner area. You must align components approximately vertically.
- Select the components.
- Press the "Lay Out Vertically" button.
You can create a JPanel which automatically lays out your components in a grid.
- Place some components which you want to lay out in a grid on the UIDesigner area. You must align components approximately in a grid.
- Select the components.
- Press the "Lay Out In a Grid" button.
You can break (destroy) a JPanel with a certain layout. This operation is different from simply deleting the panel, because the child components are not deleted while breaking the layout. Only the JPanel will be removed from the UI form. Here we get an example with "Lay Out In a Grid" explanation and try to break the layouted panel.
- Select layouted JPanel.
- Press the "Break Layout" button.
To align component you must, to have layouted parent JPanel for this component. For aligning components will use properties "anchor", "rowSpan", "columnSpan" and "margin".
This property set align of component and can be:
- Center
- West
- East
- North
- South
- North-West
- North-East
- South-West
- South-East
This property set number of rows (for layout with row number > 1) to component will overlap the layout.
This property set number of columns (for layout with column number > 1) to component will overlap the layout.
This property set offset in pixels from cell border of parent layout cell. It's a complex property and it consists of nested properties:
- top, The offset from top border of parent
- left, The offset from left border of parent
- bottom, The offset from bottom border of parent
- right, The offset from right border of parent
The size tunning of components can be performed by properties "hSizePolicy", "vSizePolicy", "fill", "minimumSize", "preferredSize", "maximumSize".
A component can "Grow" relative to the parent's component layout cell size. It can fill the entire area of a layout cell, or grow only vertically or horizontally.
The property "fill" controls the filling of components. Property "fill" may have follow values:
- None, component get the preferred size and default placement
- Horizontal
- Vertical
- Both
 This information is not clearly right and needed to be approved by JetBrains.
The properties "hSizePolicy" and "vSizePolicy" is complex properties consists of boolean subproperties:
- canShrink
- canGrow
- wantGrow
Setting this properties have impact to resize while calling method pack or resizing frame.
The properties "minimumSize", "preferredSize" and "maximumSize" is minimum, default or maximum sizes of component. The size of component can be changed while method pack is called or frame is resized.
For binding components to your class fields, you must first bind form to your class, containing fields to bind. And follow, you must bind all required components to your fields in class.
To bind a class to form you must type full class name into "binding" property of "Form" or choose class from list of classes by button. To bind field you must type field name to "binding" property of component. If you type field, that currently is not in class, then UIDesigner will get you intension bulb to create fields automaticaly.
You can not bind this to component. It is a restriction of UIDesigner now.
You can preview designed form by pressing on "Preview" button in UIDesigner toolbar ().
The text, you typed in forms need to be localized? Then you must prepare in your project a resource bundle with localized strings.
In any text field in UIDesigner you can use link to ResourceBundle in your project.
- Select component to localize, find text property and press the button
- Select using of Resource Bundle, and press the browse button to find it
- Find resource bundle in your project
- Now you must find value from your resource
- Choose valid key-value pair from list
- Finally, press the OK button
Please take a look at IntelliJUIDesignerSample to explain the use of standard components in UIDesigner.
Unfortunately, not all Swing components are currently presented in UIDesigner's palette. You can use the following workaround to create an unsupported component:
- Place a JLabel where you want your component to appear.
- Put the class name of the unsupported component in the "text" property (e.q. JSpinner).
- Save and close the form in UIDesigner.
- Open for edit the form's XML file externally. Find the component with property "text" which you set. For example, if we want to place JSpinner, then we try find:
<properties>
<text value="JSpinner"/>
</properties>
- Change the "class" attribute for component from
javax.swing.JLabel to your component class. You can also remove "text" property:
<component id="615f3" class="javax.swing.JSpinner">
<constraints>
<xy x="310" y="19" width="41" height="20"/>
<grid row="0" column="1" row-span="1" col-span="1" vsize-policy="0" hsize-policy="0" anchor="0" fill="3"/>
</constraints>
<properties />
</component>
- Save the ".form" file and reopen it in UIDesigner. You must see JSplitter in design view. You can now use this new component in the UIDesigner.
UIDesigner supports customization of the component toolbar, which can be achieved by performing the following steps:
- Create an XML file containing definitions for the components. (
 You can use /com/intellij/uiDesigner/default-palette.xml file from resources.jar as sample.)
- Place the XML file into the
%IDEA_CONFIG%/palette folder. If the folder palette does not exists, create it manualy.
- In the Settings panel, choose UIDesigner configuration, and select your file from combobox ("Additional component palette").
- You must restart IDEA to apply palette changes.
If you use a different group than "Swing", the UIDesigner toolbar will have tabs, named per group.
To assign icons to your components you must create "toolbar" icon - XML attribute icon, and "tree" icon (icon to showing in structure view of form) - XML attribute small-icon, for each your component definition.
Now, both "normal" and small icons have same size - 18x18.
Then you complete icon creation put your icon set in jar, and put this jar into %IDEA_HOME%/lib.
%W% Make sure, that all your paths really exist, because if they don't, you will get an exception when you start IDEA.
I prepared most of the possible Swing components with icons so they can be used in UIDesigner toolbar.
- Standard Swing complete toolbar:
You must unpack ZIP, and follow by instructions above, put XML file in %IDEA_CONFIG%/palette and put resources-ext.jar into %IDEA_HOME%/lib
Same internal IntelliJ IDEA swing components
Same components maybe used for plugin development it follow palette:
- com.intellij.ui.ColorPanel
- com.intellij.ui.ComboBox
- com.intellij.ui.FieldPanel
- com.intellij.ui.TextFieldWithBrowseButton
- com.intellij.ui.Table
- com.intellij.ui.Tree
Download ZIP and chose in UIDesigner configuration.
Also, you can merge it with your existing palette.
-- AlexeyEfimov - 20 Jan 2004
In Idea 5.x the toolbar is saved in a different place. It is saved in every project file now "*project*.ipr". So the palette has to be extended there:
- Download and extract swing-complete-0.2.zip
- Shut down Idea
- Edit your project file and look for something like
<group name="Swing">
- Add the entries out of swing-complete-0.2.xml there
- Copy resources-ext.jar to %IDEA_HOME%/lib
- Restart Idea
-- ThomasHartwig - 07 Sep 2005
|
|
