full screen contentPanel ext gwt - gwt

I need to implement full screen ContentPanel in ext gwt. I use setSize method, but as params I can specify only resolution.
public class HomePage extends ContentPanel {
public HomePage() {
setSize(1024,768);
I want to have panel that will fill all window in each browser with different monitor resolution. So how can I use setsize method to solve this problem?
Thanks!

Instead of setting the size, maybe try setting a layout that will expand. Maybe something like this (hasn't been tested):
setLayout(new FitLayout());

In GXT 3, I used:
private static final int WIDTH_SCREEN = XDOM.getViewportWidth();
private static final int HEIGTH_SCREEN = XDOM.getViewportHeight();
And after that use setWidth, setHeight

Related

how to create Graphiti shapes with scroll bar

My Graphiti editor has shape that represents db table with it rows.. i am looking for a way to add scroll bar to my shape. any one know how to do that?
I've found an answer to this question.
This is the link to use: https://www.eclipse.org/forums/index.php/t/1071551/
I've created my own ScrollFigure, which extends draw2d ScrollPane and implements IGraphicsAlgorithmRenderer.
public class ScrollFigure extends ScrollPane implements IGraphicsAlgorithmRenderer {
#Override
public void setLayoutManager(LayoutManager manager) {
super.setLayoutManager(new ScrollPaneLayout());
}
}
Next you just have to adjust sizes of your figures in your custom factory, which instantiates your ScrollFigure, and scrollbars will be shown.

GWT: TabLayoutPanel with custom tabs does not display correctly

I have a TabLayoutPanel where I am putting custom widgets in for the tabs to be able to display some images next to the text. I originally worked with TabPanel and using custom HTML for the tab text, but custom tab widgets allows me to modify the image on the fly as needed.
My tab widget is essentially a HorizontalPanel, a number of small images, and a line of text. The problem I'm having is that the tab doesn't want to stick to the bottom of the tab bar like normal. The tab is getting positioned at the top of the space reserved for the tab bar, and there's a gap between it and the bottom of the tab bar. I uploaded an image of the problem to http://imgur.com/fkSHd.jpg.
Is there some style that I need to apply to custom widget tabs to make them appear correctly?
In my brief experience, the newer standards mode panels (they all end in "LayoutPanel") don't get along with the older ones (the ones that just end in "Panel"). So you might consider trying a DockLayoutPanel instead of the HorizontalPanel, and it may be more cooperative.
See https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels, particularly the section called "What won't work in Standards Mode?":
HorizontalPanel is a bit trickier. In some cases, you can simply
replace it with a DockLayoutPanel, but that requires that you specify
its childrens' widths explicitly. The most common alternative is to
use FlowPanel, and to use the float: left; CSS property on its
children. And of course, you can continue to use HorizontalPanel
itself, as long as you take the caveats above into account.
After a bit more research, I found the answer here: https://groups.google.com/d/msg/google-web-toolkit/mq7BuDaTNgk/wLqPm5MQeicJ. I had to use InlineLabel or InlineHTML widgets instead of normal Label or HTML widgets. I've tested this solution and it does exactly what I want. I pasted the code of the class below for completeness. Note two things here:
The "float" attribute cannot be set on the last element (the InlineLabel) or the incorrect drawing condition occurs again.
The code could be cleaned up a bit further by having the class extend directly from FlowPanel instead of making it a composite containing a FlowPanel.
package com.whatever;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Float;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.InlineLabel;
public class StatusTab extends Composite
{
public interface StatusImages extends ClientBundle
{
public static StatusImages instance = GWT.create(StatusImages.class);
#Source("images/status-green.png")
ImageResource green();
#Source("images/status-red.png")
ImageResource red();
}
private final ImageResource greenImage;
private final ImageResource redImage;
private final FlowPanel flowPanel;
public LinkStatusTab(String text, int numStatuses) {
greenImage = StatusImages.instance.green();
redImage = StatusImages.instance.red();
flowPanel = new FlowPanel();
initWidget(flowPanel);
for (int i = 0; i < numStatuses; i++)
{
Image statusImg = new Image(redImage);
statusImg.getElement().getStyle().setMarginRight(3, Unit.PX);
statusImg.getElement().getStyle().setFloat(Float.LEFT);
flowPanel.add(statusImg);
}
flowPanel.add(new InlineLabel(text));
}
/**
* Sets the image displayed for a specific status entry.
*/
public void setStatus(int which, boolean status)
{
Image image = (Image)flowPanel.getWidget(which);
if (status)
image.setResource(greenImage);
else
image.setResource(redImage);
}
}

How to style GWT CellList?

I have a CellList that I want to style. I want to change the cursor style, the ugly color of a selected cell . I checked several questions and discussions on stack overflow,but none of them worked.
I checked these one:
CellList GWT CSS Style
How do I style a gwt 2.1 CellTables headers?
Her is my code:
public interface CellListResource extends CellList.Resources {
public static CellListResource INSTANCE = GWT.create(CellListResource.class);
interface CellListStyle extends CellList.Style {
}
#Source({CellList.Style.DEFAULT_CSS, "CellTableStyle.css"})
CellListStyle style();
}
public SearchViewImpl() {
CompanyCell companyCell = new CompanyCell();
//it doesn't work :S
companiesList = new CellList<Company>(companyCell, CellListResource.INSTANCE);
rootElement = ourUiBinder.createAndBindUi(this);
loadingImage.setVisible(false);
}
Am I missing something? I Cleared Browser cache, Restarted server, F5 F5 F5 .... F5 (pressed refresh again and again) and nothing ...!
Thanks for help in advance.
Besides injecting the CSS it's important that you call the CellListStyle style cellListStyle() and not just style():
public interface CellListResource extends CellList.Resources {
public static CellListResource INSTANCE = GWT.create(CellListResource.class);
interface CellListStyle extends CellList.Style {}
#Override
#Source("cellListStyle.css")
CellListStyle cellListStyle();
}
and then you do
CellListResource.INSTANCE.cellListStyle().ensureInjected();
companiesList = new CellList<Company>(companyCell, CellListResource.INSTANCE);
Make sure you inject the css resource.
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
You can follow the following link
How do you change the mouse over highlighting?

GWT SimplePager : How to change the button images of the pager?

I want to change the button images of pager (first, last, next, prev, fastforward). I tired using CSS but i haven't been able to achieve it. Any Help or Suggestion would be appreciated.
I am using GWT 2.4.0
You need to extend SimplePager.Resources interface and provide your own images. Then pass on an instance of these resources into the SimplePager constructor:
public interface MyPagerImages extends SimplePager.Resources
{
// Here you can #Override all the methods and place #Source annotation to tell
// SimplePager what image should be loaded as a replacement
// For example here I am replacing the Fast Forward image.
#Override
#Source( "myFastForward.gif" )
ImageResource simplePagerFastForward()
}
then when constructing the SimplePager:
MyPagerImages myImages = GWT.create(MyPagerImages.class);
SimplePager pager = new SimplePager(SimplePager.TextLocation.CENTER,
myImages, true, 1000 /* that's the default */, false);

GWT composite dynamic height resize

I Have a GWT Composite to which some other Composites are added dynamically.
I want to make may Parent composite Resize to fit the height of all its child widgets automatically.
i tried setting setHeight("100%") for Composite but this doesn’t work.
any Idea how to accomplish this functionality?
thanks.
EDIT:
final DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
dockLayoutPanel.setStyleName("EntryPanel");
dockLayoutPanel.setSize("142px", "72px");
initWidget(dockLayoutPanel);
final VerticalPanel panel = new VerticalPanel();
panel.setSize("140px", "72px");
chckbxExport = new CheckBox("Export");
putField(CommonPresenter.CONSTANTS.EXPORT, chckbxExport);
dateBox = new DateBox();
dateBox.addValueChangeHandler(new ValueChangeHandler<Date>() {
#Override
public void onValueChange(final ValueChangeEvent<Date> event) {
dateChanged = true;
}
});
panel.add(dateBox);
final ListBox visibility = new ListBox();
final Label lblVisibility = new Label("Visibility:");
LabeledWidget vis = new LabeledWidget(lblVisibility, visibility);
for (int i = 0; i < CommonPresenter.CONSTANTS.VISIBILITIES.length; i++) {
visibility.addItem(CommonPresenter.CONSTANTS.VISIBILITIES[i]);
}
putField(CommonPresenter.CONSTANTS.VISIBILITY, visibility);
panel.add(vis);
panel.add(chckbxExport);
dockLayoutPanel.add(panel);
UPDATE:
Setting Composite width to fill all available Window horizontal space:
final int scrollBarWidth = 25;
// editPanel.setHeight("180px");
setWidth(Window.getClientWidth() - scrollBarWidth + "px");
// editPanel.setStyleName("EditorPanel");
Window.addResizeHandler(new ResizeHandler()
{
public void onResize(ResizeEvent event)
{
int width = event.getWidth();
setWidth(width - scrollBarWidth + "px");
}
});
Here's how to do it generally with HTML+CSS:
Create the parent, and do not set its height (or set it to auto).
Then add the children (just make sure, that you don't use absolute/fixed positioning for the children).
Set the height of the children, if required.
The height of the parent will then be adjusted automatically. This is the same for GWT Composites - just make sure, which CSS (including style attributes) applies to your elements! If unsure, use Firebug.
If you need more specifics, then you'd have to post some code which shows how you construct the parent composite (UiBinder, ...?)
Instead of using "100%" you can get the actual height by Window#getClientHeight(). To handle scenarios where the user resizes the browser, you can use a ResizeHandler.
Try Overriding the Resize()(Your class must extend to ResizeComposite).
In this re-size method set the size you want.
This works you dynamically because every time the window is re-sized this method is called and the values are set accordingly.