Simple Piechart in HTML5 and Javascript

Posted on September 6, 2013 by felixzacat

piejs

I created a little pie-chart component in Javascript for anyone who wants to spice up the HTML5 webs-site.

Basically the requirements are that you define the slices like this:

    
            var slices = {
                "percentages": [25,20,20,5,30],
                "colors": ['gray', 'green', 'blue', 'pink', 'orange'],
            }

            var piechart  = Object.create(PieChart);
            piechart.segmentMode = false;
            piechart.drawPieChart(slices, 'piechart1');

The slices object contains two arrays in it. The first array is a list of the percentages, and the second array contains the corresponding colors. Create the pie chart as a variable via Object.create, and call drawPieChart(..) method passing in the slices object, and a string which is the id of a canvas on your page.

There are two modes.

  • Standard Pie Chart – a basic pie chart with black outline.
  • Segment Pie Chart – the center is hollowed out giving it a slick looking feel. To use this mode just write piechart.segmentMode = true.

Here is the Piechart component code :

       
       var PieChart = {

                drawPieChart: function (slices, id) {

                    var percentElements = slices.percentages;
                    var colorElements = slices.colors;

                    var canvas = document.getElementById(id);
                    var context = canvas.getContext("2d");

                    var centerX = canvas.width / 2;
                    var centerY = canvas.height / 2;
                    var radius = 80;

                    context.beginPath();
                    var endAngle = 2 * Math.PI

                    var lastAngle = 0;

                    for (var i = 0; i < percentElements.length; i++) {
                        var percent = percentElements[i];
                        var color = colorElements[i];

                        var currentSegment = endAngle * (percent/100);
                        var currentAngle = currentSegment + lastAngle;

                        context.beginPath();
                        context.moveTo(centerX, centerY)
                        context.arc(centerX, centerY, radius, lastAngle, currentAngle, false);
                        context.closePath();

                        lastAngle = lastAngle + currentSegment;

                        context.fillStyle = color;
                        context.fill();

                        if (this.segmentMode) {
                            context.lineWidth = 2;
                            context.strokeStyle = 'white';

                        }else {
                            context.lineWidth = 1;
                            context.strokeStyle = 'black';

                        }
                        context.stroke();
                        context.fill();
                    }
                    if (this.segmentMode) {

                        context.beginPath();
                        context.fillStyle = 'white';
                        context.arc(centerX, centerY, radius - 20, 0, 2 * Math.PI, false);
                        context.fill();
                    }
                }
            }

There is some basic maths involved in creating the pie chart. The most odd thing is that in HTML5 you do not define the angles from 360 degrees, but as a percent of 2 * PIE.

There is no legend in this component, but it would be pretty easy to create. Given a table element with id legend, we can write some code like this to show the colors in a table.

          
var slices = {
                "percentages": [25,20,20,5,30],
                "colors": ['gray', 'green', 'blue', 'pink', 'orange'],
                "elements": ['banana', 'clock', 'beetroot', 'planet', 'ball']
            }

            var legend = document.getElementById('legend');

            for (var i = 0; i < slices.percentages.length; i++) {

                var tr = document.createElement('tr');

                legend.appendChild(tr);

                var p = slices.elements[i];
                var c = slices.colors[i];

                var td1 = document.createElement('td');
                var td2 = document.createElement('td');

                tr.appendChild(td1);
                tr.appendChild(td2);

                td1.innerHTML = slices.elements[i];
                td2.style.background = slices.colors[i];
                td2.style.width = '40px';
            }

The complete code for the image at the top of the page is shown below. You may use it any way you wish. Just remember it will only work in a modern browser with HTML5 support suh as the latest browser from Chrome or Firefox.


<script src="../main/webapp/js/lib/jquery-1.9.1.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="ilz_test.css">

<head>
    <script>
        window.onload = function() {

            var PieChart = {

                drawPieChart: function (slices, id) {

                    var percentElements = slices.percentages;
                    var colorElements = slices.colors;

                    var canvas = document.getElementById(id);
                    var context = canvas.getContext("2d");

                    var centerX = canvas.width / 2;
                    var centerY = canvas.height / 2;
                    var radius = 80;

                    context.beginPath();
                    var endAngle = 2 * Math.PI

                    var lastAngle = 0;

                    for (var i = 0; i < percentElements.length; i++) {
                        var percent = percentElements[i];
                        var color = colorElements[i];

                        var currentSegment = endAngle * (percent/100);
                        var currentAngle = currentSegment + lastAngle;

                        context.beginPath();
                        context.moveTo(centerX, centerY)
                        context.arc(centerX, centerY, radius, lastAngle, currentAngle, false);
                        context.closePath();

                        lastAngle = lastAngle + currentSegment;

                        context.fillStyle = color;
                        context.fill();

                        if (this.segmentMode) {
                            context.lineWidth = 2;
                            context.strokeStyle = 'white';

                        }else {
                            context.lineWidth = 1;
                            context.strokeStyle = 'black';

                        }
                        context.stroke();
                        context.fill();
                    }
                    if (this.segmentMode) {

                        context.beginPath();
                        context.fillStyle = 'white';
                        context.arc(centerX, centerY, radius - 20, 0, 2 * Math.PI, false);
                        context.fill();
                    }
                }
            }

            var slices = {
                "percentages": [25,20,20,5,30],
                "colors": ['gray', 'green', 'blue', 'pink', 'orange'],
                "elements": ['banana', 'clock', 'beetroot', 'planet', 'ball']
            }

            var piechart  = Object.create(PieChart);
            piechart.segmentMode = false;
            piechart.drawPieChart(slices, 'piechart1');

            var slices = {
                "percentages": [25,20,20,5,30],
                "colors": ['gray', 'green', 'blue', 'pink', 'orange'],
                "elements": ['banana', 'clock', 'beetroot', 'planet', 'ball']
            }

            var piechart  = Object.create(PieChart);
            piechart.segmentMode = true;
            piechart.drawPieChart(slices, 'piechart2');

            var legend = document.getElementById('legend');

            for (var i = 0; i < slices.percentages.length; i++) {

                var tr = document.createElement('tr');

                legend.appendChild(tr);

                var p = slices.elements[i];
                var c = slices.colors[i];

                var td1 = document.createElement('td');
                var td2 = document.createElement('td');

                tr.appendChild(td1);
                tr.appendChild(td2);

                td1.innerHTML = slices.elements[i];
                td2.style.background = slices.colors[i];
                td2.style.width = '40px';
            }
        }
    </script>
