| Subcribe via RSS

Flex Custom Component LifeCycle

05月 6th, 2009 | 1 Comment | Posted in ActionScript3, Component, Flex3, LifeCycle, Tips Tricks

谈到Flex学习,大家都知道,其实Flex入门挺容易的,尤其是对其它面向对象语言像Java或C#比较熟悉的开发人员,直接阅读Flex的代码通常也没什么问题,但从另外一方面来说,要想深入学习Flex并灵活运用的话,其实并不那么容易,其中,对组件的生命周期(LifeCycle)的理解则是非常重要的一关,个人感觉的话,若充分理解并掌握了组件的生命周期才算真正Flex入门了:)

 

前段时间,与公司同事分享了一下自己对LifeCycle的经验,当时为了有助于宏观上理解整个Flex应用程序及组件的LifeCycle,自己画了两幅图,分享给大家,希望对大家有用~~~

点击小图可看完整的大图:)

【注】若大家要引用或转载的话,请注明出处,先谢谢了

applifecycle

lifecycle

设定程序用字体

03月 8th, 2009 | 1 Comment | Posted in Font

其实我自己一直用的默认的,对写程序用的字体倒并不在意,慢慢地,写程序多了,觉得看久了也有点烦,想换个字体,于在在网搜一路搜索,呵呵!根据自己的习惯选用下面的字体方案,呵呵

我的测试环境是在Windows XP + Eclipse 3.41

好的程序用字体需满足以下条件,摘自 Monospace/Fixed Width Programmer’s Fonts

Good Programming Font Criteria:

  • Crisp clear characters.
  • Extended characterset.
  • Good use of whitespace.
  • ‘l’, ‘1′ and ‘i’ are easily distinguished
  • ‘0′, ‘o’ and ‘O’ are easily distinguished
  • forward quotes from back quotes are easily distinguished -prefer mirrored appearance
  • Clear punctuation characters, especially braces, parenthesis and brackets

 

再来一篇各种字体在程序中的表现对比的文章:

http://www.codeproject.com/KB/work/FontSurvey.aspx

最终结论,在不同的环境要求下使用不同的字体:

在Mac上最佳字体:Monaco   14px   适合演讲,PPT

在Win上最佳字体:Consolas 14px

                         Fixedsys 12px

                         Bitstream Vera Sans Mono   10px 以下使用,此字体介绍与下载地址:http://www.gnome.org/fonts/

另外,若使用液晶显示器并在Windows下使用,可使用微软的clearType技术,调整让字体更加清晰好看,下面来张我调整后在Eclipse中的截图:

2009-03-08_010746

还不错吧

Tips and Tricks:让Text具有按钮的功用

01月 22nd, 2009 | No Comments | Posted in Flex3, Tips Tricks

通常我们用Button或LinkButton时,里面的Label文字不能换行(当然也可以,稍微要麻烦点),有些时候可以用Text组件来替代,但要让Text组件具有按钮的功能需注意两点:一是当鼠标移到Text上去时呈手势形状,二是鼠标滑入滑出时显示出不同的状态。其实也简单,不过也不是想像那么简单,呵呵。

 

看代码及效果:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   3:     layout="vertical"
   4:     backgroundColor="#CCCCCC"
   5:     creationComplete="init()">
   6: <mx:Script>
   7:     <![CDATA[
   8:         import mx.controls.textClasses.TextRange;
   9:         
  10:         private function init():void {
  11:             myText.text = "Welcome to my blog:" + "\n" +
  12:                             "www.jexchen.com";
  13:         }
  14:         
  15:         private function onRollOver():void {
  16:             var tr:TextRange = new TextRange(myText, false);
  17:             tr.color = 0xff3333;
  18:         }
  19:         
  20:         private function onRollOut():void {
  21:             var tr:TextRange = new TextRange(myText, false);
  22:             tr.color = 0×000000;
  23:         }
  24:     ]]>
  25: </mx:Script>
  26:     <mx:Text id="myText"
  27:         color="#003e7e"  
  28:         useHandCursor="true" buttonMode="true" mouseChildren="false" 
  29:         rollOver="onRollOver()"
  30:         rollOut="onRollOut()"/>
  31: </mx:Application>

