翻译(Collapsible Panel component)

参考地址:http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=14046

问题描述

创建可伸缩的Panel组件

解决方案

创建一个有2种state的组件。为避免”multiple sets of visual children”异常,使用[DefaultProperty]元标签定义名为”visualChildren”的私有数组属性。

说明

<!–================Col lapsePanel.mxml================–>

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="addComponents()"
            backgroundColor="#ffffff" backgroundAlpha="0.5">
      <mx:Metadata>
            [DefaultProperty("visualChildren")]
      </mx:Metadata>
      <mx:Script>
            <![CDATA[
                  import mx.core.UIComponent;
                  private var _components:Array;
                  public function set visualChildren(value:Array):void
                  {
                        _components = value;
                  }

                  private function addComponents():void
                  {
                        if (container.numChildren != 0)
                             container.removeAllChildren();
                        if (!_components)
                             return ;
                        for(var i:int = 0; i < _components.length; i++)
                        {
                             container.addChild(_components[i]);
                        }
                  }

                  private function updateState():void
                  {
                        if (currentState == 'collapsed')
                        {
                             currentState = '';
                        }
                        else
                        {
                             currentState = 'collapsed';
                        }
                  }
            ]]>
      </mx:Script>
      <mx:states>
            <mx:State name="collapsed">
                  <mx:RemoveChild target="{container}" />
                  <mx:SetProperty target="{titleLabel}" name="text"
                                         value="Click to open" />
            </mx:State>
      </mx:states>
      <mx:HBox id="header"
                   width="100%" height="20"
                   backgroundColor="#ffffff" mouseChildren="false"
                   buttonMode="true" click="{updateState()}">
            <mx:Label id="titleLabel"
                          width="100%"
                          text="Click to close" />
      </mx:HBox>
      <mx:VBox id="container"
                   paddingLeft="5" paddingRight="5"
                   paddingTop="5" paddingBottom="5" />

</mx:Box>

<!–==============test.mxml=================–>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" 
	width="500" height="500" 
	xmlns:local="*" >
	<component:CollapsePanel width="250">
            <mx:Label text="Test colapse panel" />
            <mx:Button label="Button 1" />
            <mx:Button label="Button 2" />
	</component:CollapsePanel>
</mx:Application>

openedclosed


Advertisements

使用fb:swf所要注意的几点

参考地址: http://wiki.developers.facebook.com/index.php/Fb:swf

1. 当前fb:swf标签使用Flash版本为9.0.115

2. 参数”flashvars”必须小写。Facebook只认小写的”flashvars”,不认”flashVars”.

3. 目前Facebook使用fb:swf标签,它会把flash包装在一个div中,所以尽管embed/object标签不是block-level(关于block_level,请点击这里), 但如果连续的使用<fb:swf>标签,后来的flash内容会盖在前一个的上面。(官方的wiki是这样描述,事实上本人做实验时,却发现它们是纵向排列的,不知道算bug,还是FB已经改了)

4. Facebook把allowScriptAccess设置为none阻止Flash访问外部的JavaScript。如果要引用外部的js,需使用flash的localconnection和fb:fbjs-bridge标签。

5.通过以下步骤验证flash是不是由Facebook页面加载,

a. 通过Application.application.parameters获取所有以fb-sig为前缀的参数(不包括fb-sig本身)

b. 去掉fb-sig前缀

c. 将先前去掉前缀的参数组成param1=value1param2=value2param3=value形式的字符串,以参数名称排序(而不是参数的值),注意不要添加“&”符号。

d. 分别将c中得到字符串和fb-sig参数传给存储了app secret key的app server

e. 在app server端,将app secret key加在c中得到字符串后面,于是得到param1=value1param2=value2param3=valueappsecretkey

f. 使用MD5算法对e返回的字符串进行加密,返回MD5后的哈希值

g. 把f中得到的哈希值与fb_sig进行比较,相等说明flash是由Facebook页面加载的,不等说明是由非Facebook页面加载的。

例:

<fb:swf swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;” swfsrc=’http://www.youtube.com/v/xxxxxxxxxx&#8217; imgsrc=’http://img.youtube.com/vi/xxxxxxxxxx/2.jpg&#8217; width=’340′ height=’270′ />

注意: width和height最好别用百分数,否则会出现很奇怪的现象。如果fb:swf标签用在profile页面imgsrc属性是必须(虽然它有默认值,但估计你不会想用它),因为profile页面中的flash是不会自动播放,需要点击img后才播放。但在canvas页面中flash是自动播放,所以不需要imgsrc。

