博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

配置Rich Media Web 开发环境

Posted on 2004-09-09 19:48  dalongzero  阅读(1310)  评论(0)    收藏  举报

什么是Rich Media Web?

    Rich Media，富媒体也，Rich Media Web当然就是富媒体网站。顾名思义，富媒体即所谓丰富媒体之义。那么为什么不叫多媒体呢？富媒体和多媒体有什么不同呢？

    问得好，我刚接触Rich Media也是一头雾水，不知Rich为何物。让我们回想多媒体是什么，当年多媒体概念的提出正是对应单媒体，那个年代计算机能够处理的媒体只有一种：文本。回想一下DOS时代的应用程序，除了文本还是文本，哪有什么多媒体可言。等到图形界面操作系统的出现和声卡的普及，才有了图像、声音以及视频等等媒体资源可以利用，这些不同于文本的媒体统称多媒体。于是多媒体应用顺应而生，它指的是运用多种媒体来表现内容的应用程序。

    从定义上看，多媒体把所有其它的媒体都包括进去了，那Rich Media又增加了那些内容呢？Rich Media是建立在多媒体基础上的一个新型媒体（虽然它出现好几年了），Rich Media为多媒体增加了媒体交互内容。多媒体的应用一般是没什么媒体交互的概念的，播一段音乐或者视频，都是由应用程序预先制作好，在播放的过程中也不能由用户控制（注意是控制内容，不是控制播放），这和传统的看电影在本质上没有多大区别。说到电影，前段日子我看新闻说美国现在出现了一种新型的电影，观众能够控制电影的情节，比如男主角向女主角求婚，他跪在地上把花献给女主角，这时候女主角一脸的笑容，突然转过头冲着观众说：“你们说我要不要答应他呢？”这时候你就可以插上一脚：“不，不要答应他”，或者“好吧，那就答应他吧”。由于你插了这一脚，接下来的情节发展就会发生改变，结局也就不同……哦，这不正是富媒体所提出的媒体交互的概念吗？

    呵呵，接下来我就不用费精神多说Rich Media Web的概念了，相信大家稍微引申一下就能够明白，毕竟解释概念这不是今天的主题。

目前Rich Media Web

    其实大家早就接触过Rich Media Web了，一些整站都用Flash来构造的网站就是。目前Rich Media Web事实上标准就是Flash，当然不是所有用Flash创建内容的站都称得上Rich Media Web，也不是所有的Rich Media Web都是用Flash构造的，不过Flash在这方面居于领先地位，Macromedia公司也是Rich Media Web工具提供的领先厂商。不过在2006年微软将推出的Windows Longhorn内置了Avalon和Aero，将会让Windows应用程序开发全面Rich Media化，那时候局面如何就很难说。（其实微软曾经推出过和Flash类似的Web互动媒体产品，叫做DirectMedia，不过基本没有市场）

    Rich Media Web不能用现在的Web来理解，因为整个概念都不一样了，无论是从系统设计和用户体验都不同。Rich Media Web最重要的一个改变就是抛弃了HTML而采用了XML，WEB终于进入了所谓后HTML时代。

搭建Rich Media Web开发环境

    首先说明，我搭建的这个环境只在一个时期内有效，因为这个环境最重要也是最复杂的部分，将会随着明年ColdFusion BlackStone的发布而解决，到时候可以换用ColdFusion BlackStone。由于ColdFusion BlackStone的改变非常大，所以现在写的代码也许到时候用不上，所以现在利用这个环境来熟悉概念比较合适，要是用于商业开发也许以后会碰上麻烦。

    先准备一下工具，这里给出一个列表，大家自己想办法去搞到这些东东吧

工具 版本 作用 说明
Sun Java SDK 1.4.2 Java Core 必须，IBM的JDK不能用
Macromedia JRun 4,SP3 Application Server 也可以换其它的Application Server
Macromedia ColdFusion 6.1,SP1 CFML Support 必须，主要用来写WebService
Macromedia Flex 1.0,SP2 MXML Support 必须，重要
Macromedia Flex Builder 1.0 MXML IDE 建议，否则要手工编辑MXML代码
Macromedia Dreamweaver MX2004 CFML IDE 可选，Flex Builder含DW所有功能
Macromedia Flash Pro MX2004 Flash IDE 可选，创作高级组件。必须要Pro版本
Borland JBuilder X 10 Java IDE 可选，我习惯用JBuilder
Borland Together For JBuilder 7 UML IDE 可选，7非常好用
Borland JDataStore 6 Database Server JBX里自带，但单独发行版本更好些
Altova XMLSpy 2004 XML IDE 可选，我习惯用它来写XML
Scioworks Camino Pro 3.1.1 Struts IDE 可选，如果需要Struts支持
Kodo JDO 3.1.5 JDO Support 可选，如果需要JDO支持

    安装请按列表的次序进行（不然会碰到麻烦），每个产品安装完以后必须立即打补丁，然后接着装下一个产品。Macromedia所有的产品都可以在它的网站上下载试用版，其它的请Google。

    ColdFusion 安装要选择ColdFusion For J2EE选项，生成EAR文件而不是WAR，Content Root使用“/”，其他按默认即可。一定要安装ColdFusion 6.1 SP1升级包，不然会碰到非常麻烦的问题——WebService不能正常工作。

    安装完这些东西大约需要半天的时间，这个时候可以抽空看看ColdFusion和Flex的资料（在安装完Flex Builder以后就有了）。

