List of usage examples for com.google.gwt.user.client.ui HTMLPanel add
public void add(Widget widget, String id)
From source file:com.edgenius.wiki.gwt.client.page.ViewPanel.java
License:Open Source License
/** * @param main/*from w ww . java2 s . co m*/ * @return */ private HTMLPanel buildViewPanel(final PageMain main) { //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // Attachment and PrettyURL attPanel = new AttachmentPanel(main, true); attachmentBtn = new AttachmentButton(attPanel); pUrlBtn = new PrettyUrlButton(pUrlPanel); pUrlPanel.setVisible(false); attPanel.setVisible(false); main.registerAttachmentPanel(attPanel); //turn on/off depends on the login status favorite.setVisible(false); watch.setVisible(false); title.setStyleName(Css.RENDER_TITLE); //main content panel, contains contentPanel, diffContent and SideBar panel. FlexTable mainPanel = new FlexTable(); mainPanel.setWidget(0, 0, contentPanel); mainPanel.setWidget(0, 1, diffContent); mainPanel.getCellFormatter().setAlignment(0, 0, HasHorizontalAlignment.ALIGN_LEFT, HasVerticalAlignment.ALIGN_TOP); mainPanel.getCellFormatter().setAlignment(0, 1, HasHorizontalAlignment.ALIGN_LEFT, HasVerticalAlignment.ALIGN_TOP); mainPanel.setWidth("100%"); diffMessage.setVisible(false); //build panel tabPanel = new PageTabPanel(main); HTMLPanel hpanel = new HTMLPanel(readViewLayout()); hpanel.add(spaceMenu, "_spacemenu"); hpanel.add(message, "_message"); hpanel.add(diffMessage, "_diff_message"); hpanel.add(title, "_title"); hpanel.add(tags, "_tags"); hpanel.add(functionBtnBar, "_actions"); hpanel.add(attachmentBtn, "_attchments"); hpanel.add(attPanel, "_attchments_panel"); hpanel.add(pUrlBtn, "_urls"); hpanel.add(pUrlPanel, "_urls_panel"); hpanel.add(mainPanel, "_body"); hpanel.add(favorite, "_favorite"); hpanel.add(watch, "_watch"); hpanel.add(rssFeedBtn, "_rss"); hpanel.add(exportBtn, "_export"); //history,comment, summary tab panel. hpanel.add(tabPanel, "_tabs"); return hpanel; }
From source file:com.edgenius.wiki.gwt.client.page.ViewPanel.java
License:Open Source License
private void historyDiffMessage(final PageModel model) { String spaceUname = model.spaceUname; String currentTitle = model.currentTitle; message.cleanMessage();/*from w w w . j a v a2 s . c om*/ String id1 = HTMLPanel.createUniqueId(); String id2 = HTMLPanel.createUniqueId(); StringBuffer buf = new StringBuffer("<div class='historyAction'><div class='msg' id='").append(id1) .append("'></div><div class='return' id='").append(id2).append("'></div>"); buf.append("<div class='action'>"); String idp1 = null, idp2 = null, idp3 = null, idp4 = null, idn1 = null, idn2 = null, idn3 = null, idn4 = null; if (model.nextHistoryItem != null) { idn1 = HTMLPanel.createUniqueId(); idn2 = HTMLPanel.createUniqueId(); idn3 = HTMLPanel.createUniqueId(); idn4 = HTMLPanel.createUniqueId(); buf.append("<div class='round next'><div class='version' id='").append(idn1) .append("'></div><div class='author' id='").append(idn2) .append("'></div><div class='date' id='").append(idn3).append("'></div><div class='diff' id='") .append(idn4).append("'></div></div>"); } buf.append("<div class='current'>").append(Msg.consts.revision()).append(" ").append(model.pageVersion) .append("</div>"); if (model.prevHistoryItem != null) { idp1 = HTMLPanel.createUniqueId(); idp2 = HTMLPanel.createUniqueId(); idp3 = HTMLPanel.createUniqueId(); idp4 = HTMLPanel.createUniqueId(); buf.append("<div class='round prev'><div class='version' id='").append(idp1) .append("'></div><div class='author' id='").append(idp2) .append("'></div><div class='date' id='").append(idp3).append("'></div><div class='diff' id='") .append(idp4).append("'></div></div>"); } buf.append("</div></div>"); HTMLPanel msgPanel = new HTMLPanel(buf.toString()); Hyperlink retCurrentVerBtn = new Hyperlink(Msg.consts.return_latest_version(), GwtUtils.getSpacePageToken(spaceUname, currentTitle)); msgPanel.add(new Label(Msg.consts.view_history()), id1); msgPanel.add(retCurrentVerBtn, id2); if (model.prevHistoryItem != null) { historyNextPrevMsg(msgPanel, model.prevHistoryItem, model.uid, idp1, idp2, idp3, idp4); } if (model.nextHistoryItem != null) { historyNextPrevMsg(msgPanel, model.nextHistoryItem, model.uid, idn1, idn2, idn3, idn4); } HorizontalPanel panel = new HorizontalPanel(); panel.add(msgPanel); message.warning(panel, false); }
From source file:com.edgenius.wiki.gwt.client.page.ViewPanel.java
License:Open Source License
private void historyNextPrevMsg(HTMLPanel msgPanel, final PageItemModel history, final Integer pageUid, String idp1, String idp2, String idp3, String idp4) { String spaceUname = history.spaceUname; Hyperlink preLink;//from ww w.ja v a2 s . c o m if (history.version == SharedConstants.CURRENT) { //latest page preLink = new Hyperlink(Msg.consts.latest(), GwtUtils.getSpacePageToken(spaceUname, history.title)); } else { preLink = new Hyperlink(Msg.consts.revision() + " " + history.version, GwtUtils.buildToken(PageMain.TOKEN_HISTORY, spaceUname, String.valueOf(history.uid))); } UserProfileLink modifier = new UserProfileLink(history.modifier, spaceUname, history.modifierUsername, history.modifierPortrait); Label modifiedDate = new Label(GwtClientUtils.toDisplayDate(history.modifiedDate)); //do compare ClickLink compareButton = new ClickLink(Msg.consts.compare()); compareButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { PageControllerAsync action = ControllerFactory.getPageController(); //a little confuse here, version and uid both as same value if it is current page... action.diff(history.version == SharedConstants.CURRENT ? SharedConstants.CURRENT : history.uid, pageUid, versionAsync); } }); // Hyperlink compareButton = new Hyperlink(Msg.consts.compare() // , GwtUtils.buildToken(PageMain.TOKEN_DIFF,String.valueOf(history.version==SharedConstants.CURRENT ? SharedConstants.CURREN:history.uid), String.valueOf(pageUid))); msgPanel.add(preLink, idp1); msgPanel.add(modifier, idp2); msgPanel.add(modifiedDate, idp3); msgPanel.add(compareButton, idp4); }
From source file:com.edgenius.wiki.gwt.client.render.RenderPanel.java
License:Open Source License
/** * I don't remember exactly as old bug database is hacked and removed. The reason why use this method to * add render content is because HTML DOM Hierarchy model. If simply use FlowPanel.add(), it may break DOM hierarchy in * some case./*from www . j a v a 2 s .c o m*/ * Submit the latest content, must be call after any modify content method, such as remove(), add(), insert() * or iterator.remove() etc. */ public void submit() { StringBuffer render = new StringBuffer(); Map<String, Widget> widgetMap = new HashMap<String, Widget>(); int size = content.size(); if (size == 0) { //IE issue, if content is blank, the right size author info panel will 100% width to occupy entire page render.append(" "); } else { for (int idx = 0; idx < size; idx++) { Object obj = content.get(idx); if (obj instanceof String) { render.append((String) obj); } else if (obj instanceof Widget) { String uid = HTMLPanel.createUniqueId(); widgetMap.put(uid, (Widget) obj); //surround with <![CDATA[]]>: This is fix bug when render something like: {html}<!{html}{feedback} //Render content "!<<span id=123></span>" in FF and IE will break document.getElementById() //This means the HTMLPanel can't work as the span element can not be found out. //use <![CDATA[]]> rather than <!----> is because if "<![" is before text, then <!----> won't work. //but <![CDATA[]]> work both <! or <![ before the macro widget. render.append("<![CDATA[]]><span id='" + uid + "'></span><![CDATA[]]>"); } } } HTMLPanel panel = new HTMLPanel(render.toString()); for (Entry<String, Widget> entry : widgetMap.entrySet()) { panel.add(entry.getValue(), entry.getKey()); } //reset panel to empty, then render new content clearPanel(); super.add(panel); Scheduler.get().scheduleDeferred(new ScheduledCommand() { public void execute() { renderCallback(panelID); } }); }
From source file:com.edgenius.wiki.gwt.client.widgets.UploadDialog.java
License:Open Source License
public UploadDialog(AttachmentPanel attachmentPanel, final String spaceUname, String pageUuid, final PageType draft) { this.setText(Msg.consts.upload()); this.setIcon(new Image(IconBundle.I.get().upload())); this.attachmentPanel = attachmentPanel; this.spaceUname = spaceUname; this.pageUuid = pageUuid; this.draft = draft; FlowPanel busyPanel = new FlowPanel(); String id = HTMLPanel.createUniqueId(); HTMLPanel busyPanelDiv = new HTMLPanel("<span></span><div id='" + id + "'></div>"); busyPanelDiv.add(IconBundle.I.loading(), id); busyPanel.add(busyPanelDiv);/* ww w . jav a2 s.c om*/ busyPanelDiv.setStyleName(Css.BUSY_PANEL); busyPanelDiv.addStyleName("upload"); deck.add(busyPanel); //If editing, always save auto draft - 2 scenarios: first if pageUuid is null, means new page, must be save draft. //otherwise, an existing page, however, user needs a draft to reload these draft attachments - I set it always save draft that is 100% perfect because here //does not check if this editing already has a draft saved. if (attachmentPanel.getPageMain().getVisiblePanelIndex() == PageMain.EDIT_PANEL) { // if(StringUtil.isBlank(pageUuid)){ //could a unsaved new page - save a auto draft then turn page again attachmentPanel.getPageMain().editPanel.saveDraft(PageSaveMethod.SAVE_AUTO_DRAFT_STAY_IN_EDIT, new Callback<String>() { @Override public void callback(String pageUuid) { UploadDialog.this.pageUuid = pageUuid; Frame upload = new Frame(GwtClientUtils.getBaseUrl() + "pages/upload?uname=" + URL.encodeQueryString(spaceUname) + "&puuid=" + pageUuid + "&draft=" + draft.value()); upload.setSize("100%", "100%"); deck.add(upload); } }); // } } else { Frame upload = new Frame(GwtClientUtils.getBaseUrl() + "pages/upload?uname=" + URL.encodeQueryString(spaceUname) + "&puuid=" + pageUuid + "&draft=" + draft.value()); upload.setSize("100%", "100%"); deck.add(upload); } deck.showWidget(0); this.setWidget(deck); deck.setSize("100%", "100%"); this.addStyleName(Css.UPLOAD_DIALOG_BOX); this.addDialogListener(this); this.bindJSMethod(this); }
From source file:com.google.gwt.sample.kitchensink.client.Layouts.java
License:Apache License
public Layouts() { HTML contents = new HTML("This is a <code>ScrollPanel</code> contained at " + "the center of a <code>DockPanel</code>. " + "By putting some fairly large contents " + "in the middle and setting its size explicitly, it becomes a " + "scrollable area within the page, but without requiring the use of " + "an IFRAME." + "Here's quite a bit more meaningless text that will serve primarily " + "to make this thing scroll off the bottom of its visible area. " + "Otherwise, you might have to make it really, really small in order " + "to see the nifty scroll bars!"); ScrollPanel scroller = new ScrollPanel(contents); scroller.setStyleName("ks-layouts-Scroller"); DockPanel dock = new DockPanel(); dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER); HTML north0 = new HTML("This is the <i>first</i> north component", true); HTML east = new HTML("<center>This<br>is<br>the<br>east<br>component</center>", true); HTML south = new HTML("This is the south component"); HTML west = new HTML("<center>This<br>is<br>the<br>west<br>component</center>", true); HTML north1 = new HTML("This is the <b>second</b> north component", true); dock.add(north0, DockPanel.NORTH);/*w w w. j a v a 2s. c o m*/ dock.add(east, DockPanel.EAST); dock.add(south, DockPanel.SOUTH); dock.add(west, DockPanel.WEST); dock.add(north1, DockPanel.NORTH); dock.add(scroller, DockPanel.CENTER); FlowPanel flow = new FlowPanel(); for (int i = 0; i < 8; ++i) flow.add(new CheckBox("Flow " + i)); HorizontalPanel horz = new HorizontalPanel(); horz.setVerticalAlignment(VerticalPanel.ALIGN_MIDDLE); horz.add(new Button("Button")); horz.add(new HTML("<center>This is a<br>very<br>tall thing</center>", true)); horz.add(new Button("Button")); VerticalPanel vert = new VerticalPanel(); vert.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); vert.add(new Button("Small")); vert.add(new Button("--- BigBigBigBig ---")); vert.add(new Button("tiny")); MenuBar menu = new MenuBar(); MenuBar menu0 = new MenuBar(true), menu1 = new MenuBar(true); menu.addItem("menu0", menu0); menu.addItem("menu1", menu1); menu0.addItem("child00", (Command) null); menu0.addItem("child01", (Command) null); menu0.addItem("child02", (Command) null); menu1.addItem("child10", (Command) null); menu1.addItem("child11", (Command) null); menu1.addItem("child12", (Command) null); String id = HTMLPanel.createUniqueId(); HTMLPanel html = new HTMLPanel("This is an <code>HTMLPanel</code>. It allows you to add " + "components inside existing HTML, like this:" + "<span id='" + id + "'></span>" + "Notice how the menu just fits snugly in there? Cute."); DOM.setStyleAttribute(menu.getElement(), "display", "inline"); html.add(menu, id); VerticalPanel panel = new VerticalPanel(); panel.setSpacing(8); panel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); panel.add(makeLabel("Dock Panel")); panel.add(dock); panel.add(makeLabel("Flow Panel")); panel.add(flow); panel.add(makeLabel("Horizontal Panel")); panel.add(horz); panel.add(makeLabel("Vertical Panel")); panel.add(vert); panel.add(makeLabel("HTML Panel")); panel.add(html); initWidget(panel); setStyleName("ks-layouts"); }
From source file:com.konakart.client.ChooseAddrBody.java
License:Open Source License
/** * Creates the table to choose an addr. It is populated with the addresses passed in, and the * title is changed depending on whether we are choosing the shipping or billing addresses. * /*from ww w . j av a 2 s.co m*/ * @param addrArray * @param shipping */ protected void render(GWT_Address[] addrArray, boolean shipping) { // Remove the current panel removeFromDom(); radioList = new ArrayList<RadioButton>(); this.addrArray = addrArray; // Get the container panel HTMLPanel containerPanel = getContainerPanel(1); // Get the header Widget header; if (shipping) { header = renderHeader(one_page_checkout_choose_shipping_address, "table_background_delivery.gif", one_page_checkout_choose_shipping_address); } else { header = renderHeader(one_page_checkout_choose_billing_address, "table_background_delivery.gif", one_page_checkout_choose_billing_address); } // Add the header to the container panel containerPanel.add(header, HEADER_ID); int row = 0; int colspan = 4; FlexTable ft111 = getTable(0, "100%", 0, 2, "body-content-tab"); ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); ft111.setWidget(row++, 0, getVSpacer()); ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); formatCell(ft111, row, 0, null, "left", null, null); ft111.setWidget(row++, 0, newAddrLink); ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); ft111.setWidget(row++, 0, getVSpacer()); formatCell(ft111, row, 0, null, null, "top", null); formatCell(ft111, row, 1, null, null, "top", "50%"); formatCell(ft111, row, 2, null, "right", "top", "50%"); formatCell(ft111, row, 3, null, null, "top", null); // Col 0 ft111.setWidget(row, 0, getHSpacer()); // Col 1 if (shipping) { ft111.setHTML(row, 1, change_delivery_address_body_selectaddr); } else { ft111.setHTML(row, 1, change_payment_address_body_selectaddr); } // Col2 FlexTable t = getTable(0, "100%", 0, 0, "body-content-tab"); formatCell(t, 0, 0, null, "right", "top", "50%"); formatCell(t, 1, 0, null, "right", "top", "50%"); t.setHTML(0, 0, change_payment_address_body_pleaseselect); t.setWidget(1, 0, new Image(getImages_folder() + "arrow_east_south.gif")); ft111.setWidget(row, 2, t); // Col 3 ft111.setWidget(row++, 3, getHSpacer()); // Loop through the addresses for (int i = 0; i < addrArray.length; i++) { GWT_Address addr = addrArray[i]; // col 0 of ft111 ft111.setWidget(row, 0, getHSpacer()); // col 1 - 2 of ft111 ft111.getFlexCellFormatter().setColSpan(row, 1, 2); FlexTable ft1111 = getTable(0, "100%", 0, 2, "body-content-tab"); ft111.setWidget(row, 1, ft1111); /* * Row 0 of ft1111 */ ft1111.getFlexCellFormatter().setColSpan(0, 1, 2); formatCell(ft1111, 0, 0, null, null, "top", "10"); formatCell(ft1111, 0, 2, null, "right", null, null); formatCell(ft1111, 0, 3, null, null, "top", "10"); // Col 0 ft1111.setWidget(0, 0, getHSpacer()); // Col 1-2 ft1111.setHTML(0, 1, "<b>" + addr.getFirstName() + " " + addr.getLastName() + "</b>"); RadioButton b = new RadioButton("selAddrGroup"); if (i == 0) { b.setValue(true); } radioList.add(i, b); // Save the radio button in a list // Col 3 ft1111.setWidget(0, 2, b); // Col 4 ft1111.setWidget(0, 3, getHSpacer()); /* * Row 1 of ft1111 */ ft1111.getFlexCellFormatter().setColSpan(0, 1, 3); formatCell(ft1111, 0, 0, null, null, "top", "10"); formatCell(ft1111, 0, 2, null, null, "top", "10"); // Col 0 ft1111.setWidget(1, 0, getHSpacer()); // Col 1-3 FlexTable t1 = getTable(0, "100%", 0, 2, "body-content-tab"); formatCell(t1, 0, 0, null, null, "top", "10"); formatCell(t1, 0, 2, null, null, "top", "10"); t1.setWidget(0, 0, getHSpacer()); t1.setHTML(0, 1, removeCData(addr.getFormattedAddress()).replaceAll("<br>", ", ")); t1.setWidget(0, 2, getHSpacer()); ft1111.setWidget(1, 1, t1); // Col 4 ft1111.setWidget(1, 2, getHSpacer()); // Col 3 of ft111 ft111.setWidget(row++, 2, getHSpacer()); } ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); ft111.setWidget(row++, 0, getVSpacer()); // Add error table ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); ft111.setWidget(row++, 0, errorFT); containerPanel.add(ft111, BODY_ID); containerPanel.add(getButtons(2), BUTTON_ID); // Finally, add the outer panel to the RootPanel, so that it will be // displayed. addToDom(containerPanel); }
From source file:com.konakart.client.EditAddrBody.java
License:Open Source License
/** * Creates the table to edit an addr. It is populated with the address passed in, and the title * is changed depending on whether we are editing the shipping or billing address * //from w w w. j av a2 s .c o m * @param shipping */ protected void renderAddr(boolean shipping) { // Remove the current panel removeFromDom(); clearWidgets(); // Get the container panel HTMLPanel containerPanel = getContainerPanel(1); // Get the header Widget header; if (shipping) { header = renderHeader(one_page_checkout_shipping_address, "table_background_delivery.gif", one_page_checkout_shipping_address); } else { header = renderHeader(one_page_checkout_billing_address, "table_background_delivery.gif", one_page_checkout_billing_address); } // Add the header to the container panel containerPanel.add(header, HEADER_ID); ft111 = getTable(0, "100%", 0, 2, "body-content-tab"); int row = 0; int colspan = 3; ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); ft111.setWidget(row++, 0, getVSpacer()); ft111.getFlexCellFormatter().setColSpan(row, 0, 2); formatCell(ft111, row, 0, "main", null, "top", null); ft111.setHTML(row, 0, one_page_checkout_enter_your_address_details); formatCell(ft111, row, 1, "inputRequirement", null, "top", null); ft111.setHTML(row++, 1, " * " + register_customer_body_required_info); ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); ft111.setWidget(row++, 0, getVSpacer()); row = getAddrTable(ft111, row, colspan, /* register */false, /* Show eMail */false); ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); ft111.setWidget(row++, 0, getVSpacer()); // Add error table ft111.getFlexCellFormatter().setColSpan(row, 0, colspan); ft111.setWidget(row++, 0, errorFT); containerPanel.add(ft111, BODY_ID); containerPanel.add(getButtons(2), BUTTON_ID); // Finally, add the outer panel to the RootPanel, so that it will be // displayed. addToDom(containerPanel); }
From source file:com.konakart.client.KKBaseWin.java
License:Open Source License
/** * Returns a panel with the buttons./*from w ww . j ava2 s.co m*/ * * @param mode * If mode == 1 it returns a panel with a confirmation button. If mode == 2 it * returns a panel with a back and continue button. * @return Returns the panel */ protected Widget getButtons(int mode) { String divs = "<div class=\"button-left\"><div class=\"button-right\"><div class=\"button-bottom\"><div class=\"button-bottom-left\"><div class=\"button-bottom-right\"><div class=\"button-top\"><div class=\"button-top-left\"><div class=\"button-top-right\">" + "<div id=\"kk-buttons\" class=\"button-tile\">" + "</div>" + "</div></div></div></div></div></div></div>"; HTMLPanel panel = new HTMLPanel(divs); FlexTable buttonFT = getTable(0, "97%", 0, 0, null); if (mode == 1) { formatCell(buttonFT, 0, 0, null, "right", null, null); buttonFT.setWidget(0, 0, confirmOrderCssButton); } else if (mode == 2) { formatCell(buttonFT, 0, 0, null, "left", null, null); formatCell(buttonFT, 0, 1, null, "right", null, null); buttonFT.setWidget(0, 0, backCssButton); buttonFT.setWidget(0, 1, continueCssButton); } if (debug) { buttonFT.setWidget(1, 0, debugFT); } panel.add(buttonFT, "kk-buttons"); return panel; }
From source file:com.konakart.client.LoginBody.java
License:Open Source License
/** * Creates the panel to ask for the email *//*from ww w . j ava 2 s . co m*/ protected void renderGetEmail() { // Remove the current panel removeFromDom(); // Get the container panel HTMLPanel containerPanel = getContainerPanel(1); // Get the header Widget header = renderHeader(login_body_welcome_email, "table_background_login.gif", login_body_welcome_email); // Add the header to the container panel containerPanel.add(header, HEADER_ID); // Create the body FlexTable ft0 = getTable(0, "100%", 0, 0, "body-content-tab"); int row = 0; ft0.getFlexCellFormatter().setColSpan(row, 0, 2); ft0.setWidget(row++, 0, getVSpacer()); ft0.getFlexCellFormatter().setColSpan(row, 0, 2); ft0.setHTML(row++, 0, "<b>" + one_page_checkout_enter_email + ":</b>"); ft0.getFlexCellFormatter().setColSpan(row, 0, 2); ft0.setWidget(row++, 0, getVSpacer()); ft0.setHTML(row, 0, "<b>" + login_body_email + ":</b>"); ft0.setWidget(row++, 1, userTB); ft0.getFlexCellFormatter().setColSpan(row, 0, 2); ft0.setWidget(row++, 0, getVSpacer()); ft0.getFlexCellFormatter().setColSpan(row, 0, 2); ft0.setWidget(row++, 0, errorFT); ft0.getFlexCellFormatter().setColSpan(row, 0, 2); ft0.setWidget(row++, 0, getVSpacer()); containerPanel.add(ft0, BODY_ID); containerPanel.add(getButtons(2), BUTTON_ID); // Finally, add the outer panel to the RootPanel, so that it will be // displayed. addToDom(containerPanel); }