A Class Diagram Tool in Java with the Flowchart Library – I

This blog post is a step-by-step guide on how to create a tool that parses *.jar files and builds the class hierarchy. The visualization of the diagram is performed by MindFusion Java Swing Diagram library.

Here is an image of the final application:

Class Library Tool in Java

Class Library Tool in Java

In part one we will take a look at the controls that build the user interface for the application.

I. UI Controls

We will use three controls from the diagram library:

    private Diagram diagram;
    private DiagramView diagramView;
    private ZoomControl zoomer;

One JScrollPane:

private JScrollPane _scrollPane;

and a JPanel for the legend and a JMenuBar.

    JPanel controlsPanel = new JPanel();
    JMenuBar menuBar;

Those controls build the user interface. At the top is the menu bar with menus for handling the *.jar files. In the center is a scrollable area that contains the diagram. Right to it is a zoom control. At the bottom is the panel with the legend – images and text that explain the colors and symbols on the class diagram.

II. The Diagram Controls

The three diagram controls are the Diagram, the DiagramView and the ZoomControl. The diagram needs a diagramView to render itself onto. The diagramView users a scrollPane to provide scroll functionality for the flowchart. The zoomControl is a typical Java Swing control, we set a few customization options on it to make it pass the layout of our application.

       //diagram initialization
        diagram = new Diagram();
        diagram.setAutoResize(AutoResize.RightAndDown);

We set auto resize for the diagram and assign it to the diagramView:

        //initialize a diagramView that will render the diagram.
        diagramView = new DiagramView(diagram);
        diagramView.setVisible(true);

The scrollPane is initialized with the diagramView and scrolls automatically when the view is bigger than the available size:

         //use a scroll pane to host large diagrams
        _scrollPane = new JScrollPane(diagramView);
        _scrollPane.setVisible(true);
        _scrollPane.setAutoscrolls(true);

The zoomControl is also attached to the diagramView. It’s important that we set its Dimension, the width will be used by the Java layout manager to calculate the available space for it on the application.

        //provide a zoomer for the diagram
        zoomer = new ZoomControl();
        zoomer.setView(diagramView);
        zoomer.setPreferredSize(new Dimension(70, 50));
        zoomer.setVisible(true); 

The arrangement of the controls in the JFrame is done with the BorderLayout. It’s important that we set the layout before we start adding the controls:

     getContentPane().setLayout(new BorderLayout());
     this.add(zoomer, BorderLayout.EAST);
     this.add(createLegendPanel(), BorderLayout.SOUTH);

The zoomer is to the right, the legend panel is at the bottom. The last control that we add is the scrollPane with the diagram, we align it to the center, which means that all the available space would be allocated to her.

     this.add(_scrollPane, BorderLayout.CENTER);

Finally, we create the menu bar.

     this.setJMenuBar(createMenuBar());

III. The Legend Panel

The legend panel is a JPanel with BoxLayout of type “LINE_AXIS”.

        JPanel controlsPanel = new JPanel();
        controlsPanel.setLayout(new BoxLayout(controlsPanel, BoxLayout.LINE_AXIS));
        controlsPanel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
        controlsPanel.add(Box.createHorizontalGlue());

The legend items are ImageIcon-s – for each symbol in the diagram there’s an icon. We have also created images for the colors of the diagram. Each icon is rendered with explanation label.

Generally, each item on the LegendPanel is initialized like this:

        //create labels for each item on the legend
        JLabel label = new JLabel("Constructor", constructorIcon, JLabel.CENTER);
        label.setAlignmentX(JComponent.CENTER_ALIGNMENT);
        controlsPanel.add(label);
        controlsPanel.add(Box.createRigidArea(new Dimension(10, 0)));
        controlsPanel.add(Box.createHorizontalGlue());

The layout distributes evenly the available space between the items and we get an easy-to-read legend at the bottom of the application.

IV. The Menu

The menu at the top is implemented as a JMenuBar, which uses mnemonic keys and accelerators to grant access to the menu items with keyboard shortcuts. The only menu item and submenu items currently present are File -> Open jar.

        //Build the first menu.
        menu = new JMenu("File");
        menu.setMnemonic(KeyEvent.VK_F);
        menu.getAccessibleContext().setAccessibleDescription(
                "File operations");
        menuBar.add(menu);

