Question

我有基于GWTP的gwt应用程序。应用程序支持两个版本（平板电脑和桌面）并使用不同的小部件库（sencha gxt和sencha touch）。这些库在主机页面中需要不同的css文件。更多的css彼此冲突。如何在主页中加载不同的css文件？

我已经阅读了gwt mobilewebapp sample，但他们使用单个html页面和不同的组件实现。

Answer 1

您可以查看Useragent并确定要传送的CSS文件。

我建议使用ClientBundles。这只提供了css样式所需，并加快了你的页面。

在您的Entrypoint中，您只需确定要传递的css文件：

if(useragent == "desktop") {
   YourStyle.getTheme().getMGWTClientBundle().getDesktopCss().ensureInjected();
} else {
   YourStyle.getTheme().getMGWTClientBundle().getAppCss().ensureInjected();
}

或者您可以制作switch inside your css files。但无论如何你必须使用ClientBundles。

你可以有这样的东西：

@external gwt-button;
@if user.agent safari {
    .gwt-Button {
        ...
    }
}

@external gwt-button是为了避免混淆错误。你也可以使用@external *;

Answer 2

您也可以在服务器端执行此操作，方法是使用JSP文件作为css源。然后，在JSP文件中，根据请求的用户代理或其他来决定要发送哪组属性。

另一个选择是将主页编写为JSP文件，它可以根据请求包含正确的CSS文件。
这是一个非常简单的方法，但您必须在web.xml中启用JSP处理器。它还要求您部署的系统上有一个java编译器，如果您只在Web服务器上安装JRE，则情况并非如此。

Answer 3

您必须创建两个加载css文件的类：

你可以做一些与gwt.xml文件中的输入有关的事情

<replace-with
    class="com.test.classMobile">
    <when-type-is
        class="com.Test.classBrowser" />
    <when-property-is name="tablet.user.agent" value="ipad" />
</replace-with>

试试这个......我不确定100％

GWT：在主页中加载不同的css

3 个答案: