[PureMVC]初學者入門教學Part.5 新增功能!? & 範例DEMO

基本上，上章已經將PureMVC的架構都示範告一個段落了

這章主要是凸顯使用MVC架構的好處!!

很多人認為，只是顯示個時間而已為啥要用這麼麻煩(因為比較好寫範例XD)

但是當你的老闆，突然開給你要更改需求，要你的程式可以上太空!!

這你可能只要更動某部分的程式，主體也不會被影響到，移掉功能就像是安裝Plug-in一樣

不用砍掉重練!!

回到主題，之前的顯示時間方式是digital clock，現在新需求來了，需要把它改成有 時針-分針-秒針的時鐘

你該怎麼改呢?

可以先想一想，或自己先做一下，在參考下面的範例

====================新增功能範例分隔線=======================

這是這次功能的預視圖

基本就是新增一個圖型化顯示時間的View(Component)替換原本的文字顯示方式

在PureMVC中的架構中其實要做的事情就是加一組view&Mediator

設計的原理就是用Draw API去畫出時針，分針與秒針

flash的Draw API是餵起點跟中點然後繪出線段

所以是取圓心，然後用三角函數算出終點

首先，必須了解flash的座標系統

所以算三角函數需要的角度也會變成

另外Actionscript 3.0 中的三角函數Math.cos(degree)輸入餵的是弧度而不是角度

弧度 = 角度 x Math.PI / 180

而且時鐘的座標要再減0.5弧度

所以終點做標為

viewClock.mxml

viewClockMediator.as

package tw.ria.pureMVCclock.view
{
import flash.display.Shape;
import flash.geom.Point;

import mx.core.UIComponent;

import org.puremvc.as3.interfaces.IMediator;
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.mediator.Mediator;

import tw.ria.pureMVCclock.ApplicationFacade;
import tw.ria.pureMVCclock.model.vo.ClockVO;
import tw.ria.pureMVCclock.view.component.viewClock;

public class viewClockMediator extends Mediator implements IMediator
{
public static const NAME:String = "viewClock";

//指針圓心
public static const  centreX:Number = 75;
public static const  centreY:Number = 75;

//指針長度
public static const  HourHandLength:Number = 30;
public static const  MinuteHandLength:Number = 50;
public static const  SecondHandLength:Number = 70;

public function viewClockMediator(viewComponent:Object=null)
{
super(NAME, viewComponent);
}

private function get clockView():viewClock
{
return viewComponent as viewClock;
}

override public function listNotificationInterests():Array
{
return [
ApplicationFacade.CLOCK_TIME_UPDATED
];
}

override public function handleNotification(notification:INotification):void
{
switch ( notification.getName() )
{
case ApplicationFacade.CLOCK_TIME_UPDATED:
//先清空
clockView.removeAllChildren();

//再重新繪製
var centrePoint:Point = new Point(clockView.width/2,clockView.height/2);
var centreX:Number = clockView.width/2;
var centreY:Number = clockView.height/2;

var clockTime:ClockVO = ClockVO(notification.getBody());

var line:Shape = new Shape();

//畫秒針
DrawIndicator(line,1,SecondHandLength,centrePoint,clockTime.second,6);

//畫分針
DrawIndicator(line,3,MinuteHandLength,centrePoint,clockTime.minute,6);

//畫時針
DrawIndicator(line,5,HourHandLength,centrePoint,clockTime.hour,30);

var uic:UIComponent = new UIComponent();
uic.addChild(line);
clockView.addChild(uic);


break;
}
}

private function DrawIndicator(theShape:Shape,IndicatorWidth:Number,IndicatorLength:Number,centrePoint:Point,timeNumber:Number,timeRadians:Number,IndicatorColor:uint=0):void
{
theShape.graphics.lineStyle(IndicatorWidth, IndicatorColor);
theShape.graphics.moveTo(centrePoint.x, centrePoint.y);

var Indicator_rad:Number = (Math.PI*timeNumber*timeRadians/180)-0.5*Math.PI;
var Indicator_x:Number = IndicatorLength*Math.cos(Indicator_rad);
var Indicator_y:Number = IndicatorLength*Math.sin(Indicator_rad);

theShape.graphics.lineTo(centrePoint.x+Indicator_x,centrePoint.y+Indicator_y);
}

}
}

Demo

[kml_flashembed movie="http://eggant.appspot.com/swf/PureMVCClock02/Clock.swf" width="600" height="400"]

[/kml_flashembed]

Source..

全劇終XD