vegUI Tutorial 03 - Child Elements

A live example of this tutorial can be found here. This tutorial is a follow-up tutorial to Tutorial 2.

Every vegUI element can have multiple child elements. A child element is built as a child of the HTML node of it's parent element, and does not need to be built directly by the developer. All child elements are built when the parent is built.

In order to add a child to an element you use the add_child() method. The add_child method needs to be called before the node is built, so if you're using the code from tutorial 2 you can erase all the stuff that after and include where we called the build_element() method.


Definition: VegUINode.add_child()

The first argument is a unique name for the child. Each child element can be accessed over it's parent C property by its name, for example we could access the child we just created by doing



However since the add_child method already returns the created child we can already point cNode to it as we did in the first code example above.

Lets set-up the child like we did with the node



See how i skipped the first attribute by submitting it as null, which means it will assume its default value, which is 'div'. It will be positioned at position 5, 5. Keep in mind that since we are setting up a child element that the position is in relation to the parent not the page. So our child will positioned 5 pixels off the upper left corner of myNode.

Lets give it a black background so we can actually see it when the page is loaded.



In order to build myNode and the child node we simply call build_element() like we did in the previous tutorial on myNode



If you load the page now what you should have is a blue box holding a smaller yellow box.

Child Margins

Child elements can have their margins set. Again this needs to happen before the elements are built. So in order for this to work we erase the last step where we called build_element() and call the set_marg() method on the child node.


Definition: VegUINode.set_marg()

The set_marg function sets the T.rmarg, T.bmarg, T.rmarg_nr and T.bmarg_nr properties of the element. The way margins work is this:

rmarg and bmarg stand for right margin and bottom margin, if set to a numeric value the child node will be resized to match the specified margin in relation to its parent's right and bottom borders.

rmarg_nr and bmarg_nr stand for right margin noresize and bottom margin noresize, if set to a numeric value the child node will be moved to match the specified margins in relation to its parent's right and bottom borders.

Child elements that have their margin properties set will be realigned automatically when the resize() method is called on the parent.

In order to set rmarg_nr and bmarg_nr using the set_marg function we need to skip the first to parameters by submitting them as null.

Dynamic Child Creation

In the beginning of this tutorial i stated that you would need to call the add_child method before the parent element is built. Well that is not entirely true, you can add children even after the parent is built, but you need to call the build_element function on the manually if you do.

So in order to dynamically create child you would do:



This concludes the 3. tutorial of the vegUI tutorial series, in the next tutorial we will deal with element cloning.

Related Posts

• vegUI Tutorial 02 - The vegUI Node
• vegUI Tutorial 04 - Cloning

---

Your Comment

name:*
email-address:
Are you human?

Comments to this post: (3)

RSS Feed for comments

---

albrecht andrejewski
on 21 Nov, 2007 - 00:47:53

I think we should read

cNode.set(null,25,25,5,5);

instead of:

var cNode.set(null,25,25,5,5)

Report this comment

---

vegu
on 22 Nov, 2007 - 08:43:19

You are correct :) fixed!

Report this comment

---

stan
on 25 Nov, 2008 - 11:26:28

In this case Manager.build_element(myNode)
shoudl be: Manager.build_element(cNode)

Report this comment

---

---