web系统与技术.ppt

1、Web 系统与技术,第五章 FLEX网上商店应用范例,5.1 新建项目 项目名：FlexGrocer 主文件名：DataEntry.mxml 右击src新建一个MXML Aplication，取名叫DashBoard，layout设置为水平，表明里面的控件和容器等均为水平排列。 再新建一个MXML Aplication，取名叫EComm，layout设置为绝对定位方式。 5.2 界面布置 选择Ecomm文件，切换到设计模式，添加一个ApplicationControlBar，该控件通常被用来格式化页面布局的顶端，如顶部主菜单栏、顶部按钮等。将其Dock属性设置成true。将其高度属性设置成90

2、。 在ApplicationControlBar里添加canvas容器组件，将其高度和宽度设置成100%。 添加Label控件到canvas上，设置其x，y坐标为0，text属性改为Flex。,再添加Label标签到上一个label标签的下方，text属性改为Grocer，x为0，y为41。 添加button控件到canvas上，id设置为btnViewCart，label属性设置为View Cart。 再添加一个button控件，id为btnCheckout，label为Checkout。 在页面的右下角添加一个label，其label属性设置为(c)2010,Flex Grocer。 在

3、ApplicationControlBar下方添加一个HBOX容器，宽度和高度均设置为100%。 再添加一个VBOX容器，宽度和高度也都设置成100%，并在outline视图里面确定VBOX是在HBOX里面，VBOX的id设置成products。 放置一个label到VBOX的左上角，id设置成prodName，text设置成milk。 再拖入一个label，id设置成price，text为$1.99。 拖入一个button，id为add，label为Add To Cart。,测试上面的界面，发现按钮位置在全屏后不在最右。可进行如下修改： checkout按钮设置其约束为靠右，x方向偏移量设置

4、为10。 ViewCart按钮同上设置，偏移量为90。 上述改变在源码中体现为right属性值，此偏移量为控件相对其父容器的偏移量。 添加一个VBOX在上面VBOX的右边。(由于第一个VBOX宽度为100%，故直接拖拽不方便，故需选中父容器HBOX，点击窗体上方的show surrounding container显示容器环绕按钮，显示出容器之间的层次关系，再添加VBOX容器) 将新添加的VBOX的宽度属性删除，id属性为cartBox。再添加label标签再其上，label属性为Your Cart Total:$。 Label下面添加一个LinkButton，label属性为View Car

5、t。,使用视图状态： 在右上角的视图状态窗口中，新建一个状态项，取名为cartView。 选中此状态，将名为products的VBOX的宽度和高度设置为0，将cartBox的宽度和高度设置为100%。 切换到源码模式，看看增添了什么代码，试试解释一下添加的代码的含义。 在linkButton的click事件栏里添加代码： this.currentState=cartView 在cartView视图下，在上面的linkButton下面再添加一个linkButton，label设置为Continue Shopping，其click事件处理代码为： this.currentState= 在两个lin

6、kButton中间添加一个DataGrid控件，宽度设置为100%。 查看源码，看看增加了什么代码。 测试。,5.3 使用源码模式设置界面 切换到Dashboard文件，添加ApplicationControlBar，Dock属性为true。 在ApplicationControlBar中添加4个linkButton作为其子元素，label分别为All，Sales，Categories和Comparison。 在ApplicationControlBar后面添加Panel容器，id设为sales，title为Sales Chart，宽度和高度均为100%。 在panel容器中添加control

7、Bar控件。 在panel容器下面增加一个VBOX，id为rightCharts，高度宽度均为100%。在Vbox里面增加一个panel，id为type，高宽度同上，title为Category Chart。panel里面为controlBar。 panel下面再增加一个panel控件，id为comp，title,为Comparison Chart，其他属性包括controlBar均同上。 切换到设计模式，有点乱，问题在于应用程序的layout布局为absolute，应该设为水平模式。 在ApplicationControlBar后面添加states标签，设置不同的视图状态。包括name为fu

