第 31 章 在线书店系统

• 网上购物已经成为我们生活的一部分，网上购物的过程中，处处存在着用户与应用的交互。利用Flex 技术，可以高效的完成用户的交互，并提供给用户全新的购物感受。本章通过一个简单在线书店系统，全面的介绍如何使用 Flex 2 实现完整的应用。

31.1 系统设计• 这是一个简单的在线书店，其主要功能是实现图书的浏览、

订购、用户的注册、登陆等功能。因为本例属于中小型应用，所以服务器端 Web 容器采用 Tomcat 。服务器端语言选用面向对象的 Java 语言。数据的组织和处理采用 XML 。

• 在线书店系统所完成的功能主要有以下几点：• 用户登陆• 管理员登陆• 图书的分类查看• 特价书分类查看• 图书评论• 购物车

31.2 系统预览

• 在线书店需要的代码文件及功能列于表中

31.2.1 在线书店系统主界面

• 在线书店的主界面如图所示。在该界面中，可以进行用户登陆，还可以查看部分当前的最新书目和特价书目。单击导航条上的不同的链接可以进入相应的功能界面。

31.2.2 目录界面• 在目录界面中，可以根据图书的类别查看该类别下所有的

数目，通过该界面，可以查看到在线书店的所有图书。图书目录显示在界面的左边，定义了 10 个目录。单击相应的目录时，可以在界面的右边看到该目录下的所有图书，如图所示。

31.2.3 特价界面

• 在特价界面中，包含 5 种特价类别。单击界面左边的类别，可以在界面的右边显示该类别所有的特价数目。该界面的操作和显示与目录界面类似，如图所示。

31.2.4 图书的详细信息界面• 无论在目录界面还是在特价界面，显示目录下图书列表时，

由于界面空间有限，只显示图书的封面和价格。所以为了显示图书的详细信息，在每个图书封面的下方都有一个“详细”链接按钮，单击该链接，界面的右边会出现一个区域，显示该图书的详细信息，如图所示。

31.2.5 购物车界面

• 如果选中图书，单击图书详细信息界面下方的“购买”按钮，将该图书添加到购物车内。单击导航栏上的“结账”链接，可以看到已经购买的图书，如图所示。

31.2.6 管理员界面• 在线书店系统中，用户分为 2 种：普通用户和管理员。普通用户

只能购买图书，提交订单。管理员可以查看普通用户的所有信息和当前的订单。针对管理员，特别建立专门的界面行使管理员功能。在管理员界面中，单击“显示所有用户信息”链接，界面右边以列表形式显示用户的所有信息，如图所示。

31.2.7 用户登陆界面

• 用户登陆子界面在主界面（图 31.1 ）的右上角，如图所示。用户在输入用户名和密码时，可以选择记住用户名和密码，下次登录时不需再输入用户名和密码。登陆以后进入欢迎页面，如图所示 .

31.2.8 修改用户信息界面

• 进入用户欢迎界面后，如果需要修改用户信息，单击“修改信息”链接可进入到用户信息修改界面，如图所示。

31.2.9 用户注册界面

• 若用户第一次进入在线书店系统，可以在登陆模块（图）内单击“注册新用户”链接进入用户注册界面，如图所示。

31.3 系统 XML 数据• 为了更清晰的显示数据之间的相关关系，整个系统的数据采用 XML 组织。

根据系统需求定义了如下的 XML 数据文件，放在系统文件的 data 目录下。• 用户信息：存放所有用户的信息，包含用户名、密码等， XML 文件名为 userInfo.xml

• 新书信息：存放新进图书的信息，包含书名、价格等， XML 文件名为 new.xml

• 图书类别信息：存放图书的目录信息，在目录页面的左边以链接的形式显示， XML 文件名为 cata.xml

• 类别图书详细信息：以目录为标签存放每个目录下的详细信息， XML 文件名为 detail.xml

• 特价类别信息：存放折扣目录信息。与目录信息类似， XML 文件名为 specialCata.xml

• 特价图书详细信息：与目录图书详细信息类似， XML 文件名为 special.xml

• 图书评论信息：图书所有的评论都存放在一个 XML 中，文件名为 comments.xml

• 订单信息：记录当前系统中的所有订单，文件名为 orderInfo.xml

31.3.1 用户信息• 用户信息包含：用户名、用户密码、邮箱、电话、地址，记录在userInfo.xml 中。在 userInfo.xml 中，每个用户都拥有单独的 <user> 标签，该用户的信息都记录在 <user> 标签下。如下所示。

