Javascript Widget Library
Contents
- 1 Introduction
- 2 Interfaces
- 3 Avoiding Inheritance
- 4 Widget Interface
- 5 Button Interface
- 6 2-state Checkbox Interface
- 7 3-state Checkbox nterface
- 8 Slider
- 9 Tab
- 10 Tab Bar
- 11 Multi-view
- 12 Menu
- 13 Menu Item
- 14 Layouts
- 15 Grid Layout
- 16 Dropdown
- 17 Text Input
- 18 Line Input
- 19 Text
- 20 Radio Button
- 21 Button Group
- 22 Container
Introduction
A library that could be used to represent and control various GUI elements, using Prototypical Javascript.
Interfaces
I like duck typing, a lot.
An interface is defined as all the expected attributes and methods, and their expected behavior. For instance, the button interface is that it has an "onclick" event that can be listened for.
- Interfaces should be simple. Only the absolutely necessary behaviors should be defined.
- Interfaces should be independent of inheritance. You cannot use a simple "instanceof" test to see if an object has the right interface.
- "It's better to ask forgiveness than permission." Rather than checking to see if an object implements an interface, assume it does and behave accordingly. If something isn't right, then throw an exception.
- Interfaces can be formally defined---in plain English. There is no need to have the program code handle such design-level topics internally.
Avoiding Inheritance
I am of the school of thought that inheritance is really hard. I only use it when it makes sense, and that is only when you are actually inheriting behavior (not an interface), and that the behavior does not have to be overridden in some unusual way.
Oftentimes, in order to come up with my inheritance tree, what I do is list out all the objects I want at the highest level as a flat list. Then I find common code among them, and then I put that common code in a common ancestor.
If there is no common code, then there is no common ancestor.
Widget Interface
What does a Widget do?
- It has an HTML Element. This element does not change over the lifetime of the widget. The contents might change, but this element is what is used to plug the widget into other widgets.
- It has events. These events need to be handled with something like the DOM event system. Since the DOM event system is limited to things DOM knows about, I have to build my own signaling library, such as MochiKit's Signal module. Of course, a good signal library makes all events look alike, even the DOM ones.
- It has certain parameters that can be modified. Each of these attributes needs an event to indicate when they change. That means you need to access them with getX and setX.
- Widgets can be active or inactive.
- Widgets may be focused or blurred.
- Widgets have a size and can be asked to resize to fit certain areas.
- Widgets have onmousedown, onmouseup, onmouseover, onmousemove, onmouseout events, and a whole lot more.
Button Interface
Inheritance
Widget
Signals
| Signal | Parameters | Meaning |
|---|---|---|
| onclick | None | Button clicked. |
Attributes
None.
2-state Checkbox Interface
A checkbox can be checked or unchecked.
A 2-state checkbox is a Button.
It also has a "checked" attribute that is a boolean---true or false.
3-state Checkbox nterface
A 3-state checkbox can be checked, unchecked, or in-between.
It is a button, with a "checked" attribute that is either true, false, or null.
Slider
A slider is a Widget with a width and a position.
Tab
A tab is a button.
It can be highlighted or not.
Tab Bar
A tab bar is a widget that has several tabs. One of them can be selected at a time, or none.
Multi-view
A multi-view is a widget. It contains multiple widgets and can show any one of them at any time.
Menu
Menu Item
Layouts
Layouts take widgets and place them side-by-side, horizontally or vertically.
Grid Layout
Takes multiple widgets and arranges them in a table.
Dropdown
Text Input
Line Input
Text
Static text. "QLabel" in Qt.
Radio Button
Button Group
Container
Wraps a layout with surrounding lines and a group name.