点击查看效果:

http://www.jexchen.com/demo/handcursor/HandCusor.html

粗略看看时间到底花费在哪些地方了

01月 22nd, 2009 | No Comments | Posted in Personal

2009-01-22_173051

数据统计使用的是rescuetime,官方站点地址如下:

http://www.rescuetime.com/

BlazeDS与LCDS在功能上的对比

01月 20th, 2009 | No Comments | Posted in BlazeDS, LCDS

√ 代表此功能可用

Features

BlazeDS

LCDS

Data management Services    
Client-Server synchronization  
Conflict resolution  
Data paging  
SQL adapter  
Hibernate adapter  
Document Services    
LiveCycle remoting  
RIA-to-PDF conversion  
Enterprise-Class Flex application services    
Data access/remoting
Proxy service
Automated testing support  
Software clustering
Web tier compiler  
Enterprise Integration    
WSRP generation  
Ajax data services
Flex-Ajax bridge
Runtime configuration
Open adapter architecture
JMS adapter
Server-side component framework integration
ColdFusion integration  
Offline Application Support    
Offline data cache  
Local message queuing  
Real - Time Data    
Publish and Subscribe messaging
Real -time data quality of service  
RTMP tunneling  

 

该对比图来源于:

http://sujitreddyg.wordpress.com/2008/01/31/blazeds-and-lcds-feature-difference/

360Flex及Max2008 sessions

01月 20th, 2009 | No Comments | Posted in 360Flex, ActionScript3, Flex3, MAX2008, RIA, adobe

对于Flex/AIR/BlazeDS/LCDS学习者来说,360Flex及Max2008应该是大家都想参加的会议,但对于大部分人来说,仍是价格不菲,不过还好,最近的360Flex及MAX2008大会的技术演讲大部分均有视频记录,而且效果非常好,相信对大家来说是份不可多得的好资源~~~观看这些视频通常有下面几种方式:

直接通过Adobe.com官方站点访问在线观看:

MAX2008:

通过Adobe Media Player订阅观看,订阅地址如下:

MAX2008:

 

360Flex:

http://sessions.adobe.com/360FlexSJ2008/feed.xml

 

还可以通过以下iTunes地址进行观看:

MAX2008:

http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=299639895

最近接触的东西很多…好多还需要消化

01月 16th, 2009 | No Comments | Posted in Flex3, Personal, RIA, Tools

由于所在项目组做的是对公司未来非常重要的产品,加上目前在China这边的开发人员对产品架构和细节都不是特别了解,公司接连派NA和CANADA的同事过来为我们指点,学到了不少东西,有些属于知识掌握方面,有些属工具相关,由于花的时间也不够,好多都一知半解,需要一一消化,有些还需要深入,先将这些相关知识列下来,过段时间再来对比,看吸收掌握了多少,呵呵

Java相关:

Technology Stack:

  • JMS/ActiveMQ-Messaging
  • Spring – Configuration /Wiring
  • Log4J – Logging
  • AspectJ – Auditing, Performance Metrics
  • CXF – WebService
  • Hibernate – JPA

 

Tools

  • Subversion / Jira
  • Maven
  • Junit
  • Cruise Control
  • CheckStyle /Clover
  • Crucible

 

Flex相关:

  • Coding Standard
  • Flex + Blaze/LCDS + Java
  • FlexUnit
  • Flexcover
  • Cairngorm(Current) / Mate(Future)

关于[managed]、[transient]、[RemoteClass]的解释

01月 13th, 2009 | No Comments | Posted in Flex3

当在使用Flex并结合BlazeDS或LCDS进行企业应用开发时,经常会碰到[managed] [transient] [RemoteClass]这三个元标签(metadata tag)的使用,但似乎相关的文档很少([RemoteClass]稍微多点),通过一番搜索,找到了比较细致的解释,附上链接及相关原文,备查:

