I decided to build my own version of a contextual hover menu to make my applications more usable. It is meant to appear when you select a piece of data and give you quick access to all the actions you might perform on it. Forget long toolbars and hidden right-click menus. I wanted something that a user didn't have to dig around to find, that wouldn't be hard to navigate, and that wasn't hidden (a right-click on the web is not common enough for users to rely on).

I'll walk you through the beginning process I took to create the HoverMenu component using Simpli5 and then I'll cover at a higher level the UX considerations that went into making it even better. You can check out the component in action first (using Safari, Chrome, or Firefox).

Base Simpli5 Component

To start, Simpli5 encourages using tags that provide good semantics for the application, ignoring whether or not they are valid HTML tags. It makes your application easier to read and understand, and since Simpli5 was made for creating full web applications, SEO and other content-based concerns are thrown out the window. I will start with the component definition in HoverMenu.js. I have the base component, menu containers, and menu items that I'll need. There will also be separators, but that has no code or logic and so can just be added in the stylesheet.

I'll give it a stylesheet HoverMenu.css to make it look good.

What I want is when the user hovers over the button, the menu pops up.

Of course, sometimes I might want to have the user click to popup the menu, for ones that are used less often or in the case that there are many on the screen (don't want to have popups all over the place by moving your mouse around).

Here I added an implicit getter/setter that by default is false so hovering will open the menu. But if hoverMenu.clickOnly = false or <hover-menu click-only="false">...</hover-menu> then you'll have to click the button to open the menu.

I've also added other settings for customization: autoClose to close the menu automatically when the mouse moves off of it for a few milliseconds, menuDelay to turn off the delay menus take to close (I talk about this later), and openBelow to cause the menu to open up beneath the button instead of to the side of it.

Next we need to allow menu items to hold submenus and to dispatch events when the user selects them. It would be nice if these can be triggered by code too.

Hopefully you can understand the logic by reading through the code, but there are a couple of things I want to point out. The "events" property holds a list of custom events for the component to look for when initializing its attributes. Because I specified the select event there you can add onselect="alert('item selected')" to the tag and it will work. Also, our first usability tidbit for the menu, don't close submenus until the user moves their mouse to a sibling menu item. That wraps up our basic-component-building-101-in-Simpli5 overview and brings us to our user experience in using this component. Now I realize that UX encompasses so much more than a component, but the usability and experience the user has with this component is what I am referring to when I say UX.

Making it Shine with Usability

Most of these things were added because I tried using the menu and noticed spots of frustration. Some were added from suggestions of others.

The first thing I did to enhance the usability of the menu was to keep the entire menu and submenus from closing immediately. The less accurate a user has to be with their mouse, the quicker they can get things done and the easier it is to use an application. If the menu closes because a user accidentally moves the mouse a little beyond the menu then they have to start all over again opening the menu up from the beginning. When the hover menu's autoClose is true, the menu waits 600 milliseconds before closing. This allows a user to make mouse mistakes and recover from them before having to reopen the menu.

The next usability piece came from testing with longer submenus. I noticed that if I wanted to click the last item in a submenu and I moved my mouse strait to it, the mouse path went over the edge of the next sibling menu item, closing the previous item's submenu. In order to select that last submenu item I had to alter my mouse path to a 7 shape, moving across to the submenu first, then down to the desired item. In order to allow some forgiveness in the mouse movement while trying not to hamper the speed at opening the next submenu if that is the real desired action, I added a 150ms delay in opening and closing submenus. This seemed to be enough time for a quick mouse movement down across sibling menu items into the submenu, while not being too much time if you wanted to open the sibling submenu. I also added the menuDelay option that defaults to true, but can be set to false if you want to get rid of this 150ms delay.

I added an alternate element style in the stylesheet for elements called <menu-content> which is an alternative to holding menu items in a submenu and allows robust components like color pickers or lists of images to be used, adding to the overall UX of the UI.

I added positioning support for them menus to popup above or to the left of their parent if they are near the edge of the screen. I made the menus append to the body of the document so that they wouldn't get cut off by any overflow auto/hidden elements. There were also other small things I added too, such as a style on items with open submenus so they can be seen easier and allowing the menu to be closed by clicking elsewhere or pressing Esc.

Overall the component turned out quite well. Here is a demo page of it in action (view source to see the markup): http://jacwright.github.com/simpli5/demos/hover-menu.html

Problem

You want to perform some action when the cursor rolls onto and off of an HTML element. When you use the mouseover/mouseout events, you get a mouseout and immediately another mouseover when the cursor is over a child element. Technically the mouse is still over the parent element, why does the mouseout happen? What the... you want it to work like CSS :hover. The way you'd think it SHOULD work. You figure, maybe it's just you're catching because bubbling child events, so you return out of your listener if the target does not equal your element. This removes the second mouseover, but you still get a mouseout when hovering over a child element.

Solution

Flash's solution was to build in a non-bubbling rollover/rollout event that works like you'd expect. I've never used a mouseover/mouseout in Flash since these new events came about. So, assuming you've got a modern standards-compliant browser (tested on Safari/Chrome & Firefox), this little bit of code will provide rollover/rollout events for your HTML and is non-intrusive. It saves a lot of headache and works great.

Updated: The code did not previously take into account siblings, only ancestors. Fixed to find the common ancestor.

I hope this helps someone having a rough time with Javascript mouseovers.

Data Binding

Data binding is a technique we have and use in Flash quite a bit that allows one property to stay in sync with another. If obj.x is bound to obj.y then whenever obj.x is changed, obj.y will automatically update to the same value. I've built my own data binding frameworks in ActionScript 3 and I wanted it for my Javascript work as well.

Since Simpli5 has a base-line of HTML5, I was easily able to create data binding in Javascript using implicit getters and setters. Any property on an object can be bound. My binding supports one-way, two-way, and bind-setters, and it allows deep binding.

One-way binding propagates the changes of the source object's property to the target object's property. Whenever the source's property changes, the target's property updates. If the target's property is changed however, nothing will happen to the source.

Two-way binding keeps the properties of the source and target in sync. When first bound, the source's property will be the value used, but if either the source's property is changed or the target's property is changed the other will update to stay in sync.

Deep binding is being able to bind the property of a property of the source. As an example, obj.x would be shallow binding where obj.x.y.z would be deep binding.

Binding Usage

The following shows how binding can be used.

Binding added to Template

I've added a new method to Template called createBound(). The Template.create() method will give you back an HTML element created from the template's HTML, replacing anything in curly braces with the evaluated javascript equivalent. With Template.createBound() you get back an HTML element which continues to update its attributes or text content as properties in the data or element change. Perhaps the best way to explain is to show some code.

I've made it the component creation method of course, so now the properties on your components can update the HTML directly. And it isn't setting the innerHTML of the component, which would replace all the sub-elements and destroy any listeners that were on the old ones. It's binding smartly so that attributes and text get updated carefully.

Limitations

There are properties on elements that binding will not work the way you'd expect. Things like element.id, element.firstChild, img.src, et cetera, which the browser treats in a special way but are not getters and setters (as far as the javascript can tell anyway), these cannot be bound to reliably. They cannot be the source of a bind, but they could be the target of a one-way (non-deep) bind just fine.

Testing

I've started adding unit tests to the framework, especially since data binding can be such a tricky thing. I've got tests around the binding and the templates right now and feel confident that they are working pretty well. I'm using js-test-driver. I've also added a maven build file for the tests and for compressing the library into a single file and a compressed file.

The Simpli5 project is being hosted on Github: http://github.com/jacwright/simpli5.

Optimization

Because I'm using built-in Javascript methods (written in C) for many things I do, I am taking advantage of the speed of modern HTML5 browsers, without the bloat of code that makes up for missing features. Array.prototype.slice is used to convert NodeLists and Argument objects into arrays with $.toArray(); querySelector and querySelectorAll are used to quickly find the first or all matches for a given selector string. The built-in Array.prototype.forEach is used for iterating over arrays.

HTMLElement.prototype

I can add methods to the prototype of Node and HTMLElement, giving all elements in my document functionality that I feel are common enough to be needed.

And much much more.

simpl5 Element Wrapper

I've also create a jQuery-like class (called simpli5) which is basically an Array (uses all the native Array methods like concat, splice, forEach, map, etc.) and forwards all my calls I specify onto the elements in the array.

Class Model and EventDispatcher

I like the class model a lot. It is actually compatible with earlier browsers as well. And I do use getters/setters now that I can. I also created an EventDispatcher class that provides the addEventListener/removeEventListener/dispatchEvent, and the shortcut methods on/un.

Component Model

The part I'm most excited about is my component model. It allows you to make DOM elements become new classes. I can take a common <button id="myButton"></button> (HTMLButtonElement) element and make it become my ToggleButton component. You will even get a "true" when doing: document.getElementById('myButton') instanceof ToggleButton. The following is a simple Button component.

Just the Beginning

This is just the start. I've been borrowing ideas and code from libraries such as jQuery, mootools, prototype, and Extjs. The library is still only partial with many missing features, but it will mature, and the beginning I've got has been quite exciting.

Short background: I was looking into creating a Flash drawing app that consisted only of the canvas portion, with the rest of the UI in HTML. This is for many reasons including the size of Flex, the native OS components in the browser, speed, and hey, it forces separation of core app logic from the presentation logic, right? ;)