• <?xml version="1.0" encoding="UTF-8"?><users>• <user name="admin">• <password value="123456"/>• <email value="123@13.com"/>• <phone value="12345678"/>• <address value=" 北京市海淀区 "/>• </user>• <user name=””>• ……• </user>• </users>

31.3.2 新书信息• 新书信息指在系统主界面中的“推荐新书”中显示的内容，包含：图书的

名称、作者、图片的位置、出版社、出版时间、作者、价格、书店价格，保存在 new.xml 中。在 new.xml 中每本书都拥有单独的 <book> 标签，该书的所有信息都包含在 <book> 标签内。如下所示。

• <?xml version="1.0" encoding="utf-8"?>• <list>• <book>• <name>PowerBuilder 8.0 应用开发技术 </name>• <price>27</price>• <special>15</special>• <press> 人民邮电出版社 </press>• <writer> 李国喜 龚京忠 吴宝中等 </writer>• <date>2002年 1月 </date>• <pic>assets/pb.jpg</pic>• </book>• <book>• ……• </book>• </list>

31.3.3 图书类别信息• 图书类别信息包含目录界面中显示的图书类别，保存在 cata.xml 中。在线

图书系统中，共包含 10 种类别，每种类别都在 <item> 标签中定义。如下所示。

• <?xml version="1.0" encoding="utf-8"?>• <cata>• <item> 编程语言与程序设计 </item>• <item> 软件工程 </item>• <item>计算机控制与仿真 </item>• <item>网络与通信 </item>• <item>计算机辅助设计与工程计算 </item>• <item>图形图像、网页制作 </item>• <item> 硬件与维护 </item>• <item>计算机基础 </item>• <item> 人工智能 </item>• <item>计算机期刊 </item>• </cata>

31.3.4 类别图书详细信息• 类别图书详细信息是指以图书类别为单位，记录该类别下所有图书的详细信息，保存在 detail.xml 中。图书的详细信

息与新书信息中的条目一致。只不过在类别图书详细信息中， <book>标签多了标识类别的父节点 <cata>。如下所示。• <?xml version="1.0" encoding="utf-8"?>• <list>• <cata name=" 编程语言与程序设计 ">• <book>• <name>C++ PRIMER中文版 (第 4版 )</name>• <price>99</price>• <special>75</special>• <press> 人民邮电出版社 </press>• <writer>STANLEY B.LIPPMAN， JOSéE LAJOIE， BARBARA E.MOO</writer>• <date>2006-3-1</date>• <pic>assets/c.jpg</pic>• </book>• </cata>• <cata name=" 软件工程 ">• <book>• <name></name>• <price></price>• <press></press>• <writer></writer>• <date></date>• <pic></pic>• </book>• </cata> • </list>

31.3.5 图书评论信息• 所有图书的评论信息都存放在 comments.xml 内。以单本图书为单位记录该图书所

有的评论。 <book> 标签标识图书，该图书的评论记录在 <comment>中。由于图书评论中包含较多特殊的字符，所以必须使用 CDATA 标签保存图书评论。如下所示。

• <?xml version="1.0" encoding="UTF-8"?>• <comments>• <book name="Java 语言学习手册 (第二版 )"> • <comment user="1"><![CDATA[• 哈哈哈哈• ]]></comment>• <comment user="2"><![CDATA[• 哈哈哈哈 ,!!!!• 还不错啊• ]]></comment>• <comment user="3"><![CDATA[• 哈哈哈哈• ]]></comment>• <comment user="4"><![CDATA[• 哈哈哈哈• ]]></comment>• </comments>

31.3.6 订单信息• 所有用户的订单都记录在 orderInfo.xml 中，订单是以笔为单位

的，包含：提交订单的用户名、电话、地址，订购的图书名、数量。不以用户为单位。所以在订单信息中，可能会出现相同用户名的订单项。 <order> 标签定义该订单的详细信息，订单内的书目保存在 <book> 标签内。如下所示。

• <?xml version="1.0" encoding="UTF-8"?><orders>• <order name="admin" phone="12345678" address=" 北京市海淀区 " all="123">

• <book name="123" amount="1"/>• </order>• <order name="admin1" phone="12345678" address=" 北京市海淀区 " all="123">

• <book name="123" amount="1"/>• </order></orders>

31.4 主应用界面的实现• 主应用界面即应用的根应用 MXML 文件，是整个在线书店

系统的基础，并且负责实现整个在线书店公共的部分。用户带开系统时显示的内容也在主应用界面中设定。

