Simple Navigation Menu in AngularJS

Posted on May 5, 2016 by felixzacat

I struggled for about half a day trying to get some sort of menu system in AngularJS working. It seems very trivial, and in jQuery it is a breeze, but with angularJS it took a bit of searching and fiddling about and a bit of stackoverflow love .

I wanted something like this :

temp

I have a number of fixed DIVs (or list items. It doesn’t really matter).

On a mouseOver event the style changes via adding and removal of a class. In the same way, a click should change the style to a third style. The CSS looks like this :

 

This is what the HTML looks like. Note the event handlers for click and mouseOver.

This is what the Javascript looks like :

 

You can see the JSFiddle here :

https://jsfiddle.net/zxjg3tpo/10/

 

 

 

 

 

 

 

 

 

 


Posted in angularjs, JavaScript | Tagged , | Leave a comment

Iceberg Charts Beta Release

Posted on March 6, 2016 by felixzacat

Iceberg Charts finally has had its first release.

This beta release can be found here :

http://frontangle.com/icharts/

or from Github here :

https://github.com/oliverwatkins/Iceberg-Charts/releases

It’s taken me many hours to come up with this charting library that attempts to compete with JFreechart and other swing charting libraries out there. My aim is to offer a better charting experience with more types of charts, and a friendlier API than what is out there.

Here is a  quick introduction :

 

Getting Started..

Here is the most basic way of creating a chart with Iceberg Charts. Although more complex constructors are usually used to customize a chart, some basic constructors can help you get started very quickly.

The chart you will see will look like this :

Iceberg Charts automatically fits the data onto a chart with an x-axis and y-axis that have a scale which represents the data in a way which is easy on the eye.

Many Series..

Let’s have a look at more than one data series. Let’s create a number data lists and use a different constructor.

If you run this code then you should see something like this :

In an XY Chart data series differ from each other usually by color and/or line style. Iceberg Charts chooses a style for you. Of course everything in Iceberg charts is configurable, including the data series styles, but one of Iceberg Charts principles is ‘ease of use’ and a number of simple constructors are exposed where Iceberg Charts does most of the work for you.

 

 

 

 


Posted in Iceberg Charts, Swing | Tagged , , | Leave a comment

First AngularJS Application

Posted on February 2, 2016 by felixzacat

I created my first AngularJS application. It is a simple application that allows a user to create a pie chart.

pie

You can have a look at it in action if you click on this link :

http://blue-walrus.com/pie-chart-creator/

I wanted a third party library to create the pie chart so I looked at what angular plugins were out there and I came across the following angularjs component :

http://jtblin.github.io/angular-chart.js/

