I want to display three or more DataGrids in my LayoutPanel and specify their width as a percentage of the total width of the LayoutPanel, but in the LayoutPanel methods i see only methods for setting the width of the left and right widgets. setWidgetLeftWidth() and setWidgetRightWidth().
Is it possible to add more than 2 widgets to a LayoutPanel like
layoutPanel.add(dataGrid1);
layoutPanel.add(dataGrid2);
layoutPanel.add(dataGrid3);
layoutPanel.add(dataGrid4);
and then set the width of each widget to be 25% of the width of the LayoutPanel?
Thanks and regards
Mukul
What you have will work, all you need to do is to make each one setup like the following:
layoutPanel.add(dataGrid1);
layoutPanel.setWidgetLeftRight(dataGrid1, 0, Unit.PCT, 25, Unit.PCT);
Well I think you could do it with LayoutPanel too, but using the DockLayoutPanel is much easier! Here is the code for a the example you tried with a LayoutPanel.
public void onModuleLoad() {
//define a DockLayoutPanel with a Percentage size definition
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PCT);
//add four widgets to the DockLayoutPanel, each with a Percentage
//with of 25%
dockLayoutPanel.addWest(new Label("widget 1"), 25);
dockLayoutPanel.addWest(new Label("widget 2"), 25);
dockLayoutPanel.addWest(new Label("widget 3"), 25);
//the last widget must always be added with the .add method
//since it takes the rest of the screen
dockLayoutPanel.add(new Label("widget 4"));
//set a with to the DockLayoutPanel (elso you don't se much)
dockLayoutPanel.setWidth("500px");
dockLayoutPanel.setHeight("500px");
//add it to the RootPanel
RootPanel.get().add(dockLayoutPanel);
}
So as long as you don't have a good reason why you must use LayoutPanel, I'd use the DocklayoutPanel!
Related
While trying to insert absolute positioned HorizontalContainer into other container, I came upon weird issue. This absolute container pushes his next sibling by its width, if siblings are still being rendered (has a mask set).
Example:.
//parent container, holding all the widgets
HorizontalLayoutContainer hlc;
//widgets that are inserted into hlc container from the start
HBoxLayoutContainer hbox1;
HBoxLayoutContainer hbox2;
HBoxLayoutContainer hbox3;
//container that's inserted into hlc onMouseOver event. It can be inserted while hlc hboxes are still being rendered
HorizontalLayoutContainer panelContainer = new HorizontalLayoutContainer();
panelContainer.getElement().getStyle().setZIndex(13);
panelContainer.getElement().getStyle().setPosition(Position.ABSOLUTE);
panelContainer.getElement().getStyle().setWidth(55, Unit.PX);
panelContainer.getElement().getStyle().setHeight(18, Unit.PX);
panelContainer.getElement().getStyle().setFloat(Float.LEFT);
Now let's say a user hovers mouse over hlc container, which has hboxes1-3, however some of them has a mask set (data is still loading), like hbox1.mask(). onMouseOver event panelContainer is inserted into hlc:
hlc.insert(panelContainer, 0, new HorizontalLayoutData(55, 18));
However, since hboxes are still being rendered, panelContainer pushes hbox1 by 55px (its length) to the right. Even if it has position:absolute;.
left:55px; should be left: 0px;
-->
|panleContainer|hbox1|hbox2|hbox3|
Any suggestions how should I properly insert panelContainer? Why is absolute positioning being ignored?
Note:
If I wait for hboxes to be rendered, panelContainer is inserted properly, hbox1 is not pushed.
Clarification to avoid xy problem:
Short summary: add an absolutely positioned box (for clarity, let's call it DragBox) which has a predefined width to an existing container (WidgetBox). WidgetBox is a HorizontalLayoutContainer which has 2 or 3 HBoxLayoutContainers. WidgetBox children (HBoxLayoutContainers) have widths of percentages. Example: if WidgetBox has 2 children, their widths are 0.3 and 0.7, if 3 children, then widths are 0.3, 0.4, 0.3;
WidgetBox is sized by its parent (SimpleContainer->VerticalLayoutContainer->WidgetBox).
Expecting: When a mouse is hovered over any WidgetBox container, a new item (DragBox) is added as a first element of the WidgetBox. It should not affect WidgetBox children in anyway. It should act as an absolute (within WidgetBox bounds) box.
Result: If WidgetBox or its parent's layout is forced (through forceLayout()), then DragBox affects first WidgetBox child. If forceLayout() is not used, DragBox does not affect WidgetBox children.
Since forceLayout() in my case is used only to ensure proper WidgetBox children (see my edit) content formatting, I don't want to force children to be laid out for widgetBox.
To avoid this, I forced layout on each child of widgetBox instead of a parent.
Example:.
HorizontalLayoutContainer (parent)
-> HorizontalLayoutContainer (child 1, removed/added on mouseOver/Out)
-> HBoxLayoutContainer (child 2)
-> ...
I used to force layout on parent, like parent.forceLayout() which would force children to be laid out and parent container would be resized.
To avoid, as mentioned, I force layout on each child separately:
for(int i = 0; i < parent.getWidgetCount(); i++) {
if (parent.getWidget(i) instanceof ResizeContainer) {
ResizeContainer widget = (ResizeContainer) parent.getWidget(i);
widget.forceLayout();
}
}
I want to resize my htmlDialogBox to wider width. This is what I have now. Half of my html is cut off. I want to display the entire html in the htmlDialogBox.
GWT version: 2.8.0-SNAPSHOT
verticalPanel = new VerticalPanel();
verticalPanel.setSpacing(0);
setWidget(verticalPanel);
verticalPanel.setSize("100%","100%");
scrollPanel = new ScrollPanel();
verticalPanel.add(scrollPanel);
htmlDialogBox = new HTML();
verticalPanel.add(htmlDialogBox);
scrollPanel.setWidget(htmlDialogBox);
htmlDialogBox.setSize("100%", "100%");
htmlDialogBox.setHTML(html);
setGlassEnabled(true);
setAnimationEnabled(true);
setPopupPosition(ClientUtils.DIALOG_X_POSITION,ClientUtils.DIALOG_Y_POSITION);
show();
I find my own answer.
change setAnimationEnabled(true); to setAnimationEnabled(false);
I have Created one Barchart in ireport 3.0, the problem is that the bars are very thin. When i tried to increase bar width through customize r class it doesn't reflect any changes in size of bar i.e. width is same as it was. So how to increase width of bars of bar chart? I am attaching an image copy for your understanding purpose.
Bar width is shown in figure.
I have faced same issue as well. After a long search i found some solutions which fixed my issue. jasper report bar chart's bar width depends on chart's height and width. as jasper use JFreechart in backend so many modifications possible by a customize class. For increasing bar's width you need a customization class and then add it to your barchart jrxml like bellow
public class JasperBarChartCustomization implements JRChartCustomizer {
#Override
public void customize(JFreeChart chart, JRChart jasperChart) {
CategoryPlot catPlot = (CategoryPlot) chart.getPlot();
BarRenderer renderer = (BarRenderer) catPlot.getRenderer();
renderer.setMaximumBarWidth(.08);//for max width//
renderer.setItemMargin(-2);//as much margin decrease that much bar width increase//
//for adding value ob bar//
renderer.setBasePositiveItemLabelPosition(new ItemLabelPosition(ItemLabelAnchor.CENTER, TextAnchor.CENTER));
renderer.setBaseItemLabelPaint(Color.WHITE);
renderer.setBaseItemLabelFont(new Font("fontname", Font.PLAIN, 6));
//for remove legend background color and box border//
if (chart.getLegend() != null) {
chart.getLegend().setBorder(0.0, 0.0, 0.0, 0.0);
LegendTitle legend = chart.getLegend();
legend.setBorder(0, 0, 0, 0);
legend.setFrame(BlockBorder.NONE);
}
}
}
Now create a jar from above class and use that jar in ur jasper project's classpath
If your jasper run inside java application then u can use the class directly without making jar. create customize class in you code base
I've created a FlexTable, and I want to center it horizontally within a parent FlowPanel, like:
FlexTable ft = new FlexTable();
ft.add(0, 0, new Label());
ft.add(0, 1, new Orange());
ft.add(0, 2, new Label());
FlowPanel parent = new FlowPanel();
parent.add(ft); // how can I horizontally center the table in this div?
The content of the table is narrower than the parent FlowPanel (which is width:auto, the whole width of the browser), but the table is left-aligned right now,
Thanks
Two options:
parent.getElement().getStyle().setTextAlign(TextAlign.CENTER);
or
ft.getElement().getStyle().setProperty("margin", "0 auto");
You can use CSS styles instead, of course.
First of all? Which version of GWT are you using? The reason am asking this question, there is no method in FlexTable that is similar to add (int, int, Widget ) you have used in the latest version.
However, you can use the following code.
FlexTable ft = new FlexTable();
ft.setWidget(0, 0, new Label("a"));
ft.setWidget(0, 1, new Label("b"));
ft.setWidget(0, 2, new Label("c"));
FlowPanel parent = new FlowPanel();
parent.setSize("100%", "100%");
parent.add(ft);
parent.getElement().getStyle().setProperty("TextAlign", "center");
// If you are using Firefox :
//parent.getElement().getStyle().setProperty("TextAlign", "-moz-center");
RootLayoutPanel.get().add(parent);
If you dont't wish to mention the style in the java code, you can always use CSS like
parent.addStyleName("myStyle");
In CSS
.myStyle{
text-align : center;
}
I am using GWT2.3 in my project.
I want to increase editableTextBox width when user click on editableTextCell.
Problem is My Column width is 200 Px. when user clicks on editableTextCell then that TextBox width is around 125px in EditableTextCell is less as compare to column width.
I added EditTextCell in Celltable's column
Column stringColumn = new Column(new EditTextCell()) {
// My Code
}
cellTable.addColumn(stringColumn, "MyColumn");
cellTable.setColumnWidth(checkBoxColumn, 200, Unit.PX);
I tried following way to increase TextBox width but problem is I cannot edit in textbox + focus not losses
#Override
public void onBrowserEvent(Context context, Element elem,Record object, NativeEvent event) {
String type = event.getType();
int editedTexBoxSize = (cellTable.getOffsetWidth()-100)/cellTable.getColumnCount();
if(elem.getInnerHTML().startsWith("<INPUT")){
String test = elem.getInnerHTML();
// test = <INPUT tabIndex=-1 value=P __eventBits="2048"></INPUT>
test= test.replace("value", " size="+editedTexBoxSize+" value");
// test = <INPUT tabIndex=-1 size=131 value=P __eventBits="2048"></INPUT>
elem.setInnerHTML(test);
}
super.onBrowserEvent(context, elem, object, event);
}
I want to Increase(set) TextBox width appear in EditTextCell is equal to column Width.
Any Solution ?
In my project I do that:
cellTable.getColumn(cellTable.getColumnIndex(column)).setCellStyleNames(CELL_CSS);
.edit-cell input {
width: 290px;
}
Finally the answer !
I tried this even simplier using UIBinder by adding :
.edit-cell input {
width: 30px;
text-align: right;
}
Then for the cell table I added
<c:CellTable
addStyleNames='{style.edit-cell}'
ui:field='itemTable' />
Wonderful !
You'll need to create a custom component. The out of the box EditTextCell does not allow you to set the size attribute of the input field, just the column width.
Have a look at the ValidateableInputCell impl here: In search of a GWT validation example... where art thou? for an example of how to craft a custom cell.
Admittedly the validation does not yet work but the ability to set the size on the input field within the cell does.