</head>
    <body>
        <canvas id='piechart1' width='200px' height='200px'></canvas>
        <canvas id='piechart2' width='200px' height='200px'></canvas>
        <table id='legend'></table>
    </body>
</html>

Enjoy! Please leave a Comment!


Posted in JavaScript | Tagged , , | Leave a comment

Javascript IDE Review

Posted on August 28, 2013 by felixzacat

…a look at refactoring, intellisense, navigability, and usability.

javascriptIDEs

As agile software development becomes more commonplace, it becomes more and more essential that the tools we use allow us to develop software in a flexible fashion. Particularly important is refactoring. Being able to refactor is what allows is to respond to change. It makes our code evolve overtime. For example renaming a method, or changing a methods parameters should not be a programming disaster, it should be effortless and pain free, allowing our software to develop organically.

For the last year I have been using Javascript for a project. After 10 years of Java it has been a pretty hellish first few months, but things have improved once I learned how much a good IDE can leverage the pain away. Javascript’s dynamic nature will never allow for smooth refactoring like Java in Eclipse, but you need at least SOME intellisense, code navigability and refactoring support if you are going to be do anything other than ‘script kiddy’ stuff.

Having an IDE that understands the language you are developing in allows project wide changes, as it can offer a layer of control like the Eclipse platform does for Java developement. A Javascript IDE should understand Javascript. Ideally a Javascript IDE should also understand JSDoc which can also offer type checking. You really can’t afford this notion of ‘duck typing’ when you have a multi library project with 20,000+ lines of Javascript code.

I set up a list of criteria below, and ran these against four Javascript IDEs that I would consider the ‘main players’ in this realm.

Object Rename  If I rename the method methodXYZ in the method test in the below example, it should not affect the method in ObjectA.

function test() {
  var v = new ObjectB();
  v.methodXYZ();
  }

function ObjectA() {
  this.methodXYZ = function() {
  };
}

function ObjectB() {
  this.methodXYZ = function() {
  };
}
Javascript File Rename If I rename a javascript file, then I want the rename to also be carried through to my HTML index file. Ie. The IDE has to know of the relationship between the index.html file and the javascript files in the project.
Rename var or param Can I rename local variable or parameters in the scope of a method?
Intelligent Intellisense Entering a ‘dot’ will bring up a pop up list of methods.If I type ‘.’ After declaring ‘v’ in the example below :

function ObjectB() {
  this.methodB = function() {
  };
}

function ObjectA() {
  this.methodA = function() {
  var v = new ObjectB();
  v.
  };
}

Then I want my IDE to intelligently know that methodB is an available method of v because v is an ObjectB object.
Create Method Hint If I type in a method that does not yet exist, I want a graphical hint or shortcut to allow the quick creation of a method stub (offering perhaps various options for scope).

function test() {
  var v = new ObjectA();
  v.methodXYZ();
  v.createMe(); //does not yet exist
}

function ObjectA() {
  this.methodXYZ = function() {
  };
}
Unreachable Code Example

function test() {
  var v = new ObjectB();
  throw 'an error';
  v.methodXYZ();
}

I want my IDE to highlight or underline unsed code in some way to make it stand out.
jQuery intellisense Whenever I press ‘.’ In this scenario :

$(myElement).

I want to have a list of all JQuery methods.
Code Navigation
Method Step Into I want my IDE to know how to navigate to the methodXYZ in ObjectA, through the use of a function key or short cut key.

function test() {
  var v = new ObjectA();
  v.methodXYZ();
  }

function ObjectA() {
  this.methodXYZ = function(){
  };
}

function ObjectB() {
  this.methodXYZ = function() {
  };
}

This should also work across javascript files.
Var Step Into In the case of a simple locally scoped variable When doing the ‘step into’, I want my cursor to move to the line of the ‘var’ assignment.In the case of a variable defined with this. The Step Into should be as intelligent as possible, and try to determine where it first has been defined/instantiated.Ideally all instances of the variable should be clearly highlighted.
Find Usages I want my IDE to know how to find usages of an object or method across the whole project.In Eclipse CTRL-SHIFT-G is used to fine Java methods. A list is brought up showing where this object is being used across the project or projects. Something similar should also be possible in Javascript. Although Javascripts dynamic nature prevents this from being perfect, some basic string matching across the whole project should be at least offered.
JSDoc Does the IDE support JSDoc to some degree?
JSDoc Type Checking Is it possible to do Type Checking by using JSDoc or perhaps another means? Can the IDE perform some basic error checking before sending the code to runtime?For example in the below example the call of methodXYZ in test is wrong because it is expecting an object of ‘type’ ObjectA through JSDoc markup. Can the IDE visually underline or highlight these errors in code?

function test() {
  var v = new ObjectB();
  v.methodXYZ('some string');
}

function ObjectB() {

  /**
  * @param {ObjectA} param
  */
  this.methodXYZ = function(param) {
  };
}

function ObjectA() {
  this.methodXYZ = function() {
  };
}
Method Encapsulation and JSDoc Using the JSDoc @private annotation, is it possible to hide methods?Does intellisense then hide the method? Or at least indicate that it should treated as private?

These are the results :

Webstorm

Aptana 3.4.2

Netbeans

Visual Studio
Object Rename Yes. But sometimes it doesn’t understand the context and does a string replace. No Yes.Weirdly does not allow a rename from the menu. No
Javascript File Rename Yes. No Yes. No
Rename var or param Yes. No. Seems to lack any refactoring capabilities. yes No
Intelligent Intellisense Yes No. Only shows methods from javascript Function and Object object Yes Yes.
Create Method Hint Webstorm :Creates in method or globally in file. Cant figure out type. No No. Offers ‘Surround with function’ which is almost as good. No
Unreachable Code Yes. Underlines in gray with tooltip No No. No.
Unused variables yes No Yes no
jQuery intellisense yes No Yes No
Method Step Into Yes.Across files? = yes No. Some code navigation, but extremely limited. Yes.Across files? = yes YesAcross files? = No
Var Step Into Yes No yes yes
Find Usages Yes No No No. Not apparent to me that it can.
Pull Out local to global variable Webstorm: doesn’t seem to work No No No
JSDoc Yes No Yes No
JSDoc Type Checking Yes. Reasonable support No Yes No.
Method Encapsulation and JSDoc Yes. No No. No.

Conclusion

I have been developing in Webstorm for the past 8 months or so, and I thought the refactoring abilities, intellisense and code navigation were tools that are standard for serious Javascript developement environment. Without these refactoring tools, developing complex Javascript applications has been like stumbling around in the dark, a trip back to the ‘stone age’ of software development where everything was developed in text editors. Understanding how a small piece of code works could cost days.

I assumed that Javascript IDEs would have this kind of stuff per default, but I have been pretty surprised at how much lacking the software is out there. Javascript is so ubiquitous on the web, so its something all web IDEs should have.

Webstorm comes out way ahead in my research. Jetbrains, a pioneer in Java refactoring have tried as hard as possible to squeeze out as much refactoring as is possible in a dynamic language such as Javascript. Some things aren’t perfect, refactorings have sometimes just behaved as a text ‘search’ and ‘replace’, and have some nasty side effects at times, but a preview screen offers pre-emptive screening, and renaming methods has been overall quite pleasing. (TIP : Make you Javascript methods unique to avoid conflicts!). Using JSDoc in Webstorm has been great too.

Netbeans is also pretty good, however it lacks some basic features. Why can’t I ‘find usages’ for a method, even if it is just a string search? It would help immensely. You can’t delete or change code if you don’t know where its being used. Renaming a method doesn’t seem to register across files which is a shame too.

Visual Studio is fairly poor with its Javascript support and on top of that it feels like driving a ten ton truck through a Japanese rock garden. Aptana offers almost nothing, and is really just a glorified text editor. Maybe it offers great PHP/Ruby development? In any case you can throw it in the same basket as Spket, Sublime.

So Webstorm comes out on top. Even though I have been using it, i was quite surprised that there isn’t anything out there to compete with it. Hopefully that will change.

 

 


Posted in JavaScript | Tagged , , , , , , | 4 Comments

Swing and Design Patterns – Part 4. Mediator Pattern

Posted on June 18, 2013 by felixzacat

Assume we have a component hierarchy that looks like the following diagram. Some component on one branch (say a button), wants to update something on another branch (say text in a text field).

med

This scenario occurs very often in complex GUIs. Some examples may be :

  • Blinking of a mail icon when mail is recieved.
  • Update a table cell of a trade, after closing it in a dialog.
  • Any inner-framed application that requires inter frame communication (like photoshop)

To solve this communication dillema we can ‘bubble’ through a reference to the parent frame. In the constructor of the container components we pass this reference through.

public class Mediator extends JFrame{
    public Mediator() {

        MyPanel panel = new MyPanel(this);

        this.getContentPane().add(panel);

        this.setVisible(true);

        this.setBounds(0, 0, 1024, 708);

        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
}

We thread the parent frame through the constructor of our initial panel.

We want this parent frame to permeate all our components so we keep passing it through the constructors of embedded panels :

    class MyPanel extends JPanel {

        private final JFrame parent;

        private final AnotherPanel anotherPanel;

        public MyPanel(JFrame parent) {

            this.parent = parent;

            anotherPanel = new AnotherPanel(this.parent);

            this.add(anotherPanel);
        }

        public AnotherPanel getAnotherPanel(){
            return anotherPanel;
        }
    }

…and so on. Lets assume the class AnotherPanel calls a Dialog. The parent frame object also needs to be passed through the dialog too :

    class AnotherPanel extends JPanel {

        private final MyDialog dialog;

        public AnotherPanel(JFrame parent) {

           dialog = new MyDialog(parent);
           dialog.setVisible(true);
        }

        public MyDialog getMyDialog(){
            return dialog;
        }
    }

The dialog embeds yet another panel, and threads the frame through.

    class MyDialog extends JDialog{

        private final YetAnotherPanel yetAnotherPanel;

        public MyDialog(JFrame parent) {
            yetAnotherPanel = new YetAnotherPanel(parent);
        }

        public YetAnotherPanel getAnotherPanel(){
            return yetAnotherPanel;
        }
    }

Notice that each embedded panel/dialog has a getter method associated with it.

The whole point to this is that we can access any node in the hierarchy from any other node. Assume we are in some other part of the GUI hierarchy. Since we have a handle to the parent frame, we can make a call like this, which in our hypothetical situation would blink some text.

        parentFrame.getPanel().getAnotherPanel().getMyDialog().getYetAnotherPanel().blinkSomeText();

The Mediator Pattern is Really Just a Thread-Safe Singleton

To overcome a lot of the bloat that the previously described technique describes, use a thread safe singleton to hold any interested components.

public class ComponentMediator {

    private static ComponentMediator instance = new ComponentMediator();

    public static ComponentMediator getInstance() {
        return instance;
    }

    private YetAnotherPanel yetAnotherPanel;
    private AnotherPanel anotherPanel;

    public YetAnotherPanel getYetAnotherPanel() {
        return yetAnotherPanel;
    }
    public void setYetAnotherPanel(YetAnotherPanel yetAnotherPanel) {
        this.yetAnotherPanel = yetAnotherPanel;
    }
    public AnotherPanel getAnotherPanel() {
        return anotherPanel;
    }
    public void setAnotherPanel(AnotherPanel anotherPanel) {
        this.anotherPanel = anotherPanel;
    }

    //etc...

}

This singleton object contains all the components that we are interested in. This kills the bloat as we don’t need getters for all the panels, these horrible chained method calls, and passing the frame through all the constructors.

In the constructor of our interested objects we add it to the constructor like this :

    class AnotherPanel extends JPanel {

        public AnotherPanel() {
            ComponentMediator.getInstance().setAnotherPanel(this);
            ....
        }
    }

…then in some far away panel we can use the mediator to access this panel, and call a hypothetical method called blinkSomeText().

    class SomeFarAwayPanel extends JPanel {

        public someButtonPress() {
            ComponentMediator.getInstance().getAnotherPanel().blinkSomeText();
        }
    }

Some find the way the singleton holds references to the components is a little bloated. It is fairly bloated, and another option would be to store all these references as a map, and access the components using get and put from the map object. It’s a matter of taste.


Posted in Design Pattern, Swing, Swing Design Pattern | Tagged , , , | Leave a comment

JSTabbedPane: Simple Tabbed Pane for Javascript

Posted on May 30, 2013 by felixzacat

There are a number of tabbed pane components out there in Javascript world. But most of the tabbed panes out there are provided just as a javascript library, and have been minified/obfuscated making tweaks difficult.

JSTabbedPane is a slick and simple little javascript component. You are free to modify it as you wish.

cheese

To use the component in your javascript code, have a look at the code snippet below. You basically need to define your <div>s and associated string titles, after which you then pass into the component. The tabbed panel component does the rest.

$(document.body).ready(function(){

var div1 = document.createElement('div');
div1.style.background = 'white'
div1.style.height = '200px'
div1.style.width = '900px'

var div2 = document.createElement('div');
div2.style.background = 'white'
div2.style.height = '200px'
div2.style.width = '900px'

var div3 = document.createElement('div');
div3.style.background = 'white'
div3.style.height = '200px'
div3.style.width = '900px'

var d1 = document.createElement('ul');
d1.innerHTML = "<li>audi<button>ok</button><li>VW <button>ok</button><li> Toyota<button>ok</button><li> Jeep<button>ok</button>"

var d2 = document.createElement('ol');
d2.innerHTML = "<li>Cheddar<li>Blue Vein <li> Swiss<li> Gouda"

var d3 = document.createElement('ol')
d3.innerHTML = "<li>Naomi Campbell<li>Claudia Schiffer <li> Maren Muckenthaler<li> Heidi Klum"

div1.appendChild(d1);
div2.appendChild(d2);
div3.appendChild(d3);

this.tabbedPane = Object.create(JSTabbedPane);

this.tabbedPane.addElementsToTabbedPane(
[
{   title : "Automobiles",
viewable : div1 },
{   title : "Cheeses",
viewable : div2 },
{   title : "Super Models",
viewable : div3 }
]
);

document.body.appendChild(this.tabbedPane.tpView);
this.tabbedPane.selectPage(0);
});

In the above code sample our three arbitrary divisions are passed into the addElementsToTabbedPane method. Then we append the view of the tabbed pane (the HTMLElement), onto the body of the HTML document using the line:

document.body.appendChild(this.tabbedPane.tpView);

Finally we select the first page (aka. pane) on our tabbed pane by calling this method :

this.tabbedPane.selectPage(0);

Here is the code for JSTabbedPane :

//////////////////////////////////////
//TabbedPane
//////////////////////////////////////
function JSTabbedPane() {

    this.tpView = document.createElement('div')
    this.tpView.id = 'tabbedpane';

    this.menu = new JSTabbedPaneMenu();

    this.tpView.appendChild(this.menu.menuView);

    this.addElementsToTabbedPane = function(pages) {

        for (var i=0;i < pages.length;i++) {
            var page = pages[i].viewable;

            page.name = pages[i].title;

            this.menu.addTabbedPanel(page);
        }
    };

    this.getSelectedPage = function() {
        for (var i=0;i < this.menu.tabbedPaneItemArray.length;i++) {
            if (this.menu.tabbedPaneItemArray[i].active) {
                return this.menu.tabbedPaneItemArray[i].page;
            }
        }
    }

    this.selectPage = function (i) {
        var tabbedPaneItem = this.menu.tabbedPaneItemArray[i];
        tabbedPaneItem.setItemActive(true);
    }
}

//////////////////////////////////////
//TabbedPaneMenu
//////////////////////////////////////

function JSTabbedPaneMenu() {

    this.tabbedPaneItemArray = [];

    var div = document.createElement('div');
    div.id = 'tabbedpanemenu';

    div.style.paddingTop = '5px';
    div.style.overflow = 'hidden';

    div.style.display = 'block';
    div.style.background = 'gray';

    this.menuView = div;

    /**
     * Associate HTML Element with a menu item, then append menu item to the menu.
     *
     * @param {HTMLElement} page
     */
    this.addTabbedPanel = function(page) {

        var menuItem = new JSTabbedPaneItem();

        page.style.marginTop = '35px';

        menuItem.setPage(page);
        menuItem.setMenu(this);

        //append menu item to menu
        this.menuView.appendChild(menuItem.view);

        //put it in array
        this.tabbedPaneItemArray.push(menuItem);
    };

    /**
     * @param {HTMLElement} page
     */
    this.select = function(page) {

        for (var i=0;i < this.tabbedPaneItemArray.length;i++) {

            if (page==this.tabbedPaneItemArray[i].page) {

                var item = this.tabbedPaneItemArray[i];
                item.setItemActive(true);
                this.activePage = item.page;

            }else {
                this.tabbedPaneItemArray[i].setItemActive(false);
            }
        }
    };
}

//////////////////////////////////////
//TabbedPaneItem
//////////////////////////////////////

function JSTabbedPaneItem() {
    var item = document.createElement('div');

    var self = this;

    $(item).click(function(e){
        self.menu.select(self.page);
    });

    item.style.float = 'left';

    item.style.cursor =  'pointer'

    item.style.color = '#666666';
    item.style.fontSize = '14px';
    item.style.fontFamily= 'arial';

    item.style.lineHeight = '14px';
    item.style.textDecoration = 'none';

    item.style.width = '160px';
    item.style.height = '30px';

    item.style.marginTop = '-8px'; //offset from the top
    item.style.paddingTop = '13px';

    item.style.cssFloat = 'left';

    //inner text positioning
    item.style.paddingLeft = '30px';

    this.view = item;

    this.setPage = function(page) {
        this.page = page;

        item.id = 'tabbedpane.' + this.page.name;

        item.appendChild(document.createTextNode(this.page.name));
    };

    this.setMenu = function(menu) {
        this.menu = menu;
    };
    this.setItemActive = function(active) {
        var menuView = this.menu.menuView;

        if (menuView.activePage)
            menuView.removeChild(menuView.activePage);

        this.active = active;

        var itemView = this.view;

        itemView.className = active?'active':'';
        if (active) {

            itemView.style.background = 'white';

            //has to match up with the inactive (-4 + 9) = (-8 +13)
            itemView.style.marginTop = '-4px';
            itemView.style.paddingTop = '9px';

            this.menu.activePage = this.page;

            menuView.appendChild(this.page);

        }else {

            if (this.page && this.page.parentNode == menuView)
                menuView.removeChild(this.page);

            itemView.style.background = 'gray';

            //has to match up with the inactive (-4 + 9) = (-8 +13)
            itemView.style.marginTop = '-8px';
            itemView.style.paddingTop = '13px';
        }
    };
}

Notes on JSTabbedPane

