I've the following code snippet:
myPanel.getElement().setId("left-content");
//...
//...
Element e = DOM.getElementById("left-content");// this returns NULL!
Update
Here is a longer code snippet:
public class RootComposite extends Composite
{
public RootComposite(int comboSelectedIndex)
{
VerticalPanel verticalPanel = new VerticalPanel();
initWidget(verticalPanel);
VerticalPanel containerPanel = new VerticalPanel();
containerPanel.setSpacing(1);
verticalPanel.add(containerPanel);
verticalPanel.setSize("100%", "100%");
RightPanelMainComposite rightPanelMainComposite = new RightPanelMainComposite();
VerticalPanel rightcolVerticalPanel = new VerticalPanel();
rightcolVerticalPanel.setStyleName("rightcol");
VerticalPanel searchVerticalPanel = new VerticalPanel();
searchVerticalPanel.setStyleName("search");
rightcolVerticalPanel.add(searchVerticalPanel);
searchVerticalPanel.add(rightPanelMainComposite);
ContentComposite contentComposite = new ContentComposite();
HorizontalPanel leftContentPanel = new HorizontalPanel();
containerPanel.add(leftContentPanel);
leftContentPanel.getElement().setAttribute("id", "left-content");
DOM.getElementById("left-content"); // returns NULL !!!
// ....
}
The above Composite is being added to the RootPanel.
You can use DOM.getElementById only if the requested widget is actually attached to the DOM.
Your code shows that you set the id in the constructor and request the correspondant element right after when the widget is not attached yet. Your widget is actually attached only when its onLoad method is called.
I assume, that you didn't add myPanel to the DOM (e.g. RootPanel.get().add(myPanel)) before calling DOM.getElementById("left-content").
Related
When i run the following Code and push Button "Push", more than once a time, i get browser error "simplePanel can only contain one child widget". How can i solve that problem? thank you in advance! Jogi
public class Projekt implements EntryPoint {
private RootPanel rootPanel;
public void onModuleLoad() {
rootPanel = RootPanel.get("gwtContainer");
rootPanel.setSize("1902", "868");
final AbsolutePanel boundaryPanel = new AbsolutePanel();
boundaryPanel.setStyleName("frame1");
boundaryPanel.setSize("1455px", "600px");
final Diagram diagram = new Diagram(boundaryPanel);
RootPanel.get().add(boundaryPanel, 446, 242);
final Connector con = new Connector(100, 300, 300, 500);
Button la = new Button("Push");
la.setSize("200", "200");
RootPanel.get().add(la);
Button la2 = new Button("Push2");
la2.setSize("200", "200");
RootPanel.get().add(la2);
final Image img = new Image("images/concrete.svg");
img.setSize("200", "200");
final Shape shapei = new Shape(img);
Image img2 = new Image("images/variable.svg");
img2.setSize("200", "200");
boundaryPanel.add(img2, 200,200);
final Shape shapei2 = new Shape(img2);
shapei2.showOnDiagram(diagram);
la.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
boundaryPanel.add(img, 100,100);
shapei.showOnDiagram(diagram);
}
});
la2.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
con.showOnDiagram(diagram);
}
});
diagram.addDiagramListener(new DiagramListenerAdapter() {
#Override
public void onElementConnect(ElementConnectEvent event) {
if (con.startEndPoint.isGluedToConnectionPoint()) {
Widget connected = con.startEndPoint.gluedConnectionPoint.parentWidget;
if(connected.equals(shapei.connectedWidget)){
Image logo = new Image("images/xor.svg");
logo.setSize("100", "100");
boundaryPanel.add(logo);
}
else if(connected.equals(shapei2.connectedWidget)){
Image logo2 = new Image("images/and.svg");
logo2.setSize("100", "100");
boundaryPanel.add(logo2);
};
}}
});
}}
RootPanel.get() is a SimplePanel. You try to add more than one child to it, resulting in this error.
Instead, you should add HTMLPanel, for example, to your RootPanel, and then add all the children to this HTMLPanel.
I suppose your Diagram extends GWT's SimplePanel
class? SimplePanel can contain only a single widget, have a look here:
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/SimplePanel.html
You could either extend a different class, or call the remove(Widget w) method to remove the existing widget before trying to add a new one.
I am trying to get a pop up when an image is clicked. below is the piece of code:
while(index<bookList.size()){
if(cellCount<4){
image[index] = new Image(imageList.get(index));
final int imageIndex = index;
table.setWidget(row, cellCount, new Image(bookList.get(index)));
table.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
VerticalPanel vPanel = new VerticalPanel();
vPanel = imageDetail.getPopup(popup, image[imageIndex]);
popup.setAnimationEnabled(true);
popup.setGlassEnabled(true);
popup.setAutoHideEnabled(false);
popup.setWidth("300px");
popup.setHeight("300px");
popup.add(vPanel);
popup.center();
}});
table.getFlexCellFormatter().setStyleName(row, cellCount, "ImageCell");
cellCount++;
index++;
}
Above code contain clickhandler which calls "getPopup" of imageDetail object. "getPopup" function returns a vertical Panel which is added to PopupPanel. ImageDetail class is as follows
public class ImageDetails extends Composite {
private Image closeButton;
VerticalPanel getPopup(final PopupPanel popup, Image image){
VerticalPanel vPanel = new VerticalPanel();
//Close Button
HorizontalPanel closePanel = new HorizontalPanel();
closeButton = new Image("/Images/closebutton.jpg");
closeButton.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
popup.hide();
}});
closePanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
closePanel.add(closeButton);
vPanel.add(closePanel);
VerticalPanel imagePanel = new VerticalPanel();
imagePanel.add(image);
vPanel.add(imagePanel);
return vPanel;
}
My questions are as following :
1) Is it ok to return panels from a function? If no, then why? If yes, why above code gives "Uncaught exception escaped com.google.gwt.event.shared.UmbrellaException: 3 exceptions caught: null; null; null"?
2) When i try to add vertical panel to popup panel in "getPopup" function and get popup panel from there, code returning same error as mentioned in first question. What am I missing?
Am i missing any initWidget(w) function call?
Thank you
I have a for loop that displays a list of text fields and radio buttons.
What is the best way to reference the widgets so that I can read the text fields and aslo find which radio button is checked.
Here is my loop
for(int x = 0; x<getLoopCount(); x++)
{
answerTable.setWidget(x,0, new Label("Answer:"));
answerTable.setWidget(x,1, new TextBox());
answerTable.setWidget(x,2, new RadioButton(""));
}
Is there a way to ID each widget so I can reference it?
I would recommend grouping the three widgets together in a composite widget like this:
class AnswerComposite extends Composite {
private final Label label;
private final TextBox textBox;
private final RadioButton radioButton;
public AnswerComposite() {
label = new Label("Answer:");
textBox = new TextBox();
radioButton = new RadioButton("answerGroup");
HorizontalPanel contentPanel = new HorizontalPanel();
contentPanel.add(label);
contentPanel.add(textBox);
contentPanel.add(radioButton);
initWidget(contentPanel);
}
public String getText() {
return textBox.getValue();
}
public boolean isSelected() {
return radioButton.getValue();
}
}
You can then add them to a panel and/or put them in a list like this:
VerticalPanel answersPanel = new VerticalPanel();
List<AnswerComposite> answerComposites = new ArrayList<AnswerComposite>();
for (int i = 0; i < getLoopCount(); i++) {
AnswerComposite answerComposite = new AnswerComposite();
answersPanel.add(answerComposite);
answerComposites.add(answersComposite);
}
Checking your widgets then becomes very easy:
answerComposites.get(i).getText();
answerComposites.get(i).isSelected();
It will probably also be convenient to add a ValueChangeHandler to your RadioButtons (see enrybo's answer).
You can add a ValueChangeHandler to your RadioButton when you are creating them.
for(int x = 0; x<getLoopCount(); x++){
answerTable.setWidget(x,0, new Label("Answer:"));
answerTable.setWidget(x,1, new TextBox());
RadioButton rb = new RadioButton("");
rb.addValueChangeHandler(new ValueChangeHandler(){
#Override
void onValueChange(ValueChangeEvent<Boolean> event){
// Do something
}
});
answerTable.setWidget(x,2, rb);
}
The ValueChangeEvent will only be fired when the RadioButton is checked. It will not fire if another RadioButton in the same group is checked.
Since you're adding the ValueChangeHandler as you're creating your RadioButton you should know what is to be done with it without having to create an ID for it.
Let me give you an adhoc answer, so don't care about the syntax but the algorithmic idea.
Extend GWT button.
abstract class MyButton
extends Button{
// provide the appropriate constructor in impl class,
// especially if using uibinder
abstract public void helloDolly(... args ...);
}
Instantiate all those buttons using MyButton.
MyButton[] buttons = {
new MyButton(){
public void helloDolly(... args ...){
Window.alert("allo allo #1");
}
},
new MyButton(){
public void helloDolly(... args ...){
Window.alert("allo allo #2");
}
},
// blah blah black sheep ....
}
Use clickEvent.getSource() when defining handler.
buttons[i].addEventHandler(
new ClickHandler(ClickEvent click){
Object src = click.getSource();
if (src !instanceOf MyButton){
throw new MyAngryException("For goodness' sake, pls use MyButton");
// or ignore
return;
}
((MyButton)src).helloDolly(... args ...);
}
)
I have the following code in my modules onModuleLoad() method:
List<MyPromo> promotionData = new ArrayList<MyPromo>();
MyPromo promotion1 = new MyPromo(...);
promotionData.add(promotion1);
PromotionTable<MyPromo> promoTable = new PromotionTable<MyPromo>(tableColumns, promotionData);
and
public class PromotionTable <T extends Promotion> extends CellTable<T>{
public PromotionTable(List<ColumnGroup<T>> columns, List<T> data) {
super();
this.setWidth("100%");
this.setHeight("500px");
this.setHeaderBuilder(new PromotionTableHeaderBuilder(columns, this));
this.setFooterBuilder(new PromotionTableFooterBuilder(this));
ListDataProvider<T> dataProvider = new ListDataProvider<T>();
dataProvider.setList(data);
dataProvider.addDataDisplay(this);
}
...
The columns for the CellTable just take properties off the MyPromo object and return a String value to display. However, nothing is displayed in the table, just the column headers. Any idea why this is?
The problem is with the following code
ListDataProvider<T> dataProvider = new ListDataProvider<T>();
dataProvider.setList(data);
dataProvider.addDataDisplay(this);
By the time you do setList, ListDataProvider must know its consumers ie displays (Refer setList implementaion).
So, the order of the code is wrong. First do addDataDisplay and then do setList. It will work.
I was constructing the dataProvider and assigning it to the celltable (or mu extension of) in the constructor. It didn't like this for some reason, when I moved it out it worked.
Here is a simple example of CellTable, SimplePager and ListDataProvider.
CellTable<AlarmDisplayBTO> cellTable= new CellTable<AlarmDisplayBTO>();
TextColumn<AlarmDisplayBTO> dateColumn = new TextColumn<AlarmDisplayBTO>() {
#Override
public String getValue(AlarmDisplayBTO object) {
return object.getDate();
}
};
cellTable.addColumn(dateColumn, "Date");
TextColumn<AlarmDisplayBTO> alarmNameColumn = new TextColumn<AlarmDisplayBTO>() {
#Override
public String getValue(AlarmDisplayBTO object) {
return object.getAlarmName();
}
};
cellTable.addColumn(alarmNameColumn, "Alarm Name");
cellTable.setRowCount(alarmList.size());
// alarmList is an ArrayList<AlarmDisplayBTO> rendered from RPC call
cellTable.setRowData(0, alarmList);
cellTable.setEmptyTableWidget(new Label(" No Records Found"));
ListDataProvider<AlarmDisplayBTO> dataProvider = new ListDataProvider<AlarmDisplayBTO>();
dataProvider.addDataDisplay(cellTable);
dataProvider.setList(alarmList);
SimplePager pager = new SimplePager();
pager.setDisplay(cellTable);
pager.setPageSize(20); // 20 rows will be shown at a time
VerticalPanel vPanel = new VerticalPanel();
vPanel.add(cellTable);
vPanel.add(pager);
setWidget(new ScrollPanel(vPanel));
Hope this may help..
i created a dialog box using uiBinder in gwt app, it works fine except it cannot move around. i don't know what's wrong with it, do i have to set caption in order to move it around?
here is my code:
myDialog.ui.xml
<g:HTMLPanel ui:field="_glossaryPanel">
<div class="dialogBox">
<h3>content goes here..</h3>
<p>More content...</p>
</div>
</g:HTMLPanel>
myDialog.java
public class MyDialog extends DialogBox {
private static MyDialogUiBinder uiBinder = GWT.create(MyDialogUiBinder.class);
interface MyDialogUiBinder extends UiBinder<Widget, MyDialog> {
}
public MyDialog() {
setWidget(uiBinder.createAndBindUi(this));
this.setModal(true);
this.setAutoHideEnabled(true);
}
FooterView.java
public class FooterView extends Composite implements FooterPresenter.Display {
interface Binder extends UiBinder<Widget, FooterView> {
}
private static final Binder BINDER = GWT.create(Binder.class);
#UiField
Anchor _glossary;
#UiHandler("_glossary")
public void handleGlossaryClick(ClickEvent event) {
MyDialog mDialog = new MyDialog();
mDialog.setGlassEnabled(true);
mDialog.setAnimationEnabled(true);
mDialog.center();
mDialog.show();
}
See http://gwt.google.com/samples/Showcase/Showcase.html#!CwDialogBox You have to use a DialogBox (not a PopupPanel) to move the thing around.
EDIT:
I tried your code and it worked for me. Have you tried clicking in the border (not content!) to drag the dialog box around?
GWT Dialogs can't be moved around like a desktop window. There was a projected called gwt-windows that would let you do that, but it hasn't been updated in years.
Maybe you could try in your ui.xml file to change the root element type
from HTMLpanel to a FlowPanel
I saw somewhere that was saying something like this. where ? I can't remember :-(
your <div clas="dialogBox"> is, in my opinion, a bit confusing, maybe yould consider renaming to something more personal and less in gwt keywords' like.
Here is the Solution,
VerticalPanel panel;
DialogBox dialogbox;
PopupPanel glass;
VerticalPanel DialogBoxContents;
ClickListener listener;
HTML message;
Button button;
SimplePanel holder;
public void demo()
{
// Create a panel and add it to the screen
panel = new VerticalPanel();
RootPanel.get("demo").add(panel);
panel.setStyleName("table-center");
//
// Create a DialogBox with a button to close it
dialogbox = new DialogBox(false);
dialogbox.setStyleName("demo-DialogBox");
DialogBoxContents = new VerticalPanel();
dialogbox.setText("DialogBox");
message = new HTML("Click 'Close' to close");
message.setStyleName("demo-DialogBox-message");
listener = new ClickListener()
{
public void onClick(Widget sender)
{
dialogbox.hide();
}
};
button = new Button("Close", listener);
holder = new SimplePanel();
holder.add(button);
holder.setStyleName("demo-DialogBox-footer");
DialogBoxContents.add(message);
DialogBoxContents.add(holder);
dialogbox.setWidget(DialogBoxContents);
//
// Add a button to the demo to show the above DialogBox
listener = new ClickListener()
{
public void onClick(Widget sender)
{
dialogbox.center();
}
};
button = new Button("Show DialogBox", listener);
panel.add(button);
}
Check out the DEMO AT http://examples.roughian.com/index.htm#Widgets~DialogBox
"do i have to set caption in order to move it around?"
Yes.
dialogbox.setText("DialogBox");
You may drag only catpion div;
When you drag caption div, whole dialog box will move.