Ticket Booking System (Continued)

In part I of the Ticket Booking System blog post we discussed the controls used in the software and how we generate and arrange the hall seats. Now let’s get deeper into the details on how we retrieve the data and how we customize the controls.

We use the Entity Framework and the Entity Data Model wizard to connect to our MS SQL database and retrieve the ticket data. Here is the model of the database:

Event Booking Software: MS SQL Database Model

Event Booking Software: MS SQL Database Model

I. The Database

We have a table for the event type (ballet, concert, opera etc.), a table for the events (Swan Lake ballet, Mozart concert, La Traviata oepra etc.), a table for the performances (an event with a date) and a table for the tickets that were sold. The performance table has a column for the base price of the tickets. The hall is divided into 3 sections according to the price of the tickets – the Performance table stores the price for the cheapest category. The other two categories are calculated according to the base price.

II. Events

We keep a class variable for the EventsTicketsEntities, which we initialize in the Form1 constructor:


public partial class Form1 : Form
{
   EventsTicketsEntities records;
   double basePrice;

   public Form1()
   {
      InitializeComponent();
      records = new EventsTicketsEntities();
      .................
}

The events are instances of the Appointment class of the Calendar. Here is the method that we use to create the Appointment-s based on the data from the database:


private void loadEvents()
{         

  List performances = records.Performances.ToList();     

  foreach (Performance p in performances)
   {
      Appointment app = new Appointment();
      app.StartTime = (DateTime)p.Date;
      app.EndTime = app.StartTime.AddHours(2.0);           
      app.HeaderText = "";
      app.DescriptionText = p.Event.Title;
      app.Tag = p.Event.EventType_Id;
      app.Style.Brush = getBrush((int)app.Tag);
      calendar.Schedule.Items.Add(app);

     }
}
	

We read all records in the Performances table and create an Appointment for each one. The start date of the event is the field from the database. We add to it 2 hours as duration, otherwise the event wouldn’t show up. The brush of the Appointment depends on the type of the event. The appointment does not show any text, but the event title serves as a description. As a rule the calendar control renders an Appointment‘s description as a tooltip when the user hovers the item.

The schedule item description is rendered as a tooltip

The schedule item description is rendered as a tooltip

III. Hall Seats

In order to identify the location of a seat we assign an instance of the Seat structure as an Id to the ShapeNode that represents the seat.

public struct Seat
{
  public Seat (int row, int column)
   {
     this.Row = row;
     this.Place = column;
   }

  public int Row
   {
     get; set; 
   }

 public int Place
   {
       get; set;
   }

}

We also include a rowStart parameter in the CreateSection method. The parameter keeps track of the total count of seats being generated. This allows each seat to have a unique row number:

	

void CreateSection(int rowStart, int[] seatsPerRow,
    float topY, float seatWidth, float seatHeight,
     float xPadding, float yPadding, float arcRadius)
{
        .................		
 
        seat.Id = new Seat(rowStart + r, s);
        seat.Tag = calcSeatCoeff((Seat)seat.Id);	

}

The Seat tag of the ShapeNode is calculated based on its location in the hall. It is the coefficient, which multiplied by the base price for this performance gives us the final price for this seat.

Each time a new performance is selected on the calendar, our application must refresh the seat info. Here is the method that takes care of the seat colors:

//clears the X sign at an occupied seat
private void updateSeats( double basePrice )
{
  foreach( var seat in diagram.Nodes)
  {
     (seat as ShapeNode).Text = "";
     if (seat.Tag != null)
      {
        seat.Brush = getSeatBrush(basePrice * (double)seat.Tag);
       }
  }
}

The method calculates the price of the seat and checks the color that corresponds to this price. Whenever a seat is clicked, the application marks it as selected. This is done by drawing an “X” as text on the ShapeNode using a large Font size:

Seat seatInfo = (Seat)seat.Id;
TICKETS_SOLD _ticket = new TICKETS_SOLD() { };
_ticket.Id = records.TICKETS_SOLD.ToList().Count;
_ticket.Performance_Id = (int)calendar.Tag;
_ticket.Row_Index = seatInfo.Row;
_ticket.Seat_Index = seatInfo.Place;
records.TICKETS_SOLD.Add(_ticket);
                        
try
    {
      records.SaveChanges();

    }
catch (DbEntityValidationException ex)
    {
      Debug.WriteLine(ex.Message);
    }
    seat.Text = "X";

We create a new TICKETS_SOLD record, which contains a unique Id for the sold ticket, an Id for the performance, and the location of the seat (row and column). There is something more to that. When the user tries to click on a seat that is already sold we want to warn him that it is not possible to buy the seat. This is done by having a special node that stays hidden and shows up for a few seconds only to warn the user:

private void generateOccupiedNode()
  {
    float x = diagram.Bounds.Left + diagram.Bounds.Width / 2 - 50;
    float y = diagram.Bounds.Top + diagram.Bounds.Height / 2 - 30;

    RectangleF nodeBounds = new RectangleF(x, y, 100, 60);
    ShapeNode node = diagram.Factory.CreateShapeNode(nodeBounds);
    node.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(100, 206, 0, 0));            
    node.Font = new Font("Arial", 26);
    node.TextBrush = new MindFusion.Drawing.SolidBrush(Color.Black);
    node.Visible = false;
    node.Shape = Shapes.RoundRect;
    node.Id = "Occupied";

  }
		

