GWT Responsive Design solution - html

Question

i am working on GWT to make web application but now i need to make my web applications in Responsive design but GWT not support Responsive Design please help me.

Answer 1

GWT supports responsive design just like any other widget toolkit (OK, that's not exactly true, there are probably widget toolkits that do a better job): do your layout with HTMLPanel, FlowPanel, SimplePanel and responsive CSS, or go the active layout route with layout panels and doing calculations in your code (or in a custom layout panel).

Answer 2

You can make your layout responsive using CSS media queries.
For example, to make dialog boxes occupy 90% of the available horizontal space on devices that have screen size up to 640px, one can wrap the style inside #media block like this:
#media all and (max-width: 640px) {
.gwt-DialogBox {
width: 90%;
}
}
Unfortunately (as of today) GWT compiler does not support media CSS, so the code above will fail if you use it in conjunction with CssResource.
One of the approaches to this problem is to split your CSS resources into two files.
All default (desktop) CSS styles would go to the first file (e.g. main.css), and all your mobile overrides would go to the second file (e.g. mobile.css).
Note that style names that you want to override for mobile need to be tagged as #external in the main.css to avoid name obfuscation by gwt compiler.
main.css:
#external .mainNorthPanel;
.mainNorthPanel {
position: fixed;
top: 0px;
}
mobile.css:
#media all and (max-width: 640px) {
.mainNorthPanel {
position: absolute;
top: -3em;
}
}
In your application ClientBundle, use main.css in conjunction with your CssResource interface, and define the mobile file as an external resource:
public interface MyBundle extends ClientBundle {
public interface MainStyles extends CssResource {
String mainNorthPanel();
}
#Source("css/main.css")
MainStyles css();
#Source("css/mobile.css")
TextResource mobile();
}
And finally inject your external CSS resource somewhere in the module initialization:
String mobileCss = myBundle.mobile().getText();
StyleInjector.injectAtEnd(mobileCss)
For the full working example, take a look at this JavaWorld post that just came out recently:
http://www.javaworld.com/article/2842875/java-web-development/responsive-web-design-with-google-web-toolkit.html
It covers some basic concepts such css-based responsive views, dialogs, and menus.
And there is a little proof of concept on github:
https://github.com/cuppafame/gwt-responsive

Answer 3

In addition to what Thomas said you can look into gwt-bootstrap. They have a custom DataGrid widget that can be shown or hidden based on breakpoints (tablets, phones, etc).
If you actually want to hide and show columns based on available size you extend the DataGrid and do something along this lines:
ResponsiveDataGrid extends DataGrid<myDTO> {
private final Column<myDTO,String> column1;
private final Column<myDTO,String> column2;
private Boolean isCompact;
public ResponsiveDataGrid(int pageSize, Resources resources,ActionCell.Delegate<myDTO> actionDelegate) {
super(pageSize, resources,new EntityProxyKeyProvider<myDTO>());
initColumns();
}
private void initColumns() {
// init your columns
}
private void updateColumns() {
int columnCount = getColumnCount();
for (int i =columnCount-1;i>=0;i--) {
removeColumn(i);
}
removeUnusedColGroups();
if (isCompact) {
// show columns for compact size
}
else {
// show all columns
}
}
#Override
protected int getRealColumnCount() {
return getColumnCount();
}
// WORKAROUND for some sizing issues in DataGrid
private void removeUnusedColGroups() {
int columnCount = getColumnCount();
NodeList<Element> colGroups = getElement().getElementsByTagName("colgroup");
for (int i = 0; i < colGroups.getLength(); i++) {
Element colGroupEle = colGroups.getItem(i);
NodeList<Element> colList = colGroupEle.getElementsByTagName("col");
for (int j = colList.getLength()-1;j>=0; j--) {
colGroupEle.removeChild(colList.getItem(j));
}
}
}
#Override
public void onResize() {
super.onResize();
if (!isAttached()) {
return;
}
// or whatever breakpoint you want to support
boolean isNewCompact = (getOffsetWidth() < 800);
if (isCompact == null || isNewCompact != isCompact) {
isCompact = isNewCompact;
updateColumns();
}
}
}

Answer 4