配置开发环境

    在安装完上面一大堆东西以后，我们有了一个中量级Web Application Server开发环境，它没有J2EE那么庞大和复杂，也没有Tomcat那么单薄，这是一个能够支持企业级应用开发和部署的环境，下面是所支持的特性一览：

特性 支持提供
JSP/Servlet Macromedia JRun
CFML Macromedia ColdFusion (JSP的替代解决方案)
邮件 Macromedia ColdFusion (SMTP/POP3全功能支持)
FTP Macromedia ColdFusion，全功能FTP客户端支持
图形/报表 Macromedia ColdFusion，支持PGN/Flash/JPEG格式
轻量级目录访问协议 Macromedia ColdFusion，全功能LDAP客户端支持
全文检索引擎 Macromedia ColdFusion，但要支持东亚语言检索需要安装附加包
Corba/COM/DCOM Macromedia ColdFusion，COM/DCOM仅支持Windows平台
WebService Macromedia ColdFusion
富媒体引擎 Macromedia Flex / Macromedia Flash MX 2004
流媒体引擎 Macromedia Flash Communication Server，Flex内置
关系数据库 Borland JDataStore，纯Java实现的RDBMS，支持TX
数据持久化 Kodo JDO，性能强，支持JBuilder，支持包括JDataStore在内的大部分RDBMS
Java/J2EE开发环境 Borland JBuilder X
UML/MDA开发环境 Borland Together 7
可视化Struts开发 Scioworks Camino Pro
可视化HTML/JSP/CFML开发 Macromedia Dreamweaver / Macromedia Flex Builder
可视化MXML开发 Macromedia Flex Builder
可视化Flash开发 Macromedia Flash MX 2004

    如果大家都正确安装了上面的软件以后，可以对这个环境进行配置了。如果在安装过程中出现了问题，那么你有三个选择，Abort, Retry or Ignore....

    接下来的工作非常考验耐心，我昨天完成所有的配置工作大约花了两个小时，配置时间和成功率要看大家对各个产品了解程度了。因为我已经配置成功，而且在写这篇文章的时候也不想重新配置一遍，所以没有配置过程中的图，所以这里只是讲解要点。另外，我的操作系统环境是XPSP2，如果操作系统跟我的不一样，也不能保证照我这样一定能配置成功。好了，开始上路。

Java和JRun的配置

   有关Java的配置互联网上到处都是，所以请参考其他人写的详细资料，一般来说主要配置环境变量，没有什么困难的。JRun也很容易配置，正确的安装即已经配置完成，我们要做的工作是新增一个JRun Server，命名为richweb。

   打开JRun Launcher，启动admin。然后打开浏览器，访问http://localhost:8000，输入正确的用户名和密码后进入管理界面。在JRun的管理页面中选择Create New Server，根据提示一步一步做。我做的唯一更改是把Web Server Port Number改成了8300。

   创建完richweb以后不要立即启动它，先转到richweb的根目录（你不要告诉我你找不到），删掉default-ear目录，因为用不着它。至此配置完成。

合并ColdFusion和Flex

   熟悉web.xml配置吗？如果熟悉这段就不用看了，不熟悉也不用看了，看了也不会，这段文字只对半生不熟的人有用。

   新建一个目录，把ColdFusion安装目录里面的cfusion.ear解开，拷贝cfusion.war文件到这个目录，拷贝flex安装目录的flex.war拷贝过来，把这两个文件分别解到cufsion和flex子目录中。

   现在开始合并这两个web module，随便以哪个为主都可以，建议是flex为主，因为flex所带的web.xml版本比较新。如果以flex为主，把cfusion\WEB-INF下面除jrun-web.xml/web.xml以外的内容拷贝到flex\WEB-INF目录下，用XMLSpy打开cufsion\WEB-INF\web.xml和flex\WEB-INF\web.xml，小心地将这两个文件的内容合并到flex\WEB-INF\web.xml中去。合并完成以后，可以增加新的wellcome file，加入index.htm、index.jsp、index.cfm和index.mxml。

   如果合并没有错误则这部分的工作已经完成了，可以放到JRun里面测一下。先创建测试文件index.jsp、index.cfm和index.mxml

index.jsp

<%@ page contentType="text/html; charset=GBK" %><%@ taglib uri="FlexTagLib" prefix="mm" %><%@ taglib uri="FlexTagLib" prefix="mm" %>

<%@ taglib uri="FlexTagLib" prefix="mm" %>
<html>
<head>
<title>
index
</title>
</head>
<body bgcolor="#ffffff" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
<mm:mxml>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle="Index" usePreloader="false" width="100%" height="100%">
  <mx:Script>