SHAPEVENT DAILY LOG

SHAPEVENT DAILY LOG

Cool stuff

An external flash facebook website application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_06.html

图5展示了基于Facebook用户的外部flash站点的结构。与之前最大的不同是Facebook server不在代理任何浏览器的请求。开发者需在client端使用Facebook API或Facebook Connect处理用户登录。如果使用Facebook API登录,用户将被定向到Facebook站点,在Facebook登录后返回到app站点上。如果使用Facebook Connect,用户将不需要到Facebook站点上去登录。


图5,外部flash站点结构

1. 用户在app站点请求app;浏览器向app server发送HTTP request请求HTML页面或server page。

2. app server返回包含了swf文件引用的HTML/JS页面。如果使用Facebook Connect,HTML页面中会包含一些Facebook Connect初始化所需的JavaScript代码。

3. 用户请求swf文件

4. app server返回swf文件

5. AS代码向Facebook发出异步的请求,一次一个或一组请求。第一次请求需要从Facebook server的得到authorization token,在用户通过Facebook Connect登录之后, ActionScript 3.0 Lib会生成一个引用标识,以便在后来的对Facebook api引用中使用。更多信息参考前面讨论过的Flash iFrame application

6. Facebook server在app server请求时返回XML或JSON格式的数据, app处理数据。

7. 如果需要存储数据或与后台做其他交互,在AS代码中使用RPC(HTTP, web service或Flash Remoting requests)。速度最快并且代价也最小的方式是Flash Remoting requests, 它使用 Action Message Format (AMF)二进制格式在server和Flash之间传输数据。

8. 如果app server需要和Facebook继续交互,继续交互。

9. app server继续处理Facebook返回的数据。

10. app server向Flash内容返回数据。图5使用了Flash Remoting及AMF交换数据,还可使用web services及SOAP, HTTP services和text或XML。

overriding-default-mx-managers(翻译)

参考地址:

http://segfaultlabs.com/blog/post/overriding-default-mx-managers

PROBLEM SUMMARY

在Flex/AIR程序中自定义各种managers ,比如改变PopUpManager弹出窗口的方式。

SOLUTION SUMMARY

文章将介绍怎样在Application启动时改变标准的manager的实现方式,而不改变managers的正常用法(在程序中我们依然使用mx.managers.*包下的类)。我们也不用为改变某个manager类而重构所有的代码。

EXPLANATION

一般的做法是自定义manager类并在使用manager时使用自定义的类而不是默认的manager类。拿PopUpManager举例,如果想自定义addPopup方法,一般做法是新建一个类,比如叫PopManager,之后在该使用PopUpManager类时使用PopManager类。这样我们只需继承默认的manager类,并调用默认类的所有方法,而不用重构所有的代码。

在进一步的讨论中,我们还是拿PopUpManager举例。PopUpManager所有的公开方法都是静态的,在其内部,它使用mx.core.PopUpManagerImpl(实现了IPopUpManager接口)的实例处理各种弹出窗口。实现类存储在mx.core.Singleton类中。所有的managers类的实现类都在程序启动时由SystemManager在mx.core.Singleton注册,一个manager类只能有一种实现类。mx.core.Singleton使用registerClass方法来注册这些单实例的实现类。注册的原则是使用先注册的类(first in wins),之后注册的类将被忽略。所以如果我们想使用自定义的manager类,必须在SystemManager注册默认的类之前行动。SystemManager的注册过程在SystemManager.mx_internal::docFrameHandler方法中实现,该方法在Application实例化之前被调用。

最好的(看起来也是唯一的)重写框架manager类实现的方法就是实现IPreloaderDisplay接口,使用该接口注册自定义的manager类。IPreloaderDisplay接口的实现类DownloadProgressBar用于在 Flex/AIR程序加载时显示进度条。我们可以使用Application的preloader属性重新为它赋值。SystemManager会在注册manager实现类之前创建和实例化Preloader,因此我们重写IPreloaderDisplay接口的initialize方法。

package my.domain {
 public class MyPreloader extends DownloadProgressBar
 {
   override public function initialize():void
   {
     super.initalize();
     Singleton.registerClass("mx.core.IPopUpManager",
                             Class( my.domain.managers.MyPopUpManager ) );
   };
 } 
}

现在调用PopUpManager的静态方法时就会调用自定义的IPopUpManager实现类的方法,下面是例子,

package my.domain.managers {
  public function MyPopUpManager extends PopUpManagerImpl
 {
   private var instance : IPopUpManager;

   static public function getInstance():IPopUpManager
   {
       if ( !instance ) instance = new MyPopUpManager();
     return instance;
   };

   override public function addPopUp( ... ):void
   {
     super.addPopUp(...);
    /* custom code */
   }

 }
}

