COMP 310	Using Jigloo

Installation

See the Eclipse and plugins installation page.

Tutorials

Highly recommended!

CloudGarden's tutorial on creating Java Swing GUI's with Jigloo

How-To's

Here  are some brief descriptions on how to do some basic tasks in Jigloo

If a GUI class does not not open using Jigloo, i.e. you can only see the code and not the graphical editor, right-click the class in the Package Explorer and select Open With/Form Editor.

New GUI Class Definition

1. In Eclipse's Package Explorer pane, right-click on the package that you want your new GUI class to be in (create a new package first if it doesn't exist).
2.  Select New/Other...  from the pop-up menu.
   
   (click for full-size image) 
   
   
   
3. Scroll down until you see GUI Forms/Swing and select the desired type of GUI component that you desire.   Typical choices are JFrame for stand-alone window frames that hold various GUI components and JPanel for panels with associated sub-components that are then installed into larger panels and frames.
4. Click Next
5. In the next screen, be sure that the package name is correct.  Type in the desired class name.   It is highly recommended that you adopt a naming convention that allows you to identify what sort of GUI component the class is, by simply looking at its name, e.g. "MainAppFrame" or "ConfigPnl".
6. Un-select "Add main method" as this is the wrong location for the main method in the Model-View-Controller architectures that we will be using.
7. Click on Finish to create the new GUI class.

Jigloo Screen Layout

Refer to the screen shot below to see some of the major features of the Jigloo screen.  Detailed descriptions of the highlighted call-outs are below the screen shot.

• Graphical View of Design -- This is a "what-you-see-is-what-you-get" ("WYSIWYG" or "wizzy wig") interface that shows you exactly how your GUI will look as you create it.   You can drag and drop components from the top bar onto this design canvas.   The placement and size, within the constraints of the container's layout manager, of the component can be manipulated.    Jigloo will automatically generate the Java code to create the desired GUI in a dedicated method called initGUI.  It is highly recommeneded that only GUI initialization code be written in this method.  

• Code View of Design -- This is the actual code that creates the GUI.   Changes here, if valid, are reflected in the graphical view.

• Draggable Separator Bar -- There is  bar separating the graphical and code views that can be dragged up and down to show more or less of either view.   There are two small triangular buttons to maximize or minimize either the graphical or code views.   Sometimes when only one view is showing, it can be a little tricky to find the bar and get it positioned.

• Drag-and-drop GUI Components -- This is a gallery of available components, such as panels, buttons, text fields, etc. that can be dragged onto the graphical design.  Simply click on the the desired component in the gallery and the mouse will start to carry that component to wherever you want it -- no need to hold the mouse key down.   Left-clicking will deposit the component wherever the mouse is, opening up a dialog to set the component's name and other properties.  Hint: Sometimes it is difficult to drop a component exactly where you want it on the graphical design view.    In that case, on the tree-view of the GUI components in use on the right side of the screen, locate the container (panel or frame) that you wish to hold the component and drop it over there, onto the container's name.

  • Note: In the dialog box for a new component that you are dropping onto the container, at the top, Jigloo asks for the "Component Name".  This is the name of the field or variable that will reference this new component.   Java convention is to use for all fields and variables to start with a lower case letter and to be a single word with no spaces.

• List of All GUI Components in Use -- This is a tree-like representation of all the GUI elements that are currently being used in the design.   Containers such as panels and frames are shown as parent nodes to the components that they contain.

• Component Alignment Settings -- Useful only when the associated container's layout is set to Absolute, clicking on one of these options will align the selected components in various manners, such as vertically along their left edge, right edge, centers or horizontally along their top, bottom or centers.  Multiple components can be selected holding the Ctrl key down while selecting them.

• Properties of the Selected GUI Component -- When a component is selected, either in the graphical or tree (textual) view, it's properties will be displayed in a pane on the lower portion of the screen.  Filling out the values for the properties here will cause Jigloo to auto-generate the corresponding code.   Likewise, code added to the initGUI() method will show up here. 

• Design Properties -- These are propety values that affect the appearance and behavior of the selected component, such as its size, color, text, etc.  Values can be either typed in or selected from drop-lists.

• Layout Properties -- Selects and configures the layout manager for the selected component.  The available parameters will depend on the selected layout manager. The layout manager will only affect components that are containers for other components such as panels and frames.

• Events Tied to the Component -- The events to which the selected component listens are indicated here.   If the value associated with a particular event is changed from <none> to <anonymous> or this, Jigloo will auto-generate stub-code for the event.   It is recommended the <anonymous>  option be used as this will generate the stub for an anonymous inner class implementation of the listener.   The this option will create the code to install the whole GUI class as the listener, assuming that it implements the correct interface. 

© 2017 by Stephen Wong