The seat is rendered in the middle of the diagram’s visible area and has a semi – transparent background. We use a timer to track the seconds when the node is displayed:


private void diagram_NodeClicked(object sender, NodeEventArgs e)
 {
   ShapeNode seat = e.Node as ShapeNode;
   if(seat != null)
     {
       if(seat.Text == "X")
        {
           ShapeNode warning = (ShapeNode)diagram.FindNodeById("Occupied");

          if(warning != null)
          {
             warning.Text = "This Seat is Occupied!";
             Timer timer = new Timer();
             timer.Interval = 2500;
             timer.Tick += Timer_Tick;
             warning.Visible = true;
             timer.Start();
          }
        }
	...........
	
}

We then find the node and make it invisible again:


private void Timer_Tick(object sender, EventArgs e)
  {
    ShapeNode warning = (ShapeNode)diagram.FindNodeById("Occupied");
    warning.Visible = false;
}
     

With this we have covered the basic methods that build the Event Ticket Reservation Software. Here is the final version:

Event Booking System in WinForms

Event Booking System in WinForms

The full source code of the application together with the sample database is available for direct download from here:

Event Ticket Booking System – Download

The sample uses the Diagramming and Scheduling controls from the MindFusion WinForms Pack. If you have questions regarding the sample or the components do not hesitate to post them on the MindFusion discussion board.

A Poll Chart: A Stacked Bar Chart in Java Swing that Represents Results of a Survey – II

Here is a link to Part I: Overview of chart elements, the dashboard, plot and axes.

I. Bars Rendering

The bar graphics is rendered by a BarStackRenderer. It requires a collection of Series and we add four:

private ObservableList createSeries()
   {
      // Important series
	BarSeries series1 = new BarSeries(
	Arrays.asList(40.0, 30.0, 52.0, 62.0),
	Arrays.asList("20%", "15%", "26%", "31%"),
	null /* no top labels */);
        
        ............

  }

Each BarSeries has a list with the data, a list with the inner labels and no top labels. The BarStackRenderer renders in a single bar the values from the same index in each BarSeries e.g. the first bar renders the first double value in all BarSeries, the second bar renders the values on the second position in the series and so on. The BarRenderer itself has a few customizations:

barRenderer = new BarStackRenderer (createSeries());
barRenderer.setHorizontalBars(true);
barRenderer.setBarSpacingRatio(0.3);
barRenderer.setYAxis(yAxis);
barRenderer.setXAxis(xAxis);
barRenderer.setShowDataLabels(EnumSet.of(LabelKinds.InnerLabel));
barRenderer.setLabelFontSize(12.0);

Let’s not forget to add it to the Plot2D:

plot.getSeriesRenderers().add(barRenderer);

 

II. The Annotations

The labels at the X and Y axis are actually annotations – they are created by AnnotationRenderer instances. An AnnotationRenderer needs a collection of Series. For the Y-axis we use a SimpleSeries instance, which is created and used for the annotations and does not provide data for the bars:

private ObservableList createAxisLabels()
{
   return FXCollections.observableList(Arrays.asList(
	new SimpleSeries(null, null)
	{
        	public String getLabel(int index, LabelKinds kind)
		{
			return axisLabels[index];
		}
	
		public double getValue(int index, int dimension) { return index; }
			
		public int getSize() { return axisLabels.length; }

		public int getDimensions() { return 1; }

		public EnumSet getSupportedLabels() {
	        	return EnumSet.of(LabelKinds.YAxisLabel);
		}
				
		final String[] axisLabels = {
			"Accomodation", "University\nLocation", "Tuition\nPrice", "Quality of\nEducation" };
		}
	));
}

Here we indicate that this SimpleSeries provides labels for the YAxis with the getSupportedLabels override, which in our case returns LabelKinds.YAxisLabel. The label is returned by the getLabel method.

The annotations on the X-axis are rendered by a special class called CustomBarSeries. We implement the Series interface to return a set of predefined labels for each data value in this series:

public CustomBarSeries(List values, List innerLabels, List topLabels) {
	super(values, innerLabels, topLabels);
		
	this._values = values;
	double sum = 0;
	_stackedValues = new ArrayList(values.size());
		
	for(double val : values)
	{
	   sum += val;
	  _stackedValues.add(sum);
	}
	this._innerLabels = innerLabels;
	
}

We also take into consideration that the values rendered by the bar chart where this class is used are stacked – so we sum them and return the summed value when asked:

public double getValue(int index, int dimension) { 
		
	if( dimension == 0)
	  return _stackedValues.get(index);
	
        return _values.get(index);			
}

Then we return the predefined label at the given position and :

public String getLabel(int index, LabelKinds kind)
  {
	if(kind.equals(LabelKinds.InnerLabel))
	{
		return _innerLabels.get(index);
	}

	//else return the labels
	return axisLabels[index];
}
	
       final String[] axisLabels = {
		"Very Important", 
		"Somewhat\nImportant", "Slightly\nImportant", 
		"Not\nImportant" };

We create an instance of this CustomBarSeries and we assign it to the new AnnotationRenderer, that is responsible for the labels at the X-axis:

List sl = new ArrayList();
	sl.add(new CustomBarSeries(
	        Arrays.asList(25.0, 50.0, 50.0, 50.0),
		null,
		null));
	javafx.collections.ObservableList olss = FXCollections.observableList(sl);
	annotationRenderer1 = new AnnotationRenderer(olss);
	annotationRenderer1.setSeries(olss);

Let’s not forget to bind the AnnotationRenderer to the X-axis:

annotationRenderer1.setXAxis(xAxis);
annotationRenderer1.setShowDataLabels(EnumSet.of(LabelKinds.XAxisLabel));

Here is the final chart:

A stacked bar chart in Java Swing

Poll chart in Java Swing

That’s the end of this tutorial. Here is the link to download the full sample.

Download The Stacked Bar Chart in Java Sample

About Charting for Java: MindFusion.Charting for Java Swing is a multipurpose graphics library that lets you create and customize a large variety of chart types: bar, column, pie, doughnut, radar, polar etc., candlestick financial charts, gauges and dashboards with dynamic layout of their components. The library boasts a smart API which lets you combine and arrange multiple lots, axes, legends, images and other chart components. The chart appearance can be customized on multiple levels – from properties applied on a single element to global themes reused by all charts and series. Charts use a uniform Series interface for reading data and labels. You can implement the interface and create custom Series that matches your data source. Written in pure Java, this tool provides every type of Java Swing application with powerful charting capabilities. Read more about the component from here.

Ticket Booking System

In this blog post we will create a sample ticketing software that will allow users to select events and book tickets for them. We will use the MindFusion Diagramming and Scheduling components for WinForms. The tutorial is divided int two parts:

I. The Controls

We create a WinForms application in VisualStudio and add a new folder ‘Assemblies’ with the dll-s that we want to use. There we copy:

  • MindFusion.Common.dll
  • MindFusion.Common.WinForms.dll
  • MindFusion.Diagramming.dll
  • MindFusion.Diagramming.WinForms.dll
  • MindFusion.Licensing.dll
  • MindFusion.Scheduling.dll

Then we click on the Toolbox pane -> Choose Items -> Browse and we add the MindFusion.Diagramming.WinForms and MindFusion.Scheduling dll-s. They add a list of components, but we select the DiagramView and the Calendar controls and drop them onto the form. The DiagramView creates automatically the diagram instance that it renders.

II. The Hall Layout

The hall layout is rendered by the flowchart control. We use a special method that we’ve named CreateSection to create and arrange a section in the hall. The declaration of the method is:

void CreateSection(int[] seatsPerRow,
            float topY, float seatWidth, float seatHeight,
            float xPadding, float yPadding, float arcRadius)

We provide the method with an array of integers that indicate the number of seats on each row in the section. Then is the offset to the top and the size of each seat. The xPadding and yPadding arguments indicate the space between two adjacent seats. The last argument indicates how curved the row of seats is.

What the method generally does is calculate the location of each seat and generate a node with these coordinates and given size:

 float y = topY;
     for (int r = seatsPerRow.Length - 1; r >= 0; r--)
        {
           var c = new PointF(0, y + arcRadius);
           int seats = seatsPerRow[r];
           float rowWidth = seats * seatWidth + (seats - 1) * xPadding;
           float x = -rowWidth / 2;
     
           for (int s = 0; s  0)
                  {
                     float angle = 0;
                     float radius = 0;
                     MindFusion.Geometry.Geometry2D.Convert.CartesianToPolar(
                         c, new PointF(x, y), ref angle, ref radius);
                     adjustedY = c.Y - arcRadius * Math.Sin(angle * Math.PI / 180);
                  }
                 diagram.Factory.CreateShapeNode(
                     x, (float)adjustedY, seatWidth, seatHeight);
                     x += seatWidth + xPadding;
               }
               y += seatHeight + yPadding;
           }