8、llSales，fullType和fullComp的三个状态，其中，前者设置target为rightCharts的高宽属性为0， ，中者设置sales和comp的高宽属性为0，后者设置sales和type。 给4个linkButton添加click事件，设置各自的视图状态的切换。 测试程序的运行效果。,回到Ecomm.MXML文件的设计模式，在src文件夹下面添加新的文件夹assets，加入牛奶的图片，在milk标签和价格标签中间添加image控件，设置其source属性为牛奶图片，Scale content属性设置为true。切换回代码模式，将图片的来源用Embed()包裹起来，并添加mou

9、seOver和mouseOut事件处理，其中前者改变当前视图状态为expanded，后者回归默认状态。 回到设计模式，手动增加一个视图状态expanded。 回到代码模式，在expanded状态标签中添加addChild标签，标签中添加一个VBOX，其x为200，宽度为100%。 回到设计模式，添加text控件在VBOX中，添加2个label控件在text下面，label属性设置为Certified Organic和Low Fat。回到代码模式，将text控件的宽度设置为50%。 测试，将鼠标放到牛奶图片上，看看效果。,5.4 使用数据绑定将数据结构链接到控件 在Application标签下添

10、加Model标签，id为groceryInventory。选中标签，使用TAB键将其与下面的标签对齐。 在Model标签中添加XML结构的数据： Dairy Milk assets/dairy_milk.jpg 1.20 1.99 true true Direct from california where cows are happiest! ,切换回设计视图，选中之前未设置text属性的text控件，设置text属性为groceryInventory.description 测试 5.5 用form布局容器布置简单控件 打开DataEntry文件，新建Model标签，分配id为prodMo

11、del，粘贴上面的xml数据在Model标签中。 在Model下添加Form标签，标签中添加FormHeading标签，label为prodModel.catName，标签无内容结束。 继续在Form中添加FormItem标签，label为Product Name，加入TextInput控件，id为product，text为xml数据中的prodName。,继续添加FormItem，label为ProductNameUnit，direction为水平。该标签内含空ComboBox和TextInput。 继续添加FormItem，label为Cost。该标签内含空TextInput，id为cos

12、t，text为xml中cost数据内容。 再添加2组FormItem，对应xml中的ListPrice和description。 最后添加3组FormItem，label分别为Organic和Is Low Fat，内含无内容结束的CheckBox标签，id为相似名字，selected为xml中对应数据。另一组FormItem的label为Image Path，内含TextInput控件，id为imageName，text为xml中相应数据。button控件，label为Browse。,在Model之后添加Script标签，导入flash包中net子包中的FileReferenceList类，定

13、义一个公有无返回值函数fileBrowse()，函数中声明myFileRef对象，类型为FileReferenceList，初始化它。 利用myFileRef对象调用其无参数browse方法。 为刚才创建的Browse按钮添加click事件，调用上面的fileBrowse()函数。 再添加FormItem标签，内含Hbox标签，Hbox中有两个按钮，label分别为update和delete。 测试。,5.6 添加单选按钮和数据字段 在Dashboard文件中，在ApplicationControlBar标签的末尾添加一个spacer占位符，宽度为100%。添加label，text为Start

14、 Date，添加DateField控件，id为startDate。再添加一套名为结束日期的label和DateField。 添加RadioButtonGroup，id为grossOrNetGroup。再添加两个RadioButton，id分别为gross和net，groupName为上面group的名字，label分别为Gross Sales和Net Sales，前者的selected属性设为true。 5.7 处理事件和数据结构,目标：当creationComplete事件发生时，建立数据结构。 添加inventory.xml文件到assets文件夹中，作为外部xml数据来源。 打开Ecom

15、m.MXML文件，删除之前创建的Model标签中的内容，给Model标签添加source属性，内容为assets/inventory.xml。在Application标签中添加creationComplete事件，处理函数为prodHandler(groceryInventory)。 在Model标签下添加Script标记，定义私有函数prodHandler的内容。参数为theItem,类型为Object，无返回值。函数体为trace(theIdName)及其cost属性。 测试。 注意，这里的测试由于有trace函数，必须在debug模式下才能看到结果。debug模式使用的前提

