Tuesday, 25 September 2012

Dojo Topic

Dojo provides a really useful topic based messaging system that can be used to send messages between decoupled pieces of javascript.

require / define

To use the topic functionality just include

    "dojo/topic"

at the top of the javascript file in the require or define section


Subscribe / Publish

It is really easy to use this functionality.  Firstly subscribe to a topic where the topic has a particular string name and a function to call as a result of a message,


    topic.subscribe("/log/add", function(message) {
        console.log(message);
    });


Now everytime a publish is done to the /log/add topic the function will be called.

To publish to that topic

    topic.publish("/log/add", "the message");

The publish subscribe isn't limited to one variable and can be passed multiple values.

That's really all there is to it.  The functionality is incredibly useful for larger web apps and particularly where the app code has been split into different modules and not all modules know about each other.  It helps to keep the hierarchy correct.


Tuesday, 18 September 2012

Dojo Mouse and Keyboard Events

Keyboard events in dojo are pretty easy for the most part!  You can just use the on() function to attach them and you are done! The on function is part of the "dojo/on" module which will need to be part of the require or define declaration.

Example to catch mouse down events on a particular dom


    on(registry.byId("myDiv"), 'mousedown', function(evt){
        console.log("Mouse Down Event");
    });


Catch keyup events on an input area.


    on(registry.byId("search"), "keyup", function(evt) {                
        doSearch(registry.byId("search").get('value'));
    });


The biggest problem arises when you want to catch a keyboard event on a dom object which doesn't normally accept keyboard input such as a div, span etc.  In this case you need to make it focusable and by far the easiest way to do that is to add a tabIndex.

    dom.byId("myDiv").tabIndex = 0; // Allow key events
    on(dom.byId("myDiv"), 'keypress', function(evt){
        console.log("KeyPress Event");
    });

You can use the dojo/keys module to check for the key value just like in Java Swing.


    if (evt.keyCode == dojo.keys.LEFT_ARROW){

    } else if (evt.keyCode == dojo.keys.RIGHT_ARROW) {

    }




Thursday, 13 September 2012

Useful Tools

Here is a list of useful tools that I have come across.  I'm always forgetting what I've found so here is a list!

Development Tools

Toad
http://www.toadworld.com/
Brilliant SQL editor and database management tool.

Console
http://sourceforge.net/projects/console/
Really useful Windows Command wrapper with gives tabs, resizing, etc

MPutty
http://ttyplus.com/multi-tabbed-putty/
Manages multiple putty windows

SoapUI
http://www.soapui.org/
Tool for testing soap services.

IETester
http://www.my-debugbar.com/wiki/IETester/HomePage
Tester to allow rendering in multiple different IE versions.

SourceTree
https://www.sourcetreeapp.com/
Windows app for accessing Git repositories

Text Editors

JEdit
http://www.jedit.org/index.php?page=download
Great cross-platform tool.  Drag to select is cool as is the encoding support.

Textpad
http://www.textpad.com/
Good integration with windows.

Notepad++
http://notepad-plus-plus.org/download
Good general text editor.

Zip / Archive

7-zip
http://www.7-zip.org/
Easily the best free zipper around (IMHO!)

File Transfer

Filezilla
http://filezilla-project.org/
Free FTP file transfer tool - very good.

WinSCP
http://winscp.net/eng/index.php
Another good FTP / SFTP tool.

PC Cleanup

CCleaner
http://www.piriform.com/ccleaner/download
Cleans up temp files and scans and cleans registry.


Audio / Visual

HD Converter
www.koyotesoft.com

Converts HD formats.

Camstudio
http://camstudio.org/
Record video / audio from the activity on your computer.

GIMP
http://www.gimp.org/
GNU Image Manipulation Program.

Audacity
http://audacity.sourceforge.net/
Music file manipulation.

Virus / Malware

Malwarebytes
http://www.malwarebytes.org/
Good malware and virus scanner.

Spybot
http://www.safer-networking.org/dl/
Good spyware killer.

Sophos Anti-rootkit
http://www.sophos.com/en-us/products/free-tools/sophos-anti-rootkit.aspx
Tries to find and remote root-kits from your computer.

Wednesday, 12 September 2012

Dojo Layouts

There are a number of layout mechanisms in Dojo.  These allow layouts to be quite simply performed but to give great results.

ContentPane

This is a simple holder and can be used to hold any standard html or dijit widgets.  It is constructed by using,

    <div id="myContent" data-dojo-type="dijit.layout.ContentPane">

As with all widgets dojo will expand out this div into multiple layers.

Reference: http://dojotoolkit.org/reference-guide/dijit/layout/ContentPane.html for more details.

BorderContainer

The border container gives a top, bottom, left, right and center region that another pane can be added to.  This makes Headers, Menus and footers incredibly easy to create.  It works in a very similar way to the java swing BorderLayout.

    <div id="myContent" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="liveSplitters:true">
        <div id="myTop" data-dojo-type="dijit.layout.ContentPane"  data-dojo-props="region:'top', splitter:true">...</div>
        <div id="myCenter" data-dojo-type="dijit.layout.ContentPane"  data-dojo-props="region:'center'">...</div>
    </div>

Note the difference between 'Headline' and 'Sidebar' views. Headline has the top and bottom having 100% width but sidebar has the left and right having 100% height.

To allow the user to move the regions include data-dojo-props="liveSplitters:true" to the BorderContainer div and put data-dojo-props="splitters:true" on the regions you want to be able to resize.

Reference: http://dojotoolkit.org/reference-guide/dijit/layout/BorderContainer.html
Tests: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/BorderContainer.html

AccordionPane

Accordions can make very useful tools for menus or tools.  They are easy to set up in Dojo.  Create a div element of type diji.layout.AccordionContainer.  Nested within this create some ContentPane div elements and each will be an accordion tab.


    <div id="accordionContainer" data-dojo-type="dijit.layout.AccordionContainer">
        <div id="menuPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'Menu'">
            ...
        </div>
    </div>


Reference: http://dojotoolkit.org/reference-guide/dijit/layout/AccordionContainer.html
Tests: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/AccordionContainer.html

Tuesday, 11 September 2012

Dojo TriStateCheckBox

The TriStateCheckBox is a relatively new addition to Dojo.  It is available in version 1.7.3 and above.  Currently it is in the dojox module.  Because it is yet to be in the standard dojo / dijit modules its style sheet is not in the standard css either.  To make it work you need to include its style sheet separately.

Links

Here are some links to the TriStateCheckBox test pages,

Latest Tests: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_TriStateCheckbox.html

Tests for version 1.7.3: http://download.dojotoolkit.org/release-1.7.3/dojo-release-1.7.3/dojox/form/tests/test_TriStateCheckbox.html

Setup

The stylesheet is required separately, such as,

    <link rel="stylesheet" type="text/css" href="http://<dojo_provider>/dojo/1.8.0/dojox/form/resources/TriStateCheckBox.css" />

Obviously you have to use a dojo provider or host the dojo css and js locally.

The require function on the page needs to have "dojox/form/TriStateCheckBox" as part of it.

    <input id="tscb" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='checked:true'/>

This will create a checkbox which is initially checked.

Interaction

The default checkbox has three states for the 'checked' variable.  These are true, false, and mixed.  The checkbox above is defined as checked initially.  To get or set the state just use

    registry.byId('tsch').get('checked')

    registry.byId('tsch').set('checked', 'mixed')

where the registry is the dijit registry (see http://awhite.blogspot.co.uk/2012/09/dojo-dijit-dojox-tips.html)

Mixed -> Checked

When clicking on the TriStateCheckBox in the mixed state it goes to the unchecked state by default.  If this isn't what you want you can force it to go to a checked state using the states 'cycle'.

data-dojo-props='states:["mixed", true, false]'

Thursday, 6 September 2012

Dojo / Dijit / Dojox Tips

Dojo is the javascript abstraction and extension library written by IBM.  It is less popular than JQuery but has superior functionality in some regards, particularly surfaces and shapes.

Documentation

Entry Point: http://dojotoolkit.org/
Latest Reference Guide: http://dojotoolkit.org/reference-guide/
Latest API Docs: http://dojotoolkit.org/api/

GFX / SVG Tutorial (version number in link): http://dojotoolkit.org/documentation/tutorials/1.8/gfx/
GFX / SVG Reference: http://dojotoolkit.org/reference-guide/1.8/dojox/gfx.html

Widget Test Areas
http://archive.dojotoolkit.org/nightly/dojotoolkit/
(navigate to the module required then 'test' for the html page)
Eg,
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_TriStateCheckbox.html

Requires Structure

Dojo uses a particular structure to define the packages which are going to be used.  This is easiest to show by example,

    <script type="text/javascript">
        require(["dojo/on", "dojo/ready", "dojo/domReady!"],
            function(on, ready) {
                ready(function() {
                    on(dojo.byId("myButton"), "click", function(evt) {
                        alert("button clicked");
                    });
                });
            }
        );
    </script>

Here the dojo packages are defined in an array as the first parameter passed to the require() function.  in the second parameter a function is defined which itself has parameters with names marrying up to the the packages imported.  Eg

    dojo/on  ->  on
    dojo/ready  -> ready

These lists can get quite big at times!

Modules

Splitting code into multiple 'modules' like dojo can be really useful.  The main code that does this is,

    <script type="text/javascript">
    dojoConfig = {
       async: true,
       isDebug: true,
       parseOnLoad: true,
       packages: [{
           name: "example",
           location: '${pageContext.request.contextPath}/resources/js/modules'
       }]
    }
    </script>

Here the ${pageContext.request.contextPath} is used rather than <c:url ...> and that is because if the server doesn't know whether cookies are supported it'll add a ;jsessionid=... on the end of the c:url and this will stop dojo resolving the modules correctly.  Therefore using the c:url request here is not a good idea.

If a file utils.js is placed in the 'location' then this can be used by referencing example/utils in the require method.

    <script type="text/javascript">
        require(["example/utils", "dojo/ready", "dojo/domReady!"],
            function(exampleUtils, ready) {


The actual utils.js file has a very similar structure to a basic dojo require except that it is a 'define' instead,

    define(["dojo", "dojo/dom", "dojo/dom-geometry", "dojo/dom-style"],
        function(dojo, dom, domGeom, domStyle) {
            variable1 = null,
            array1 = new Array(),
            arraySize = new function(){
                return array1.length;
            }
        
            return {
                arraySize : function arraySize(){
                    return arraySize();
                }
            };
        }
    );

Here the function of the module returns an object which has a method in it.  Making a call on the method in this returned object would cause a redirect to the method defined in the module itself.  This way internal 'private' functions can be created without them having scope in the return part of the module.

While the example above is fine it doesn't define an object that could be reused multiple times such as a canvas.  The example is for a module such as utils etc.

This following example has an extra layer of objects which encapsulate data

    define(["dojo", "dojo/dom", "dojo/dom-geometry", "dojo/dom-style"],
        function(dojo, dom, domGeom, domStyle) {
            myObject = {
                innerVariable : null,
                innerArray : new Array(),
                arraySize : new function(){
                    return innerArray.length;
                }
            }
        
            return {
                arraySize : function arraySize(){
                    return myObject.arraySize();
                }
            };
        }
    );

Note that object literals are used here now as we are defining the elements of the object.

Dojo style

To style items such as a button declaratively,

Watch out for the dojo version number, here it is 1.9.3
- Include the Dojo stylesheets
- Tell dojo to parse the html on load
- Include the Dojo .js file
- Set the style on the body

<html>
  <head>
    <!-- Stylesheets -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojox/grid/resources/claroGrid.css">


    <!-- Parse on load -->

    <script>dojoConfig = {parseOnLoad: true}</script>


    <!-- Include .js -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js"></script>
  </head>

  <!-- Body class -->
  <body class="claro">

    <!-- Dojo type -->
    <Button id="myButton" data-dojo-type="dijit/form/Button">My Button</Button>
  
  </body>
</html>

byId

byId() is the main way to get an html element.

    var myComponent = dom.byId('myComponentId');

this will get the typical html element (the DOM node) where 'dom' is from the module "dojo/dom".
(see http://dojotoolkit.org/reference-guide/dojo/dom.html)

If you are using dijit to create widgets then the id specified in the original html can be used to get the javascript object rather than the HTML element.  As part of dijits creation of objects it creates a registry which links the original id to the appropriate javascript object that dijit creates.  This registry can be accessed using the module "dijit/registry" in the require or define call.  Then you simply do

    var myComponent = registry.byId('myComponentId');

(see http://dojotoolkit.org/reference-guide/dijit/registry.html)

While dojo.byId() and dijit.byId() exist they have been deprecated to the functions above.

Changing Style

For simple html elements this is really straight forward,

    domStyle.set("myHtmlElementId", "display", "block");
    domStyle.set("myHtmlElementId", "width", 100);

for dijit created items like dijit buttons this is harder because the id isn't going to be correct as dojo will have expanded the html

    require(["dojo/ready", "dojo/dom-style", "dijit/registry"],
        function(ready, domStyle, registry){
            ready(function(){
                // hide a widget with id="myThinger"
                domStyle.set(registry.byId("myThinger").domNode, "display", "none");
        });
    });

Monday, 3 September 2012

Java Regular Expressions

Regular Expressions (Regex) are a really powerful tool for doing string manipulation and searching but they can be complicated!  Here are some basics.

Pattern

Creating a Pattern object in Java is a prerequisite to getting Regex going.  This can be created using code such as

    Pattern pattern = Pattern.compile(<Regex>);
    Matcher matcher = pattern.matcher(<String to check>);
    if (matcher.matches())
    {
        // Do something
    }

or
    while (matcher.find())
    {
        String found = matcher.group()
        // Do something
    }

Basic Regex

Regular expressions normally include some of the following


  • [0-9] = any of 0, 1, ..., 9 - any number of times
  • [0-9a-zA-Z] = any of 0, 1, ..., 9, a, b, ..., z, A, B, ..., Z - any number of times
  • [0-9]{3} = any of 0, 1, ..., 9 exactly 3 times
  • [0-9]{3,6} = any of 0, 1, ..., 9 between 3 and 6 times
  • [^0-9]  = any character that isn't 0, 1, ..., 9 eg negation
  • . = any character one time
  • .* = any character any number of times (0 or more)
  • .+ = any character at least once (1 or more)
  • \w = any word character
  • \d = any digit character
  • \s = whitespace character

Some characters need to be escaped if you want to use them in the regex itself.  These are
  • {}[]().*\

Groups

Groups can be a really useful and powerful concept.  If you want to replace elements of the regex but keep some bits then groups can help you. Placing parts of the regex in normal brackets will mean that they are available as a group after the match.  For example

    regex = "(hello)(\s*world)";

will match on 'hello world' but the elements are available in group $1 and $2.  They can be obtained from the matcher (see above) using

    String firstGroup = matcher.group(1);

And similarly with a replace request such as,

    matcher.replaceAll("Goodbye$2");


would replace the matched string with Goodbye and then whatever is in group 2, which is ' world'.  This way matcher can replace elements of what has been matched.


Examples


Replace all non-standard characters

    Pattern pattern = Pattern.compile("[^a-zA-Z0-9]");
    Matcher matcher = pattern.matcher(myWeirdString);
    matcher.replaceAll("");

Match all non-standard characters using the Pattern and Matcher.  Then just call replace all to get rid of everything matched!


Thread Safety

Pattern objects are thread safe but matcher objects aren't!  From the doc...

Instances of this (Pattern) class are immutable and are safe for use by multiple concurrent threads. Instances of the Matcher class are not safe for such use.

Rubular

This tool is really useful for checking regular expressions!

http://rubular.com/