GWT响应式设计方案
我正在使用GWT来制作web应用程序，但是现在我需要在响应式设计中制作我的web应用程序，但是GWT不支持响应式设计，请帮助我。
回答 4
Stack Overflow用户
发布于 2013-06-03 16:04:37
GWT支持响应式设计，就像任何其他小部件工具包一样(好吧，这并不完全正确，可能有一些小部件工具包做得更好)：使用HTMLPanel、FlowPanel、SimplePanel和响应式CSS进行布局，或者使用布局面板进行活动布局并在代码中(或在自定义布局面板中)进行计算。
Stack Overflow用户
发布于 2014-11-10 05:32:51
您可以使用CSS媒体查询来响应您的布局。
例如，在屏幕尺寸高达640px的设备上，要使对话框占据90%的可用水平空间，可以将样式包装在@media块中，如下所示：
@media all and (max-width: 640px) {
.gwt-DialogBox {
width: 90%;
}
}不幸的是(到目前为止) GWT编译器不支持media CSS，因此如果您将其与CssResource结合使用，上面的代码将会失败。
解决此问题的方法之一是将CSS资源拆分为两个文件。所有默认的(桌面) CSS样式将转到第一个文件(例如main.css)，而您所有的移动覆盖将转到第二个文件(例如mobile.css)。
请注意，您希望覆盖移动端的样式名称需要在main.css中标记为@external，以避免gwt编译器混淆名称。
main.css：
@external .mainNorthPanel;
.mainNorthPanel {
position: fixed;
top: 0px;
}mobile.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帖子：
http://www.javaworld.com/article/2842875/java-web-development/responsive-web-design-with-google-web-toolkit.html
它涵盖了一些基本概念，如基于css的响应式视图、对话框和菜单。在github上有一些概念的证明：
Stack Overflow用户
发布于 2013-06-03 19:16:37
除了托马斯所说的之外，你还可以研究一下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();
}
}
}https://stackoverflow.com/questions/16892304
复制相似问题
腾讯云开发者
