工作中的Flex總結

2011-11-14

1. HTTPService

var service:HTTPService = new HTTPService();
_service.url = "http://121.194.117.200:8080/monitorSystem/dataAction_getFlexValue.action";
_service.method = "POST";
_service.addEventListener("result", httpResult);
_service.addEventListener("fault", httpFault);
_Service.send(param);
function httpResult(event:ResultEvent):void
{
    Alert.show(_service.lastResult);
}

function httpFault(event:FaultEvent):void
{
    var faultstring:String = event.fault.faultString;
    Alert.show("Fault: " + faultstring);
}

2. as3獲取js地址參數

as3代碼：

var _str:String = ExternalInterface.call("getType");
trace(_str);

js代碼：

<script type="text/javascript">
    function Request()
    {
        var strHref = window.document.location.href;
        var intPos = strHref.indexOf("?");
        if(intPos == -1)
        {
            return "";
        }
        var strRight = strHref.substr(intPos + 1);
        return strRight;
    }

    function getType()
    {
        return Request();
    }
</script>

3. js調用as3中的方法

as3 代碼：

if(ExternalInterface.available)
{
    ExternalInterface.addCallback("getDataStart",getDataStart);
}

function getDataStart(id:String = ""):void
{
    Alert.show("id = " + id, "start");
}

Js代碼：

<script type="text/javascript">
    function sendStart()
    {
        // customDemo指嵌入的swf的id
        customDemo.getDataStart("xxxx");
    }
</script>

4. Json

import com.adobe.serialization.json.*;

var _obj:Object = JSON.decode(value);
var _str:String = JSON.encode(value);

5. LineChart橫座標傾斜45°

css中：

@font-face
{
    font-family: EmbeddedArial;
    src: url("simkai.ttf");
    embedAsCFF: false;
}

.LineChart
{
    fontFamily:EmbeddedArial;
}

Flex中:

<mx:LineChart id="linechart" seriesFilters="[]" styleName="LineChart"
          showDataTips="true" dataProvider="{_DataArr}">

    <mx:horizontalAxis>
        <mx:CategoryAxis id="dateAxis" categoryField="x"/>
    </mx:horizontalAxis>

    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer labelRotation="45" axis="{dateAxis}"/>
    </mx:horizontalAxisRenderers>

</mx:LineChart>

6. Flex4 中 旋轉特效

<fx:Declarations>
    <s:Rotate id="rotateEffect" />
</fx:Declarations>

function changeAngle():void
{
    rotateEffect.angleFrom = 0;
    rotateEffect.angleTo = 100;
    rotateEffect.autoCenterTransform = false;
    rotateEffect.transformX = 5;
    rotateEffect.transformY = 7;
    rotateEffect.play([poiner]);
}

 

2011-12-6

 

1. BlazeDS

配置BlazeDS

 

Flex代碼

public function submsg():void
{
    var consumer:Consumer = new Consumer();
    consumer.destination = "tick-data-feed";
    consumer.subtopic = xml.main;
    consumer.channelSet = new ChannelSet(["my-streaming-amf"]);
    consumer.addEventListener(MessageEvent.MESSAGE, messageHandler);
    consumer.subscribe();
}

private function messageHandler(event:MessageEvent):void
{
}

2. 點擊Legend隱藏顯示線條

<mx:Legend x="865"
    y="11"
    dataProvider="{linechart1}"
    color="0x323232"
    itemClick="itemClickHandler(event)"
    buttonMode="true"/>

private function itemClickHandler(event:LegendMouseEvent):void
{
    event.item.element.visible = !event.item.element.visible;
}

3. 限定charts的上下限

<mx:verticalAxis>
    <mx:LinearAxis minimum="0"  maximum="100"/>
</mx:verticalAxis>

4. 在LineChart中畫網格

<mx:backgroundElements>
    <mx:GridLines gridDirection="both">
        <mx:verticalStroke>
            <s:SolidColorStroke color="black" weight="0.5" alpha="0.2" />
        </mx:verticalStroke>
    </mx:GridLines>
</mx:backgroundElements>

5. 自定義鼠標

[Embed(source="assets/mouse.swf")]
private var mouseIcon:Class;

CursorManager.setCursor(mouseIcon,2,-33,-65);

//移除自定義鼠標形狀
CursorManager.removeAllCursors();

6. Vslider

<s:VSlider id="vslider"
    change="changePosition()"
    dataTipFormatFunction="vsliderDataTipFunction"
    maximum="3"
    minimum="0"
    value="0"/>

private function vsliderDataTipFunction(value:Number):Object
{
    var _str:String;

    return _str;
}

private function changePosition():void
{
}

7. Charts特效

<mx:SeriesInterpolate id="rearange"/>
<mx:SeriesSlide id="slide"/>

var _columnService:ColumnSeries = new ColumnSeries();
_columnService.setStyle("showDataEffect",rearange);
_columnService.setStyle("hideDataEffect",null);