The nodes are created with Factory.CreateShapeNode method which uses the Factory helper class of the diagram component. The CreateShapeNode method creates and adds the newly created nodes to the Nodes collection of the diagram.

III. The Calendar

The default settings of the Scheduling control give us exactly the month view with events we want to get. However we still need to add some customizations:

First, we won’t allow users to perform in-place edit of events on the calendar:

calendar.AllowInplaceEdit = false;

Then we will change the brushes for the calendar items and will hide the clock icons that appear at the header of events:

calendar.ItemSettings.Size = 10;            
calendar.ItemSettings.ShowClocks = MindFusion.Scheduling.WinForms.ShowClocks.Never;
calendar.ItemSettings.Style.Brush = new MindFusion.Drawing.SolidBrush (Color.FromArgb(102, 154, 204));
calendar.ItemSettings.Style.BorderBottomColor = calendar.ItemSettings.Style.BorderLeftColor =
                calendar.ItemSettings.Style.BorderRightColor = calendar.ItemSettings.Style.BorderTopColor = Color.FromArgb(192, 192, 192);
calendar.ItemSettings.SelectedItemStyle.Brush = new MindFusion.Drawing.SolidBrush (Color.FromArgb(206, 0, 0));
calendar.Selection.SelectedElementsStyle.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(224, 233, 233));

Now let’s create a few items:

Appointment event1 = new Appointment();
event1.StartTime = new DateTime(2017, 5, 2, 16, 0, 0);
event1.EndTime = new DateTime(2017, 5, 2, 18, 30, 0);
event1.HeaderText = "";
event1.DescriptionText = "Swan Lake";
event1.Tag = EventType.Ballet;
event1.Style.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(102, 154, 204));

calendar.Schedule.Items.Add(event1);

Our Appointment-s have a start and end time, description, brush according to the EventType and tag that indicates the type of event that is rendered. It would be nice to have tooltips that provide details about the event:

calendar.ShowToolTips = true;

This turns on tooltips on all calendar items. We want tooltips just on our events so we use the TooltipDisplaying event to hide the tooltips on items that are not events:

calendar.TooltipDisplaying += Calendar_TooltipDisplaying;
.....

}

private void Calendar_TooltipDisplaying(object sender, MindFusion.Scheduling.WinForms.TooltipEventArgs e)
{
  if(e.Element.GetType() != typeof(Appointment))
     {
       e.Tooltip = "";
     }
}

Here is a screenshot of the event ticketing system so far:

Event Ticket System with MindFusion WinForms Controls

Event Ticket System with MindFusion WinForms Controls

A download of the project with all necessary dll-s is available from this link:

Ticket Booking System in WinForms

The Scheduling for WinForms and Diagramming for WinForms components are part of MindFusion WinForms control suite – the perfect set of tools to help you build any type of WinForms software fast and easy. Find out more about MindFusion WinForms pack here.

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

This is the second part of MindFusion step-by-step tutorial on how to create a Java application that reads the contents of a *.jar file and renders class diagram of its API. In the previous blog post we looked at the UI elements that build the application – the UI, the legend panel, the diagram elements. Now we continue with reading the class data and building the class diagram.

I. Reading the Data

The data that we need – the name of the API member, its fields, its type – enum, class, interface as well inherited classes – is stored in a helper class that we’ve created for the purpose and that is called MemberInfo.java. It is a simple class that does nothing else than storing data:

 public MemberInfo( String name, String fullName )
    {
        this.name = name;
        this.fullName = fullName;

        //lists for the methods, fields and constructors.
        methods = new ArrayList();
        fields = new ArrayList();
        constructors = new ArrayList();
        inheritsFrom = "";
        packageName = "";
        isInterface = false;
        isEnum = false;
    }

There is a list with the methods, fields and constructors, as well properties for the name of the package, the class this class inherits from as well boolean values that indicate if this is an enum or interface.

For reading the data we use only classes and methods from the official Java packages – no third party tools or libraries:

      try
        {
            //try to open the jar
            JarFile jarFile = new JarFile(pathToJar);

            //explore the elements found in the *.jar.
            Enumeration e = jarFile.entries();

            URL[] urls = {new URL("jar:file:" + pathToJar + "!/")};
            URLClassLoader cl = URLClassLoader.newInstance(urls);
            //if a class is found - read its data
            while (e.hasMoreElements())
            {
                JarEntry je = e.nextElement();
                if (je.isDirectory() || !je.getName().endsWith (".class")) {
                    continue;
                }
                // -6 because of .class file extension.
                String className = je.getName().substring(0, je.getName().length() - 6);
                className = className.replace('/', '.');
                .....

In a cycle we read all classes in the jar, parse the data we are interested in and filter data that is no relevant to us – private methods, abstract classes etc. The data we acquire for each class is stored in a new MemberInfo object that we add to a collection.

II. Diagram Elements

The diagram elements that we use to render each class are TableNode-s. We use the caption field to show the name of the class. In addition, we use the capabilities of the Java diagram library to render formatted text and add to the caption the name of the package – drawn on a new line.

            //create the TableNode
            TableNode _table = diagram.getFactory().createTableNode(10, 10, 5, 5, 2, info.memberCount());
            //set the name of the member and the package as table caption.
            String caption = "<b>" + info.getName() + "</b>";
            if(info.getPackageName().length() &gt; 0)
                caption += "\n" + info.getPackageName();
            _table.setCaption(caption);
            //center the caption
            _table.setCaptionFormat((new TextFormat(Align.Center, Align.Center)));
            //increase the default caption height
            _table.setCaptionHeight(10f);
           .....

It is important to note here that we add an identifier for each table – this will help us find the right TableNode when we later create connections:


 _table.setId(info.getFullName());

By default TableNode-s are drawn with blue. We check if the current object is enum or interface and change the color scheme accordingly:

            //add enums to the list and paint them green
            if(info.isEnum()) {
                _table.setBrush(new SolidBrush(new Color((int) 210, (int) 250, (int) 208)));
                enums.add(_table);
            }//add interfaces to the list and paint them yellow
            else if(info.isInterface()) {
                _table.setBrush(new SolidBrush(new Color((int) 250, (int) 235, (int) 140)));
                interfaces.add(_table);
            }
            else //the class nodes are blue
                _table.setBrush(new SolidBrush(new Color((int)197, (int)223, (int)238)));

Then we add table rows for the constructors, methods and fields. Each row has a cell for the image and for the definition of the member:

            //fill the first cells with data for the constructors.
            for (String constructor : info.getConstructors())
            {
                _table.getCell(0, index).setImage(constructorImage);
                _table.getCell(1, index).setText(constructor);
                index++;
            }

Finally, we look at all MemberInfo objects and draw DiagramLink between each class and the class it derives from, if any:

  for (MemberInfo info : membersList)
        {
            if(!info.getParent().isEmpty())
            {
                DiagramNode node = diagram.findNodeById (info.getFullName());
                DiagramNode parent = diagram.findNodeById( info.getParent());

                //add inheritance link
                if(node != null &amp;&amp; parent != null)
                {
                    DiagramLink link = diagram.getFactory ().createDiagramLink(node, parent);

                .......

III. Containers

Interfaces and enums are drawn in groups at the end of the TableNode-s for classes. This is done using ContainerNode-s. First, we calculate the dimensions of the ContainerNode by measuring all TableNode-s that must fit into it:

            //calculate the location of the node
            int side = (int)Math.ceil(Math.sqrt(tables.size()));
            int rows = (int)Math.ceil((double)tables.size() / side);
            double singleWidth = tables.get(0).getBounds().getWidth();
            double width = 5 * (side + 1) * coef + singleWidth * side;
            double height = (5 * (rows + 1) + 5) * coef;

            double[] rowHeights = new double[rows];
            for (int i = 0; i &lt; tables.size(); i++)
                rowHeights[i / side] = Math.max(tables.get(i).getBounds().getHeight(), rowHeights[i / side]);

            for (double h : rowHeights)
                height += h;


            //initialize the container
            ContainerNode b = diagram.getFactory().createContainerNode (0, 0, width, height);
            ....

Here the variable tables is a list with the TableNode-s that must fit into the container. After the ContainerNode is created, the tables must be added and positioned in it:

            int index = 0;
            for (TableNode e : tables)
            {
                b.add(e);

                double x = (index % side) * (5 + singleWidth);
                double y = 0;

                for (int r = 0; r &lt; index / side; r++)
                    y += 5 * coef + rowHeights[r];

                //adjust the size of the node
                e.setBounds(new Rectangle2D.Double(x + 5 * coef, y + 10 * coef,                   e.getBounds().getWidth(), e.getBounds ().getHeight()));

                index++;
            }

Finally we adjust the appearance of the ContainerNode to make it look better and in line with the TableNode-s:

            //customize the container
            b.setCaption(name);
            b.setCaptionFormat((new TextFormat(Align.Center,  Align.Center)));
            b.setHandlesStyle( HandlesStyle.HatchHandles3 );
            b.setFont(new Font("Verdana", Font.BOLD, 4));
            b.setIgnoreLayout(true);
            b.setTag(tag);
            //no shadow
            b.setShadowOffsetX(0f);
            b.setShadowOffsetY(0f);

It’s important to note that the bounds of the container must be updated for the changes to take effect:

            //update the container size.
            b.updateBounds();

IV. Diagram Layout

The last part of the application deals with diagram layout. This is very important because in the common scenario we expect to read *.jar files with tens of classes and proper visual arrangement of the flowchart is the key to its usability.

We decide to use the TreeLayout, which is meant exactly to arrange diagrams with nodes on several levels as we expect the class hierarchies to be. It is easy to apply the layout – we create an instance of it and after setting some initial customization we call its arrange method:

         TreeLayout layout = new TreeLayout();

        //the layout type is Centered
        layout.setType(TreeLayoutType.Centered);
        //allow reversed links
        layout.setReversedLinks(true);
        //the type of links will be cascading
        layout.setLinkStyle(TreeLayoutLinkType.Cascading3);
        //specify the distance between levels of tree nodes
        layout.setLevelDistance(25);
        //groups must be preserved.
        layout.setKeepGroupLayout(true);

        layout.arrange(diagram);

It is easy to understand the type of the settings we’ve used – thanks to the self-explanatory names of the layout class you can see that we specify that the TreeLayout will be centered, the links will be reversed, then we change the link style and the distance between levels. Finally, we specify that the layout of groups must be preserved.

The interesting part is at the end. We must find the ContainerNode-s with the enums and interfaces and move them to the end of the diagram. Here is how:

        // Place enums and delegates at the end
        DiagramNode enums = diagram.findNode(":enums");
        DiagramNode delegates = diagram.findNode(":interfaces");

        double x = 0;
        //calculate the location of each node to find out the last one
        for (DiagramNode node : diagram.getNodes())
        {
        	if (node instanceof TableNode)
            {
        		x = Math.max(x, node.getBounds().getX() +  node.getBounds().getWidth());
            }
        }

        //move enums to the right of the last class node.
        if (enums != null)
        {
            enums.moveTo((float)x + 5f, (float)5);
            x = enums.getBounds().getX() + enums.getBounds().getWidth ();
        }

        if (delegates != null)
        {
            delegates.moveTo((float)x + 5, 5);
        } 

We cycle through each TableNode and always move the containers to the end of the rightmost TableNode that we find. Let’s not forget to resize the diagram after we are done:

 
diagram.resizeToFitItems(5);

With this our application is ready and we test it with an arbitrary *.jar file. Here is the result:

Class Diagram Application in Java

Class Diagram Application in Java

You can download the complete source code of the sample from here:

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.

Collaborative drawing with MindFusion.Diagramming and SignalR

In this post we’ll show how to use the ASP.NET MVC diagram library and SignalR to implement collaborative drawing of diagrams. This can be useful in visual planning tools where users work together on a task, such as project management or mind-mapping applications.

The complete sample project is available here –
CollabMindMap.zip

Start by creating an ASP.NET MVC application in Visual Studio. Open Tools -> Library Package Manager -> Package Manager Console and install the MindFusion.Diagramming.Mvc package –

Install-Package MindFusion.Diagramming.Mvc 

While we are there, also install the SignalR package –

install-package Microsoft.AspNet.SignalR

From the project’s context menu, Add submenu, select OWIN startup class and add SignalR to the OWIN pipeline by calling –

app.MapSignalR();

Now lets add a diagram view to the home page at Views/Home/Index.cshtml, load the necessary script files and wire up diagram event handlers that will send change notifications to the hub –

@using MindFusion.Diagramming
@using MindFusion.Diagramming.Mvc

@{
    var diagView = new DiagramView("diagramView")
        .NodeCreatedScript("onNodeCreated")
        .NodeModifiedScript("onNodeModified")
        .NodeTextEditedScript("onNodeTextEdited")
        .LinkCreatedScript("onLinkCreated")
        .LinkModifiedScript("onLinkModified")
        .LinkTextEditedScript("onLinkTextEdited")
        .ControlLoadedScript("onDiagramLoaded")
        .SetAllowInplaceEdit(true);

    diagView.Diagram.DefaultShape = Shapes.Ellipse;
}

@Html.DiagramView(diagView, new { style = "width:700px; height:600px;" })

@section scripts
{
    @Scripts.Render("~/Scripts/jquery.signalR-2.0.0.js")
    @Scripts.Render("~/Scripts/MindMap.js")
    @Scripts.Render("~/signalr/hubs")
}

The hub will synchronize operations done on the diagram by one client by sending a notification to all other connected clients. From the project context menu add a SignalR hub class, naming it DiagramHub. The model class we’ll use to describe node changes looks like this –

public class NodeModel
{
    [JsonProperty("x")]
    public double X { get; set; }

    [JsonProperty("y")]
    public double Y { get; set; }

    [JsonProperty("width")]
    public double Width { get; set; }

    [JsonProperty("height")]
    public double Height { get; set; }

    [JsonProperty("id")]
    public string Id { get; set; }

    [JsonProperty("text")]
    public string Text { get; set; }
}

Add these three methods to the hub class to synchronize node creation, move, resize and edit-text operations –

public void NodeCreated(NodeModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).nodeCreated(clientModel);
}
public void NodeModified(NodeModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).nodeModified(clientModel);
}
public void NodeTextEdited(NodeModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).nodeTextEdited(clientModel);
}

The diagram event handlers in MindMap.js fill in the model objects and call respective hub methods –

function onNodeCreated(s, e)
{
    var hubId = $.connection.hub.id;
    e.node.id = hubId + s.getItems().length;

    var r = e.node.bounds;
    var model =
    {
        id: e.node.id,
        x: r.x,
        y: r.y,
        width: r.width,
        height: r.height
    };
    
    diagramHub.server.nodeCreated(model);
}

function onNodeModified(s, e)
{
    var r = e.node.bounds;
    var model =
    {
        id: e.node.id,
        x: r.x,
        y: r.y,
        width: r.width,
        height: r.height
    };
    diagramHub.server.nodeModified(model);
}

function onNodeTextEdited(s, e)
{
    var model =
    {
        id: e.node.id,
        text: e.getNewText()
    };
    diagramHub.server.nodeTextEdited(model);
}

Handle notifications sent from server to clients by updating the diagram from received model objects –

$(function ()
{
    diagramHub = $.connection.diagramHub;
    diagramHub.client.nodeCreated = function (model)
    {
        var node = diagram.factory.createShapeNode(
            model.x, model.y, model.width, model.height);
        node.id = model.id;
    };
    diagramHub.client.nodeModified = function (model)
    {
        var node = findNode(model.id);
        node.setBounds(
            new MindFusion.Drawing.Rect(
                model.x, model.y, model.width, model.height),
            true);
    };
    diagramHub.client.nodeTextEdited = function (model)
    {
        var node = findNode(model.id);
        node.setText(model.text);
    };
    $.connection.hub.start();
});

Finally add these helper functions for finding items and storing a global diagram reference –

function onDiagramLoaded(s, e)
{
    diagram = s;
}

function findNode(id)
{
    for (var i = 0; i < diagram.nodes.length; i++)
    {
        var node = diagram.nodes[i];
        if (id == node.id)
            return node;
    }
    return null;
}

function findLink(id)
{
    for (var i = 0; i < diagram.links.length; i++)
    {
        var link = diagram.links[i];
        if (id == link.id)
            return link;
    }
    return null;
}

Start several copies of the application in separate browser instances on your system (or even on different machines if you publish it on IIS or Azure). Now start drawing nodes, moving them or editing their text – changes done on the diagram in one browser will be immediately reflected in all other browsers connected to the hub. However we aren’t yet synchronizing link operations; lets fix that –

public class LinkModel
{
    [JsonProperty("id")]
    public string Id { get; set; }

    [JsonProperty("originId")]
    public string OriginId { get; set; }

    [JsonProperty("destinationId")]
    public string DestinationId { get; set; }

    [JsonProperty("text")]
    public string Text { get; set; }
}

Add following hub methods in server class –

public void LinkCreated(LinkModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).linkCreated(clientModel);
}
public void LinkModified(LinkModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).linkModified(clientModel);
}
public void LinkTextEdited(LinkModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).linkTextEdited(clientModel);
}

