MinimalCompsJS Preview #2

Oct 05 2011 Published by under Components, JavaScript

Just uploaded an update to the MinimalCompsJS project. The demo looks pretty much the same as the last one, but the components are completely refactored. Now, each component creates its own individual canvas element and adds it to a div (or any other element that can contain a canvas). So you don’t need to create any canvas at all to use them. This has massively simplified a lot of the code for redrawing and for mouse events.

One might ask, why use canvas at all? Why not just use text and styles? This would be possible, but using canvas as the base of each component has helped to unify how everything works and makes good use of the canvas drawing API, which I conceive will be useful as this goes forward.

I came up with a few nice little tricks in there too. One of the nicest, I think, is method chaining. Almost all publicly intended methods that don’t obviously return a value will return the component instance itself. This way you can create a component and chain together multiple methods on the end of it, and still wind up with a reference to the component you just created. Here’s a demo:

[php lang=”JavaScript”]var distVSlider = new mc.VSlider(div, 260, 30, onChange)
.setSize(10, 300)
.setVSliderValues(0, 400, 170)
.bindLabel(new mc.Label(div, 265, 335, “170”).setAlign(“center”), 0);[/php]

This is just like you see often in jQuery. Fun stuff. Looks odd at first, but I’ve learned to love it.

Label now has a setAlign method, which takes “left”, “center” or “right”.

A few things on the VSlider. One you see in the example above, bindLabel. Here, you pass in an instance of a Label, and a precision value in terms of how many decimal points to display. Now, whenever the slider value changes, it will update the label with its value. You also see some more chaining in the last line there, where we create a label and set its alignment, which returns the label to the bindLabel method.

Speaking of precision, the getValue method takes an optional precision value. If you pass nothing, you might get 3.14159. If you pass 2, you’ll get 3.14. Passing 0 will give you 3. You can also use negative numbers. If you pass -1, it will round 54321 to 54320. passing -2 will give you 54300, etc.

Also, you see setContinuous. True means, your change handler will fire continuously as you slide the slider. False means it will only fire when you release the slider.

Check out the sample here:

One response so far

  • Bill says:

    Do you worry about performance with having a one to one ratio of controls to canvas-inside-div DOM elements? Also, do you foresee any issues with not having everything rendered in a single canvas?

    I’m coming from the Flex side, and I’ve been looking at ways to create HTML5 equivalents of Flex applications. As you know (being the Flex guru you are) you nest everything in a single container at some point (going all the way up the stage at the very least) and you can apply actions to that top level container to affect the children (i.e. scale, position, etc). Obviously, most UIs do not require components that scale, but do you worry about limiting yourself by having the components spread across multiple canvas elements instead of all residing in a single canvas where you can scale, transform, etc? Again, I would agree this does not make much sense for a form with components, but what about a data visualization where you are using subcomponents (i.e. rectangles with mini-control sets) to create a larger data visualization?