16、是安装flash player的debug版本，可在官方网站上下载。 5.8 建立自定义的ActionScript类,在src目录中新建一个ActionScript Class文件，包名取为valueObjects，类名为Product。添加Bindable元数据标记在类名前，以将此类和调用它的MXML文件中的标记进行绑定。在类中，定义9个公有属性，分别为catID，prodName，unitID，cost，listPrice，description，isOrganic，isLowFat，imageName。在该类的构造函数中，以构造函数的参数对这9个属性进行赋初值操作，其中构造函数的参数为了

17、和9个属性进行区别，可以添加下划线在参数名前。 添加一个公有的返回值为String的无参数toString()函数，函数体为返回Product+dName; 回到Ecomm.MXML，在脚本中导入上面新建的类。 绑定一个私有的Product类型的对象theProduct。,修改prodHandler函数体为，theProduct对象的new操作符初始化，初始化过程中使用到prodHandler函数的参数theItem，然后trace刚才的theProduct对象。 测试。 为了方便theProduct的初始化，在Product类定义中可添加一个静态函数buildProduct，

18、参数为Object类型对象，返回值为Product类型对象，在函数体中定义一个Product类型的对象P，将刚才初始化的过程语句写在此函数中，返回P即可。 注意，为了使此函数具有普适性，最好将o.isOrganic和o.isLowFat这种布尔类型的变量用Boolean()函数转换一下数据类型，以免出现不可预料的错误。(因为这里使用Object类型的对象作为参数，Object类型的对象虽然可以保存数据，但是其中的数据会失去类型信息),将刚才DataEntry文件中的theProduct对象的初始化方法改为使用Product类中静态函数调用的方法实现。 找到expanded状态标签，将其中两个l

19、abel的visible属性改为与theProduct对象的相关属性绑定的模式。 测试。 在src下再新建一个购物车项目类，包名同上，类名为ShoppingCartItem，因为购物车里面每一项都是一个产品，所以此类里面需要创建一个公有属性product，它是Product类的对象。此外，还需要定义uint类型的变量quantity和Number型变量subTotal(金额)。 该类的构造函数参数有2个，分别是产品对象和数量，参数名可以和属性名相同，但在赋值的时候，必须写成： duct=product; this.quantity=quantity; this.subtotal

20、=product.listPrice*quantity;形式。,增加一个无返回值函数recalc()，此函数的功能是重新计算金额，即将构造函数中金额计算语句再次执行，以应对产品购买数量发生变化的情况。 再增加一个类ShoppingCart，构造函数暂时空置，添加一个无返回值函数addItem，参数item是购物车项目类的对象，函数体暂时用trace语句跟踪item的product属性。 回到DataEntry文件，在Script标签里导入刚才新建的两个类，绑定公有购物车类型变量cart，并用new运算符初始化它。 添加私有无返回值函数addToCart，参数为Product类型变量produc

21、t，函数体内定义一个名为sci的ShoppingCartItem类对象，参数为addToCart函数参数product，数量参数使用默认值即可。以sci为参数调用cart对象的addItem方法把商品加入购物车。 找到DataEntry文件中定义的label为Add To Cart按钮的标签，添加click事件，执行函数addToCart，参数为绑定的对象变量theProduct。,5.9 对控件使用远程XML数据 打开DataEntry.MXML文件，在Script标记中导入mx.rpc.events.ResultEvent类和mx.collections.ArrayCollection类。

22、 在Script标记下面添加HTTPService标签，id属性设为unitRPC，url属性设为网络上的一个xml文件 添加私有函数unitRPCResult的定义，参数为ResultEvent类型的变量event，无返回值。在函数的结束大括号处双击添加断点。 在Application标签中添加creationComplete事件，事件处理函数即为名为unitRPC的HTTPService标签的send方法。 HTTPService标签的特点是，当它的send方法被执行时，它会访问url属性指定位置的数据，得到结果后执行result属性对应的函数。,点击右上角Open perspective

