相关内容

返回首页

RichFaces 与移动Web在2011年JBoss世界大会的主题演讲

发布者：    |       CDI 活动 JBoss Tools JSF Rich Faces Seam

JBoss世界大会的开幕式主题演讲中，有一个是我见过的最好的主题演讲演示之一！！演示的一部分包括一个为移动Web定制的RichFaces应用程序，名为TweetStream。我们将讨论这个应用程序，为什么它非常适合移动Web开发，以及如何在您的机器上运行它。

整个JBoss世界大会演示包括许多JBoss项目；例如 JBoss AS、Infinispan、Hibernate OGM、CDI 和 Errai。可以通过左侧的图片查看主题演讲和演示的视频。演示从大约35:15分钟开始。而且 是的 那确实是我的真实iPad/iPhone密码 :-)

最新的 JBoss Assylum 也展示了许多开发者提供的幕后视角和幽默。每个项目都将提供其部分的博客和代码。您可以在 JBoss World Keynote 2011 的着陆页上获取最新信息，并跟随 #jbwkeynote2011 推特标签！

RichFaces TweetStream 应用程序

我和Wesley Hales正在寻找一个应用来展示我们的JUDCon会议演示：[点击查看](http://www.jroller.com/wesleyhales/)。我们的想法简单易懂，允许观众参与，且UI复杂性适中。就在这时，JBoss Keynote会议正在计划中，TweetStream正好派上用场！

TweetStream使用twitter4j搜索和过滤包含一组标签的推文流，并将它们展示给用户。它还会跟踪并计算前10名推文发布者和前10个热门标签。然后使用RichFaces Push在各个设备上更新UI的最新内容。

在这之前，我和Wesley构建了一套RichFaces 4视图，为不同的移动设备提供高级支持。我们针对在iPhone、iPad、BlackBerry和Android设备上运行的webkit浏览器。每个视图都通过单个URL提供服务，带有设备检测以实现一键收藏。我们使用高级HTML5/CSS3技术实现了近似原生行为，包括处理方向布局变化、过渡等。

如果您迫不及待想在您的机器上查看演示，我们有一个在RedHat的OpenShift上托管的版本，请点击此链接http://bit.ly/tweetstream2。填补空缺演示也被录制，其中Wesley和我讨论了一些应用程序的细节。

源代码、OAuth和IDE集成

我们不是一开始就解释所有各个部分，而是直接开始获取源代码、构建它、将其部署到JBoss AS以及将其集成到JBoss Tools中。我们将在下面的内部讨论中或后续博客中讨论一些细节。

注意：我假设您有git、Maven、Java 1.6、JBoss AS 6 Final和JBoss Tools 3.2用于IDE集成

TweetStream源代码是RichFaces组织在github.com的一部分。您可以使用git通过以下命令克隆repo：git clone [email protected]:richfaces/tweetstream.git。我们将在它运行后讨论其结构。

Twitter4j & OAuth

虽然我们希望让您使用我们的Twitter账户凭据，但这并不好。这意味着您需要按照twitter4j设置中的说明进行README中的步骤来获取。

Twitter在其OAuth页面上有一个良好的逐步过程。完成这些步骤后，您将能够更新twitter4j.properties文件，并使用以下值：

oauth.consumerKey=**************************
oauth.consumerSecret=**************************
oauth.accessToken=**************************
oauth.accessTokenSecret=**************************

完成以上步骤后，剩下的就是部署应用程序了！

JBoss AS 6

在基础/tweetstream目录下运行mvn package来构建应用程序的独立版本。现在您应该有这个文件：/tweetstream/target/tweetstream.war。将此文件复制到$JBOSS_HOME/server/default/deploy目录。

到这一步，您现在可以启动服务器了，但我建议您使用以下命令：$JBOSS_HOME/bin/run.sh -b 0.0.0.0如果您想从外部客户端（如您的手机）访问服务器，可以试试哦 ;-)

