FLEX自定义组件2_第一次实践

sinkingboat 发表于 2011-12-22 08:54

转载：http://www.ibm.com/developerworks/cn/web/1011_simq_flexlifecycle/index.html?ca=drs- 首先学习《FLEX组件生命周期1_原理》 1.关于 createChildren（）方法        代码1-1显示了组件 ImageViewer 的 createChildren() 方法。 代码1-1. ImageViewer 的 createChildren() 方法 <div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>override protected function createChildren():void </li><li>
        { </li><li>
            trace('createChildren'); </li><li>
            super.createChildren(); </li><li>
             </li><li>
            //创建边框CSS </li><li>
            if(!this.border){ </li><li>
                createBorder(); </li><li>
            } </li><li>
             </li><li>
            //创建控制按钮容器 </li><li>
            if (!controlBar) </li><li>
                controlBar = new UIComponent(); </li><li>
             </li><li>
            //创建放大按钮 </li><li>
            if (!zoomInButton){ </li><li>
                zoomInButton = new Button(); </li><li>
                zoomInButton.label = "+"; </li><li>
                zoomInButton.addEventListener(MouseEvent.CLICK, zoomInButtonClickHandler); </li><li>
                controlBar.addChild(zoomInButton); </li><li>
            } </li><li>
             </li><li>
            //创建缩小按钮 </li><li>
            if (!zoomOutButton){ </li><li>
                zoomOutButton = new Button(); </li><li>
                zoomOutButton.label = "-"; </li><li>
                zoomOutButton.addEventListener(MouseEvent.CLICK, zoomOutButtonClickHandler); </li><li>
                controlBar.addChild(zoomOutButton); </li><li>
            } </li><li>
             </li><li>
            // 将控制按钮容器添加到显示节点 </li><li>
            addChild(controlBar); </li><li>
        }</li></ol></div>       在该方法的末尾才把controlBar 添加到 Display List 上，正如之前提到的那样，我们只在需要的时候装配他。同时，此时也是为子节点添加监听器的好地方。 2.关于 commitProperties（）方法        CommitProperties（）是验证方法 invalidateProperties（）所对应的提交方法，也是初始化阶段会被调用的第一个提交方法。他的目的是使得任何通过 set 方法提交的数值更改生效。所以您可以看到在 set scale（）方法里，按照 invalidation-validation 模式，我们调用了 invalidateProperties（）方法从而将值的生效延迟到了 commitProperties（）里，并且为了做到 “避免对一个属性连续设置多个值，从而避免了不必要的资源浪费”，我们使用了标志位 scaleChanged。 代码2-1 set scale()函数 <div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>public function set scale(value : Number):void{ </li><li>
          if (_scale != value) </li><li>
          { </li><li>
                _scale = value; </li><li>
                 </li><li>
                //避免对一个属性连续设置多个值，从而避免了不必要的资源浪费 </li><li>
                scaleChanged = true; </li><li>
                 </li><li>
                //由于调用本方法时，可能对象未创建 </li><li>
                //通过调用invalidateProperties()，将值的生效延迟到了commitProperties()里 </li><li>
                invalidateProperties(); </li><li>
                dispatchEvent(new Event("scaleChanged")); </li><li>
          } </li><li>
}</li></ol></div>代码2-2  commitProperties()函数 <div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>override protected function commitProperties():void{ </li><li>
            trace('commitProperties'); </li><li>
            super.commitProperties();          </li><li>
             </li><li>
            //如果image控件不存在，则新建并添加 </li><li>
            if (sourceChanged){ </li><li>
                if(!this.image){ </li><li>
                    image = new Image();                  </li><li>
                    this.addChild(image); </li><li>
                    image.source = this._source;                  </li><li>
                }else{ </li><li>
                    image.source = this._source; </li><li>
                } </li><li>
                sourceChanged = false; </li><li>
            } </li><li>
             </li><li>
            //如果scale属性改变了，则修改imageWidth </li><li>
            if(scaleChanged){ </li><li>
                this.imageWidth = this.imageWidth *this.scale; </li><li>
                this.imageHeight = this.imageHeight * this.scale; </li><li>
                scaleChanged = false; </li><li>
            } </li><li>
}</li></ol></div>       为什么在 commitProperties（）会有添加子节点的操作呢？        对于有些子节点，他的诞生可能是和某些属性值相关联的，也就是我们在之前提到的动态创建或者数据驱动的子节点。这些子节点，由于他们并不是随着组件的产生而产生，而是要受属性值的变化而产生或者变化，甚至在某些情况下，根本就不需要存在。所以我们应该在值的提交阶段，也就是 commitProperties（）方法调用的时候，当新值真正生效的时候再去创建它。 3.关于 measure() 方法        measure（）方法是组件自动计算尺寸大小的地方，在例子 ImageViewer 的 measure（）方法里（如代码3-1 所示）.如果已经指定了尺寸大小，即 width 和 height 值，measure（）方法不会被调用。所以一旦您的组件在组装阶段被设置了 with 和 height 属性值，那么请不要期望在 measure 里会执行您的业务逻辑。 代码3-1 measure()函数 
<div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>override protected function measure():void{ </li><li>
            trace('measure '); </li><li>
            super.measure(); </li><li>
            if(!image){ </li><li>
                //如果image控件不存在，则本组件的宽度为controlBar的宽度 </li><li>
                measuredWidth = controlBar.getExplicitOrMeasuredWidth(); </li><li>
                measuredHeight = controlBar.getExplicitOrMeasuredHeight(); </li><li>
            }else{ </li><li>
                //如果image控件存在，则本组件的宽度为controlBar的宽度 </li><li>
                measuredWidth = image.width + Math.max(image.width, controlBar.getExplicitOrMeasuredWidth()) ; </li><li>
                measuredHeight = image.height + controlBar.getExplicitOrMeasuredHeight(); </li><li>
            } </li><li>
            measuredMinWidth = measuredWidth; </li><li>
            measuredMinHeight = measuredHeight; </li><li>
}</li></ol></div>  4.关于 updateDisplayList （）方法        updateDisplayList（）方法用于对组件内容进行布局以及渲染，一切屏幕上可见的内容都需要在这里被处理，所以 updateDisplayList（）可以说是最繁忙的一个提交方法，他所包含的实现可以非常多。代码4-1中，我们省略了部分代码。只留下了需要讲解的部分。 代码4-1 updateDisplayList()函数部分代码 <div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number): void { </li><li>
            super.updateDisplayList(unscaledWidth, unscaledHeight); </li><li>
            // 省略部分代码 </li><li>
            zoomInButton.setActualSize(50, 20); </li><li>
            zoomOutButton.setActualSize(50, 20); </li><li>
            var tmpx : Number = 20; </li><li>
            controlBar.setActualSize(tmpx, 20); </li><li>
            controlBar.move(0, unscaledHeight-25); </li><li>
            zoomInButton.move(tmpx, 0); </li><li>
            tmpx +=60; </li><li>
            zoomOutButton.move(tmpx, 0); </li><li>
            if (imageHeightChanged ||imageWidthChanged){ </li><li>
                image.width =this.imageWidth;//w; </li><li>
                image.height =this.imageHeight;//h - 20; </li><li>
                var tempX : Number = x+ (w-imageWidth) * 0.5; </li><li>
                var tempY : Number =y + (h-imageHeight) * 0.5; </li><li>
                image.x = tempX; </li><li>
                image.y = tempY; </li><li>
                imageHeightChanged =false ; </li><li>
                imageWidthChanged =false ; </li><li>
                var g:Graphics = graphics; </li><li>
                g.clear(); </li><li>
                g.beginFill(0x6F7777); </li><li>
                g.drawRect(tempX-1, tempY-1, imageWidth+2, imageHeight+2); </li><li>
                g.endFill(); </li><li>
            } </li><li>
}</li></ol></div>       在 measure（）方法里我们可以获取 Flex 自动计算的尺寸（如果被调用的话），这些数据需要在 updateDisplayList() 方法里被应用处理，所以我们会大量使用 setActualSize（）方法，特别是子元素比较多的时候。        updateDisplayList（）的最重要的职责之一就相对应的 invalidateDisplayList（）方法的更新请求进行响应。比如说对set imageWidth（）方法进行了相应。并且就像在 commitProperties（）部分里介绍的那样，这里同样使用了“标志位”方法来进行“局部跟新”。        局部更新是普遍应用于提交方法里的一种技巧，因为我们知道这三个提交方法是公用的，任何更新的提交都会在这几个方法里被处理。而每次更新都可能只是局部的更改，所以是当地使用标志位方法进行局部更新可以有效地优化代码的执行。        渲染屏幕的职责也决定了 updateDisplayList（）方法是调用 Flash Player 绘图 API 的好地方。所以我们在代码4-1 中特意使用了 drawRect（）方法为图片家了一个边框。 参考文献 1.http://www.ibm.com/developerworks/cn/web/1011_simq_flexlifecycle/index.html?ca=drs-

页: [1]

Chinaunix's Archiver

FLEX自定义组件2_第一次实践