文档章节

《Hello Flex 4》笔记——3 Hello Spark: primitives, c...

豆仔
 豆仔
发布于 2012/10/30 21:25
字数 1014
阅读 114
收藏 0

SESSION 11  Spark primitives

Label包含在spark.componets中

The classes in the spark.primitives package include BitmapImage, Ellipse, Graphic, Line, Path, Rect, RichEditableText, and RichText.
session11/src/Tester.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo"
  width="100%" height="100%">
<fx:Script><![CDATA[
  import mx.graphics.SolidColorStroke;
  private const _scs:SolidColorStroke = new SolidColorStroke(0x000000, 5, 1.0); //stroke:the style of the line
]]></fx:Script>
  <s:Panel width="100%" height="100%" title="Primitives!">
    <s:Ellipse x="12" y="39" width="50" height="40" stroke="{_scs}"/>
    <s:Rect x="127" y="40" width="50" height="40" stroke="{_scs}"/>
    <s:Line xFrom="90" yFrom="80" xTo="60" yTo="140" stroke="{_scs}"/>
    <s:Path data="M30 168L132 186 162 144 50 165" stroke="{_scs}"/> //M means "Move the pen", L means "Line from", and the rest are space-separated x and y values.这里没去理解
    <s:Label text="In session 16 we'll take this further!" x="190" y="130" rotation="-30"/>
    <s:RichText textRotation="rotate90" fontWeight="bold" text="HELLO     WORLD"/>
    <s:RichEditableText text="(select and type!)" x="260" y="120"/>
    <s:BitmapImage x="221" y="145" source="@Embed('HF4.png')"/>
  </s:Panel>
</s:Application>

继承层次

The InteractiveObject class is an abstract base class for all the display object classes that the user can interact with using the keyboard and mouse.
Spark primitives are the building blocks on which Spark components are built.
Classes that can have a stroke extend StrokedElement ; classes that can have a fill extend FilledElement .
Classes that are interactive extend InteractiveObject .

SESSION 12  Simple Spark components

这里的组件基本上可以在FB中拖出来,了解怎么用即可

session12/src/Tester.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo"
  width="100%" height="100%">
<fx:Script><![CDATA[
  [Bindable]
  private var _theory:String = "";
  [Bindable]
  private var _bread:Number = Number.NaN;
]]></fx:Script>
<fx:Declarations> //
  <s:RadioButtonGroup id="moralityRBG"/>
  <s:RadioButtonGroup id="restaurantRBG"
    selectedValue="{_theory.length % 2 == 0 ? 'smoking' : 'non'}"/>
</fx:Declarations>
  <s:Panel width="100%" height="100%" title="Simple Components!">
    <s:layout>
      <s:HorizontalLayout paddingLeft="5" paddingTop="5"/>
    </s:layout>
    <s:VGroup>
      <s:TextArea id="textArea" width="200" height="50" text="@{_theory}"/> //双向数据绑定
      <s:TextInput id="textInput" width="200" text="@{_theory}"/>
      <s:HSlider id="hSlider" minimum="0" maximum="11" liveDragging="true" width="200" value="@{_bread}"/>
      <s:VSlider id="vSlider" minimum="0" maximum="11" liveDragging="true" height="50" value="{_bread}"/>
      <s:Button label="{_theory}" width="200"
        color="{alarmTB.selected ? 0xFF0000 : 0}"
        click="_bread = Math.min(_theory.length, 11)"/>
      <s:CheckBox id="checkBox" selected="{_bread % 2 == 0}"
        label="even?"/>
    </s:VGroup>
    <s:VGroup>
      <s:RadioButton label="Good" value="good" group="{moralityRBG}"/>
      <s:RadioButton label="Evil" value="evil" group="{moralityRBG}"/>
      <s:RadioButton label="Beyond" value="beyond" group="{moralityRBG}"/>
      <s:RadioButton label="Smoking" value="smoking" group="{restaurantRBG}"/>
      <s:RadioButton label="Non-Smoking" value="non" group="{restaurantRBG}"/>
      <s:ToggleButton id="alarmTB" label="ALARM!"/>
      <s:NumericStepper id="numericStepper" value="{_bread}" minimum="0" maximum="11" stepSize="1"/>
      <s:Spinner id="spinner" value="{_bread}" minimum="0" maximum="11" stepSize="1"/>
    </s:VGroup>
  </s:Panel>
</s:Application>

继承层次


RadioButtonGroup isn’t a visual component, which is why it’s added to the fx:Declarations block (new to Flex 4)—where nonvisual components in MXML must go.

SESSION 13  Data-driven Spark components (Lists)

three data-driven components: List , DropDownList , and ButtonBar .

session13/src/Tester.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo"
  width="100%" height="100%">
<fx:Script><![CDATA[
  import spark.events.IndexChangeEvent;
  import mx.collections.ArrayCollection;

  [Bindable]
  private var _houseMaterials:ArrayCollection = new ArrayCollection(["straw", "sticks", "bricks"]);
  [Bindable]
  private var _coffees:ArrayCollection = new ArrayCollection(["drip coffee", "macchiato", "cappuccino", "latte"]);
  [Bindable]
  private var _lunches:ArrayCollection = new ArrayCollection(["fast food", "sushi", "dim sum"]);
  [Bindable]
  private var _pigChoice:String = "sticks";
  [Bindable]
  private var _coffeeChoice:String = "macchiato";
  [Bindable]
  private var _lunchChoice:String = "dim sum";

  private function coffeeChanged(event:IndexChangeEvent):void {
    if (event.newIndex == -1) return;
    _coffeeChoice = _coffees.getItemAt(event.newIndex) as String;
  }
]]></fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="15" paddingTop="15"/>
  </s:layout>
  <s:Label text="A Modern Fairy Tale" fontSize="18"/>
  <s:List id="list" dataProvider="{_houseMaterials}" selectedItem="{_pigChoice}"
	  change="_pigChoice = list.selectedItem;"/>
  <s:DropDownList id="ddl" width="120"
    dataProvider="{_coffees}" selectedItem="{_coffeeChoice}"
    change="coffeeChanged(event)"/>
  <s:ButtonBar id="buttonBar" dataProvider="{_lunches}" selectedItem="{_lunchChoice}"
    click="_lunchChoice = buttonBar.selectedItem;"/>      
  <s:Label width="300"
    text="The little pig built his house with {_pigChoice},
and then he went to Starbucks for a {_coffeeChoice}
followed by a nice lunch of {_lunchChoice}.  The End."/>
</s:Application>

the ButtonBar can be used for navigation in conjunction with view states, to create the functionality of the Halo TabNavigator  or Halo   ViewStack  plus   LinkBar  combination, in which only one container component is shown based on which button the user selects.

SESSION 14  FXG and MXML graphics—building a game

暂时不看,不一定有用

SESSION 15  Camera and video—a fake Twitter client

Session15/src/Tester.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo"
  width="100%" height="100%"
  applicationComplete="onApplicationComplete(event)">
<fx:Script><![CDATA[
  import mx.controls.Alert;
  import mx.events.FlexEvent;
  import flash.media.Camera;
  import flash.media.Video;
  
  private function onApplicationComplete(event:FlexEvent):void {
    var camera:Camera = Camera.getCamera();  
    if (camera == null) {
      Alert.show("Buy a Mac.", "No Camera!");
      return;
    }
    var video:Video = new Video(160,120);    
    video.attachCamera(camera);      
    videoHolder.addChild(video);   
    focusManager.setFocus(tweetTA);    
  }
]]></fx:Script>
  <s:Panel x="{width/2 - 250}" y="{height/2 - 80}" width="500" height="155"
    title="Forget everybody else, what are you doing?">
    <s:SpriteVisualElement id="videoHolder" width="100%" height="100%"/>
    <s:TextArea id="tweetTA" x="170" y="5" width="320" height="85" maxChars="140"/>
    <s:Button label="Tweet" x="170" y="95" width="320"/>
  </s:Panel>
</s:Application>
了解如何添加摄像头视频

© 著作权归作者所有

共有 人打赏支持
豆仔
粉丝 54
博文 54
码字总数 24065
作品 0
南京
程序员
私信 提问
《Hello Flex 4》笔记——1 Getting started

不要被篇幅吓到,内容比较基础,代码易读,提醒下自己 - -||| 开始看之前先把Flash Builder装上了... Why Flex 4?(这是为什么呢) Flex 4 is a sexy framework that lets you write code tha...

豆仔
2012/10/30
0
0
了解一下Flex 4里的fx、mx以及s命名空间

Flex 4带给我们的,是全新的命名空间。了解这些命名空间必定是一件好事情。Flex 4有三个非常重要的命名空间,分别是: xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:mx=”library://n...

Sandy_wu
2013/10/07
0
0
flex4 SWFLoader 加载swf时无法进行缩放

我有一个application 需要在其中加载一个swf 来显示内容,但是实现不了动态的缩放。求助大神帮忙解决 application 代码如下 import mx.managers.SystemManager; [Bindable] private var swf...

MouseDong
2015/09/24
269
0
Apache Flex SDK 4.14.1 发布,RIA 平台

Apache Flex SDK 4.14.1 发布,此版本主要更新信息如下: FLEX-34772 Add padding property to VerticalLayout/VGroup, HorizontalLayout/HGroup and TileLayout/TileGroup FLEX-34712 Call......

oschina
2015/03/31
2.9K
7
Flex4自定义事件类型Event的相关应用

基于松耦合的概念 自定义事件类型将取到很重要的作用 当您创建自己的自定义 Event 类时,必须覆盖继承的 Event.clone() 方法,以复制自定义类的属性。如果您未设置在事件子类中添加的所有属性...

leesama
2013/08/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
21
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
17
0
my.ini

1

architect刘源源
今天
14
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
15
0
寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部