Question

目前，我的团队有一个JSF / primefaces Web应用程序，该应用程序功能完善，但由于有许多表单输入，因此界面是Web友好的。我们被要求采用一种方法（最好利用当前的JSF / PF实施方案），这种方法既适合网络又适合移动设备。

我尝试使用PFM（primefaces mobile）转换某些页面，但界面变得只适合移动设备，从普通桌面浏览器打开时看起来很奇怪！

我的想法是使用同一网页的两个不同版本（例如index.xhtml＆amp; m_index.xhtml）并使用通用监听器根据＆＃34;操作系统＆＃34指向正确的页面;使用

我寻求帮助的方法是最好的方法还是更好的方法？如果它很酷，你可以提供一些帮助来实现它吗？

提前致谢。

Answer 1

通过使用响应式方法，我能够创建一个最像您的（数据网格和表单）的Web应用程序，它既适用于桌面，也适用于桌面和移动设备（都是web ;-)）。它需要一些CSS调整，但我只能使用共享＆＃39;页面然后在所有设备之间。

想想，例如显示在输入上方而不是旁边的标签。上下文菜单显示在屏幕中间而不是“长按”状态。位置和更多这些调整。

某些组件尚未针对移动设备进行全面优化（selectOneMenu在所有设备上看起来都相同，因此比优化的移动设备稍微重一点，但效果出奇的好）。

如果您真的需要不同的组件，您可以始终使用上面提到的UAGentInfo，但不能渲染不同的页面，而是决定渲染默认组件或更简单的组件。

我正在向PrimeFaces提交基本更改作为拉取请求，因此每个人都可以从中受益，但我甚至想到合并＆＃39;一些普通和移动组件，并在其中有一种自动检测机制。

基本上，你可以拥有一个针对移动设备稍微优化的解决方案，但仍能很好地运行。它只需要一些更高级的CSS使用。

Answer 2

首先，我建议您不要采用这种方法。您应该尝试使用一些响应式库。

但是，如果您严格限制使用两个视图，则可以考虑以下方法：

对于基于设备检测的视图分离，您可以使用UAgentInfo.java之类的服务器端实用程序来识别请求设备。

要实现这一点，您需要将两个视图包装在容器xhtml文件中，比如说indexContainer.xhtml，它应如下所示:(假设您的bean为Index.java）

<f:view xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:ice="http://www.icesoft.com/icefaces/component"
        xmlns:c="http://java.sun.com/jstl/core"
        xmlns:f="http://java.sun.com/jsf/core">

        <c:if test="#{!Index.isMobileDevice}">
            <ui:include src="/index.xhtml" />
        </c:if>

        <c:if test="#{Index.isMobileDevice}">
            <ui:include src="/m_index.xhtml" />
        </c:if>
</f:view>

包含indexContainer.xhtml作为您之前在配置文件中包含index.xhtml的视图。

在x.x.x包的本地实用程序类（Utility.java）中包装移动设备检测器方法，以返回匹配的布尔值，如下所示：

public static boolean isMobileDevice(HttpServletRequest httpServletRequest){
    boolean isMobileDevice = false;

    String userAgent = httpServletRequest.getHeader("User-Agent");
    String httAccept = httpServletRequest.getHeader("Accept");

    UAgentInfo uAgentInfo = new UAgentInfo(userAgent, httAccept);
    isMobileDevice = uAgentInfo.detectAndroid() || uAgentInfo.detectIphone() || 
                     uAgentInfo.isMobilePhone && uAgentInfo.detectWebkit();

    return isMobileDevice;  
}

使用setter＆amp;添加布尔属性get Index.java中的getter，说isMobileDevice并在bean的初始化中使用上面的方法调用填充它，如下所示：

setMobileDevice(Utility.isMobileDevice(httpServletRequest));

现在，填充的isMobileDevice将在容器视图上可用，它将根据其真值过滤视图。

Answer 3

如果你使用像Bootstrap这样的CSS-Framework，你可以拥有一个针对两者优化的html代码。

Bootstrap使用一个控制div流量的网格系统，所以它绝对值得一看。

Java Web应用程序，既要求网络友好，又要求移动设备友好

3 个答案: