我正在使用 GWT 来制作 Web 应用程序，但现在我需要在响应式设计中制作我的 Web 应用程序，但 GWT 不支持响应式设计，请帮助我。
问问题
8031 次
4 回答
3
您可以使用 CSS 媒体查询使您的布局具有响应性。
例如，要使对话框占据屏幕尺寸高达 640 像素的设备上 90% 的可用水平空间，可以将样式包装在 @media 块中，如下所示：
@media all and (max-width: 640px) {
.gwt-DialogBox {
width: 90%;
}
}
不幸的是（截至今天）GWT 编译器不支持媒体 CSS，因此如果您将上面的代码与 CssResource 一起使用，它将失败。
解决此问题的方法之一是将 CSS 资源拆分为两个文件。所有默认（桌面）CSS 样式都将转到第一个文件（例如 main.css），而您的所有移动覆盖都将转到第二个文件（例如 mobile.css）。
请注意，您要为移动设备覆盖的样式名称需要在 main.css 中标记为 @external 以避免 gwt 编译器混淆名称。
主.css：
@external .mainNorthPanel;
.mainNorthPanel {
position: fixed;
top: 0px;
}
移动.css：
@media all and (max-width: 640px) {
.mainNorthPanel {
position: absolute;
top: -3em;
}
}
在您的应用程序 ClientBundle 中，将 main.css 与您的 CssResource 接口结合使用，并将移动文件定义为外部资源：
public interface MyBundle extends ClientBundle {
public interface MainStyles extends CssResource {
String mainNorthPanel();
}
@Source("css/main.css")
MainStyles css();
@Source("css/mobile.css")
TextResource mobile();
}
最后在模块初始化的某个地方注入你的外部 CSS 资源：
String mobileCss = myBundle.mobile().getText();
StyleInjector.injectAtEnd(mobileCss)
有关完整的工作示例，请查看最近发布的这篇 JavaWorld 帖子：
它涵盖了一些基本概念，例如基于 css 的响应式视图、对话框和菜单。并且在 github 上有一点概念证明：
于 2014-11-09T21:32:50.720 回答
3
GWT 支持响应式设计，就像任何其他小部件工具包一样（好吧，这并不完全正确，可能有一些小部件工具包做得更好）：使用HTMLPanel、和响应式 CSS 进行布局，或者使用FlowPanel布局面板和在您的代码（或自定义布局面板）中进行计算。SimplePanel
于 2013-06-03T08:04:36.760 回答
1
除了托马斯所说的之外，您还可以查看gwt-bootstrap。他们有一个自定义的DataGrid小部件，可以根据断点（平板电脑、手机等）显示或隐藏。
如果您确实想根据可用大小隐藏和显示列，您可以扩展DataGrid并按照以下方式执行操作：
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();
}
}
}
于 2013-06-03T11:16:37.200 回答
0
/*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.*/
公共类视图扩展垂直面板{
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;
}
于 2018-03-16T11:15:07.950 回答