Document Object Model-1

By: జగదేశ్ on 8:59 AM

Share it Please

Tweet

Document Object model: from the java Docs of Gwt , a DOM provides us static method to access the underlying Browser Dom and even allows us to manipulate them and events.The DOM class in the GWT defines about ninety different static methods that you can use to manipulate the DOM tree in your web application.

Let’s write a sample code using Dom to insert dynamically a paragraph element into our page. In our onModuleLoad() page we will be writing the following code ,

//Get a handle on the root node of the DOM tree.

Element rootNode = DOM.getElementById("sample");

//Create and populate the new paragraph element.

Element pElement = DOM.createElement("");

DOM.setInnerText(pElement,”this is jagadesh”);

//Append the new paragraph element to the DOM tree.

DOM.appendChild(rootNode,pElement);

The Element is the class which belongs to user.client.Element in gwt. Since we have Element class in both user and Dom packages . we need to import the Element in User package.This dynamically inserts the Paragraph element into out page.Let us move through the code

Element rootNode=DOM.getElementByID(“sample”);

This statement the underlying element by using its id “sample” . since in out html page I have set the id for the body.so I get the body element as out rootNode.

Element pElement=DOM.createElement(“");

Create a new paragraph element .

DOM.setInnerText(pElement,”this is jagadesh”);

Defines the inner text for the paragraph element

DOM.appendChild(rootNode,pElement);

Appends the newly created element into the underlying dom tree.

When we need to assign an “id” to any existing gwt element , we can use

setStyleAttribute(element,arrtibute,value)

consider I want to set a color to the label , I use

myLabel=new Label("This is simple label");

//to assign an id the myLabel or any other element in Gwt

DOM.setStyleAttribute(myLabel.getElement(), "color", "green");

Iam just getting the label and setting the color to green . I used getElement() method in order to get the underlying element of the Label .if in case we need to keep the element with style attributes we can use the above method , but if we need to assign any other attributes like id or some thing ,

We can use setAttribute(Element,attribute,value) method,

Consider the following code snippet

myLabel=new Label("This is simple label");

DOM.setAttribute(myLabel.getElement(), "id", "label");

RootPanel.get().add(new Button("Click Me", new ClickListener() {

public void onClick(Widget sender) {

String text=DOM.getElementById("label").getInnerHTML();

Window.alert(text);

}

}));

RootPanel.get().add(myLabel);

We can see here , iam assigning the myLabel with an “id” as label and in the ClickListener iam getting the element with id “label” and getting the innerHTML of that element which is “this is simple label”.

A few more code sinpppets,

Adding a button using DOM

Element rootElement=DOM.getElementById("sample");

Element newButtonElement=DOM.createButton();

newButtonElement.setInnerHTML("Sample Button");

DOM.appendChild(rootElement, newButtonElement);

Simple anchor element with a hyperlink

Element rootElement=DOM.getElementById("sample");

Element newAnchorElement=DOM.createAnchor();

newAnchorElement.setInnerHTML("Simple Anchor");

DOM.setStyleAttribute(newAnchorElement,"color","green");

DOM.setAttribute(newAnchorElement, "href", "www.google.com");

DOM.appendChild(rootElement, newAnchorElement);

Event Preview Capability: now we will look at one of the important functionality called Event Preview from the Dom class. By using event Preview we can check which events are fired before they are handled by the registered Event Handlers. a class object implementing the Event Preview Interface can be used to preview the events.Let take a look at a sample program where we will preview which key is pressed [either alt,ctrl or shift].

public class Application implements EntryPoint {

public Event theEvent;

public Label startUp;

//OnModuleLoad

public void onModuleLoad() {

startUp=new Label("StartUp");

Button clickButton=new Button("Click Button");

clickButton.addClickListener(new ButtonClickListener());

DOM.addEventPreview(new MyEventPreview());

RootPanel.get().add(startUp);

RootPanel.get().add(clickButton);

}//OnModuleLoad()

class ButtonClickListener implements ClickListener{

public void onClick(Widget sender) {

if(DOM.eventGetAltKey(theEvent)) {

startUp.setText("Alt Key Pressed");

}else if(DOM.eventGetCtrlKey(theEvent)) {

startUp.setText("Ctrl Key Pressed");

}else if(DOM.eventGetShiftKey(theEvent)) {

startUp.setText("Shift Key Pressed");

}

}

}

public class MyEventPreview implements EventPreview {

public boolean onEventPreview(Event event) {

theEvent=event;

return true;

}

}

}

Let make code walk , I maintained a Event variable “theEvent” which holds all the events.we have written a new class called “MyEventPreview” which implements EventPreview interface . by this class we will be to preview all the events.The class that implements the EventPreview interface will have a method called

Public Boolean onEventPreview(Event event);

This is Called when a browser event occurs and this event preview is on top of the preview stack.in the ButtonClickListener class we will check whether which key is pressed along with button press and we will update the text on the label.