• 在线书店系统由四大模块组成：主页模块、目录模块、特价模块、公共模块。其中公共模块包括：管理员模块、购物车模块和图书详细信息模块。

• 在公共模块中，管理员模块只有在管理员登录时，在主应用界面中动态添加。由于购物车和图书详细在主页模块、目录模块、特价模块中都有可能出现，所以将购物车、图书的详细信息放入主页面文件实现，方便各模块的调用。

31.5 主页模块的实现

• 打开系统时，在主应用界面的堆叠导航容器中，首先显示的即为主页模块定义的界面。在主页模块中可以进行用户的注册的登陆、注册、部分新书、特价书的列表、部分出版社的链接，所以主页模块分为如下几个部分。

• 登陆、注册、修改模块：定义在单独的组件文件文件中，插入到主页中。

• 出版社链接：当即出版社链接可以进行浏览器的跳转，链接使用链接按钮控件

• 新书列表：显示部分新书，使用瓦片列表控件• 部分特价书列表：显示部分特价书，使用瓦片列

表控件

31.6 目录模块的实现

• 在主应用界面中，单击“目录”链接，即可切换到目录界面中。目录页面由目录模块实现。整个模块包含 2 部分：图书类别和图书列表。当单击某个类别时，图书列表中显示该类别下所有书目。单击图书的“详细”链接，还可以查看图书的详细介绍。

• 图书的类别采用 Reapeter组件创建，显示某类别下信息时，采用瓦片列表控件实现。图书的类别信息都保存在目录信息 cata.xml ，定义在 <mx:Model>。当界面初始化时，利用 HTTPService获取类别图书信息。单击某个类比后，在类别图书信息中，查找与该类别相符的 XML标签。

31.7 特价模块的实现

• 特价模块的代码保存在 special.mxml 中。代码的结构与目录模块类似，详细情况可以参照目录模块， special.mxml 的代码如下所示。

• (详细内容请参照本书 )

31.8 购物车模块

• 购物车采用列表记录已购买的图书，在列表中重新定义了条目显示的内容，不仅能够显示图书的名册，还可以显示图书的价格和购买数量，添加图书后自动计算金额和节省的金额。

31.8.1 购物车列表条目• 在购物车模块中，购物车列表显示在一个列表控件中。但是列表控件默认情况下只

能显示单项文字信息，若在在列表中显示多项信息只能使用条目渲染器。在条目渲染器中，定义图书的名称、价格、数量。列表控件的条目渲染器定义在 cartItem.mxml 中，如下所示。

• <?xml version="1.0" encoding="utf-8"?>• <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="190" height="68">

• <mx:Script>• <![CDATA[• public function changAmount():void{• data.amount = bookNumber.value;• }• ]]>• </mx:Script>• <mx:Text x="0" y="0" text="{data.name}" width="185"/>• <mx:Text x="0" y="40" text="{data.special}"/>• <mx:NumericStepper id="bookNumber" x="127" y="36" minimum="1" value="{data.amount}" change="changAmount()"/>

• <mx:Label x="94" y="40" text="数量 "/>• </mx:Canvas>

31.8.2 购物车模块的实现

• 在购物车模块中，不仅可以通过在图书详细信息模块中通过“购买”按钮将图书添加到购物车中，还可以接受拖放进来的图书。但是显示图书列表的是瓦片列表控件，购物车列表为列表控件，在这两种控件中实现拖拽，需要重新定义拖拽的方法。将瓦片列表控件要拖放的条目数据重新组合添加到购物车列表为列表控件中。

• (详细内容请参照本书 )

31.9 用户注册模块的实现

• 如果用户第一次进入系统，可以在主页模块中看到注册新用户的链接。注册模块是作主页模块的一部分，集成在主页模块中，但注册模块单独定义在组件文件中。

• 当单击“注册新用户”链接时，主页模块中的堆叠导航容器跳转到包含注册模块的容器中。定义注册模块时，由于用户需要输入用户名等信息，所以可以使用验证器（ Validator）来验证用户输入是否正确，在本例中，只对用户输入的密码进行验证，查看其是否为 8~12位之间的字符，当然，还可以定义更多的验证器，以及对用户输入进行更严格的显示。

31.10 用户登陆模块的实现

• 用户登陆模块是包含在主页模块中的，图 31.10和图 31.11 为登陆模块的截图，在图 31.10填入用户名和密码后，系统验证通过后进入图 31.11所示的欢迎界面。