The “Open jar” command uses action listener, which brings up the Open File diagolg. This is a JFileChooser, which filters all files except *.jar files.

     //the method that handles events
    public void actionPerformed(ActionEvent e)
    {
        //identify the command
        if ("open_jar".equals(e.getActionCommand())) {

            //a list with MemberInfo objects that hold class info
            ArrayList membersList = new ArrayList();
            fileChooser = new JFileChooser();

            //set the default directory to this file's directory
            fileChooser.setCurrentDirectory(currFile);

            //filter only *.jar files
            FileFilter filter = new FileNameExtensionFilter(null, "jar");
            fileChooser.setFileFilter(filter);
            fileChooser.removeChoosableFileFilter(fileChooser.getAcceptAllFileFilter());
            .......

If the method confirms that the user has selected a valid jar, the path to the file is provided to the method that reads and parses the jar, which will be topic for the second part of this tutorial.

The whole sample is available for direct download from this link:

Download the Class Diagram Tool in Java Application

MindFusion support team welcomes your questions about the Java diagram library or any other of our programming tools at the discussion board or per e-mail at support@mindfusion.eu

About Diagramming for Java Swing: MindFusion.Diagramming for Java Swing provides your Java application with all necessary functionality to create and customize a diagram. The library is very easy to integrate and program. There are numerous utility methods, rich event set, more than 100 predefined shapes. The tool supports a variety of ways to render or export the diagram, advanced node types like TreeView nodes, hierarchical nodes, tables, container nodes and many more. There are 15 automatic layouts, various input / output options and fully customizable appearance. A detailed list with JDiagram’s features is uploaded here. You can check the online demo to see some of the functionality implemented.

Diagramming for Java Swing is royalty free, there are no distribution fees. Licenses depend on the count of developers using the tool – check here the prices.

Database Schema with the Java Diagram Library – Part II

The first part of this tutorial is uploaded here. Click here to watch the video that goes with these tutorials.

I. Table Relationships

Now that we have the DB tables from the sakila metadata, it’s time to connect them in a way that mirrors their relationship in the actual MySQL database.

We read the relationships metadata with the helper method in the DBMetaData class:

 ArrayList relations = DBMetaData.getRelationsMetadata(tables);

The method returns a list of our custom DBRelation objects, where each one contains data about two related tables and their fields.

TableNode source = (TableNode)diagram.findNodeById(relation.pk_table);
TableNode destination = (TableNode)diagram.findNodeById(relation.fk_table);

The DBRelation object provides the fields that enter into relation as strings. Since the Diagram.Factor.createDiagramLink method requires the indices of the DB rows we must identify them:

 for(int i = 0; i < rowCount; i++)
    {
         Cell cell = source.getCell(1, i);

         if(cell.getText().equals("" + relation.pk_key + ""))
           {
               pk_index = i;
               break;
            }
     }

Now that we have identified the indexes of the fields that actually relate to each other in both the source and destination tables, we can connect them:

DiagramLink link = diagram.getFactory().createDiagramLink(source, pk_index, destination, fk_index);

We use the capability of the Java diagram library to connect table nodes not generally but a specific row to another specific row.

We also make some visual customizations to make the connectors look more DB-like:

link.setBaseShape(ArrowHeads.RevWithLine);
link.setBaseShapeSize(3f);
link.setHeadShapeSize(3f);
link.setShape(LinkShape.Cascading);

For those rows, that are foreign keys but are not primary keys we add an icon:

try {
    File pathToFile = new File("res/fkey.png");
    Image image = ImageIO.read(pathToFile);
    if(fk_index > -1 && destination.getCell(0,fk_index).getImage() == null)
           destination.getCell(0,fk_index).setImage(image);
    } catch (IOException ex) {
         ex.printStackTrace();
} 

Here is what we have achieved so far:

The diagram is ready but needs a proper layout

The diagram is ready but needs a proper layout

II. Layout

Arranging such DB schema might be a challenging task when done manually but we’ll combine the impressive layout algorithms and arrangement features of the library to arrange the diagram 100% automatically.

A horizontal LayeredLayout provides a nice start. We specify the distance between the layers in the diagram and the nodes – the first two parameters. The last two are the left and top offset of the diagram from the edge of the document.

The diagram links can be arranged by a separate algorithm and we use this feature to polish the way they go around the tables.

 //re-route all links
 diagram.setLinkRouter(new GridRouter());
 diagram.routeAllLinks();

Another useful option is to render link crossings with arcs, which makes them much easier to follow.

//customize the links
diagram.setLinkCrossings(LinkCrossings.Arcs);
diagram.setRoundedLinks(true);
diagram.setRoundedLinksRadius(3);

Finally, the diagram must be updated:

//redraw the control
diagram.repaint();

With that our diagram is finished and it looks great:

The final version of the diagram.

The final version of the diagram.

You can download the complete sample from this link. The sample contains the sakila MySQL database with a PDF file with instructions how to install it if you haven’t already. You will need to have an installed and running MySQL server. Remember to change the login data in the DBConnection.java file to match your login credentials.

About Diagramming for Java Swing: MindFusion.Diagramming for Java Swing provides your Java application with all necessary functionality to create and customize a diagram. The library is very easy to integrate and program. There are numerous utility methods, rich event set, more than 100 predefined shapes. The tool supports a variety of ways to render or export the diagram, advanced node types like TreeView nodes, hierarchical nodes, tables, container nodes and many more. There are 15 automatic layouts, various input / output options and fully customizable appearance. A detailed list with JDiagram’s features is uploaded here. You can check the online demo to see some of the functionality implemented.

Diagramming for Java Swing is royalty free, there are no distribution fees. Licenses depend on the count of developers using the tool – check here the prices.

Database Schema with the Java Diagram Library – Part I

In this blog post we’ll build a database diagram reading the metadata of the sample MySQL database sakila.

Click here to watch the video that goes with these tutorials.

I. Configuration

For our sample to work we need to add the JDiagram.jar package to the project and a JDBC driver for MySQL. We download the JDBC driver from https://dev.mysql.com/downloads/connector/j/ and we add mysql-connector-java-5.1.40.jar to the libs folder of our project where we have placed JDiagram.jar.

The structure of the Class Diagram Java project.

The structure of the Class Diagram Java project.

II. Helper Classes

We create several helper classes that will handle the connection to the database and re-creation of the database metadata in a format which we can use to build the DB diagram.

1. We have created two classes for connecting to the sakila MySql database and reading the metadata. For the tables. In general we are interested in the names of the tables, the columns in them with column name, column data type and column data size. We also want the relationships in the database, with the primary and foreign keys. The classes that provide us with this information are DBConnection, which binds to the database and DBMetaData, which reads the database with the help of the DatabaseMetaData and ResultSet classes of the Java platform.
2. For the purpose of our project we have created two more classes. The first one represents a column in the database – DBColumn. It has just a few fields:

public class DBColumn {

    public String name;
    public String type;
    public String size;
    public boolean primaryKey;

The other class describes a relation in the database. It is equally simple:

public class DBRelation {

    public String pk_key;
    public String pk_table;

    public String fk_key;
    public String fk_table;

3. We have defined an ArrayList tables variable for the table names. We call the respective method of the DBMetaData class that reads the table names and populates the tables list.

III. UI Controls

We will use an instance of the Diagram class, a DiagramView control, a JScrollPane and a zoom control. What we want to show is a diagram pane that is scrollable both horizontally and vertically and a zoom control next to it.

We create the diagram and make sure it will resize itself when needed:

//diagram initialization
diagram = new Diagram();
diagram.setAutoResize(AutoResize.RightAndDown);

The diagram needs a diagramView to render itself onto. We create one and add it to a JScrollPane. The scroll pane provides the necessary scrollbars if the flowchart gets too big.

//initialize a diagramView that will render the diagram.
diagramView = new DiagramView(diagram);
diagramView.setVisible(true);

//use a scroll pane to host large diagrams
_scrollPane = new JScrollPane(diagramView);
_scrollPane.setVisible(true);
_scrollPane.setAutoscrolls(true);

The Java Diagram library provides a handful of auxiliary controls and in our sample we’ll use the Zoom control:

//provide a zoomer for the diagram
zoomer = new ZoomControl();
zoomer.setView(diagramView);
zoomer.setPreferredSize(new Dimension(70, 50));
zoomer.setVisible(true);

We use the setView() method to associate the zoom control with the diagramView. The BorderLayout algorithm helps us arrange the controls. First, we apply it on the JFrame ContentPane and then we align the zoom control to the right. Finally, we add the JScrollPane to the center, which lets it use all the available space left by the zoomer:

getContentPane().setLayout(new BorderLayout());
this.add(zoomer, BorderLayout.EAST);
this.add(_scrollPane, BorderLayout.CENTER);

IV. Creating the Tables

We first read the data for the DB columns and then for each table in the database we create a diagram TableNode.

ArrayList tableData = DBMetaData.getColumnsMetadata(tableName);

We use the Factory class of the diagram library:

Dimension tableSize = new Dimension(50, 30);
TableNode _table = diagram.getFactory().createTableNode(10, 10, 50, tableData.size() * 8, 4, tableData.size());
_table.setCaption("" + tableName + "");
_table.setId(tableName);

The createTableNode() method that we use takes as arguments the location of the table node, its width and height and the count of rows and columns. We use HTML formatting to make the caption of the table bold. For caption and for id of the tableNode we use the name of the table.

Since we need to use HTML styling on text in the diagram nodes we must specify:

diagram.setEnableStyledText(true);

Let’s add some more customization on the table nodes:

_table.setCaptionFormat(new TextFormat(Align.Center, Align.Center));
_table.setCaptionHeight(7f);
_table.setAllowResizeColumns(true);
_table.setShape(SimpleShape.RoundedRectangle);
_table.setBrush(new SolidBrush(new Color((int)204, (int)224, (int)255)));

The caption is aligned in the center and we increase slightly the default caption height. Then we allow users to resize table columns with the mouse and we change the table shape from rectangle to a rectangle with rounded edges. Finally, we color the table nodes with a light blue brush.

Note that once Factory creates a node it gets added to the DiagramNodes collection of the control automatically.
Now let’s populate the table with data:

int rowIndex = 0;

for(DBColumn column: tableData)
{
    _table.getCell(1, rowIndex).setText("" + column.name + "");
    _table.getCell(2, rowIndex).setText(column.type);
    _table.getCell(3, rowIndex).setText(column.size);

    //if the column is a primary key - set an image. If not, leave it empty.
    if(column.isPrimaryKey())
    {
        try {

            File pathToFile = new File("res/key.png");
            Image image = ImageIO.read(pathToFile);
            _table.getCell(0,rowIndex).setImage(image);


        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

    rowIndex++;

}

Here we cycle through all DBColumn objects that we have created using the database metadata. In each row in the table node we write the name of the database field, the data type and the data size. Note that we start with the second column (index 1) because the first one is reserved for an image of the primary or foreign key, if applicable. So far we have gathered information only for the primary key.

Since we want the image to occupy the first column we must make some adjustments to the TableNode and its size:

//adjust the size of the tables and columns.
_table.resizeToFitText(true);
Rectangle2D.Float t_size = _table.getBounds();
_table.getColumns().get(0).setWidth(7);
_table.resize(t_size.width + 7, t_size.height);
_table.resizeToFitImage();

First we use resizeToFitText to make the table auto calculate the size it needs based on the text it holds. This, unfortunately would not include space for the image, so we must correct it manually. We resize the first column with 7 pixels to allow the image to fit and we increase the size of the table as well. Then we call resizeToFitImage() to let the TableNode update its new size.

With that we finish the first part of our tutorial. Part II will walk you through the steps to create the relationships among the nodes and arrange the database diagram using the automatic layout algorithms provided with the Java Diagram library. Here is our diagram so far:

Java Database Schema: Tables

Java Database Schema: Tables

You can download the complete sample from this link. The sample contains the sakila MySQL database with a PDF file with instructions how to install it if you haven’t already. You will need to have an installed and running MySQL server. Remember to change the login data in the DBConnection.java file to match your login credentials.

The second part of this tutorial is here.

About Diagramming for Java Swing: MindFusion.Diagramming for Java Swing provides your Java application with all necessary functionality to create and customize a diagram. The library is very easy to integrate and program. There are numerous utility methods, rich event set, more than 100 predefined shapes. The tool supports a variety of ways to render or export the diagram, advanced node types like TreeView nodes, hierarchical nodes, tables, container nodes and many more. There are 15 automatic layouts, various input / output options and fully customizable appearance. A detailed list with JDiagram’s features is uploaded here. You can check the online demo to see some of the functionality implemented.

Diagramming for Java Swing is royalty free, there are no distribution fees. Licenses depend on the count of developers using the tool – check here the prices.

JS Chart: Getting Started

This is step-by-step tutorial on how to setup a JavaScript chart using MindFusion JS Chart library. In the sample here we will use a pie chart but the steps are applicable to any type of chart with small modifications.

The video for this tutorial is uploaded on YouTube at https://www.youtube.com/watch?v=kc1nNe4p770

I. The Web Page

Basically, our sample consists of an HTML file and a Scripts folder, which will hold all used *.js files. In the web page that will hold the control we add two JS references.

The first one is the config file:

<script type="text/javascript" src="Scripts/config.js">

We will define our chart in a PieChart.js file that we will place in the Scripts folder.

In the body of the file we create a div that holds a canvas.

The canvas renders the chart and we will access and use it in the JavaScript file. That’s why it is important that the canvas has an id.

II. Setup of the *.JS File

In the PieChart.js file we create a single method that will be responsible for building and customizing the chart:

define(["require", "exports", 'MindFusion.Charting'], function (require, exports, m) {
....
}

The first few lines define variables used to reference various chart namespaces:

var Charting = m.MindFusion.Charting;
var Controls = m.MindFusion.Charting.Controls;
var Collections = m.MindFusion.Charting.Collections;
var Drawing = m.MindFusion.Charting.Drawing;

III. General Chart Settings

We create the chart from the canvas in the HTML file.

var pieChart = new Controls.PieChart( document.getElementById('pieChart'));

Then we set a title for the chart and we increase the font size for the title:

pieChart.title = "Corporate Sales";
pieChart.theme.titleFontSize = 24;	

IV. Series

The pie chart holds a single PieSeries.. For it we need data, inner and outer labels.
The data is a list with numbers:

var values = new Collections.List([20, 30, 10, 40, 35]);

The labels are a list with strings. Here is how we create the series:

pieChart.series = new Charting.PieSeries( values, null, new Collections.List(["a", "b", "c", "d", "e"]));

If you run the chart now you’ll see the pie with labels painted in a light green color.

initial-js-chart

So, we need

V. Styling

The styling includes brushes for the pie pieces:

var brushes = new Collections.List([
new Drawing.Brush("#081b67"),
new Drawing.Brush("#cc2020"),
new Drawing.Brush("#7D7D7D"),
new Drawing.Brush("#67a6c7"),
new Drawing.Brush("#d0d0d0")
    ]);
var seriesBrushes = new Collections.List();
   seriesBrushes.add(brushes);

a single pie pen:

var pens = new Collections.List([
     new Drawing.Brush("#ffffff")
]);
var seriesPens = new Collections.List();
 seriesPens.add(pens);

a thickness for the pie pen:

var thicknesses = new Collections.List([
        15
		
]);

var seriesThicknesses = new Collections.List();
seriesThicknesses.add(thicknesses);

and a DashStyle for it:

var dashStyles = new Collections.List([
        Drawing.DashStyle.Solid
]);
var seriesDashStyles = new Collections.List();
  seriesDashStyles.add(dashStyles);

We could have set different pens, thicknesses and DashStyle for each pie piece, but we want all the pieces to be outlined with a single pen.

Note that those settings are of type array and are nested in another array. That is because the styling might apply to multi-series charts and each array is responsible for styling the elements of each series.

In our sample we style the pie chart with a PerElementSeriesStyle object, which we assign to the seriesStyle property:

pieChart.plot.seriesStyle = new Charting.PerElementSeriesStyle(seriesBrushes, seriesPens, seriesThicknesses, seriesDashStyles);

VI. Legend

The legend needs to be styled – the background, border and title need to be specified and customized to make it look better.

The legend title is a property of the chart.

pieChart.legendTitle = "Period";

The styling settings for a legend can be accessed through the theme property:

pieChart.theme.legendBackground = new Drawing.Brush("#ffffff");
pieChart.theme.legendBorderStroke = new Drawing.Brush("#cecece");
pieChart.theme.legendBorderStrokeThickness = 1.0;
pieChart.theme.legendTitleFontSize = 16;

The legend label is read from the title of each series in the chart. In our case we use:

pieChart.series.title = "2016";

With this our chart is complete. A hint: if you want to make the pie labels from inner to outer, you just need to change the position of the null value in the PieSeries constructor.

JS Pie Chart

JS Pie Chart

Download Sample

MindFusion JS Chart is an interactive library for charts and gauges written purely in JavaScript. It supports all common chart types, multiple series, custom data,financial charts, a large selection of gauges and rich styling capabilities. The elegant architecture of the library allows you to create dashboards, charts with multiple different types of series in a single plot, unlimited number of axes, reusable styling themes, various oval and linear gauges. The innovative approach to data lets you define your own data classes by implementing a single interface.
The library also boasts a rich event set, zoom, pan, dragging of the legend and a set of many popular gauges. It is designed and implemented to provide JS developers with the perfect tool to create beautiful, interactive dashboards fast and easy. Download trial directly at http://mindfusion.eu/JavaScript.Chart.zip Get your license today at http://www.javascript-chart-buy.html

Lane diagram in JavaScript

In this post we will show how to use the JavaScript diagram library to create a lane diagram. The complete example is available here:

Lanes.zip

Create a new HTML page and add references to the jQuery library and to the MindFusion.Diagramming library:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="MindFusion.Common.js" type="text/javascript"></script>
<script src="MindFusion.Diagramming.js" type="text/javascript"></script>

Create shortcuts to some classes from the diagram model:

var Events = MindFusion.Diagramming.Events;
var Diagram = MindFusion.Diagramming.Diagram;
var AnchorPattern = MindFusion.Diagramming.AnchorPattern;
var AnchorPoint = MindFusion.Diagramming.AnchorPoint;
var Alignment = MindFusion.Diagramming.Alignment;
var MarkStyle = MindFusion.Diagramming.MarkStyle;
var Style = MindFusion.Diagramming.Style;
var Theme = MindFusion.Diagramming.Theme;
var LinkShape = MindFusion.Diagramming.LinkShape;
var Shape = MindFusion.Diagramming.Shape;
var LaneGrid = MindFusion.Diagramming.Lanes.Grid;
var LaneHeader = MindFusion.Diagramming.Lanes.Header;
var LaneStyle = MindFusion.Diagramming.Lanes.Style;
var Rect = MindFusion.Drawing.Rect;
var Point = MindFusion.Drawing.Point;
var HandlesStyle = MindFusion.Diagramming.HandlesStyle;

Next, add a canvas the the page and create a diagram from it by using the Diagram.create() method:

diagram = Diagram.create($("#diagram")[0]);

You can obtain a reference to the diagram lane grid by calling the Diagram.getLaneGrid() method. You can use the returned object to add rows and columns to the grid and customize its appearance. Finally, to display the grid, call Diagram.setShowLaneGrid(). The customization is omitted here for brevity, but the full code is available in the associated sample project.

The lane grid implies some restrictions to the node and links inside of it. For example, the nodes can be moved only inside the row lanes of the grid. To enforce those restrictions, we will handle several diagram events:

diagram.addEventListener(Events.nodeCreated, onNodeCreated);
diagram.addEventListener(Events.nodeModified, onNodeModified);
diagram.addEventListener(Events.linkCreated, onLinkCreated);

In the nodeCreated event handler, get the gird cell at the top left of the node’s bounding rectangle and align the node to this cell:

function onNodeCreated(sender, e) {
    var node = e.getNode();
    node.setAnchorPattern(pattern);
    node.setHandlesStyle(HandlesStyle.HatchHandles3);

    // Place the box within the grid
    var bounds = node.getBounds();
    var topLeft = new Point(bounds.x, bounds.y);

    var cellBoundsReciever = {};
    if (!grid.getCellFromPoint(topLeft, cellBoundsReciever))
        return;
    var cellBounds = cellBoundsReciever.cellBounds;

    var pixel = 1;

    bounds.y = cellBounds.y + pixel;
    bounds.height = cellBounds.height - 2 * pixel;
    node.setBounds(bounds);
}

Similar rules can be applied to the links in the linkCreated event handler.

The following image illustrates the grid in action:

JavaScript Swimlane Diagram

For more information on MindFusion JavaScript diagram library, see its help reference and overview page.

Enjoy!