One of the challenges I've found with the latest HTML 5 frameworks is that they require a significant amount of hand-coding and when looking at things like proportional layouts it can get pretty tricky if you need to do complex layouts. Now things like Buttons and the like are of course there and all the basic primitives but what I'm really after is something where I can do some complex layouts and set stuff like the piece of the page with initial focus.
From a mashup perspective I want to be able to nest these layouts so I can create pages out of various sub-fragments and enable people to quickly create "trees" of independently created layouts, ideally enabling all of this to be done using a visual building tool.
So I looked around and I'd now like to announce 5Form, probably the most powerful layout manager available today and one designed for the mashup challenges and complex interfaces that the web requires. Proportional layouts, inter-widget layout dependencies, dynamic resizing and more are all automatically handled by this new powerful layout manager
NAME
5Form - The HTML5 dynamic layout manager
5Form is a dynamic HTML5 container with no input semantics of its own.
Constraints are placed on children of the 5Form to define attachments
for each of the child's four sides. These attachments can be to the
5Form, to another child widget or gadget, to a relative position within
the 5Form, or to the initial position of the child. The attachments
determine the layout behavior of the 5Form when resizing occurs.
The default value for 5NinitialFocus
is the value of 5NdefaultButton.
Following are some important considerations in using a 5Form:
- Every child must have an attachment on either the left or the
right. If initialization or 5SetValues leaves a
widget without such an attachment, the result depends upon the value
of 5NrubberPositioning.
If 5NrubberPositioning is
False, the child is given an 5NleftAttachment of
5ATTACH_FORM and an 5NleftOffset equal to its current
x value.
If 5NrubberPositioning is
True, the child is given an 5NleftAttachment of
5ATTACH_POSITION and an 5NleftPosition proportional to
the current x value divided by the width of the 5Form.
In either case, if the child has not been previously given an
x value, its x value is taken to be 0, which places
the child at the left side of the 5Form.
- If you want to create a child without any attachments, and then
later (e.g., after creating and managing it, but before realizing it)
give it a right attachment via XtSetValues, you must
set its 5NleftAttachment to
5ATTACH_NONE at the same time.
- The 5Nresizable
resource controls only whether a geometry request by the child will be
granted. It has no effect on whether the child's size can be changed
because of changes in geometry of the 5Form or of other children.
- Every child has a preferred width, based on geometry requests
it makes (whether they are granted or not).
- If a child has attachments on both the left and the right
sides, its size is completely controlled by the 5Form. It can be
shrunk below its preferred width or enlarged above it, if necessary,
due to other constraints. In addition, the child's geometry requests
to change its own width may be refused.
- If a child has attachments on only its left or right side, it
will always be at its preferred width (if resizable, otherwise at is
current width). This may cause it to be clipped by the 5Form or by
other children.
- If a child's left (or right) attachment is set to
5ATTACH_SELF, its corresponding left (or right)
offset is forced to 0. The attachment is then changed to
5ATTACH_POSITION, with a position that corresponds
to x value of the child's left (or right) edge. To fix the
position of a side at a specific x value use
5ATTACH_FORM or
5ATTACH_OPPOSITE_FORM with the x value as
the left (or right) offset.
- Unmapping a child has no effect on the 5Form except that the
child is not mapped.
- Unmanaging a child unmaps it. If no other child is attached to
it, or if all children attached to it and all children recursively
attached to them are also all unmanaged, all of those children are
treated as if they did not exist in determining the size of the 5Form.
- When using XtSetValues to change the
5Nx resource of a
child, you must simultaneously set its left attachment to either
5ATTACH_SELF or 5ATTACH_NONE.
Otherwise, the request is not granted. If 5Nresizable is False, the request
is granted only if the child's size can remain the same.
- A left (or right) attachment of
5ATTACH_WIDGET, where 5NleftWidget (or 5NrightWidget) is NULL, acts like
an attachment of 5ATTACH_FORM.
- If an attachment is made to a widget that is not a child of the
Form, but an ancestor of the widget is a child of the 5Form, the
attachment is made to the ancestor.
All these considerations are true of top and bottom attachments as
well, with top acting like left, bottom acting like right, y
acting like x, and height acting like width.
Resources
The following table defines a set of widget resources used by the
programmer to specify data. The programmer can also set the resource
values for the inherited classes to set attributes for this widget.
The codes in the access column indicate if the given
resource can be set at creation time (C), set by using
5SetValues (S), retrieved by using
5GetValues (G), or is not applicable (N/A).
- 5NfractionBase
- Specifies the
denominator used in calculating the relative position of a child
widget using 5ATTACH_POSITION constraints. The
value must not be 0.
If the value of a child's 5NleftAttachment (or
5NrightAttachment)
is 5ATTACH_POSITION, the position of the left (or
right) side of the child is relative to the left side of the 5Form and
is a fraction of the width of the 5Form. This fraction is the value of
the child's 5NleftPosition (or 5NrightPosition) resource
divided by the value of the 5Form's 5NfractionBase.
If the value of a child's 5NtopAttachment (or 5NbottomAttachment) is
5ATTACH_POSITION, the position of the top (or
bottom) side of the child is relative to the top side of the 5Form and
is a fraction of the height of the 5Form. This fraction is the value
of the child's 5NtopPosition (or 5NbottomPosition) resource
divided by the value of the 5Form's 5NfractionBase.
- 5NhorizontalSpacing
- Specifies the offset for right and left attachments. This
resource is only used if no offset resource is specified (when
attaching to a widget), or if no margin resource is specified (when
attaching to the 5Form).
- 5NrubberPositioning
- Indicates the default near (left) and top attachments for a
child of the 5Form. (Note: Whether this resource
actually applies to the left or right side of the child and its
attachment may depend on the value of the 5NstringDirection
resource.)
The default left attachment is applied whenever initialization or
XtSetValues leaves the child without either a left or
right attachment. The default top attachment is applied whenever
initialization or XtSetValues leaves the child
without either a top or bottom attachment.
If this Boolean resource is set to False, 5NleftAttachment and
5NtopAttachment
default to 5ATTACH_FORM, 5NleftOffset defaults to the
current x value of the left side of the child, and 5NtopOffset defaults to the current
y value of the child. The effect is to position the child
according to its absolute distance from the left or top side of the
Form.
If this resource is set to True, 5NleftAttachment and
5NtopAttachment
default to 5ATTACH_POSITION, 5NleftPosition defaults to a
value proportional to the current x value of the left side of
the child divided by the width of the 5Form, and 5NtopPosition defaults to a value
proportional to the current y value of the child divided by
the height of the 5Form. The effect is to position the child relative
to the left or top side of the 5Form and in proportion to the width or
height of the 5Form.
- 5NverticalSpacing
- Specifies the offset for top and bottom attachments. This
resource is only used if no offset resource is specified (when
attaching to a widget), or if no margin resource is specified (when
attaching to the 5Form).
- 5NbottomAttachment
- Specifies attachment of the bottom side of the child. It can
have the following values:
- 5ATTACH_NONE - Do not attach the bottom side
of the child.
- 5ATTACH_FORM - Attach the bottom side of the
child to the bottom side of the 5Form.
- 5ATTACH_OPPOSITE_FORM - Attach the bottom
side of the child to the top side of the 5Form. 5NbottomOffset can be used to
determine the visibility of the child.
- 5ATTACH_WIDGET - Attach the bottom side of
the child to the top side of the widget or gadget specified in the
5NbottomWidget resource. If
5NbottomWidget is NULL,
5ATTACH_WIDGET is replaced by
5ATTACH_FORM, and the child is attached to the
bottom side of the 5Form.
- 5ATTACH_OPPOSITE_WIDGET - Attach the bottom
side of the child to the bottom side of the widget or gadget specified
in the 5NbottomWidget
resource.
- 5ATTACH_POSITION - Attach the bottom side of
the child to a position that is relative to the top side of the 5Form
and in proportion to the height of the 5Form. This position is
determined by the 5NbottomPosition and
5NfractionBase
resources.
- 5ATTACH_SELF - Attach the bottom side of the
child to a position that is proportional to the current y
value of the bottom of the child divided by the height of the 5Form.
This position is determined by the 5NbottomPosition and
5NfractionBase
resources. 5NbottomPosition is set to a
value proportional to the current y value of the bottom of
the child divided by the height of the 5Form.
- 5NbottomOffset
- Specifies the constant offset between the bottom side of the
child and the object to which it is attached. The relationship
established remains, regardless of any resizing operations that occur.
When this resource is explicitly set, the value of 5NverticalSpacing is ignored.
- 5NbottomPosition
- This resource is used to determine the position of the bottom
side of the child when the child's 5NbottomAttachment is set to
5ATTACH_POSITION. In this case the position of the
bottom side of the child is relative to the top side of the 5Form and
is a fraction of the height of the 5Form. This fraction is the value
of the child's 5NbottomPosition resource divided by
the value of the 5Form's 5NfractionBase. For example, if
the child's 5NbottomPosition is 50, the 5Form's
5NfractionBase is
100, and the 5Form's height is 200, the position of the bottom side of
the child is 100.
- 5NbottomWidget
- Specifies the widget or gadget to which the bottom side of the
child is attached. This resource is used if 5NbottomAttachment is set to
either 5ATTACH_WIDGET or
5ATTACH_OPPOSITE_WIDGET.
A string-to-widget resource converter is automatically installed
for use with this resource. With this converter, the widget that is
to be the value of the resource must exist at the time the widget that
has the resource is created.
- 5NleftAttachment
- Specifies attachment of the near (left) side of the child.
(Note: Whether this resource actually applies to the
left or right side of the child and its attachment may depend on the
value of the 5NstringDirection
resource.) It can have the following values:
- 5ATTACH_NONE - Do not attach the left side of
the child. If 5NrightAttachment is also
5ATTACH_NONE, this value is ignored and the child is
given a default left attachment.
- 5ATTACH_FORM - Attach the left side of the
child to the left side of the 5Form.
- 5ATTACH_OPPOSITE_FORM - Attach the left side
of the child to the right side of the 5Form. 5NleftOffset can be used to
determine the visibility of the child.
- 5ATTACH_WIDGET - Attach the left side of the
child to the right side of the widget or gadget specified in the
5NleftWidget resource. If
5NleftWidget is NULL,
5ATTACH_WIDGET is replaced by
5ATTACH_FORM, and the child is attached to the left
side of the 5Form.
- 5ATTACH_OPPOSITE_WIDGET - Attach the left
side of the child to the left side of the widget or gadget specified
in the 5NleftWidget resource.
- 5ATTACH_POSITION - Attach the left side of
the child to a position that is relative to the left side of the 5Form
and in proportion to the width of the 5Form. This position is
determined by the 5NleftPosition and 5NfractionBase resources.
- 5ATTACH_SELF - Attach the left side of the
child to a position that is proportional to the current x
value of the left side of the child divided by the width of the 5Form.
This position is determined by the 5NleftPosition and 5NfractionBase resources.
5NleftPosition is set
to a value proportional to the current x value of the left
side of the child divided by the width of the 5Form.
- 5NleftOffset
- Specifies the constant offset between the near (left) side of
the child and the object to which it is attached.
(Note: Whether this resource actually applies to the
left or right side of the child and its attachment may depend on the
value of the 5NstringDirection
resource.) The relationship established remains, regardless of any
resizing operations that occur. When this resource is explicitly set,
the value of 5NhorizontalSpacing is
ignored.
- 5NleftPosition
- This resource is used to determine the position of the near
(left) side of the child when the child's 5NleftAttachment is set to
5ATTACH_POSITION. (Note: Whether
this resource actually applies to the left or right side of the child
and its attachment may depend on the value of the 5NstringDirection
resource.)
In this case the position of the left side of the child is relative
to the left side of the 5Form and is a fraction of the width of the
Form. This fraction is the value of the child's
5NleftPosition resource divided by the value of the
Form's 5NfractionBase. For example, if
the child's 5NleftPosition is 50, the 5Form's
5NfractionBase is
100, and the 5Form's width is 200, the position of the left side of the
child is 100.
- 5NleftWidget
- Specifies the widget or gadget to which the near (left) side of
the child is attached. (Note: Whether this resource
actually applies to the left or right side of the child and its
attachment may depend on the value of the 5NstringDirection
resource.) This resource is used if 5NleftAttachment is set to
either 5ATTACH_WIDGET or
5ATTACH_OPPOSITE_WIDGET.
A string-to-widget resource converter is automatically installed
for use with this resource. With this converter, the widget that is
to be the value of the resource must exist at the time the widget that
has the resource is created.
- 5Nresizable
- This Boolean resource specifies whether or not a child's
request for a new size is (conditionally) granted by the 5Form. If
this resource is set to True the request is granted if possible. If
this resource is set to False the request is always refused.
If a child has both left and right attachments, its width is
completely controlled by the 5Form, regardless of the value of the
child's 5Nresizable resource. If a child has a left
or right attachment but not both, the child's 5Nwidth is used in setting its width if
the value of the child's 5Nresizable resource is
True. These conditions are also true for top and bottom attachments,
with height acting like width.
- 5NrightAttachment
- Specifies attachment of the far (right) side of the child.
(Note: Whether this resource actually applies to the
left or right side of the child and its attachment may depend on the
value of the 5NstringDirection
resource.) It can have the following values:
- 5ATTACH_NONE - Do not attach the right side
of the child.
- 5ATTACH_FORM - Attach the right side of the
child to the right side of the 5Form.
- 5ATTACH_OPPOSITE_FORM - Attach the right side
of the child to the left side of the 5Form. 5NrightOffset can be used to
determine the visibility of the child.
- 5ATTACH_WIDGET - Attach the right side of the
child to the left side of the widget or gadget specified in the
5NrightWidget resource. If
5NrightWidget is NULL,
5ATTACH_WIDGET is replaced by
5ATTACH_FORM, and the child is attached to the right
side of the 5Form.
- 5ATTACH_OPPOSITE_WIDGET - Attach the right
side of the child to the right side of the widget or gadget specified
in the 5NrightWidget resource.
- 5ATTACH_POSITION - Attach the right side of
the child to a position that is relative to the left side of the 5Form
and in proportion to the width of the 5Form. This position is
determined by the 5NrightPosition and 5NfractionBase resources.
- 5ATTACH_SELF - Attach the right side of the
child to a position that is proportional to the current x
value of the right side of the child divided by the width of the 5Form.
This position is determined by the 5NrightPosition and 5NfractionBase resources.
5NrightPosition is
set to a value proportional to the current x value of the
right side of the child divided by the width of the 5Form.
- 5NrightOffset
- Specifies the constant offset between the far (right) side of
the child and the object to which it is attached.
(Note: Whether this resource actually applies to the
left or right side of the child and its attachment may depend on the
value of the 5NstringDirection resource.)
The relationship established remains, regardless of any resizing
operations that occur. When this resource is explicitly set, the
value of 5NhorizontalSpacing is
ignored.
- 5NrightPosition
- This resource is used to determine the position of the far
(right) side of the child when the child's 5NrightAttachment is set to
5ATTACH_POSITION. (Note: Whether
this resource actually applies to the left or right side of the child
and its attachment may depend on the value of the 5NstringDirection
resource.)
In this case the position of the right side of the child is
relative to the left side of the 5Form and is a fraction of the width
of the 5Form. This fraction is the value of the child's
5NrightPosition resource divided by the value of the
Form's 5NfractionBase. For example, if
the child's 5NrightPosition is 50, the 5Form's
5NfractionBase is
100, and the 5Form's width is 200, the position of the right side of
the child is 100.
- 5NrightWidget
- Specifies the widget or gadget to which the far (right) side of
the child is attached. (Note: Whether this resource
actually applies to the left or right side of the child and its
attachment may depend on the value of the 5NstringDirection
resource.) This resource is used if 5NrightAttachment is set to
either 5ATTACH_WIDGET or
5ATTACH_OPPOSITE_WIDGET.
A string-to-widget resource converter is automatically installed
for use with this resource. With this converter, the widget that is
to be the value of the resource must exist at the time the widget that
has the resource is created.
- 5NtopAttachment
- Specifies attachment of the top side of the child. It can have
following values:
- 5ATTACH_NONE - Do not attach the top side of
the child. If 5NbottomAttachment is also
5ATTACH_NONE, this value is ignored and the child is
given a default top attachment.
- 5ATTACH_FORM - Attach the top side of the
child to the top side of the 5Form.
- 5ATTACH_OPPOSITE_FORM - Attach the top side
of the child to the bottom side of the 5Form. 5NtopOffset can be used to
determine the visibility of the child.
- 5ATTACH_WIDGET - Attach the top side of the
child to the bottom side of the widget or gadget specified in the
5NtopWidget resource. If
5NtopWidget is NULL,
5ATTACH_WIDGET is replaced by
5ATTACH_FORM, and the child is attached to the top
side of the 5Form.
- 5ATTACH_OPPOSITE_WIDGET - Attach the top side
of the child to the top side of the widget or gadget specified in the
5NtopWidget resource.
- 5ATTACH_POSITION - Attach the top side of the
child to a position that is relative to the top side of the 5Form and
in proportion to the height of the 5Form. This position is determined
by the 5NtopPosition and
5NfractionBase resources.
- 5ATTACH_SELF - Attach the top side of the
child to a position that is proportional to the current y
value of the child divided by the height of the 5Form. This position
is determined by the 5NtopPosition and 5NfractionBase resources.
5NtopPosition is set
to a value proportional to the current y value of the child
divided by the height of the 5Form.
- 5NtopOffset
- Specifies the constant offset between the top side of the child
and the object to which it is attached. The relationship established
remains, regardless of any resizing operations that occur. When this
resource is explicitly set, the value of 5NverticalSpacing is ignored.
- 5NtopPosition
- This resource is used to determine the position of the top side
of the child when the child's 5NtopAttachment is set to
5ATTACH_POSITION. In this case the position of the
top side of the child is relative to the top side of the 5Form and is a
fraction of the height of the 5Form. This fraction is the value of the
child's 5NtopPosition resource divided by the value
of the 5Form's 5NfractionBase. For example, if
the child's 5NtopPosition is 50, the 5Form's
5NfractionBase is
100, and the 5Form's height is 200, the position of the top side of the
child is 100.
- 5NtopWidget
- Specifies the widget or gadget to which the top side of the
child is attached. This resource is used if 5NtopAttachment is set to
either 5ATTACH_WIDGET or
5ATTACH_OPPOSITE_WIDGET.
A string-to-widget resource converter is automatically installed
for use with this resource. With this converter, the widget that is
to be the value of the resource must exist at the time the widget that
has the resource is created.
Additional Resources
Now if you've made it this far and not realised, this isn't actually a new widget for HTML5 its actually just a widget from the late 1980s called
XmForm which remains the most powerful layout manager I've personally ever come across in a widget tool kit.
Why this silly post then? Well its sort of to make the point that client side frameworks are a "solved problem" and rather than heading out are re-inventing wheels we should think about what is actually new.
So the differences with XWindows and HTML5 are what? Putting aside the syntax and URIs via XAtom et al what are the real architectural differences from a client side framework perspective? I'd argue that the difference is sophistication. HTML5 is in its infancy but should we expect widget sets and libraries to be created, layout managers and other elements... of course we should.
So rather than creating all this stuff from scratch lets go back to the future to when client side interfaces had to be rich and had to handle huge complexities and learn from those frameworks rather than thinking that client side development is a new challenge for IT that needs lots of debate.
What ever happens it should be based around the principles of HMVC (Hierarchical Model View Controller) and should learn the lessons of GTK, Swing, Motif, X-Windows and the like.
Lets port XmForm to HTML5 rather than try and create everything again from the base up.
Technorati Tags: SOA, Service Architecture