应用程序启动后，您可以在http://localhost:8080/tweetstream中看到它。如果您想尝试智能手机或平板电脑，可能需要修改防火墙以允许8080端口通过。然后，使用您的平板电脑或手机在http://your.ip:8080/tweetstream中访问。

导入到JBoss Tools

由于在底层使用m2eclipse，将此项目导入到JBoss Tools 3.2非常简单。您只需选择文件-->导入-->现有Maven项目，并将其指向您克隆源代码的位置。Eclipse将运行正常的项目导入过程，几分钟内即可准备好新项目。

注意事项

  • 正常添加JBoss AS 6服务器，然后可以配置TweetStream进行部署
  • 您可能在/jbw项目中看到构建问题——我稍后会解释

结构和关键文件

现在您已经运行了应用程序，并且希望将其导入到JBoss Tools中，让我们谈谈结构和一些需要关注的关键区域。

如上所述，此应用程序最初只是为Wesley和我参加JUDCon会议而设计的。当它成为JBoss World主题演讲演示的一部分时，我们需要支持两个不同的后端。我们通过使用CDI和Maven的强大功能创建了两个配置文件。一个是标准的JUDCon配置文件，另一个是主题演讲版本。以下是关于各种模块的简要说明

/tweetstream  #Core application and views
/shared       #Classes files needed across the other two modules
/jbw          #Keynote specific source files to hook into the different backend

在Eclipse中，您在/jbw目录中遇到的构建错误是因为缺少与主题演讲演示相关的依赖项。在不久的将来，我们将发布整个主题演讲演示，但到目前为止，Tweetstream足够模块化，可以独立运行。

我们能够轻松地更改后端，这不仅是对JBoss的证明，也是对整个Java EE的证明。组件搭配得很好，通过CDI和JSF，我们能够以非常少的努力替换掉一个完全不同的后端。

正如我所说，我们将继续跟进此博客，深入探讨各种细节，但到目前为止，以下是一些需要关注的事项

设备检测

我们使用了一个名为mobileESP的出色小项目来帮助我们进行设备检测。这是一个基本的用户代理嗅探器，我们将其包装在CDI bean中，在名为UserAgentProcess.java的类中执行我们的任务。这可以替换为任何其他设备检测库，如WURLF API。

我们利用JSF 2.0和facelets模板为每个视图提供一个访问点，充当不同设备的分发器。这提供了一个单一的收藏夹和URL，无论您从哪个设备访问它。您可以在home.xhtml中查看。

方向检测和更新

使用CSS 3@media选择器使得这变得轻而易举。我们在平板电脑视图中非常有效地使用了这一点，始终将顶级推文和顶级标签保持在最佳位置。

智能手机过渡

在智能手机上处理页面过渡也比你想象的要简单。您可以在phoneHome.xhtml文件中查看详细信息。

其他事项

可以改进的地方

TweetStream 是快速开发并有一个单一目标的。有许多改进的机会，未来的 RichFaces 组件以及更多。我希望鼓励任何感兴趣的人更详细地查看。以下是一些可能的改进想法

  • 简化设备检测
  • 可定制的搜索过滤器
  • 布局组件以支持过渡
  • RichFaces 移动皮肤
  • 合并和压缩 CSS
  • 性能分析和更新
  • 对推文和标签进行深入分析
  • 完善桌面版本

还有更多可能性，分叉它，玩耍，看看你能想出什么！我们将将这些标准化并集成到 RichFaces 和 JBoss 的其他部分，所以请耐心等待！！

接下来该做什么

韦斯利和我将发布更多博客，并深入探讨上述提到的某些特性。所有这些都应为您使用 RichFaces 4 和 JBoss 开发自己的移动 Web 应用程序提供一个良好的起点！此外，如我上述提到的，将有更多与 JBoss World Keynote 演示相关的博客，将详细介绍 Infinispan、Hibernate OGM、插件计算机等！！

[JBW 主题演讲页面] [JBW 主题演讲 Twitter] [JBW Asylum] [TweetStream 在线] [TweetStream Git 仓库] [RichFaces Twitter]

返回顶部