Call them from respective JavaScript handlers of diagram link events –

function onLinkCreated(s, e)
{
    var hubId = $.connection.hub.id;
    e.link.id = hubId + s.getItems().length;

    var model =
    {
        id: e.link.id,
        originId: e.link.getOrigin().id,
        destinationId: e.link.getDestination().id,
    };
    
    diagramHub.server.linkCreated(model);
}

function onLinkModified(s, e)
{
    var hubId = $.connection.hub.id;
    var model =
    {
        id: e.link.id,
        originId: e.link.getOrigin().id,
        destinationId: e.link.getDestination().id,
    };
    diagramHub.server.linkModified(model);
}

function onLinkTextEdited(s, e)
{
    var model =
    {
        id: e.link.id,
        text: e.getNewText()
    };
    diagramHub.server.linkTextEdited(model);
}

Handle link-related client notifications by creating or modifying links –

diagramHub.client.linkCreated = function (model)
{
    var link = diagram.factory.createDiagramLink(
        findNode(model.originId), findNode(model.destinationId));
    link.id = model.id;
};
diagramHub.client.linkModified = function (model)
{
    var link = findLink(model.id);
    link.setOrigin(findNode(model.originId));
    link.setDestination(findNode(model.destinationId));
};
diagramHub.client.linkTextEdited = function (model)
{
    var link = findLink(model.id);
    link.setText(model.text);
};