So I wanted a way to display thumbnails of the pages of my drawing. This was all proof of concept and I only have one page and one thumbnail. To do so, I used the URI Data scheme to set the data of a HTML <IMG> element. The only modern browser (if you can call it that) which this doesn't work with is IE6, an acceptable loss for proof-of-concept. Here is how it works in my proof of concept:

See the Studio proof of concept

First, I take a resized bitmap snapshot of my canvas anytime something on it changes, in this example, when it scrolls (I may post about the scrolling in another post, also cool geek stuff). This is done using the BitmapData.copy() method. Actually, I'm using my ImageUtils class which ensures it looks good when resized (more about that in another post). Then I turn the BitmapData object into a PNG with AS3CoreLib's PNGEncoder. I now have the bytes for a PNG, so how do I get it to HTML without sending it to the server first? Well, I'll tell you!!

I take the ByteArray that the PNG encoder class gives me and I encode it with Base64Encoder, prepend "data:image/png;base64," to it, then send it out to javascript using ExternalInterface to call a JS function already on the page. That function receives the base 64 encoded string and sets it to the "src" property of the little thumb image down at the bottom of the page. You can see every time you scroll it updates. No biggie right, but if you right-click on it you'll see that it is just an HTML image, right-click on the canvas and see that it is a Flash movie. No server round-trips, 100% Flash/Javascript realtime interaction. Tada!