/*The best way to do responsive web with is to use Timer class and Window class in GWT as Gwt does not responsive web at the moment. I have been searching on the web for about a week now and it was a waist of my time, even Google does not know how to do that. I came out with a very straight forward solution by using Window class and Timer class and it works like a magic.*/
public class View extends VerticalPanel{
private FlexTable flexTable=new FlexTable();
private Button[]buyAndSellButtons = new Button[2];
private TextBox[] textField=new TextBox[2];
private Label alert=new Label();
private LinkedList <String> stock=new LinkedList<>();
public View(){
createComponents();
}
public VerticalPanel createComponents() {
// Assume that the host HTML has elements defined whose
// IDs are "slot1", "slot2". In a real app, you probably would not want
// to hard-code IDs. Instead, you could, for example, search for all
// elements with a particular CSS class and replace them with widgets.
//
HorizontalPanel[] horizontalPanel = new HorizontalPanel[4];
for (int x = 0; x < horizontalPanel.length; x++) {
horizontalPanel[x] = new HorizontalPanel();
}
alert.setStyleName("alert");
add(alert);
flexTable.setText(0, 0, "BUY Orders");
flexTable.getCellFormatter().setStyleName(0, 0, "orderMatcherListHeader");
flexTable.setText(0, 1, "SELL Orders");
flexTable.getCellFormatter().setStyleName(0, 1, "orderMatcherListHeader");
flexTable.setStyleName("flexTable");
flexTable.setWidth("33em");
flexTable.setCellSpacing(5);
flexTable.setCellPadding(3);
add(flexTable);
Label[] labels = new Label[2];
labels[0] = new Label("Volume");
labels[1] = new Label("Price");
for (Label label : labels) {
label.setStyleName("label");
horizontalPanel[1].add(label);
horizontalPanel[1].setStyleName("labelPosition");
}
textField[0] = new TextBox();
textField[0].setTitle("Volume");
textField[1] = new TextBox();
textField[1].setTitle("Price");
for (TextBox textBox : textField) {
textBox.setStyleName("textField");
textBox.setFocus(true);
horizontalPanel[2].add(textBox);
}
buyAndSellButtons[0] = new Button("BUY");
buyAndSellButtons[1] = new Button("SELL");
for (Button button : buyAndSellButtons) {
horizontalPanel[3].add(button);
button.setStyleName("buttons");
horizontalPanel[3].setStyleName("buttonPosition");
}
VerticalPanel[] mainPanel = new VerticalPanel[1];
mainPanel[0] = new VerticalPanel();
for (HorizontalPanel aHorizontalPanel : horizontalPanel) {
mainPanel[0].add(aHorizontalPanel);
mainPanel[0].setStyleName("mainPanel_1");
setStyleName("mainPanel");
add(mainPanel[0]);
Window.addResizeHandler(new ResizeHandler() {
#Override
public void onResize(ResizeEvent event) {
alert.setText("" + Window.getClientWidth());
}
});
}
Timer timer=new Timer() {
int x;
#Override
public void run() {
alert.setText(Window.getClientWidth()+"Attach" + x++);
String[] gadget=new String[10];
gadget[0]=("354"); //android portrait
gadget[1]=("625");
gadget[2]=("314");
gadget[3]=("474");
gadget[4]=("369");
gadget[5]=("562");
gadget[6]=("617");// android landscape
gadget[7]=("48");
gadget[8]=("730");
alert.setText("" + Window.getClientWidth()+x++);
if(Window.getClientWidth()<=425) {
flexTable.getCellFormatter().setStyleName(0, 0, "orderMatcherListHeader_1");
flexTable.getCellFormatter().setStyleName(0, 1, "orderMatcherListHeader_1");
mainPanel[0].setStyleName("phonePortrait_1");
setStyleName("phonePortrait");
flexTable.setStyleName("flexTable_1");
if(Window.getClientWidth()==414){
flexTable.setWidth("26.2em");
}{
flexTable.setWidth("24.2em");
}
flexTable.setCellSpacing(5);
flexTable.setCellPadding(3);
}
else if((Window.getClientWidth()>425)&&(Window.getClientWidth()<=812)) {
alert.setText("" + Window.getClientWidth());
flexTable.getCellFormatter().setStyleName(0, 0, "orderMatcherListHeader_1");
flexTable.getCellFormatter().setStyleName(0, 1, "orderMatcherListHeader_1");
mainPanel[0].setStyleName("phoneLandScape_1");
setStyleName("phoneLandScape");
flexTable.setStyleName("flexTable_1");
flexTable.setWidth("24.2em");
flexTable.setCellSpacing(5);
flexTable.setCellPadding(3);
}else {
return;
}
}
};
timer.scheduleRepeating(500);
return this;
}