Now the application will also synchronize link operations across all connected clients. Here’s a small diagram synchronized between three different browsers –
collaborative mind map

The sample above uses MindFusion’s ASP.NET MVC API. Code for other frameworks will look similar as MindFusion maintains same diagramming model for multiple platforms. You can download the trial version of any MindFusion.Diagramming component from this page.

Enjoy!

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.

JavaScript Diagram Library, V2.8 Released

The new JavaScript library has been released with the following new features:

Fluent API

Builder objects with property setters and shortcut methods for font and brush creation add support for fluent programming style. Static With and instance init methods in DiagramItem, Style and Layout -derived classes return a builder instance that can be used to set up respective new or existing objects.

DiagramLink improvements

  • HeadStroke, HeadStrokeThickness and HeadStrokeDashStyle properties let you customize arrowhead strokes independently of line segments strokes.
  • The AllowSelfLoops property of Diagram class controls whether users are allowed to draw self-loop links.
  • The new Spline element of LinkShape enumeration draws links as interpolating splines that pass through all of their control points.
The new JS Diagram boasts improved DiagramLink-s.

The new JS Diagram boasts improved DiagramLink-s.

Miscellaneous

A trial version is available for download here:

Download MindFusion Diagram Library for JavaScript, V2.8

About Diagramming for JavaScript Library: Written 100% in JavaScript, this tool is a dynamic, browser based visualization library that uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and allows you to integrate interactive diagrams for JavaScript and HTML into any web application. This MindFusion graphing library supports a variety of predefined node shapes, customizable links, rich event set and many appearance options.

