向 ProductForm 影片剪辑添加代码

接下来,将向刚刚创建的 ProductForm 影片剪辑中添加 ActionScript。ActionScript 使用所选礼品的有关信息填充影片剪辑内的组件,并向 Add to Cart 按钮(用于将所选产品添加到购物车)中添加一个事件侦听器。

有关使用事件侦听器的详细信息,请参阅 Learning ActionScript 2.0 in Adobe Flash(《学习 Adobe Flash 中的 ActionScript 2.0》)中的"使用事件侦听器"

  1. 在 ProductForm 影片剪辑的时间轴中,创建一个新图层,并将它命名为"动作"。在"动作"图层中选择第一帧。
  2. 在"动作"面板中添加以下代码:
    // 创建一个对象以引用 DataGrid 中所选的产品项目。
    var thisProduct:Object = this._parent._parent.products_dg.selectedItem;
    // 使用所选产品的数据
    // 填充 description_ta TextArea 实例和 price_lbl Label 实例。
    description_ta.text = thisProduct.description;
    price_lbl.text = "<b>$"+thisProduct.price+" "+thisProduct.priceQualifier+"</b>";
    // 从应用程序目录加载产品的图像。
    image_ldr.load(thisProduct.image);
    

    注意

    代码中包含说明其用途的注释。在编写的所有 ActionScript 代码中,最好都包含这类注释,以便于您或任何其它人在以后查看这些代码时能够轻松地理解其用途。

    首先,代码定义一个变量,用来在后续代码中引用所选产品。使用 thisProduct 变量意味着无需使用路径 this._parent._parent.products_dg.selectedItem 来引用指定的产品。

    接下来,代码使用 thisProduct 对象的 descriptionpricepriceQualifier 属性来填充 TextArea 实例和 Label 实例。这些属性对应于 products.xml 文件中的元素,products.xml 文件在本教程开始部分已链接到 products_xmlcon XMLConnector 实例。在本教程的后面部分,将把 XMLConnector、DataSet 和 DataGrid 组件实例绑定在一起,并使用 XML 文件中的元素填充其它两个组件实例。

    最后,代码使用 thisProduct 对象实例的 image 属性将产品的图像加载到 Loader 组件中。

  3. 接下来,将添加事件侦听器,以便在用户单击 Add to Cart 按钮时将产品添加到购物车。(在教程的后面部分,将向应用程序的主时间轴添加 ActionScript,以创建 Cart 类的实例。)添加以下代码:
    var cartListener:Object = new Object();
    cartListener.click = function(evt:Object) {
        var tempObj:Object = new Object();
        tempObj.quantity = evt.target._parent.quantity_ns.value;
        tempObj.id = thisProduct.id;
        tempObj.productObj = thisProduct;
        var theCart = evt.target._parent._parent._parent.myCart;
        theCart.addProduct(tempObj.quantity, thisProduct);
    };
    addToCart_button.addEventListener("click", cartListener);
    
  4. 单击"语法检查"按钮("脚本"窗格上方的蓝色复选标记),以确保代码中没有语法错误。

    向应用程序添加代码时应经常检查语法。代码中发现的所有错误都在"输出"面板中列出。(在检查语法时,只检查当前的脚本;不检查可能位于 FLA 文件中的其它脚本。)有关详细信息,请参阅《使用 Flash》中的"调试脚本"。

  5. 单击文档窗口左上方的箭头按钮,或者选择"视图">"编辑文档"退出元件编辑模式,而返回到主时间轴。

    提示

    按 Control+S 保存您的工作,然后按 Control+Enter(或选择"控制">"测试影片")测试应用程序。如果现在单击某个礼品选项,应该显示一个窗口,并显示该礼品的图像,同时显示说明、价格和允许您选择所需要数量的数值调节扭。