public Canvas getViewPanel() {
VLayout layout = new VLayout();
layout.setMembersMargin(10);
final HTMLFlow flow = new HTMLFlow();
flow.setID("messageBox");
flow.setContents("<span class='exampleDropTitle'>Ajax </span> <b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML (AJAX) is a Web development technique for creating interactive <b>web applications</b>. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page's <b>interactivity</b>, <b>speed</b>, and <b>usability</b>. (Source: <a href='http://www.wikipedia.org' title='Wikipedia' target='_blank'>Wikipedia</a>)");
flow.setStyleName("exampleTextBlock");
flow.setOverflow(Overflow.HIDDEN);
flow.setShowEdges(true);
flow.setPadding(5);
flow.setWidth(75);
flow.setHeight(45);
flow.setTop(50);
flow.setAnimateTime(800); //in milliseconds
final IButton expandButton = new IButton();
expandButton.setTitle("Expand");
expandButton.setLeft(40);
final IButton collapseButton = new IButton();
collapseButton.setTitle("Collapse");
collapseButton.setDisabled(true);
expandButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
expandButton.setDisabled(true);
flow.animateResize(310,45, new AnimationCallback() {
public void execute(boolean earlyFinish) {
flow.animateResize(310,195);
}
});
collapseButton.setDisabled(false);
}
});
collapseButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
collapseButton.setDisabled(true);
flow.animateResize(310,45, new AnimationCallback() {
public void execute(boolean earlyFinish) {
flow.animateResize(75,45);
}
});
expandButton.setDisabled(false);
}
});