IntelliJUIDesignerGuide 

HOME INDEX SEARCH GO  

 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.17 - 07 Sep 2005 - ThomasHartwig)
Added:
>
>

Toolbar in Idea 5.x

Added:
>
>

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

Added:
>
>

%META:FILEATTACHMENT{name="swing-complete-0.2.zip" attr="" comment="" date="1126113789" path="swing-complete-0.2.zip" size="11631" user="ThomasHartwig" version="1.1"}%


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.16 - 25 Feb 2004 - WouterZelle)
Changed:
<
<

  • Done Using of components in standard palete
  • Done Using of expected components in standard palete
>
>

  • Done Using of components in standard palette
  • Done Using of expected components in standard palette
Changed:
<
<

You can create JPanel horizontaly layouted automatically for set of your components.

  • Put on UIDesigner area some components which you want to lay out horizontally. You must align components approximately horizontally. New Window
  • Select components. New Window
  • Press "Lay Out Horizontally" button. New Window
>
>

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. New Window
  • Select the components. New Window
  • Press the "Lay Out Horizontally" button. New Window
Changed:
<
<

You can create JPanel vertically layouted automatically for set of your components.

  • Put on UIDesigner area some components which you want to lay out verticaly. You must align components approximately verticaly. New Window
  • Select components. New Window
  • Press "Lay Out Vertically" button. New Window
>
>

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. New Window
  • Select the components. New Window
  • Press the "Lay Out Vertically" button. New Window
Changed:
<
<

You can create JPanel layouted into grid automatically for set of your components.

  • Put on UIDesigner area some components which you want to lay out in a grid. You must align components approximately in a grid. New Window
  • Select components. New Window
  • Press "Lay Out In a Grid" button. New Window
>
>

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. New Window
  • Select the components. New Window
  • Press the "Lay Out In a Grid" button. New Window
Changed:
<
<

You can break (destroy) an already layouted JPanel. This operation is different to simply deleting, because all child components are not deleted while breaking the layout. Only 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.

>
>

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.

Changed:
<
<

  • Press "Break Layout" button. New Window
>
>

  • Press the "Break Layout" button. New Window
Changed:
<
<

Component can "Grow" relative to parent component layout cell size. It can fill all area of layout cell, or growed only by vertical or horizontal. For control filling of components will used property "fill". Property "fill" may have follow values:

>
>

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:

Changed:
<
<

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 requered components to your fields in class.

>
>

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.

Changed:
<
<

  • Select component to localize, find text property and press button New Window
  • Select using of Resource Bundle, and press browse button to find it New Window
>
>

  • Select component to localize, find text property and press the button New Window
  • Select using of Resource Bundle, and press the browse button to find it New Window
Changed:
<
<

  • Finally, press OK button smile New Window
>
>

  • Finally, press the OK button smile New Window
Changed:
<
<

Using of components in standard palete

>
>

Using of components in standard palette

Changed:
<
<

Please take a look at IntelliJUIDesignerSample to explain using of standard components in UIDesigner.

>
>

Please take a look at IntelliJUIDesignerSample to explain the use of standard components in UIDesigner.

Changed:
<
<

Using of expected components in standard palete

>
>

Using of expected components in standard palette

Changed:
<
<

Unfortunaly, not all Swing components presented now in UIDesigner palete. But you can use follow workarround for components, which expected in palete now.

>
>

Unfortunately, not all Swing components are currently presented in UIDesigner's palette. You can use the following workaround to create an unsupported component:

Changed:
<
<

  • Place to area of assumed component the JLabel component.
  • Put in "text" property class name of expected component (e.q. JSpinner).
  • Save and close form in UIDesigner.
  • Open for edit form XML file externally. Find the component with property "text" which you set. For example, if we want to place JSpinner, then we try find:
>
>

  • 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:
Changed:
<
<

  • Change "class" attribute for component from javax.swing.JLabel to your component class, and you can also remove "text" property:
>
>

  • Change the "class" attribute for component from javax.swing.JLabel to your component class. You can also remove "text" property:
Changed:
<
<

  • Save the ".form" file and reopen it in UIDesigner. You must see JSplitter in design view. Follow operation you can perform with this component, such as layout and resizing. New Window
>
>

  • 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. New Window
Changed:
<
<

UIDesigner support customization of component toolbar, performed in follow steps:

  • Create an XML file for components definitions. (tip.gif You can use /com/intellij/uiDesigner/default-palette.xml file from resources.jar as sample.)
  • Put you XML file definition into %IDEA_CONFIG%/palette folder. If folder palette not exists, please create it manualy.
  • In Settings panel choose UIDesigner configuration, and choose your file from combobox.
>
>

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. (tip.gif 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").
Changed:
<
<

tip.gif If you will using group, diferent to "Swing", then UIDesigner tolbar will have tabs, named per group.

>
>

tip.gif If you use a different group than "Swing", the UIDesigner toolbar will have tabs, named per group.

Changed:
<
<

Then you complite icon creation put your icon set in jar, and put this jar into %IDEA_HOME%/lib.

>
>

Then you complete icon creation put your icon set in jar, and put this jar into %IDEA_HOME%/lib.

Changed:
<
<

%W% Be sure, that all your paths are realy exists, because if it not, you will get exception on IDEA start up.

>
>

%W% Make sure, that all your paths really exist, because if they don't, you will get an exception when you start IDEA.

Changed:
<
<

I prepared all most possible Swing components with icons which can be used in UIDesigner toolbar.

>
>

I prepared most of the possible Swing components with icons so they can be used in UIDesigner toolbar.

Changed:
<
<

Download ZIP and chose in UIDEsigner configuration.

>
>

Download ZIP and chose in UIDesigner configuration.


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.15 - 24 Feb 2004 - JonathanHager)
Changed:
<
<

%W% Be sure, that all your paths are realy exists, becouse if it not, you will get exception on IDEA start up.

>
>

%W% Be sure, that all your paths are realy exists, because if it not, you will get exception on IDEA start up.

Changed:
<
<

You must unpack ZIP, and follow by instructions above, but XML file to %IDEA_CONFIG%/palette and put resources-ext.jar into %IDEA_HOME%/lib

>
>

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


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.14 - 02 Feb 2004 - ErbC)
Changed:
<
<

  • Horisontal New Window
>
>

  • Horizontal New Window
Changed:
<
<

  • canGlow
  • wantGlow
>
>

  • canGrow
  • wantGrow

 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.13 - 21 Jan 2004 - TWikiGuest)
Changed:
<
<

You can break (destroy) layouted JPanel. This operation diferent to simple deleting, becose all child component not deleted while breaking layout. Only JPanel will be removed from UI form. If we get example with "Lay Out In a Grid" explanation and try to break layouted panel.

>
>

You can break (destroy) an already layouted JPanel. This operation is different to simply deleting, because all child components are not deleted while breaking the layout. Only 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.

Changed:
<
<

To align component you must, to have layouted parent JPanel for this component. For aligning components will used properties "anchor", "rowSpan", "columnSpan" and "margin".

>
>

To align component you must, to have layouted parent JPanel for this component. For aligning components will use properties "anchor", "rowSpan", "columnSpan" and "margin".


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.12 - 20 Jan 2004 - AlexeyEfimov)
Changed:
<
<

-- AlexeyEfimov - 18 Jan 2004

>
>

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.

tip.gif Also, you can merge it with your existing palette.

-- AlexeyEfimov - 20 Jan 2004

Added:
>
>

%META:FILEATTACHMENT{name="intellij-ui.zip" attr="h" comment="IntelliJ UI components toolbar" date="1074604642" path="D:\development\projects\JetBrains\palette\intellij-ui.zip" size="11613" user="AlexeyEfimov" version="1.1"}%


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.11 - 17 Jan 2004 - AlexeyEfimov)
Changed:
<
<

Adding custom components

>
>

Customizing component toolbar

Changed:
<
<

The addition of custom components to default standard palete must overlap in classpath file "com/intellij/uiDesigner/default-palette.xml". You must extend this file and add expected icons to components where no icons seted, also you can add custom Swing components. I prepare my default palette extension jar file with icons and "default-palette.xml".

>
>

UIDesigner support customization of component toolbar, performed in follow steps:

  • Create an XML file for components definitions. (tip.gif You can use /com/intellij/uiDesigner/default-palette.xml file from resources.jar as sample.)
  • Put you XML file definition into %IDEA_CONFIG%/palette folder. If folder palette not exists, please create it manualy.
  • In Settings panel choose UIDesigner configuration, and choose your file from combobox.
  • You must restart IDEA to apply palette changes.
Changed:
<
<

tip.gif There are two jars prepared. Be sure, that only one of them is in use. The extension of palete based on classpath overlapping, that why you can't two extensions together.

>
>

tip.gif If you will using group, diferent to "Swing", then UIDesigner tolbar will have tabs, named per group.