(The angular-chart library is actually just a wrapper for a javascript library called Chart.js http://www.chartjs.org/)

I also wanted a javascript color chooser so I found a component called jscolor (http://jscolor.com/)

 

Along with the angularjs source, all these source files were added to my index file like so :

 

Part 1. Pie component HTML

The pie chart application requires a central canvas where the chart is displayed. According the angular-chart documentation the chart is added to a canvas by means of setting correct class values, and adding a number of custom directives (eg. chart-legend, chart-labels etc)

this is how we add a chart in a canvas:

 

This is wrapped in a div with an angularjs controller directive (which i will call PieCtrl).

Note also the canvasTitle. It uses a binding point for the chart title (the double curley braces).

 

Part 2. Pie Item component in HTML

Next we create the HTML for the adding of slices. This is more complex and and is made up of three different areas (or divs). All three divs are under the same controller however.

DIV: PieItemsTitle

The pie item title div has an input which maps to the chartName.

ng-model = “slice.newSliceName”

 

DIV: PieItemsAdd

The pieItemsAdd is a form with three fields; the name, color and value of the slice. All these field values use the ng-model directive to map onto a data value in the controller.

 

ng-model = “slice.newSliceName”

ng-model = “slice.newSlicePercent”

ng-model = “slice.newSliceColor”

 

I also made use of ng-minlength to force a user to enter a value for some of the fields before the form could be submitted.

 

 

DIV: PieItemsList

Lastly I have the PieItemsList which is a div that uses an ng-repeater to iterate over all the objects in the slices array.

 

 

Javascript

Part 1. PieItemsCtrl

The PieItemsCtrl is the controller that sits behind the Pie Items component. It basicall handles all the events that are triggered in the DIVs

 

Part 2.

Part 3.

 

 

Part 6. Header

 


Posted in Uncategorized | Leave a comment

Extjs Widget Factory

Posted on May 13, 2015 by felixzacat

What every good extjs application needs is a Widget Factory.

Over time our project team gravitated naturally to this pattern, and suspect it is a common pattern in the community.

Let me break it down..

When developing an extjs GUI you might have a label or other component configured in your panel like this:

 

You will find your code getting very bloated and messy if you only do things this way, and it is also difficult to perform global changes at once, like for example changing the margins for all your textfields at once; You have to go to every individual hard-coded item and change them in the config code. It’s a pain in the butt.

Configuring all your GUI code this way creates all sorts of frightening looking highly indented extjs hierarchies, so the natural way of thinking is to refactor out these configurations into some kind of a factory.

Lets start thinking about factories..

You might define a class called WidgetFactory and make it a singleton :

 

And then you could add a createLabel method to the factory. Calling it from the previous example, the code would look cleaner :

 

That implementation of the method is obviously a bad idea because a specific order is required for the method parameters. It is much cleaner to bundle this up into an anoymous config object like so :

 

The implementation of this createLabel method in our factory might look like this.

 

But it’s still not good enough. What happens when config arguments are missing? We will get all sorts of ‘undefined’ problems. The method wants to do something with those three values.

For these values, it is therefore better to define a default value, and then overwrite it if it appears in the config object.

The improved method :

 

Refactoring this then gives us even cleaner code :

 

Our widget factory contains around seven factory methods including createTextField, createTextArea, createComboBox, and we expect to add more in the future.
The textfield factory method is used very often, so the method is huge as a number of default values need to be set.

Here is a similar createTextField example :

 

What is interesting to note about this method is that xtype can also be passed in as a configuration parameter. This means that the widget type can be changed from what the method is intending to return. This is useful for things like DateField which is a subtype of TextField; you are in effect creating a different xtype but using the same configuration as a textfield.

Also, some parameters can feed into the default value of other parameters, eg clazz.

Update :

SenchaMitch has an even cleaner solution. Using the Ext.apply() method, a default configuration can be defined, and then later have its values overwritten when a new config object comes in :

 

 

 

 

 

 

 


Posted in extjs | Tagged , | 2 Comments

Swing Bubble Charts

Posted on April 26, 2015 by felixzacat

Iceberg Charts also allows you to create bubble charts. Here’s an example I created :

bubble1

The chart displays all the states in the USA comparing ‘Gun Ownership’ against ‘Homicide Rate’. I got this data from Wikipedia, and set up the code like this :

There are a few important things you need to consider :

Factor

You need to give a bubble chart a factor to multiply the magnitude by so that it scales nicely with the X or Y axis. If we did not have a factor then population variable (ie. the circle size) will be far too big to get any decent graph. It needs to be scaled down (in this case by 0.0000001), so that the circles are a nice size in the graph.

Coloring

The color is blended with red, and also has some transparancy. This helps identify bubbles that might be hidden behind other bubbles. I may look into customizing the bubble coloring/gradients etc.

Multi Series

Multi-series bubble charts are possible. The following example shows how you can do two series bubble charts :

bubble2

 

 

 


Posted in Iceberg Charts, Swing, Swing Components | Tagged , , , | Leave a comment

Java Swing Equation Builder

Posted on March 29, 2015 by felixzacat

 

A few years ago back in 2006 I created a Swing component called ‚Equation Builder‘. It builds equations in the natural visual style that you get when writing on paper.

You can build some pretty cool looking equations like this :

ebimage001

Elements can be dragged and dropped onto empty nodes in the canvas in the middle.

When you first open up the application it looks like this :

ebimage002

A node represented by the gray circle is displayed in the middle. You can drag node operators (displayed in the table on the right), or inputs (table on the bottom) onto this node. You can also replace it with a constant or drag other calculations onto this node (second tab on the bottom).

 

Let’s drag an addition operator onto the root node :
ebimage003

 

Because an addition operator is binary, the single empty node gets replaced with two empty nodes.

We can replace one these empty nodes with another operator, division, which is also a binary operator however visually it is up-down rather than left-right :

ebimage004

 

You get the picture..! Just keep adding operators and the thing expands and expands.

 

A node can also be replaced with an input (aka variable) defined in the table. Or a node can also be replaced with a constant (aka a number). You just have to click on the empty node and a textfield appears. You can then add any kind of number to the equation.

ebimage005

 

There is even an implementation of the sum operator (Sigma). Here is an arbitrary example:

ebimage006

 

I also have a power operator implemented :

ebimage007

 

 

Hmm… it needs a bit more work, but still it looks OK. (I have no idea what those gray squares are L )

 

I think technically this program is pretty interesting.

What is most interesting to me is that the whole equation is rendered using GridBagLayout, which shows how powerful GridBagLayout can be. Everytime you replace an empty node, you are removing the empty node object, keeping the grid bag constraints, and with these grid bag constraints, adding a new object in ist place.

There is a type of Model-View relationship in the elements. There are the visual object, all extending from Node.java, and there is a model hierarchy which shadows this visual model. Elements in this hierarchy all extends from CalculationObject.

I think ist kind of redundant having these two hierarchy models. I’m not sure what I was thinking those years ago.

Anyway this project needs a lot of love. So if you want to contribute on Github go for it! If you feel like you could use this component please let me know. I would be really interested to know how someone would use this component.

 

The project can be downloaded here :

https://github.com/oliverwatkins/calculation_project

 


Posted in Swing, Swing Components | Tagged , , | Leave a comment

Cool Accordian Outlookbar in Swing

Posted on February 16, 2015 by felixzacat

A while back I created a component that is a simple accordian component that can be used in any swing application.

I have massively improved this component. Let’s have a look at it :

accordian2_1

 

Improvements are :

  • Animation! Yes animation in a Swing application! The segments actually slide up and down.
  • Inner accordians. You can imbed an accordian in an accordian.
  • Icon support
  • Look and feel options. Background and arrows.

Here are some more options :

The normal plain look :

accordian2_2

Gradient on top level and no icons :

accordian2_3

How to use this

Using this component is fairly straight forward. First construct a SideBar object. You define :

  • Button type
  • Text
  • Texture Type
  • Width
  • Animation Mode

Example :

 

All top level SideBars should have SideBarMode.TOP_LEVEL set. All embedded sidebars should have SideBarMode.INNER_LEVEL set.

Next, add some SidebarSections. These objects define the subsections or segments that make up the accordian component. The SidebarSections need a reference to the parent Sidebar object, a title, and the component that is to be displaed in its expanded state (this might be a JList or a JTree).

Download Now
  • The source code for this component can be found on the Swing Library Github page . Go to the DownloadZIP button and download the library.

gitdownload

  • Run the class SliderTester to see the accordian component in action and see how this component works

Example Configuration Code

This is the code I used for the first screenshot

Icons used in this component example are ‘Must Have Icons’ by VisualPharm. URL : http://www.iconarchive.com/show/must-have-icons-by-visualpharm.html


Posted in Swing Components | Tagged , | 3 Comments

Swing Error Dialog with Exception Displayer

Posted on January 30, 2015 by felixzacat

When you get an error popup dialog in your application, sometimes you want to quickly have a look at what the exception is, instead of having to rummage around for a log file. This component, “ErrorDialogWithException” allows you to pop up a text area in a panel below the main dialog area.

Closed :

ex_dial_1

Open :

ex_dial_2

As a developer developing an application it is nice to get a quick look at what the problem is, and it can also be helpful for regular users calling support with the problem, as they can easily copy and paste the text from the text area.

 How to use it :

Use the ExceptionDialog in catch statements like in the code snippet below :

 

Code :

 

Feel free to use this component. Please leave a comment!
 

This component is also in the swing library project on Github : https://github.com/oliverwatkins/swing_library

 


Posted in Swing, Swing Components | Tagged , | Leave a comment

Simple Login Dialog in Java Swing

Posted on January 23, 2015 by felixzacat

Here is a simple login dialog for anyone to use for free. It looks like this :

login_dialog

Creating a login dialog is not rocket science, however I come across login dialogs all the time. It’s just nice to not have to “roll-your-own” so to speak, so I thought I’d share this bit of code for anyone that it could help.

It basically uses BorderLayout as a base, a FlowLayout aligned to the right for the two buttons, and the textfields and labels use a GridBagLayout for correct placement in the center panel. I’ve added some event listeners to the code for convenience.

I will add it to my Swing Library github project soon : https://github.com/oliverwatkins/swing_library

Here is the code :


Posted in Swing, Swing Components | Tagged , | Leave a comment

Creating a RCP Application in Netbeans – [Part 2]

Posted on January 3, 2015 by felixzacat

Adding a Module with Functionality.

In our last tutorial we made a pretty bare bones application with nothing in it.

We made two modules –

  • a branding module that offers a splash screen
  • and an application module that acts as an entry point to the application (like a main() method if you want to see it that way)

Now we want to add modules with some proper functionality.

  1. Add a new Maven module by selecting ‘Create New Module..’ via a right click on the modules folder. Call it something like CustomerModule.

image001

  1. By default the Project name is the same as the Maven Artifact Id. Change it to something like ‘HappyDog CustomerModule’.

image002

Now we should see something like this :

image003

  1. Let’s create some packages in our CustomerModule and add three java files :

image004

The java files represent standard patterns you might find in a Swing application; the MVC pattern  and delegate pattern.

  • The Customer is a simple POJO :

  • The CustomerTableModel is a Swing table model class which uses the Customer POJO to display data in a table.

  • Finally we have a delegate which centralizes calls associated with the customer module.

 

The delegate is a thread safe singleton that contains some incomplete methods that we may want to implement later.

 

 

Creating the GUI

Create a Panel

  1. Now right click the happydog.customermodule.ui package and select New àWindow.
  2. Make sure the ‘Open on Application Start’ checkbox is set.

image005

  1. Select ‘Next’.
  2. Add a ClassName prefix called ‘Customer’

image006

  1. Select ‘Finish’.

The New Window wizard has created a java file ending in TopComponent and a form file also ending in TopComponent.

TopComponent is the basic unit of display in NetBeans and represents a window, tabbed pane or inner frame. A lot of the code in the java file is auto-generated and non-editable. It may look a bit scary but it is really simple if understand that there are only a few points where you can modify the code. The designer handles most of the wiring.

The CustomerTopComponent.form file is a file that NetBeans uses internally to store information about the GUI component. Generally this file is kept as invisible as possible to the end user.

 

Add GUI Components

If we open the CustomerTopComponent file and select design mode we will see a palette where we can drag components onto a panel :

image007


  1. Drag a table and three buttons onto the panel as shown in the picture.
  2. Select the jTable, and then switch the ‘properties’ view to the ‘code’ view. Change the name to something more readable such as CustomerTable :

image008

Hookup Events

When we fire up the screen we want to load up all our customers in the system, ie we want to populate the table with all the data from our CustomerDelegate.getCustomers() call.

  1. Open the CustomerTopComponent file and change the constructor by adding this code :

 

We can change the text on our buttons too by changing the text property on the buttons. Make sure you also rename the variable name of the buttons as well (via the Code tab).

  1. Change the button text via the properties tab :

image009

The event hooks can be found in the Events tab next to the Code tab. Just select one of the event methods you want to implements (eg. actionPerformed).

  1. Select the actionPerformed event :

image010

 

For now we can put some dummy code in the empty methods.

 

 

Incorporating Module Into Super Project

If we do a ‘clean build’ on the project and then run it, we should see :

 

image011

 

 

Ignore the start screen and other tabs that appear. The module is not supposed to run by itself but sometimes it’s good to get a quick look at how it might look.

As we can see it all looks pretty correct. The ‘TopComponent’ is being shown on startup with the table data.

 

At the end of the day we really want to run this module within our super project HappyDog. So we should add the module we created as a dependency in the application module.

  1. Right click HappyDog app à dependency.
  2. Select ‘Add Dependency..’
  3. Under ‘Open Projects’ select the Customer Module.

image012

Your folder structure should look like this :

image013

 

Do a Maven clean and build on the super project, followed by a clean and build on the ‘HappyDog app’ project.

Right click on the HappyDog app, select ‘Run’ and you should see the module has magically appeared in the app project.

 

image014

 

 

Part 3 Coming Soon!!!

All the code for this tutorial can be found on github.

 

 


Posted in Netbeans RCP, Netbeans Tutorial, Tutorial | Tagged , , | Leave a comment
THREE_COLUMN_PAGE