http://weblogs.macromedia.com/lin/archives/2007/02/how_to_get_sing.html

1. To represent a server-side Java object in a client application, you use the [RemoteClass(alias=" ")] metadata tag to create an ActionScript object that maps directly to the Java object. You specify the fully qualified class name of the Java class as the value of alias. This is the same technique that you use to map to Java objects when using RemoteObject components.

2. You can use the [RemoteClass] metadata tag without an alias if you do not map to a Java object on the server, but you do send back your object type from the server. Your ActionScript object is serialized to a Map object when it is sent to the server, but the object returned from the server to the clients is your original ActionScript type.

3. To create a managed association between client-side and server-side objects, you also use the [Managed] metadata tag or explicitly implement the mx.data.IManaged interface. The [Managed] metadata tag ensures that the managed Contact object supports the proper change events to propagate changes between the client-based object and the server-based object.

More info about this:

http://www.mail-archive.com/flexcoders@yahoogroups.com/msg57899.html

You could simply declare that a particular concrete property on your client type was "transient" using [Transient] metadata - these properties wouldn’t be included when instances were sent back to the server.

http://www.mail-archive.com/flexcoders@yahoogroups.com/msg38984.html

Try tagging the properties that you don’t want managed in your [Managed] AS class as [Transient]. This should prevent changes to them from being logged/committed.

怎样移除当前的Flex License

01月 4th, 2009 | No Comments | Posted in Flex3

当你购买了正版的Flex License后,或要从以前的Standard version升级到Pro版本(或者不小心以前输入过其它的Serial Number)…需要将以前的License移除,使得能输入新的License,则需要移除license.properties这样一个文件,路径如下:

Windows: %ALLUSERSPROFILE%\Application Data\Adobe\Flex\license.properties
Mac: /Library/Application Support/Adobe/Flex/license.properties

将此文件移除后,重新启动Flex Builder,Ok,可以输入新的正版SN了。

Flex+BlazeDS+Java初步:环境配置与“Hello,World”

12月 30th, 2008 | 4 Comments | Posted in BlazeDS, Flex3, LCDS, RIA

好久没更新文章了,问题多多的2008就要过去了,希望来年是个好兆头,大家都平平安安…

其实很早就接触过Flex BlazeDS Java结合使用,最初还用的是FDS(Flex Data Service,早已更名为LiveCycle Data Service),不过从来没实际在项目中用过,由于现在的做的产品主要就是在这个架构上运行,因此有必要重新学习学习。

Flex+LCDS(BlazeDS)+Java这种方式对大型的企业级相关应用是比较好的选择。

网上关于Flex + BlazeDS + Java的安装配置文章很多,大都是按照官方的方式,使用向导的方式来进行的,而且通常使用的是BlazeDS Turkey(集成了Tomcat的BlazeDS版本),而且使用了WTP(Web Tools Platform的简称,允许开发人员在Eclipse下开J2EE Web应用),虽然配置比较简单,但由于采用向导的方式,实际上并不灵活,通过实践,推荐下面一种比较灵活的方式 ^_^我会将我在安装配置的过程遇到的常见问题一并指出,我自己做个记录,大家也可少走点弯路

我用的软件环境:

JDK 1.6

Eclipse 3.4.1

Flex 3 plugin for Eclipse (升级到Flex 3.0.214193,Flex SDK为3.2)

Sysdeo Eclipse Tomcat Launcher plugin (一款Eclipse下的Tocamt插件)

Tomcat6.0.13 (我用的是zip包,直接解压就用)

BlazeDS (我下载的是 blazeds-bin-3.2.0.3978.zip)

其中Tomcat的插件下载地址为:http://www.eclipsetotale.com/tomcatPlugin.html#A1 其它的相关软件大家应该都知道。

安装:

上面的所有工具安装都很简单,注意安装后请配置好JDK与Tomcat的环境变量,BlazeDS这里不需安装,下面讲 Hello World再说怎么使用。

Tomcat Launcher plugin插件安装好后,在eclipse中配置如下:

2008-12-30_150727

然后一步一步来创建Hello World:

先看一下完成后的项目结构图:

2008-12-30_171420

一、创建Java项目:

选择new->Java Project创建一个普通Java项目,其中注意的是为了与flex源文件目录区分,将java项目的源文件目录自定义为javasrc,并设定java class默认的输出目录,如下图:

2008-12-30_153522

(创建完成后可将本身的src目录删掉)

创建一简单的HelloWorldService类,用来当Flex端通过BlazeDS以RemoteObject的方式直接访问,SimpleService.java内容很简单,如下:

   1: package com.jexchen.blazeds;
   2:
   3: public class HelloWorldService {
   4:     public String sayHello(String str) {
   5:         return “Hello, “ + str;
   6:     }
   7: }

将blazeds-bin-3.2.0.3978.zip解压,得到flex.war, war其实就是一打包文件,使用解压软件将其解压,得到META-INF与WEB-INF两个目录,将WEB-INF目录下的flex、lib目录及web.xml文件复制到当前应用程序的WEB-INF目录下,在HelloBlazeDS项目上点右键,刷新,这时eclipse中HelloBlazeDS项目目录结构如下图所示:

2008-12-30_154523

二、为当前Java项目增添Flex Project支持

在HelloBlazeDS项目上点击右键,选Flex Project Nature –> Add Flex Project Nature如下图:

2008-12-30_155726

不选任何服务器支持,呆会手动配置:

2008-12-30_160010

指定Flex的编译生成目录至WEB-INF\flex,其中flex目录为新创建的:

2008-12-30_160036

按提示,切换到Flex视图,这时会报一个错误

2008-12-30_160413

在错误提示信息上点击右键,选择Recreate HTML Templates,为生成的swf重建HTML模板。

三、增添Tomcat服务器支持

在HelloBlazeDS项目上点击右键,选择Properties,打开的配置面板中选择Tomcat,设置参数如下:

2008-12-30_160950

完成设置。

(你会发现在我的d:\tomcat6.0.13\conf\Catalina\localhost\目录下生成了名为hello.xml的文件,生成该文件的目的就是为HelloBlazeDS项目在Tomcat下配置了一个独立的Context,这样就不必将文件布署到Tomcat的webapps下去了。

四、完成BlazeDS配置并创建Flex客户端程序

编辑WEB-INF\flex\remoting-config.xml文件,增添下面的语句:

   1: <destination id=”helloservice”>
   2:     <properties>
   3:         <source>com.jexchen.blazeds.HelloWorldService</source>
   4:     </properties>
   5: </destination>

在src下创建Flex应用程序HelloBlazeDS.mxml (MXML Application类型),代码如下:

   1: <?xml version=”1.0″ encoding=”utf-8″?>
   2: <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
   3: <mx:Script>
   4:     <![CDATA[
   5:         import mx.controls.Alert;
   6:         private function onCall():void {
   7:
   8:             myService.sayHello(nameInput.text);
   9:         }
  10:     ]]>
  11: </mx:Script>
  12: <mx:RemoteObject id=”myService” destination=”helloservice” endpoint=”http://localhost:8080/hello/messagebroker/amf” />
  13:     <mx:TextInput id=”nameInput” />
  14:     <mx:Button label=”Call” click=”onCall()”/>
  15:
  16:     <mx:TextArea text=”{myService.sayHello.lastResult}” />
  17: </mx:Application>

需要注意的是Flex compiler的参数设置,我们这种完全手动配置的情况尤其需要注意,下面是我的参数配置,具体含义请查看相关资料:)

-context-root “webRoot” -services “e:/workspace/javaeeworkspace/HelloBlazeDS/webRoot/WEB-INF/flex/services-config.xml” -locale en_US

ok,现在可以点击工具栏上的小猫图标,启动Tomcat了,在浏览器输入以下地址:

http://localhost:8080/hello/flex/HelloBlazeDS.html

运行运行~~~效果如下:

2008-12-30_164501