Changed:
<
<

Standard palete with small icons in tree view

>
>

Icons in custom palette

Changed:
<
<

  • default-palete.jar: Default Pelete Extension for UIDesigner
  • Put file "default-palette.jar" to %IDEA_HOME%/lib.
  • Add reference to this jar into IDEA startup classpath before idea.jar.
  • After extension palette will look like here New Window.
>
>

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.

Changed:
<
<

Standard palete with icons from toolbar in tree view

>
>

tip.gif Now, both "normal" and small icons have same size - 18x18.

Then you complite icon creation put your icon set in jar, and put this jar into %IDEA_HOME%/lib.

%W% Be sure, that all your paths are realy exists, becouse if it not, you will get exception on IDEA start up.

Standard Swing complete toolbar

I prepared all most possible Swing components with icons which can be used in UIDesigner toolbar.

  • Standard Swing complete toolbar:
overview.png

You must unpack ZIP, and follow by instructions above, but XML file to %IDEA_CONFIG%/palette and put resources-ext.jar into %IDEA_HOME%/lib

-- AlexeyEfimov - 18 Jan 2004

Deleted:
<
<

  • default-palete-large-icons.jar: Default Pelete Extension for UIDesigner, icons in toolbar also used in tree
  • Put file "default-palette-large-icons.jar" to %IDEA_HOME%/lib.
  • Add reference to this jar into IDEA startup classpath before idea.jar.
  • After extension palette will look like here New Window.
Deleted:
<
<

-- AlexeyEfimov - 19 Dec 2003

Added:
>
>

%META:FILEATTACHMENT{name="overview.png" attr="h" comment="Standard Swing complete palette" date="1074379742" path="D:\development\projects\JetBrains\overview.png" size="12234" user="AlexeyEfimov" version="1.2"}% %META:FILEATTACHMENT{name="swing-complete-0.1.zip" attr="h" comment="Standard Swing complete palette 0.1" date="1074379703" path="D:\development\projects\JetBrains\palette\swing-complete-0.1.zip" size="11835" user="AlexeyEfimov" version="1.1"}%


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.10 - 19 Dec 2003 - AlexeyEfimov)
Changed:
<
<

window.open("/twiki/pub/Main/IntelliJUIDesignerGuide/shot-" + id + ".png", 'screenshot', 'scrollbars=yes, status=yes, resizable=yes, width=880, height=450').focus();

>
>

window.open("/twiki/pub/Main/IntelliJUIDesignerGuide/shot-" + id + ".png", 'screenshot').focus();

Changed:
<
<

  • Planned Preview
>
>

  • Done Localizing form
  • Done Preview form
Changed:
<
<

Preview

>
>

Preview form

Changed:
<
<

Exclamation This feature is not currently implemented in UIDesigner.

>
>

You can preview designed form by pressing on "Preview" button in UIDesigner toolbar (New Window).

Localizing form

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 button New Window
  • Select using of Resource Bundle, and press browse button to find it New Window
  • Find resource bundle in your project New Window
  • Now you must find value from your resource New Window
  • Choose valid key-value pair from list New Window
  • Finally, press OK button smile New Window
Changed:
<
<

-- AlexeyEfimov - 20 Nov 2003

>
>

-- AlexeyEfimov - 19 Dec 2003

Added:
>
>

%META:FILEATTACHMENT{name="shot-27.png" attr="h" comment="Preview Shot" date="1071835009" path="D:\TEMP\shot-27.png" size="43639" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-28.png" attr="h" comment="Localizing" date="1071835313" path="D:\TEMP\shot-28.png" size="45967" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-29.png" attr="h" comment="Localizing" date="1071835330" path="D:\TEMP\shot-29.png" size="4886" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-30.png" attr="h" comment="Localizing" date="1071835434" path="D:\TEMP\shot-30.png" size="10468" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-31.png" attr="h" comment="Localizing" date="1071835503" path="D:\TEMP\shot-31.png" size="5089" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-32.png" attr="h" comment="Localizing" date="1071835533" path="D:\TEMP\shot-32.png" size="13828" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-33.png" attr="h" comment="Localizing" date="1071835608" path="D:\TEMP\shot-33.png" size="5377" user="AlexeyEfimov" version="1.1"}%


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.9 - 20 Nov 2003 - AlexeyEfimov)
Added:
>
>

  • Planned Preview
Changed:
<
<

For binding components to your class fields, you must fist bind form to your class, containing fields to bind. And follow, you must bind all requered components to your fields in class.

>
>

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 requered components to your fields in class.

Changed:
<
<

To bind a class to form you must type full class name into "binding" property of "Form". To bind field you must type field name to "binding" property of component.

tip.gif JetBrains promise for user friendly binding since 901 build.

>
>

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.

Added:
>
>

Preview

Exclamation This feature is not currently implemented in UIDesigner.

Changed:
<
<

  • Put file "default-palette.jar" to %IDEA_HOME%/plugins/uiDesigner/lib. Be sure that this jar is above that uiDesigner.jar, otherwise no extensions will be avaible.
>
>

  • Put file "default-palette.jar" to %IDEA_HOME%/lib.
  • Add reference to this jar into IDEA startup classpath before idea.jar.
Changed:
<
<

  • Put file "default-palette-large-icons.jar" to %IDEA_HOME%/plugins/uiDesigner/lib. Be sure that this jar is above that uiDesigner.jar, otherwise no extensions will be avaible.
>
>

  • Put file "default-palette-large-icons.jar" to %IDEA_HOME%/lib.
  • Add reference to this jar into IDEA startup classpath before idea.jar.
Changed:
<
<

-- AlexeyEfimov - 22 Aug 2003

>
>

-- AlexeyEfimov - 20 Nov 2003


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.8 - 19 Nov 2003 - AlexeyEfimov)

 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.7 - 01 Sep 2003 - AlexeyEfimov)
Changed:
<
<

%META:FILEATTACHMENT{name="shot-25.png" attr="h" comment="" date="1061536954" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-25.png" size="21285" user="AlexeyEfimov" version="1.2"}% %META:FILEATTACHMENT{name="shot-26.png" attr="h" comment="" date="1061537473" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-26.png" size="21553" user="AlexeyEfimov" version="1.1"}%

>
>

%META:FILEATTACHMENT{name="shot-25.png" attr="h" comment="" date="1062402660" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-25.png" size="21314" user="AlexeyEfimov" version="1.3"}% %META:FILEATTACHMENT{name="shot-26.png" attr="h" comment="" date="1062402772" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-26.png" size="21482" user="AlexeyEfimov" version="1.2"}%


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.6 - 22 Aug 2003 - AlexeyEfimov)
Added:
>
>

tip.gif There are two jars prepared. Be sure, that only one of them is in use. The extension of palete based on classpath overlapping, that why you can't two extensions together.

Standard palete with small icons in tree view

Changed:
<
<

-- AlexeyEfimov - 21 Aug 2003

>
>

Standard palete with icons from toolbar in tree view

  • default-palete-large-icons.jar: Default Pelete Extension for UIDesigner, icons in toolbar also used in tree
  • Put file "default-palette-large-icons.jar" to %IDEA_HOME%/plugins/uiDesigner/lib. Be sure that this jar is above that uiDesigner.jar, otherwise no extensions will be avaible.
  • After extension palette will look like here New Window.

-- AlexeyEfimov - 22 Aug 2003

Changed:
<
<

%META:FILEATTACHMENT{name="shot-25.png" attr="h" comment="" date="1061485835" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-25.png" size="19935" user="AlexeyEfimov" version="1.1"}%

>
>

%META:FILEATTACHMENT{name="shot-25.png" attr="h" comment="" date="1061536954" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-25.png" size="21285" user="AlexeyEfimov" version="1.2"}% %META:FILEATTACHMENT{name="shot-26.png" attr="h" comment="" date="1061537473" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-26.png" size="21553" user="AlexeyEfimov" version="1.1"}%


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.5 - 21 Aug 2003 - AlexeyEfimov)
Changed:
<
<

  • Planned Using of components in standard palete
  • Partial Using of expected components in standard palete
  • Planned Adding custom components
>
>

  • Done Using of components in standard palete
  • Done Using of expected components in standard palete
  • Done Adding custom components
Added:
>
>

Using of components in standard palete

Please take a look at IntelliJUIDesignerSample to explain using of standard components in UIDesigner.

Added:
>
>

Adding custom components

The addition of custom components to default standard palete must overlap in classpath file "com/intellij/uiDesigner/default-palette.xml". You must extend this file and add expected icons to components where no icons seted, also you can add custom Swing components. I prepare my default palette extension jar file with icons and "default-palette.xml".

  • default-palete.jar: Default Pelete Extension for UIDesigner
  • Put file "default-palette.jar" to %IDEA_HOME%/plugins/uiDesigner/lib. Be sure that this jar is above that uiDesigner.jar, otherwise no extensions will be avaible.
  • After extension palette will look like here New Window.
Added:
>
>

Added:
>
>

%META:FILEATTACHMENT{name="shot-25.png" attr="h" comment="" date="1061485835" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-25.png" size="19935" user="AlexeyEfimov" version="1.1"}%


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.4 - 21 Aug 2003 - AlexeyEfimov)

 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.3 - 21 Aug 2003 - AlexeyEfimov)
Changed:
<
<

  • Place to area of assumed component the JPanel component.
  • Bind this JPanel to some field in your class.
  • In constructor of class or in initialization, add created by you self component to this JPanel.
>
>

  • Place to area of assumed component the JLabel component.
  • Put in "text" property class name of expected component (e.q. JSpinner).
  • Save and close form in UIDesigner.
  • Open for edit form 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 "class" attribute for component from javax.swing.JLabel to your component class, and 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. Follow operation you can perform with this component, such as layout and resizing. New Window
Changed:
<
<

Now expected a ScroolBar component for example. But for several Swing components you can use hint like for JPasswordField smile

How to use JPasswordField instead of JTextField

You must create JTextField component in UIDesigner. Then close form file in UIDesigner and go to edit it externaly. Find in XML your needed field to change it to JPasswordField, then change class name from javax.swing.JTextField to javax.swing.JPasswordField. Return to IDEA and rebuild entire project. It's strange, but after changes UIDesigner can manipulate with JPasswordField fine smile

-- AlexeyEfimov - 20 Aug 2003

>
>

-- AlexeyEfimov - 21 Aug 2003

Added:
>
>

%META:FILEATTACHMENT{name="shot-24.png" attr="h" comment="" date="1061454925" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-24.png" size="20749" user="AlexeyEfimov" version="1.1"}%


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.2 - 20 Aug 2003 - AlexeyEfimov)
Changed:
<
<

Now expected a ScroolBar component for example.

>
>

Now expected a ScroolBar component for example. But for several Swing components you can use hint like for JPasswordField smile

How to use JPasswordField instead of JTextField

You must create JTextField component in UIDesigner. Then close form file in UIDesigner and go to edit it externaly. Find in XML your needed field to change it to JPasswordField, then change class name from javax.swing.JTextField to javax.swing.JPasswordField. Return to IDEA and rebuild entire project. It's strange, but after changes UIDesigner can manipulate with JPasswordField fine smile


 <<O>>  Difference Topic IntelliJUIDesignerGuide (r1.1 - 20 Aug 2003 - AlexeyEfimov)
Added:
>
>

%META:TOPICINFO{author="AlexeyEfimov" date="1061379960" format="1.0" version="1.1"}% %META:TOPICPARENT{name="IntelliJUIDesigner"}%

IntelliJ UIDesigner Guide

Roadmap

  • Done Working with layout
  • Done Align components
  • Partial Fill and size for components
  • Done Binding components
  • Planned Using of components in standard palete
  • Partial Using of expected components in standard palete
  • Planned Adding custom components

Working with layout

Lay Out Horizontally

You can create JPanel horizontaly layouted automatically for set of your components.

  • Put on UIDesigner area some components which you want to lay out horizontally. You must align components approximately horizontally. New Window
  • Select components. New Window
  • Press "Lay Out Horizontally" button. New Window

Lay Out Vertically

You can create JPanel vertically layouted automatically for set of your components.

  • Put on UIDesigner area some components which you want to lay out verticaly. You must align components approximately verticaly. New Window
  • Select components. New Window
  • Press "Lay Out Vertically" button. New Window

Lay Out In a Grid

You can create JPanel layouted into grid automatically for set of your components.

  • Put on UIDesigner area some components which you want to lay out in a grid. You must align components approximately in a grid. New Window
  • Select components. New Window
  • Press "Lay Out In a Grid" button. New Window

Break Layout

You can break (destroy) layouted JPanel. This operation diferent to simple deleting, becose all child component not deleted while breaking layout. Only JPanel will be removed from UI form. If we get example with "Lay Out In a Grid" explanation and try to break layouted panel.

  • Select layouted JPanel. New Window
  • Press "Break Layout" button. New Window

Align Components

To align component you must, to have layouted parent JPanel for this component. For aligning components will used properties "anchor", "rowSpan", "columnSpan" and "margin".

Property anchor

This property set align of component and can be:

  • Center New Window
  • West New Window
  • East New Window
  • North New Window
  • South New Window
  • North-West New Window
  • North-East New Window
  • South-West New Window
  • South-East New Window