注意自定义类需实现getInstance静态方法,该方法会在Singleton注册时调用。使用同样的方法,下列manager类也可以重写(但不是所有的manager都可以重写)。
BrowserManager
CursorManager
HistoryManager
LayoutManager
ToolTipManager
DragManager

例子

declare members for dynamic class(翻译)

参考地址:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=13066

PROBLEM SUMMARY
需要为动态的类(dynamic class)声明属性,但有可能与类本身内建的属性冲突

SOLUTION SUMMARY
在自定义的命名空间(custom namespace)中声明新成员。

EXPLANATION
动态类(dynamic class)允许使用在运行时为其添加属性和方法,这样新添的成员就可能与类内建的成员发生冲突。
比如:
package{
      import flash.display.Sprite;
      public dynamic class DynamicObject extends Sprite{
            public function DynamicObject():void{
                  super();
            }
            public function someName():void{
                  trace(‘method’);
            }
      }
}
我们不能再给DynamicObject类添加”someName”属性。下面的代码会引起编译错误”1168: Illegal assignment to function someName. “
var obj:Object = new DynamicObject();
obj.someName = “value”;

如果使用namespace,问题迎刃而解。
member_ns.as
package {
      public namespace member_ns = ‘urn:some-uri’;
}

DynamicObject.as
package{
      import flash.display.Sprite;
      public dynamic class DynamicObject extends Sprite{
            public function DynamicObject():void{
                  super();
            }
            member_ns var property:Boolean = true;
            member_ns function someName():void{
                  trace(‘method’);
            }
      }
}
可通过namespace访问这些方法,只需要指明所要引用的成员对象的namespace:
var object:DynamicObject = new DynamicObject();
object.someName = “value”;
object.member_ns::someName(); // method
      trace(object.member_ns::property); // true

这一招在写Proxy子类的时很管用。

flash fbml facebook application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_05.html#swf_fbml

除了在iframe中嵌入Flash app外,我们还可以使用FBML的<fb:swf>标签将Flash包含在FBML app中。使用FBML app的好处就是我们更简单的构建app,只需要向Facebook server返回FBML(Facebook server会解析FBML标签). 坏处是用于显示和用于逻辑的代码会出现在很多地方,如swf文件,app server page中以及返回给Facebook server的FBML中,这样会使代码很凌乱不好维护。参考Comparing iFrame and FBML Flash Facebook applications 获取更多信息。


图 4. A Flash FBML Facebook application

1. 用户在Facebook上请求app; 浏览器向Facebook server发出请求。

2. Facebook server向app server发出请求, 请求一般由app server page处理(PHP,ColdFusion或JSP).Session信息会随着POST URL(与iframe的GET URL相反)发送给app server。

3. app server page引用数据库或其他需要的服务, 包括Facebook的REST API. 
和iframe一样server-side页面使用library引用Facebook API以及生成引用标识。因为是通过Facebook server代理,所以在返回用户浏览器之前,和iframe app的过程不同(先由iframe app向Facebook server发送请求,Facebook server返回给iframe app,再由iframe app返回给浏览器)FBML直接请求Facebook server,然后Facebook server直接返回到浏览器。
FBML中有很多组件,如fb:name可以取得用户姓名,fb:profilepic可以取得头像等等。我们可以在app server中直接返回这些FBML标签,Facebook server会将它们解析成HTML/JS返回给浏览器.但有时我们却不得不自己引用某个api,比如取得好友生日,因为没有有类似功能的FBML标签。

4. Facebook server向app server返回XML或JSON格式的数据。

5. app server向Facebook server返回包含了HTML/JS和FBML标签的页面。

6. Facebook server返回解析之后的HTML/JS页面,其中包括了由<fb:swf>标签指定的swf的引用。

7. 浏览器再次发出请求,请求嵌入的swf文件。

8. app server返回swf文件。

当用户与app交互时,会发生以下事情:

1. 使用ActionScript 3.0 Library直接引用Facebook server API(9-10步)。

2. 如果想存储数据或其他与后台交互的工作,我们可以在AS代码使用RPC调用app server(9,10步)。基于Flex构建的flash平台包含有 HTTP, web service以及Flash Remoting requests。速度最快代价也最小的方式是Flash Remoting,它使用 Action Message Format (AMF)二进制格式在server和Flash之间传输数据。图中没显示的还包括app server直接引用Facebook server API。