23、(切换透视图)按钮，切换到flex debugging模式，debug当前mxml文件。可以在右边变量的窗口中看到，远程xml文件的数据已经被获得。 5.10 将HTTPService标签的数据添加到ArrayCollection对象中 绑定私有ArrayCollection类型变量units并初始化它。在unitRPCResult函数中，为此units变量赋值为event.result.allUnits.unit，其中allUnits为xml文件中的子标签的名字。 找到label为ProductNameUnit的表单项，删除其中的内容，改为list标记，id设为unitID，rowCount

24、为4，dataProvider属性绑定为数组集合units，labelField为unitName。其中，unitName为xml文件中子标签的名字。 5.11 将数据填入comboBox并添加选项 打开DashBoard.MXML，在Application标签下添加Script标签，绑定一个私有的ArrayCollection变量categories。 在Script标记下添加HTTPService标签，id为catRPC，url为,catHandler(event)函数。 在Application标签中添加creationComplete事件，事件函数添加方法同上。 定义私有无返回值函数c

25、atHandler，定义方法同上，categories变量的初值由xml文件中的catelog根标签下的category子标签决定。 为了增加一个All子选项，可定义一个名为catObj的Object对象，并初始化。 catObj的name属性设置为“All”， categoryID属性为0，用ArrayCollection 类的addItemAt方法添加该对象到数组集合中，并设置名为catCombo的comboBox的selectedIndex属性为0，即让下拉列表框的首选项为name为“All”的子选项。 在id为endDate的日期控件标签后面添加ComboBox控件，id为comboB

26、ox，dataProvider为categories，labelField为name。 测试。,5.12 将XML数据填入tree型控件 打开DataEntry.MXML，删除标签及其内容，在之前写好的名为unitRPC的HTTPService标签下再创建一个HTTPService标签，id为prodByCatRPC，url设置为 注：AS3.0以e4x格式支持XML。 e4x是一个ECMA标准，设计意图是让ActionScript程序员能以一种直接的方式访问XML。 例：如下所示的XML文件：, bag Cleaned and bagged pound Baby carrots , each

27、 Sweet Fuji pint Firm and fresh , pint Deep red and juicy 该XML文件包含根节点catalog，两个catalog元素，product节点有2个子节点，分别是unit和desc， product节点有2个属性，分别是name和cost。 如果在AS程序中使用duct语句，则该语句返回如下结果：, bag Cleaned and bagged pound Baby carrots each Sweet Fuji 点操作符获得所有属于category的直接子节点中,的product，但属于berries子节点的pro

28、duct不会出现。 如果输入duct.unit，则返回： bag pound each 如果输入duct1，此为数组表示法，则返回： pound Baby carrots ,如果输入duct.(unit=“bag”)，则返回： bag Cleaned and bagged 上述是通过小括号实现的条件过滤。 如果输入duct.(cost=“1.95”)，则返回 bag Cleaned and bagged each Sweet Fuji ,上面的符号表示访问的是product节点的属性。 如果输入ca

29、duct.(cost=“1.95”).(unit=“each”)，则返回： each Sweet Fuji 如果输入duct，则返回所有的product节点数据，包括berries下的product节点。,添加XMLListCollection标签，id为foodColl，表明这是一个显示食品组件对象的xml列表集合，source为prodByCatRPC.lastResult.category。 在Application标签的creationComplete事件中添加对新增加的httpService标签的send方法的调用。 移除form表单中5个

30、textInput标签中的text属性。 删除FormHeading标记。 将id为description的textInput标记替换为RichTextEditor控件，id不变，height为200。,将两个checkBox合并在一个表单中，修改该表单的label为Specialties，将checkBox的selected属性全部改为label属性，分别为Is Low Fat和Is Organic。 删掉多余的包含checkBox的表单标签。 将label为Image Path的表单的label改为Image Name，direction设为水平。 在form表单标记上面添加tree控件，