I did a bit more playing around with it, giving the bitmap rounded corners in Flash before sending it to the browser, tried shadows too, but decided they didn't look great in this interface, so left them out.

Really fun stuff. I hope this is inspiring, even if it isn't useful in your situation. Next time I'll talk about how the native browser scrollbar is scrolling the Flash content, though you may be able to guess easy enough.

I am currently using StatCounter.com to track the traffic to my site. It is really useful when you use their paid service which keeps track of more than the last 100 visits to your site (the free version cap). It lets you view all the regular stats as well as "drill down" to see the actual path a single visitor took through your site. But, it is a monthly subscription service, which means potenially hundreds of dollars a year, even though it's not much each month.

Mint is a one-time site liscence fee of $30. So I felt it would be a good investment over the monthly fees of StatCounter. What sums up my thoughts upon using Mint is this: a regular stat tracker was given a great design and some cool javascript effects to make things easier to use. It looks wonderful, but it lacks much. Things such as tracking return visitors, displaying charts and graphs of the data, and being able to drill down to see individual users and their paths are things that really make a web stat tracker useful. A good user interface is important as well.

One bonus to Mint is it can be extendable with plugins or "pepper" as it's called for marketing. Although, I'm not sure if extras will be sold by other developers, release for free even though the original is a paid product, or both. I should make it easier for the maker of mint to deploy new features anyway.

Overall, I enjoy Mint, and it's price is much more favorable than the recurring price of StatCounter. I will stick with it and create some nice graphs of the data for my personal use (whenever I get spare time). Perhaps sell it as a plugin or something.

This was created for DOMClass objects but has been very nice for creating elements on the fly. It is as easy to use as the innerHTML property of an element, but it works with table elements etc. and gives you the node reference which you may then attach code to as needed.

Javascript is beautiful.

First I check what type of element this is using a regular expression. Then I make a container to put my innerHTML in. Following is a switch statement to handle the special types that can't be created using innerHTML unless inside of their native element. I assign the target node to the elem variable and then return it after the switch statement. Pretty simple, really nice to use.

No more of this element wrapper stuff. I don't want to code my classes to act upon a DOM element. I want to write them as if they actually arethe DOM element, just a specialized one. This makes much more sense to me as I am working with the objects of the DOM.

Here is the code:

You can just add this to your Prototype library or something. Then start making your components.

The way to use this is pretty straightforward. First, you create a new "class" like so:

Let's walk through this step by step. First, I create a new class called MySentence. It will be a paragraph element and it will have some text inside of it (the contents are not required). Simple enough. I can then declare my prototype for the class which will contain all the methods of my new class, including an initialize method which will be called if it exists. In the initialize method I find the STRONG tag and assign it to the property "word" for use in my other method, rewrite. That method just changes the word inside the STRONG tag. I now have a class that when created, will be a paragraph with some great text inside of it and a method to rewrite the word "great." You may even try it out and see it working in action. Here is a fun test:

Putting all of the above code in a HTML page will give you some text that when clicked on, will change the wording. Pretty useful huh! Ok, so maybe this particular example isn't uber useful, but coding new objects, widgets, and components might be easier. At least a little bit. You may see the above example in action.

I'll see what I can add onto this to make it better. Perhaps something where you can access the tags inside by saying this.word = this.strong[0]; instead of having to loop through all the children.

This class works for both IE 6 and Firefox. I would be very interested to know how many other browsers it worked on.

I have another javascript goody that my friend Derek and I worked on together which is pretty cool. I'll share that soon too.