The user interaction model includes resizing / moving / selecting and modifying any diagram element. The library boasts an elegant API, which is documented in details, numerous step-by-step guides and tutorials. The Diagramming API also provides TypeScript definitions. Various samples are provided to let you learn quickly how to use the most important features of the library – check them here. The JavaScript diagram builder is not only the perfect choice for creating any type of diagram in the browser – it can also arrange it the way you wish with a mouse click using one of its automatic graph layout algorithms. For more details about the features of the component, please visit the Diagram for JavaScript page.

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 &lt; rowCount; i++)
    {
         Cell cell = source.getCell(1, i);

         if(cell.getText().equals(&quot;<b>" + relation.pk_key + "</b>"))
           {
               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 &gt; -1 &amp;&amp; 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("<b>" + tableName + "</b>");
_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("<b>" + column.name + "</b>");
    _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.

Diagram Library for Java Swing, V4.3

We have released the new version of the Java Diagram library. Here is a brief summary of the new features:

Fluent API

Builder classes in com.mindfusion.diagramming.builders package add support for fluent programming style. Static with and instance init methods in DiagramItem, DiagramItemStyle and Layout -derived classes return a builder instance that can be used to set up respective new or existing objects.

DiagramLink improvements

  • The component no longer keeps a separate segmentCount field, removing a common source of errors. The SegmentCount property now calculates its value from ControlPoints elements. The updateFromPoints(updateGroups, updateSegments) overload has been removed too.
  • SegmentCount setter no longer refuses changing number of segments if auto-routing is enabled or the link is a self-loop.
  • The new Spline element of LinkShape enumeration draws links as interpolating splines that pass through all of their control points:
Java Diagram Library: Spline Links

Java Diagram Library: Spline Links

Enum types

Old-style enumeration classes with static finals have been replaced by enum types, improving type checking and auto-completion support. This change will not affect your code if only passing enum members to methods from the API. If storing them in fields on the other hand, you must change the field type from int to respective enum type.

Several bug fixes
We have fixed a setLicenseKey problem and a bug with the SvgExporter.

You can find details about the new release at the official announcement page here.

The trial version is available for download from the following link:

Download MindFusion.Diagramming for Java Swing, V4.3 Trial Version

Technical support
MindFusion puts special effort in providing high quality technical support to all its current and future clients. You can post your questions about Diagramming for Java at the forum, help desk or at support@mindfusion.eu. All support inquiries are usually answered within hours of being received.

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.