• 在构建登陆模块时，将登陆和欢迎界面分别定义在画布容器中，将两个画布容器层叠在一起，利用容器的 visible 属性进行切换，也可利用堆叠导航容器构建，效果是相同的。

31.11 修改用户信息模块

• 在用户登陆后，用户可以点击“修改信息”的链接进入修改信息界面。修改信息界面也是作为主页模块中堆叠导航容器的一个子容器，但是单独定义在组件文件中。整个修改信息分为如下几个部分。

• 修改密码• 修改电子邮件• 修改电话• 修改地址• 每个修改的内容作为导航容器的一个子容器。当选

择不同的修改链接时，进入包含相应修改内容的子容器。

31.12 管理员模块的实现

• 管理员的登陆方式与普通用户的登陆方式相同。但管理员登陆后的视图与普通用户的视图是不同的。管理员不仅可以查看图书列表以及图书的信息，还可以查看所有的用户信息，以及当前的所有的订单，但不可以订购图书。

31.12.1 主应用文件状态的改变• 当系统检测到管理员登陆时，在主应用界面的文件中，为放置主页、目录、

特价模块的导航容器动态添加一个子容器。当管理员退出时删除这个子容器。在处理子容器的添加和删除时，使用了状态转换，在主应用界面中定义如下状态。

• <mx:states>• <mx:State name="adminView">• <mx:AddChild relativeTo="{cata}" >• <local:admin label="管理员界面 " width="100%" height="100%" hideEffect="{myWD}" showEffect="{myWU}"

• visible="false"/>• </mx:AddChild>• <mx:SetProperty target="{shoplink}" name="visib

le" value="false"/>• </mx:State>• </mx:states>

31.12.2 管理员模块的实现

• 管理员模块定义在单独的组件文件中，包含所有用户的信息和所有订单信息，分别定义为堆叠导航容器的子容器内。单击相应的链接即可切换查看的项目。所有的订单和用户信息都保存在 XML中，所以在初始化时，利用 HTTPService获得 XML 。

31.13 图书详细情况模块的实现

• 图书详细情况分别两部分实现：图示信息和图书评论。单击图书列表中每个图书的的“详细”链接，即可在界面的左边看到图书详细信息的窗体，但此时只显示图书的信息，并没有显示图书的评论，可以点击图书信息窗体下部的链接，将图书的评论作为弹出式对话框显示在界面中，所以图樾畔⒑屯际榈钠缆凼欠直鸲ㄒ逶 2 个组件文件中的。

31.13.1 图书信息模块的实现

• 图书信息包含图书的图片、作者、出版社等，定义在标题窗口容器（ TitleWindow Container）中。在该模块中，不仅显示图书信息，还负责在单击“评论”时，发起HTTPSerice获取该图书的所有评论信息，并将其传递给图书评论模块。为了将远程访问集中处理，在图书信息模块中，还负责处理添加评论的处理逻辑，使用 remoteObject调用服务器端的 Java 对象，修改记录评论的 XML 文档。

31.13.2 图书评论模块的实现

• 在图书信息窗体中可以看到，图示评论是在用户单击链接后弹出的。在图书评论窗口中，用户不仅可以查看评论还可以提交自己的评论。提交评论的处理定义在图书详细信息模块的代码中，将图书详细信息所有的事件都集中进行处理。

• 1. 评论列表条目渲染器• 2. 图书评论模块

31.14 服务端 XML 处理的实现

• 服务器端的代码主要负责对 XML 文档的修改和保存，使用 Java编写，实现如下的功能

• 添加用户• 修改用户信息• 添加评论

31.14.1 Java 对象的实现

• 上述三个功能都作为 XMLUtil 类的三个方法： addUser 、 updateUse rJava 、 addComments。XMLUtil 类的代码如下所示。

• (详细内容请参照本书 )

31.14.2 修改配置文件• 调用服务器端的 Java 对象时，需要修改 remoting-config.xml 。

将 XMLUtil 类添加到该文档中。向 remoting-config.xml 添加以下片段。

• <destination id="XMlUtil4Store">• <properties>• <source>com.silence.myFile.XMLUtil</source>• </properties>• </destination>• 截至到这里，在线书店系统的创建工作完毕。可以通过浏览直接访问MXML或者将编译好的 flexStore.swf嵌入到 HTML 中显示。

• 通过本章学习，希望读者初步了解使用 Flex开发应用全过程。在创建的过程中，尽可能的使用更多的组件表现页面元素。使用多种方法实现类似的功能。当然，对于应用实现的具体细节，可以有不同的、甚至更好的实现方法，这里只是给出一个范例，仅供参考。