Property rowSpan

This property set number of rows (for layout with row number > 1) to component will overlap the layout.

Property columnSpan

This property set number of columns (for layout with column number > 1) to component will overlap the layout.

Property margin

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

Fill and size for components

The size tunning of components can be performed by properties "hSizePolicy", "vSizePolicy", "fill", "minimumSize", "preferredSize", "maximumSize".

Filling components

Component can "Grow" relative to parent component layout cell size. It can fill all area of layout cell, or growed only by vertical or horizontal. For control filling of components will used property "fill". Property "fill" may have follow values:

  • None, component get the preferred size and default placement New Window
  • Horisontal New Window
  • Vertical New Window
  • Both New Window

Size polices

Exclamation 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
  • canGlow
  • wantGlow

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.

Binding components

For binding components to your class fields, you must fist bind form to your class, containing fields to bind. And follow, you must bind all requered components to your fields in class.

To bind a class to form you must type full class name into "binding" property of "Form". To bind field you must type field name to "binding" property of component.

tip.gif JetBrains promise for user friendly binding since 901 build.

Exclamation You can not bind this to component. It is a restriction of UIDesigner now.

Using of expected components in standard palete

Unfortunaly, not all Swing components presented now in UIDesigner palete. But you can use follow workarround for components, which expected in palete now.

  • Place to area of assumed component the JPanel component.
  • Bind this JPanel to some field in your class.
  • In constructor of class or in initialization, add created by you self component to this JPanel.

Now expected a ScroolBar component for example.

-- AlexeyEfimov - 20 Aug 2003 %META:FILEATTACHMENT{name="shot-01.png" attr="h" comment="" date="1061376376" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-01.png" size="18509" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-02.png" attr="h" comment="" date="1061376386" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-02.png" size="19986" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-03.png" attr="h" comment="" date="1061376400" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-03.png" size="19995" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-04.png" attr="h" comment="" date="1061381377" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-04.png" size="18859" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-05.png" attr="h" comment="" date="1061381392" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-05.png" size="20620" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-06.png" attr="h" comment="" date="1061381408" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-06.png" size="20186" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-07.png" attr="h" comment="" date="1061381581" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-07.png" size="18804" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-08.png" attr="h" comment="" date="1061381660" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-08.png" size="20500" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-09.png" attr="h" comment="" date="1061381675" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-09.png" size="20176" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-10.png" attr="h" comment="" date="1061382120" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-10.png" size="18957" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-11.png" attr="h" comment="" date="1061384278" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-11.png" size="19595" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-12.png" attr="h" comment="" date="1061384292" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-12.png" size="19584" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-13.png" attr="h" comment="" date="1061384358" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-13.png" size="19621" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-14.png" attr="h" comment="" date="1061384376" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-14.png" size="19594" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-15.png" attr="h" comment="" date="1061384392" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-15.png" size="19535" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-16.png" attr="h" comment="" date="1061384415" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-16.png" size="19573" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-17.png" attr="h" comment="" date="1061384429" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-17.png" size="19735" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-18.png" attr="h" comment="" date="1061384442" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-18.png" size="19776" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-19.png" attr="h" comment="" date="1061384458" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-19.png" size="19582" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-20.png" attr="h" comment="" date="1061385133" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-20.png" size="19566" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-21.png" attr="h" comment="" date="1061385147" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-21.png" size="19604" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-22.png" attr="h" comment="" date="1061385161" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-22.png" size="19649" user="AlexeyEfimov" version="1.1"}% %META:FILEATTACHMENT{name="shot-23.png" attr="h" comment="" date="1061385177" path="D:\development\projects\JetBrains\samples\UIDesigner\src\com\intellij\samples\uiDesigner\shot-23.png" size="19547" user="AlexeyEfimov" version="1.1"}%


View | Diffs | r1.17 | > | r1.16 | > | r1.15 | More

e d i t a t t a c h r e f - b y d i f f s
Ideas,requests,problems regarding this site? Send feedback.
Copyright @ 2000-2003 by the contribution authors. All material on this collaboration tool is the property of the contributing authors.

Revision r1.1 - 20 Aug 2003 - 11:46 GMT - AlexeyEfimov
Revision r1.17 - 07 Sep 2005 - 17:26 GMT - ThomasHartwig 		Copyright © 2001 by the contributing authors. All material on this collaboration tool is the property of the contributing authors.
Ideas, requests, problems regarding this site? Send feedback.