31、id为productTree，height为100%，dataProvider为foodColl，labelField为name，change为populateForm(event)。 添加一个Hbox标签，使它包含tree控件和form表单控件，使二者水平排列。,添加私有无返回值函数populateForm，注意，此函数的参数event为Event类型，因为此函数是针对tree控件的change事件而编写的，不是针对的外部或远程xml文件，故不能使用resultEvent类型的参数。 在函数中，先定义一个Object类型的对象selectedNode，它等于event对象的target属性的

32、selectedItem属性。使用if语句和e4x运算符判断selectedNode的prodName属性是否不等于未定义值，即selectedNdName != undefined，是则将product，cost，listPrice，description，imageName5个文本框的text属性赋值为selectedNode的相应属性。,isOrganic和isLowFat这两个checkBox的selected属性则使用一个自定义的yesNoToBoolean函数转化为布尔值。 unitID列表框的selectedIndex属性则使用自定义函数presetList进行相应

33、索引序号的转换。(注意，这里的presetList函数最好根据units数组集合对象的内容来进行判断) 否则，执行resetForm函数。 定义私有无返回值无参数函数resetForm，此函数的功能就是把所有显示控件的内容设置为默认值。其中，text属性设为”空字符串， selectedIndex设为-1， selected设为false。 测试。,5.13 获取XML数据并将之转换为自定义ArrayCollection类型 打开EComm.XML，删掉标记，在script标记下添加HTTPService标签，id仍为prodByCatRPC，url仍为 在脚本中导入mx.rpc.events

34、.ResultEvent类，将prodHandler函数的参数改为ResultEvent类对象，修改函数内容为trace(event.result),调试，可以看到输出窗口中为xml文件的内容。 删除函数内的trace语句，定义一个Array类的变量prodArray，初始化它。添加一个for each循环，循环条件为var p:XML in duct。在循环体中，定义Product类型的对象prod，初始化时，注意对每个参数进行强制类型转换，其中，是否有机和是否低脂肪可通过判断其是否为”yes”来转换成相应的布尔值，即p.isOrganic=“yes”。 将p

35、rod对象通过push方法添加到prodArray中。 在循环外通过trace语句输出prodArray的内容。 测试，看看输出结果，解释为什么会这样输出。,5.14 对复杂数据结构使用数据绑定 在同上文件中导入mx.collections.ArrayCollection类，绑定私有ArrayCollection类的对象groceryInventory。在prodHandler函数中移除trace函数，改为为groceryInventory变量赋初值语句，其中， ArrayCollection类的构造函数中直接用数组prodArray作为参数。这么做是将本地数组放在ArrayCollectio

36、n中。 找到label为Add To Cart的按钮，将click事件中的addToCart函数的参数改为groceryInventory.getItemAt(0) as Product。,将expanded状态下的text控件和两个label控件的theProduct改为groceryInventory.getItemAt(0)。 测试。 打开ShoppingCart.as文件，导入数组集合类，在类中绑定公有数组集合类对象aItems，并初始化它。绑定公有Number型变量total，初值为0。 将addItem函数的内容改为调用aItems的addItem方法来添加购物车项目，参数为函数参

37、数。,在Ecomm.MXML中找到id为cartBox的VBOX，在该容器的最后添加一个list标记，id为cartView，dataProvider为cart.aItems，宽度为100%。 测试。点击Add To Cart按钮，看看有什么效果，重新理顺整个mxml文件以及类文件之间的关系。 5.15 对数组集合中的项目进行排序 在ShoppingCart.as文件中添加私有无返回值函数sortItems。在函数内部，定义Sort类型对象prodSort，初始化。,定义SortField类型对象sortField，初始化时参数为”product”。 将prodSort的fields属性赋值为new Array(sortField)。 将prodSort赋值给aItems的sort属性。调用aItems的refresh函数进行更新操作。