Tags and Attributes

Tag

For every html tag, there is a corresponding java class, eg:- To represent div tag in html, there is a Div class. See the below code

Div div = new Div(null);
System.out.println(div.toHtmlString());

<div></div>

The first argument in tag constructor (i.e. Div here) is its parent/outer tag. In the above example, there is no parent tag so passed as null . A tag cannot have more than one direct parent tag. The preceding arguments in the constructor are attribute classes. Let us check another example a span tag surrounded by div tag,

Div div = new Div(null) {{
    new Span(this);
}};
System.out.println(div.toHtmlString());

prints

<div>
    <span></span>
</div>

Attribute

Just like tag, every html attribute has corresponding attribute java class, eg:- To represent style attribute, the corresponding java class Style. Check the below code to declare attribute.

Style style =  new Style("color:green");

By behavior, attributes may be categorized into two, tag attributes and event attributes.Tag attributes are normal attributes like id, name, style etc... Event attributes are those attributes which handle events in a tag, eg onclick, onchange etc...

Giving attribute to tag

An attribute can be given to tag either by passing as a constructor argument or using addAttributes method of that tag. Of course, an attribute can be added to multiple tags. If an attribute object is added to multiple tags, then changing the attribute object properties will apply to all tags to which it is added.

By passing as a constructor argument

Div div = new Div(null, new Style("color:green"));
System.out.println(div.toHtmlString());

prints

<div style="color:green"></div>

By addAttributes method

Div div = new Div(null);
				
Style style =  new Style("color:green");
Id id =  new Id("divId1");

div.addAttributes(style, id);

prints

<div id="divId1" style="color:green"></div>

Add or remove child tag in a tag

Adding or removing child tags is similar to javascript functional concept of a node. There are also few additional methods.

There are few methods in the tag class to add child tags, they are appendChild , appendChildren , addInnerHtml, addInnerHtmls and insertBefore. appendChild is used to append a child in its current children. The method addInnerHtml will replace all existing child tags. insertBefore can be used to insert a tag/tags before a tag,

Div parentDiv = new Div(null, new Id("parentDivId"));
Div childDiv = new Div(parentDiv, new Id("child1"));

childDiv.insertBefore(new Div(null, new Id("inserted1BeforeChild1")),
new Div(null, new Id("inserted2BeforeChild1")));

<div id="parentDivId">
    <div id="inserted1BeforeChild1"></div>
    <div id="inserted2BeforeChild1"></div>
    <div id="child1"></div>
</div>

childDiv will be very useful when you want to insert rows in the middle of a table having thousands of rows.

If a tag is added a child tag which is already a child tag of another tag class then the child will be removed from its previous parent tag because a tag cannot have more than one direct parent tag.

The methods for removing tags are removeAllChildren to remove all children, removeChild to remove specific tag and removeChildren to remove multiple tags.

Next >>

Subscribe on youtube for technical videos