  • JSTabbedPane: The main object. Simple accessability methods.
  • JSTabbedPaneMenu: Contains an array of the menu items.
  • JSTabbedPaneMenuItem: An item is a user defined DIV connected with a title. When the setActive method is called, the old page is removed and the new page is added.
  • There is no CSS file associated with this. All CSS stylings are in the code. Its up to you to do what you want with that.
  • The menu item view object is painted with a slight offset when it is active. You can remove this feature if you wish. You can also change the colour of the tab object it is selected.Hope you like it!

    Maren Muckenthaler


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

Contructors and Inheritance in Javascript

Posted on April 23, 2013 by felixzacat

 

js_inherit

There is a really great article on inheritance in Javascript tucked away in the Rochester Institute of Technology website :

http://www.cs.rit.edu/~atk/JavaScript/manuals/jsobj/

Dated from 1997 and very hard to find using Google, this article offered me the perfect solution to the problem I had in front of me, namely, having objects with constructors that also use inheritance.

Incorporating constructors in Javascript is usually done using the ‘static’ notation, where one method contains other methods :

function MyObject(myInitialData) {

  this.initalData = myInitialData;

  this.aMethod= function() {
    alert('hi');
  };

  this.anotherMethod = function() {
    return this.initalData;
  }
}

Everything between the line :

function myObject(myInitialData) {

and the first method would be considered a constructor, and you can add as many parameters as you want to the outer method (in my case it is just one: myInitialData).

The only problem with this technique is that you can’t define the object as being of some other kind of object. In other words you can’t have MyObject be anything else.

Using the dynamic Javascript notation you can create an object to be of something else :

var b = Object.create(a);
b.x = function() {}
b.y = function() {}
b.z = function() {}

ie. b is an a;

you can also add a constructor-like method, called init().

Example :

var b = Object.create(Building);
b.init = function(name) {
  this.name = name;
  this.createFoundations();
};
b.createFoundations = function(){
  builder.buildFoundations();
}
b.printName= function(
  alert(this.name)
);

If you have something like this, you have inheritance (It inherits Building), and your init() becomes your constructor. But it is not a real constructor because you have to remember to call it after the create. Constructors are a way of forcing the programmer to execute some initial code.

From the above website, the solution would be to set the prototype after defining the method using the first technique :

function MyObject(myInitialData) {
  this.initalData = myInitialData;

  this.aMethod = function(){
    alert('hi');
  };

  this.anotherMethod = function(){
    return this.initalData;
  }
}

MyObject.prototype = new Building;

Using this technique, we have inheritance, ie MyObject is a Building, and we have a constructor too.

This is how we do it now!


Posted in JavaScript | Tagged , | Leave a comment

Abstract Methods and Polymorphism in Javascript.

Posted on March 5, 2013 by felixzacat

JavaScript doesn’t allow abstract methods. If you are developing JavaScript in an object-oriented style, you need to be aware of what methods your object should or should not have.

Inheritance allows for polymorphism, and achieving polymorphism is further enhanced by using abstract methods.

In Java :

    Class Abstract Bird {
        public void abstract makeSound();
    }

    Class Duck extends Bird() {
        public void makeSound() {
            print(‘Quack’)
        }
    }

Without declaring the makeSound() method as abstract, and implementing it instead at the super level, you will get some default sound instead from your feathered creation. The usefulness of abstract methods is that it forces the developer to implement some kind of behavior on a particular class they are implementing. Just simply implementing that method at the super level might not make sense. What sounds does a bird make? How long is a piece of string?

Removing the makeSound() method from the super class won’t allow you to use the method makeSound() polymorphically (in most standard OO languages). However in a dynamic language like JavaScript this is considered no problem. You can try calling any kind of method. But during runtime, if you call a method and it ain’t there, well you get :

Uncaught TypeError: Object #[HTMLTableElement] has no method 'makeSound'

Thats what duck-typing gives you. To make JavaScript more robust and to ‘fake’ abstract methods in the language I’ve had to turn to a pretty crude method : popping up alerts in empty methods defined in the super object.

A real world example :

Page = new Object();
Page.createView = function() {

    var div = document.createElement('div');
    div.className = 'Page';

    var h1 = document.createElement('h1');
    h1.id = 'panelTitle';
    h1.appendChild(document.createTextNode(this.getTitle())
    div.appendChild(h1);

    div.appendChild(this.createContentView());

    return div;
};

//abstract
Page.createContentView = function() {
    alert('createContentView in Page ‘ + name + ‘ not implemented');
};
//abstract
Page.getTitle = function() {
    alert('getTitle in Page ‘ + name + ‘ not implemented’);
};

In the Page object I have created a two methods which I want all derived objects to include. The Page object supplies HTML elements that frames a page object, eg header elements at the top, and maybe you could have footer elements defined as well.

Implementation :

TimeSheetPage = Object.create(Page);
TimeSheetPage.name = 'TimeSheet';

TimeSheetPage.createContentView = function() {
    var div = document.createElement('div');
    div.id = 'PageContent';

    //create some javascript generated HTML here

    return div;
};

DevicesPage.getTitle = function() {
return 'TimeSheet'
};

The implemented TimeSheetPage object needs to implement these methods or an alert message will pop up. This is nowhere near as good as a compile time error, but its unfortunately that best JavaScript can do.

I hope this helps. It has eased some of the pain of JavaScript developement for me. Its a shame Mozilla hasn’t built in a more elegant OO system for Javascript.


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

MVC pattern in Javascript. An example..

Posted on February 4, 2013 by felixzacat

If you are unfortunate enough to be a Java developer who has to develop in Javascript, you will want to start using design patterns, or your javascript code is quickly going to resemble a train wreck.

One of the most important graphical user interface patterns is the MVC (or Model-View-Controller) pattern. In Javascript it is possible to implement the MVC pattern, but it is not as clean as in Java Swing.

First we need to think of an example. Maybe we have a panel or screen that looks something like this :js_mvc3

 

Its basically a one to many relationship of Order to Order Items. You could represent the data part of this with this JSON code :

OrderModel = {

        order :  {
            id : 123,
            name : "Bill Gates",
            type : "Human",
            value : "Alive"
        },

        items: [
            { "id":"1" , "desc":"a book" },
            { "id":"2" , "desc":"a lamp" },
            { "id":"3" , "desc":"a mouse" }
            ]
    };

 

Lets turn now to the View. The View needs to be as dumb as possible. All it is doing is presenting HTML containing a bunch of components, the whole thing then usually wrapped up in a DIV. In the following example the  :

OrderView = Object.create(Viewable);

OrderView.createView = function() {

    var nameTextfield = document.createElement('input');

    var table = document.createElement('table');

    var row1 = document.createElement('tr');
    var row2 = document.createElement('tr');
    var row3 = document.createElement('tr');

    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td4 = document.createElement('td');
    var td5 = document.createElement('td');
    var td6 = document.createElement('td');
    var td7 = document.createElement('td');

    row1.appendChild(td1);
    row1.appendChild(td2);

    row2.appendChild(td3);
    row2.appendChild(td4);

    row3.appendChild(td5);
    row3.appendChild(td6);

    table.append(row1);
    table.append(row2);
    table.append(row3);

    this.append(nameTextfield);
    this.append(table);

}

I’ve omitted layout code for the sake of brevity.

Lastly the Controller. The controller contains an aggregate of all events concerning the view. This includes all event handling for the various components on the screen, and the initial load of the screen.

A method to fill the table with data has also been refactored out.

OrderController = new Object();

OrderController.setView = function(pView) {
    this.view = pView;

    this.model = Object.create(TicketViewModel);

    setUpEvents();

    onLoad(this.model);

};

OrderController.onLoad = function(data) {

    this.view.idTextfield = data.id;
    this.view.nameTextfield = data.name;
    this.view.typeTextfield = data.type;
    this.view.valueTextfield = data.value;

    setItemData(data)

}

OrderController.setItemData = function(data) {

    for(elem in data.items) {

        row1 = document.createElement('tr');

        var td1 = document.createElement('td');
        var td2 = document.createElement('td');

        td1.innerHTML = this.model.items[elem].id;
        td2.innerHTML = this.model.items[elem].desc;

        row1.appendChild(td1);
        row1.appendChild(td2);

        this.view.itemTable.append(row1);
    }
}

OrderController.setUpEvents = function() {

    var self = this;

    $(this.view.updateButton).click(function(e) {
        self.update();
    });
    $(this.view.nameTextfield).focusLost(function(e) {
        self.validateNameField();
    });
    $(this.view.exitButton).click(function(e) {
        self.exit();
    });
};

OrderController.update = function() {

    //update data to the backend
};

OrderController.validateNameField = function() {

    //do some fancy validation on the front end
};

OrderController.exit = function() {

    //navigate out of screen.
};

 

The controller you will notice a few things :

  • all GUI components are accesed through the View object
  • event code has been refactored into single methods. However that is not really necessary if the code is only one or two lines
  • implementation of the event methods are omitted for brevity.

Happy coding!

 


Posted in Design Pattern, RIA | Tagged , , , | Leave a comment

Selenium tests over Multiple Browsers

Posted on December 3, 2012 by felixzacat

The Selenium API is great for writing Java tests for web applications. An important aspect of it is the ability to quickly regression test over multiple browsers.

A common pattern I ise is shown in the following code snippet. A common base method is called by various methods configured for different browsers (appended with “_FF” for Firefox for example).

public class PhoneDetailsTest extends MultibrowserSeleniumTest {

    @Test
    public void test_CheckPhoneDetails_FF() throws Exception {

        myWebPage = new MyWebPage(getFfWebDriver(), TestUtils.URL);
        test_CheckPhoneDetails();
    }

    @Test
    public void test_CheckPhoneDetails_Ch() throws Exception {

        myWebPage = new MyWebPage(getChromeWebDriver(), TestUtils.URL);
        test_CheckPhoneDetails();
    }

    @Test
    public void test_CheckPhoneDetails_IE() throws Exception {

        myWebPage = new MyWebPage(getIeWebDriver(), TestUtils.URL);
        test_CheckPhoneDetails();
    }

    @Test
    public void test_CheckPhoneDetailsNeg1_Ch() throws Exception {

        myWebPage = new MyWebPage(getChromeWebDriver(), TestUtils.URL);
        test_CheckPhoneDetails_Neg1();
    }

    @Test
    public void test_CheckPhoneDetailsNeg1_FF() throws Exception {

        myWebPage = new MyWebPage(getFfWebDriver(), TestUtils.URL);
        test_CheckPhoneDetails_Neg1();
    }

    @Test
    public void test_CheckPhoneDetailsNeg1_IE() throws Exception {

        myWebPage = new MyWebPage(getIeWebDriver(), TestUtils.URL);
        test_CheckPhoneDetails_Neg1();
    }

I want to test over three browsers so I create a method for each browser which all call the same method, the only difference being that a different web driver is configured. It may seem cumbersome to replicate the method over three browsers, but one of the main benefits is that I can individually test/debug a method specific to one browser and one method. Something I really do a lot of!

The “MyWebPage” class being created is just using the page object pattern to mask the web application I want to test. It holds a web driver, and the base URL. A load() method calls the initial load of the web page. In this class all other business logic can be found.

public class MyWebPage {

    private final WebDriver driver;
    private final String url;

    public MyWebPage (WebDriver driver, String url) {
        this.driver = driver;
        this.url = url;
    }

    public void load() throws Exception {

        driver.get(this.url);

…… etc

    }

More info here on page objects can be found here:
http://code.google.com/p/selenium/wiki/PageObjects

The super class for my tests called MultibrowserSeleniumTest really only initialises the web drivers and destroys them, as well as a references MyWebPage from the page object pattern.

public abstract class MultibrowserSeleniumTest {

    public static WebDriver ffWebDriver;
    public static WebDriver ieWebDriver;
    public static WebDriver chromeWebDriver;

    protected MyWebPage myWebPage = null;

    protected static WebDriver driver;

    public static WebDriver getFfWebDriver() {
        if (ffWebDriver == null) {
            ffWebDriver = new FirefoxDriver();
        }
        return ffWebDriver;
    }

    public static WebDriver getIeWebDriver() {
        if (ieWebDriver == null) {
            System.setProperty("webdriver.ie.driver", "src/main/selenium/IEDriverServer.exe");
            ieWebDriver = new InternetExplorerDriver();
        }
        return ieWebDriver;
    }

    public static WebDriver getChromeWebDriver() {
        if (chromeWebDriver == null) {
            System.setProperty("webdriver.chrome.driver", "src/main/selenium/chromedriver.exe");
            chromeWebDriver = new ChromeDriver();
        }
        return chromeWebDriver;
    }

    @AfterClass
    public static void afterClass() {

        if (ffWebDriver != null) {
            ffWebDriver.quit();
            ffWebDriver = null;
        }
        if (ieWebDriver != null) {
            ieWebDriver.quit();
            ieWebDriver = null;
        }
        if (chromeWebDriver != null) {
            chromeWebDriver.quit();
            chromeWebDriver = null;
        }
    }

Using lazy loading for the get****Driver methods, prevents having to load the driver for each method, which can become very tedious and time consuming. A browser instance should last over the life time of a test class.

It is important that we close off the browsers @AfterClass, and not after every method, otherwise what is the point of lazy loading the drivers?
Your test case method should then look something like this :

private void test_CheckPhoneDetails() throws Exception {

        MyWebPage.load();

        PhoneRow currentRow = MyWebPage.getPhoneRowFor("INVENTAR_TEST_POS",
                PhoneRow.PHONES_TABLE_HOSTNAME_CLASS);

        // click a row
        currentRow.click();

        Thread.sleep(100);

        List expandedSecs = MyWebPage.getAllExpandedSegments();

        // only one expanded section should be visitlbe
        assertEquals(1, expandedSecs.size());

        // get this web element
        ExpandedAreaSection expandedSegmentWebElement = expandedSecs.get(0);

        // applications invnetory table header should be there
        assertTrue(expandedSegmentWebElement.isCustomerHeaderShowing());

        // find all application rows in the expanded section.
        List customerItems = expandedSegmentWebElement.getCustomerRows();

        assertEquals(4, customerItems.size());

        InventoryRow customerRow = customerItems.get(0);
        assertEquals("John Smith", customerRow.getName());
        assertEquals("01234567889", customerRow.getPhoneNumber());
        assertEquals("Information Tablet", customerRow.getItemDesc());
        assertEquals("Tue Jan 01 00:00:00 CET 1980", customerRow.getItemDate());

        // find all application data rows in the expanded section.
        customerItems = expandedSegmentWebElement.getApplicationDataRows();

        assertEquals(1, customerItems.size());

        InventoryRow appDataRow = customerItems.get(0);
        assertEquals("Mr T", appDataRow.getName());
        assertEquals("1234567889", appDataRow.getPhoneNumber());
        assertEquals("Smart Phone", appDataRow.getItemDesc());
        assertEquals("Wed Sep 12 00:00:00 CEST 2012", appDataRow.getItemDate());
    }

TIPS

  • Always keep the test code as flat as possible. All complexity should be hidden inside the page object pattern classes.
  • User a pattern similar to my super class, that way only the browsers are loaded as needed.
  • Design the tests so that all the tests can share the same lifetime of the browser instance (which is why the browsers are closed off in the @afterClass method).

 

 


Posted in Design Pattern | Tagged , , , , | Leave a comment

Simple Pie Chart in Java Swing

Posted on September 10, 2012 by felixzacat

I know there are a lot of Swing charting software libraries out there (JFreechart comes to mind). But a lot of them come across as too bloated and require a lot of time to become familiar with.
My own Piechart is as simple as it gets; collect your segments as percentages in a list, along with the corresponding colours :

ArrayList<Double> values = new ArrayList<Double>();
values.add(new Double(10));
values.add(new Double(20));
values.add(new Double(30));
values.add(new Double(15));
values.add(new Double(15));

ArrayList<Color> colors = new ArrayList<Color>();
colors.add(Color.gray);
colors.add(Color.green);
colors.add(Color.blue);
colors.add(Color.pink);
colors.add(Color.yellow);
 PieChart pieChart = new PieChart(values, colors);
myPanel.add(pieChart);

You can get something that looks like this :

Its really basic, but its also very minimalist and does away with a lot of noise that other charting programs offer.

Simple Indicator.

I thought I would also add a couple more modes to my pie chart. The second mode is what I would call a simple indicator mode. This displays just one percentage value as a slice of the pie.

PIeChart pieChart = new PieChart(70);

I find these indicators look very effective as small graphics next to numerical text, as the following example tries to show:

I’m not 100% sure this is the best way to visually enhance percentages, but I think it looks good in certain situations.

Graded Indicator.

Another visual approach to showing a percentage growing into a critical phase, is to somehow grade the colors as the percentage level gets higher. I decided to create a third mode which allows the user to set a number of gradings with corresponding colors. As the percentage gets close to 100% the pie sections get smaller and the colors get more prominent.

Here is an example :

To use the third mode simply add an array of percentages with an array of colours, plus an overall percentage, to a third constructor :

        ArrayList<Double> values = new ArrayList<Double>();

        values.add(new Double(60));
        values.add(new Double(20));
        values.add(new Double(10));
        values.add(new Double(7));
        values.add(new Double(3));

        ArrayList<Color> colors = new ArrayList<Color>();

        colors.add(new Color(255,255,255));
        colors.add(new Color(255,183,183));
        colors.add(new Color(255,6,6));
        colors.add(new Color(244,255,43));
        colors.add(Color.BLUE);

        PieChart pc = new PieChart(grade, values, colors);

Here is the source code to the pie chart with all three modes :

 

package com.gg.piechart;

import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.geom.Arc2D;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Point2D;
import java.util.ArrayList;

import javax.swing.JPanel;

public class PieChart extends JPanel {

	enum Type {
		STANDARD, SIMPLE_INDICATOR, GRADED_INDICATOR
	}

	private Type type = null; //the type of pie chart

	private ArrayList values;
	private ArrayList colors;

	private ArrayList gradingValues;
	private ArrayList gradingColors;

	double percent = 0; //percent is used for simple indicator and graded indicator

	public PieChart(int percent) {

		type = Type.SIMPLE_INDICATOR;
		this.percent = percent;
	}

	public PieChart(ArrayList values, ArrayList colors) {

		type = Type.STANDARD;

		this.values = values;
		this.colors = colors;
	}

	public PieChart(int percent, ArrayList gradingValues, ArrayList gradingColors) {
		type = Type.GRADED_INDICATOR;

		this.gradingValues = gradingValues;
		this.gradingColors = gradingColors;
		this.percent = percent;

	}

	@Override
	protected void paintComponent(Graphics g) {

		int width = getSize().width;

		Graphics2D g2d = (Graphics2D) g;
		g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, // Anti-alias!
				RenderingHints.VALUE_ANTIALIAS_ON);

		if (type == Type.SIMPLE_INDICATOR) {

			//colours used for simple indicator
			Color backgroundColor = Color.WHITE;
			Color mainColor = Color.BLUE;

			g2d.setColor(backgroundColor);
			g2d.fillOval(0, 0, width, width);
			g2d.setColor(mainColor);
			Double angle = (percent / 100) * 360;
			g2d.fillArc(0, 0, width, width, -270, -angle.intValue());

		} else if (type == Type.STANDARD) {

			int lastPoint = -270;

			for (int i = 0; i < values.size(); i++) {
				g2d.setColor(colors.get(i));

				Double val = values.get(i);
				Double angle = (val / 100) * 360;

				g2d.fillArc(0, 0, width, width, lastPoint, -angle.intValue());
				System.out.println("fill arc " + lastPoint + " "
						+ -angle.intValue());

				lastPoint = lastPoint + -angle.intValue();
			}
		} else if (type == Type.GRADED_INDICATOR) {

			int lastPoint = -270;

			double gradingAccum = 0;

			for (int i = 0; i < gradingValues.size(); i++) { 				g2d.setColor(gradingColors.get(i)); 				 				Double val = gradingValues.get(i); 				gradingAccum = gradingAccum + val; 				 				Double angle = null; 				 				/** 				 * If the sum of the gradings is greater than the percent, then we want to recalculate 				 * the last wedge, and break out of drawing. 				 */ 				 				if (gradingAccum > percent) {

					System.out.println("gradingAccum > percent");

					//get the previous accumulated segments. Segments minus last one
					double gradingAccumMinusOneSegment = gradingAccum - val;

					//make an adjusted calculation of the last wedge
					angle = ((percent - gradingAccumMinusOneSegment) / 100) * 360;

					g2d.fillArc(0, 0, width, width, lastPoint, -angle.intValue());

					lastPoint = lastPoint + -angle.intValue();

					break;

				}else {

					System.out.println("normal");
					angle = (val / 100) * 360;

					g2d.fillArc(0, 0, width, width, lastPoint, -angle.intValue());

					System.out.println("fill arc " + lastPoint + " "
							+ -angle.intValue());

					lastPoint = lastPoint + -angle.intValue();
				}
			}
		}
	}
}

Posted in Swing | Tagged , , , | 10 Comments

Database Performance Tip, using a delete table to improve network performance.

Posted on August 12, 2012 by felixzacat

Sometimes you want to display a large amount of data from a database table in your client application. One example from my past was a trading system built in Swing. The center piece of which contained a huge scrollable table with hundreds of thousands of financial transactions, which needed to be updated every few seconds.

Now obviously you can’t just refresh the data every few seconds. Pulling those hundreds of thousands of rows over the network would be impossibly slow.

You are only interested in what has changed, and what has become ubiquitous in database table design is the inclusion of a CREATED_DATE and UPDATED_DATE column. This allows us to programmatically grab only the data which has changed.

SELECT *
FROM TRANSACTIONS
WHERE UPDATE_DATE > $MY_LAST_SELECT_TIMESTAMP$

We store the timestamp of the last time we performed out select, and use this timestamp to pull out only the rows that have changed. After we have these updated rows, we amalgamate them with our current client side data, using perhaps a huge Hashmap to store all out client side data.

This isn’t brain surgery, but what happens if, along with updates to the data rows, you also can have rows deleted in our database? If we just use the above SQL query we will not pick up on any rows that have been deleted, because the row physically just isn’t there. Therefore we cannot reflect the exact state of the database table in our update query.

One solution is to not allow any physical table row deletions. A row is only moved into a “deleted state”, but physically it still exists in the table.

What if you need to be able to delete rows anyway?

Well… you need a “Delete table”.

Table: TRANSACTIONS
TRANS_ID    TRANSACTION DESCRIPTION    CREATED DATE    UPDATED DATE
1    Something here    12.12.2011    13:22:03 12.12.2011
3    Something here    12.12.2011    14:54:11 12.12.2011
4    Something here    12.12.2011    8:33:23   12.12.2011
6    Something here    12.12.2011    8:33:27   12.12.2011

Table: DELETED_TRANSACTIONS
TRANS_ID    UPDATED DATE
2    8:33:23 12.12.2011
5    8:35:56 12.12.2011

Every time a row is deleted in our transaction table, we want to update the DELETED_TRANSACTIONS table, by noting the ID of the row that was deleted.
Now we need two queries. One to reflect the changes in the database, which is the same as before :

SELECT *
FROM TRANSACTIONS
WHERE UPDATE_DATE > $MY_LAST_SELECT_TIMESTAMP$

And then we need this query to find any rows that have been deleted in since the last query was executed :

SELECT *
FROM DELETED_TRANSACTIONS
WHERE UPDATE_DATE > $MY_LAST_SELECT_TIMESTAMP$

Hope this helps!


Posted in Uncategorized | Tagged , , , , | Leave a comment
TEST4