<![CDATA[
function changeEvt(event) {
  if (null != event.menuItem.attributes.href){
    getURL(event.menuItem.attributes.href);
  }
}
]]>
  </mx:Script>
  <mx:Panel title="Think Space Rich Web Application Framework - JSP Tester" widthFlex="1" heightFlex="1" creationCompleteEffect="Fade">
    <mx:MenuBar id="menu" widthFlex="1" change="changeEvt(event);">
      <mx:dataProvider>
        <mx:XML>
          <menuitem label="Test Other">
            <menuitem label="Test JSP Engie" href="index.jsp"></menuitem>
            <menuitem label="Test ColdFusion Engie" href="index.cfm"></menuitem>
            <menuitem label="Test Flex Engie" href="index.mxml"></menuitem>
          </menuitem>
        </mx:XML>
      </mx:dataProvider>
    </mx:MenuBar>
    <mx:VBox widthFlex="1" heightFlex="1" verticalAlign="middle" horizontalAlign="center">
      <mx:Label styleName="information" fontSize="24" text="Java Server Page Engie Success."/>
    </mx:VBox>
    <mx:ControlBar><mx:Label styleName="information" text="Think Space Rich Web Application Framework"/></mx:ControlBar>
  </mx:Panel>
</mx:Application>
</mm:mxml>
</body>
</html>

<%@ page contentType="text/html; charset=GBK" %>

<%@ page import="com.borland.internetbeans.*,com.borland.dx.dataset.*,com.borland.dx.sql.dataset.*" %>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>

<%@ taglib uri="/WEB-INF/struts-template.tld" prefix="template" %>

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<%@ taglib uri="/internetbeans.tld" prefix="ix" %>

<%@ taglib uri="FlexTagLib" prefix="mm" %>

<%@ page contentType="text/html; charset=GBK" %>index.cfm

<cfcontent type="text/html;charset=gb2312">

<cfimport taglib="/WEB-INF/lib/flex-bootstrap.jar" prefix="mm">

<html>

<head>

<title>

index

</title>

</head>

<body bgcolor="#ffffff" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">

<mm:mxml>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle="Index" usePreloader="false" width="100%" height="100%">
  <mx:Script>
<![CDATA[
function changeEvt(event) {
  if (null != event.menuItem.attributes.href){
    getURL(event.menuItem.attributes.href);
  }
}
]]>
  </mx:Script>
  <mx:Panel title="Think Space Rich Web Application Framework - ColdFusion Tester" widthFlex="1" heightFlex="1" creationCompleteEffect="Fade">
    <mx:MenuBar id="menu" widthFlex="1" change="changeEvt(event);">
      <mx:dataProvider>
        <mx:XML>
          <menuitem label="Test Other">
            <menuitem label="Test JSP Engie" href="index.jsp"></menuitem>
            <menuitem label="Test ColdFusion Engie" href="index.cfm"></menuitem>
            <menuitem label="Test Flex Engie" href="index.mxml"></menuitem>
          </menuitem>
        </mx:XML>
      </mx:dataProvider>
    </mx:MenuBar>
    <mx:VBox widthFlex="1" heightFlex="1" verticalAlign="middle" horizontalAlign="center">
      <mx:Label styleName="information" fontSize="24" text="ColdFusion Engie Success."/>
    </mx:VBox>
    <mx:ControlBar><mx:Label styleName="information" text="Think Space Rich Web Application Framework"/></mx:ControlBar>
  </mx:Panel>
</mx:Application>
</mm:mxml>
</body>

</html>

index.mxml

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle="Index" usePreloader="false" width="100%" height="100%">
  <mx:Script>
<![CDATA[
function changeEvt(event) {
  if (null != event.menuItem.attributes.href){
    getURL(event.menuItem.attributes.href);
  }
}
]]>
  </mx:Script>
  <mx:Panel title="Think Space Rich Web Application Framework - Flex Tester" widthFlex="1" heightFlex="1" creationCompleteEffect="Fade">
    <mx:MenuBar id="menu" widthFlex="1" change="changeEvt(event);">
      <mx:dataProvider>
        <mx:XML>
          <menuitem label="Test Other">
            <menuitem label="Test JSP Engie" href="index.jsp"></menuitem>
            <menuitem label="Test ColdFusion Engie" href="index.cfm"></menuitem>
            <menuitem label="Test Flex Engie" href="index.mxml"></menuitem>
          </menuitem>
        </mx:XML>
      </mx:dataProvider>
    </mx:MenuBar>
    <mx:VBox widthFlex="1" heightFlex="1" verticalAlign="middle" horizontalAlign="center">
      <mx:Label styleName="information" fontSize="24" text="Flex Engie Success."/>
    </mx:VBox>
    <mx:ControlBar><mx:Label styleName="information" text="Think Space Rich Web Application Framework"/></mx:ControlBar>
  </mx:Panel>
</mx:Application>
测试运行

    把新创建的Web Module部署到richweb下，启动richweb，看看效果吧

    如果能看到这样的效果，证明这部分的配置已经成功了，接下来要向这个WebModule里面加入各种外围支持，什么Struts、JDO什么的。

下一步的工作

    下一步的工作嘛...明天再讲...