<?xml version="1.0" encoding="utf-8"?>
<!--TEST APPLICATION 's first view-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图"xmlns:view="com.yyf.view.*" actionBarVisible="false"><s:layout><s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/></s:layout><fx:Script><![CDATA[import com.yyf.model.MainDataModel;import com.yyf.util.Tools;[Bindable]private var mainModel:MainDataModel = MainDataModel.getInstance();]]></fx:Script><view:LockedView id="lock" horizontalCenter="0" verticalCenter="0" creationComplete="mainModel.hotArea = (new Tools()).getHotArea(lock);"/><s:Label id="notice" text="Your Password : {mainModel.password}" visible="{mainModel.successCreated}"/><!--display the HOT_AREA-->
<!--    <s:Label backgroundAlpha="0.3" backgroundColor="0xFED913" x="{mainModel.hotArea.min_x}" y="{mainModel.hotArea.min_y}"width="{mainModel.hotArea.max_x - mainModel.hotArea.min_x}"height="{mainModel.hotArea.max_y - mainModel.hotArea.min_y}"/>-->
</s:View>

package com.yyf.element
{import com.yyf.event.PasswordCreateEevent;import com.yyf.model.MainDataModel;import com.yyf.util.Config;import com.yyf.view.LockedView;import flash.display.BitmapData;import flash.display.Sprite;import flash.events.FocusEvent;import flash.events.MouseEvent;import flash.geom.Point;import mx.core.FlexGlobals;import mx.core.UIComponent;import mx.events.FlexEvent;import spark.components.Application;/***<br>Circle UI</br>* @author yao yf* 2012-04-19* */public class Circle extends UIComponent{/**radius of the circle**/public var radius:Number;/**color of the circle**/public var color:uint;/**index ofd the circle**/public var index:int = 0;/*** @private**///selected colorprivate var selectedColor:uint;//current Circle targetprivate var target:Circle;//lineprivate var line:Line = Line.getInstance();//temp lineprivate var linetmp:LineTemp = LineTemp.getInstance();//current start point for draw temp lineprivate var currentStaPoint:Point = new Point();//has excute the FUNCTION  drawLine()private var hasLine:Boolean = false;//has excute the FUNCTION circleChange()private var hasCircleChanged:Boolean = false;//model dataprivate var mainModel:MainDataModel = MainDataModel.getInstance();//main applicationprivate static const MAIN_APP:Application = FlexGlobals.topLevelApplication as Application;/*** Constructor* @param radius:Number* @param color:uint* **/public function Circle(radius:Number,color:uint){super();this.radius = radius;this.color = color;this.draw();addListener();mainModel.notice = Config.DEFUALT;}//drawprivate function draw():void{this.graphics.clear();this.graphics.beginFill(color);this.graphics.drawCircle(this.radius,this.radius,this.radius);}//add Event Listenerprivate function addListener():void{this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);}//onMouseDown Handlerprivate function onMouseDown(event:MouseEvent):void{    mainModel.notice = Config.DURING;target = event.target as Circle;circleChange(target);currentStaPoint = new Point(target.x + radius,target.y + radius);mainModel.dispatched = false;MAIN_APP.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);MAIN_APP.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);}//onMouseMove Handlerprivate function onMouseMove(event:MouseEvent):void{target = event.target as Circle;if(target){circleChange(target);currentStaPoint = new Point(target.x + radius,target.y + radius);}else{if(event.target is Application)return;//                var stagePoint:Point = new Point(event.stageX,event.stageY);//                trace(stagePoint.x+" =,= "+stagePoint.y);
                drawTmpLine(target);}}//onMouseUp Handlerprivate function onMouseUp(event:MouseEvent):void{MAIN_APP.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);MAIN_APP.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);mainModel.enable = false;linetmp.clear();if(!mainModel.dispatched){mainModel.dispatchEvent(new PasswordCreateEevent(PasswordCreateEevent.EVT_PASSWORD_CREATED,mainModel.password));}mainModel.dispatched = true;}//circleChange//add a orange small circle on this centerprotected function circleChange(target:Circle):void{if(!target)return;if(!target.hasCircleChanged){target.graphics.beginFill(0xFF5D18);target.graphics.drawCircle(this.radius,this.radius,this.radius/2);if(!target.hasLine){drawLine(target);}target.hasCircleChanged = true;}}/*** draw line path with mouse move* @param target:Circle* **/protected function drawLine(target:Circle):void{linetmp.clear();line.graphics.lineStyle(Line.THINKNESS,Line.COLOR);var c_point:Point;if(target == this){//                c_point = localToGlobal(new Point(this.x,this.y));line.graphics.moveTo(this.x + radius,this.y + radius);}else{//                c_point = localToGlobal(new Point(target.x,target.y));line.graphics.lineTo(target.x + radius,target.y + radius);}target.hasLine = true;mainModel.password += target.index + "";}/*** draw temp line path with mouse move* @param target:Circle* @param stagePoint:Point* **/protected function drawTmpLine(target:Circle):void{//            var currentMovPoint:Point = localToGlobal(new Point(owner.mouseX,owner.mouseY));//            trace(currentMovPoint.x + " =,= " + currentMovPoint.y);//            if(currentMovPoint.x > mainModel.hotArea.min_x && currentMovPoint.x < mainModel.hotArea.max_x //                && currentMovPoint.y > mainModel.hotArea.min_y && currentMovPoint.y < mainModel.hotArea.max_y)//            {//            trace(owner.mouseX + " , " + owner.mouseY);//            trace(owner.width + " , " + owner.height);if(owner.mouseX > 6 && owner.mouseX < (owner.width - 6)&& owner.mouseY > 6 && owner.mouseY < (owner.height - 6)){linetmp.clear();linetmp.graphics.lineStyle(Line.THINKNESS,Line.COLOR);linetmp.graphics.moveTo(currentStaPoint.x , currentStaPoint.y);linetmp.graphics.lineTo(owner.mouseX,owner.mouseY);}}//get color String from ower pixelprivate function getColorString():String{var tmpDta:BitmapData = new BitmapData(owner.width, owner.height);tmpDta.draw(owner);selectedColor = tmpDta.getPixel(owner.mouseX,owner.mouseY);var colorDisplay:String = selectedColor.toString(16).toLocaleUpperCase();if(colorDisplay.length < 6){switch(colorDisplay.length){case 1 : colorDisplay = "00000" + colorDisplay;break;case 2 : colorDisplay = "0000" + colorDisplay;break;case 3 : colorDisplay = "000" + colorDisplay;break;case 4 : colorDisplay = "00" + colorDisplay;break;case 5 : colorDisplay = "0" + colorDisplay;break;default : break;}}return colorDisplay;}}
}

package com.yyf.element
{import mx.core.UIComponent;/***<br>Line UI</br>* SingleTon* @author yao yf* 2012-04-19* */public class Line extends UIComponent{private static var model:Line;public static const THINKNESS:Number = 25;public static const COLOR:uint = 0xFF5D18;public function clear():void{this.graphics.clear();}public function Line(singletonclass:SingleTonClass){if(model != null){throw new Error("SingleTon!");}}public static function getInstance():Line{if(model == null){model = new Line(new SingleTonClass());}return model;}}
}class SingleTonClass{}

package com.yyf.element
{import mx.core.UIComponent;/***<br>Temp Line UI</br>* SingleTon* @author yao yf* 2012-04-19* */public class LineTemp extends UIComponent{private static var model:LineTemp;public static const THINKNESS:Number = 25;public static const COLOR:uint = 0xFF5D18;public function clear():void{this.graphics.clear();}public function LineTemp(singletonclass:SingleTonClass){if(model != null){throw new Error("SingleTon!");}}public static function getInstance():LineTemp{if(model == null){model = new LineTemp(new SingleTonClass());}return model;}}
}class SingleTonClass{}

<?xml version="1.0" encoding="utf-8"?>
<!--
Locked Component
==========================
Explain:custom component for Locked
==========================
Code by yyf 2012-04-19
-->
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"width="275" height="350"creationComplete="creationCompleteHandler(event)"><fx:Script><![CDATA[import com.yyf.element.Circle;import com.yyf.element.Line;import com.yyf.element.LineTemp;import com.yyf.event.PasswordCreateEevent;import com.yyf.model.MainDataModel;import com.yyf.util.Config;import mx.collections.ArrayCollection;
//            import mx.controls.Alert;import mx.events.FlexEvent;/*** @prvate* **/private const RADIUS:Number = 30;private const COLOR:uint = 0xFED913;//store the Circlesprivate static var circleData:ArrayCollection;//line pathprivate var line:com.yyf.element.Line = com.yyf.element.Line.getInstance();//temp line pathprivate var linetmp:LineTemp = LineTemp.getInstance();//model data[Bindable]private var mainModel:MainDataModel = MainDataModel.getInstance();/**init**/private function creationCompleteHandler(event:FlexEvent):void{mainModel.addEventListener(PasswordCreateEevent.EVT_PASSWORD_CREATED,onCreated);displayCircle();}/**display nine Circles**/private function displayCircle():void{circleData = new ArrayCollection();line.includeInLayout = false;linetmp.includeInLayout = false;this.circles.addElement(line);this.circles.addElement(linetmp);for(var i:int = 0 ; i < 9 ; i++){var c:Circle = new Circle(RADIUS,COLOR);c.index = (i+1);this.circles.addElement(c);circleData.addItem(c);}}/**remove all of the circles group's elements**/private function removeCircle():void{circleData.removeAll();circleData.refresh();circleData = null;var i:int = this.circles.numElements;while(i >= 1){this.circles.removeElementAt(0);i--;}}/**RESET button handler**/private function reset_clickHandler(event:MouseEvent):void{mainModel.successCreated = false;mainModel.enable = true;mainModel.password = "";line.clear();linetmp.clear();removeCircle();displayCircle();}/**GO buton handler**/private function go_clickHandler(event:MouseEvent):void{
//                Alert.show("Your Password : " + mainModel.password);trace("Your Password : " + mainModel.password);}//PasswordCreateEevent.EVT_PASSWORD_CREATED call back handlerprivate function onCreated(event:PasswordCreateEevent):void{var pw:String = event.password;if(pw.length < 4){mainModel.notice = Config.ERROR;mainModel.successCreated = false;trace("Your Password's lenth can not less than 4 !");}else{mainModel.notice = Config.SUCCESS;mainModel.successCreated = true;}}]]></fx:Script><fx:Declarations></fx:Declarations><s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5"><s:Label id="noticelbl" text="{mainModel.notice}"/><s:Line xFrom="0" xTo="260"><s:stroke><s:SolidColorStroke color="{COLOR}" weight="2" caps="square"/></s:stroke></s:Line><s:Group id="circles" width="100%" height="100%" enabled="{mainModel.enable}"><s:layout><s:TileLayout horizontalGap="90" verticalGap="90" requestedColumnCount="3" requestedRowCount="3"paddingLeft="10" paddingTop="10"/></s:layout></s:Group><s:Line xFrom="0" xTo="260"><s:stroke><s:SolidColorStroke color="{COLOR}" weight="2" caps="square"/></s:stroke></s:Line><s:HGroup height="35"><s:Button id="reset" label="Reset" width="70" height="35" click="reset_clickHandler(event)"/><s:Button id="go" label="Go" width="70" height="35" click="go_clickHandler(event)" enabled="{mainModel.successCreated}"/></s:HGroup></s:VGroup>
</s:BorderContainer>