FLEX中使用AS动态创建DataGrid

2010-2-6 评论(2) 分类:技术文章 Tags:

初学FLEX时,需要在AS里动态生成DataGrid,结果搞了很久才搞明白怎么把用MXML写出来的DataGrid改成用AS写出来,其中最主要的就是自定义itemEditor、itemRender怎么写,写篇东西整理总结下。

先看看下面这段代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.DataGrid;
			import mx.events.ListEvent;
			[Bindable]
			private var dgDataArr:Array = [{name: "Jon", job: "officer"},
									  {name: "James", job: "seller"},
									  {name: "Jodon", job: "manager"}];

			private function itemClickHandler(e:ListEvent):void
			{
				trace(e.target);
			}

		]]>
	</mx:Script>
	<mx:Component id="comboboxEditor">
		<mx:ComboBox dataProvider="{dt}" editable="true">
			<mx:Script>
				<![CDATA[
					private var dt:Array = ["officer", "seller", "manager"];
				]]>
			</mx:Script>
		</mx:ComboBox>
    </mx:Component>
	<mx:DataGrid width="100%" x="10" y="20" fontSize="14" dataProvider="{dgDataArr}" editable="true" itemClick="itemClickHandler(event)">
		<mx:columns>
			<mx:DataGridColumn dataField="name" editable="false" />
			<mx:DataGridColumn dataField="job" itemEditor="{comboboxEditor}">
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

代码实现的是创建一个DataGrid,其中job栏可以编辑,并且编辑器是自定义的一个ComboBox。效果如下:

现在看怎么用AS代替MXML创建同样的DataGrid。
(更多…)

FLASH绘图板

2010-1-29 评论(6) 分类:作品 Tags:

发个绘图板,算是这学期图形学的作业,另外给一个项目用,绘制树形图标后通过php输出图片。

这是用flash builder 4做的,主要是想尝尝鲜,好像我都比较喜欢尝鲜的,做AIR账本的时候AIR刚刚出现没什么资料,这次也是,FB4 beta版刚出不久,没什么资料,里面关于皮肤的东西官方帮助又说得不明不白,有点蒙着做这个东西。觉得做个画板挺有趣的,可以练练面向对象编程,因为里面要用到继承的东西不少。

其中花功夫比较大的就是那个文本生成和选择工具上,当时找了半天才摸索到去除textinput边框和背景的方法。选择工具则是牵涉到整个画板了,都得在开始做之前就想好,目前的功能是鼠标移到元素上会选中那个元素,加红色边框,用选择工具画个矩形可以圈选多个元素,对多个元素一起进行编辑,拖动其中一个其他也会跟着动,记得当时这个比较折腾人~FLASH不支持多对象拖动,需要自己通过mousemove事件写,但如果是在某个容器上绑定 mousemove,鼠标移动过快的话就不会响应,得把事件绑定到外层的整个大容器里才行,反正一番折腾,结果现在貌似还正常~有没有潜在bug就不知道了~~开发过程中其他的事都不记得了,本来想做好工具栏皮肤的,但后来没精力没动力去做了,就先不做了~仅是习作~

效果:http://bangswork.googlecode.com/svn/trunk/drawing/bin-debug/flowchart.html
源码:http://code.google.com/p/bangswork/source/browse/trunk/#trunk/drawing

[AIR]AIR程序外观透明效果教程

2008-4-30 评论(4) 分类:技术文章 Tags:

之前做完AIR账本程序的时候就想分享一下制作AIR的一些~~技巧吧~~因为网上有关AIR的教程实在太少。但后来没激情了,就罢了。今天一位网 友问我怎样把AIR的外观制作成我那种不规则形状的有点半透明的效果的。嗯~反正有空,就写个详细制作过程吧~~我是用FLEX3做的,至于在FLASH 里怎么做我就不知道了~~没试过~~~第一次写教程,难免表达等方面会有些问题,这个BLOG又不能插图,所以只有文字,不能图文并茂,看起来该会痛苦 点~~凑合着看吧。。

一、基础

打开FLEX3 新建一个AIR工程:File-New-Flex Project

输入工程名   在Application type处选择 Desktop application(runs in Adobe AIR)  直接点finish

打开这个工程所在的文件夹,默认是:我的文档/Flex Builder 3/工程名

打开src文件夹 拖张有透明效果的PNG图片进去。

因为不知道怎么直接在FLEX的工程面板里直接添加文件,所以我直接跑到文件夹去添加,知道的人知会一声啊~~~

接下来插入这张图片,在<mx:Application>标签内插入<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>

bg1.png是刚才那张PNG图片的文件名。

按CTRL+F11看下,图片是插入了 但有窗口 不透明,接下来就去掉窗口,让它透明。

二、透明

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”></mx:WindowedApplication>

改成<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”></mx:Application>

因为只要是WindowedApplication就会有窗口出现,貌似是这样。。

在此标签内加入

<mx:Style>
Application
{
background-color:””;
background-image:””;

}
</mx:Style>

打开跟example.mxml在同一目录下的example-app.xml,是个配置文件。

里 面可以设置的所有属性都列好了,只是很多都用<!–  –>注释掉了,按需求去掉注释添加属性。这里我们需要设置的是<initialWindow>里 的<systemChrome>、<transparent>和<visible>标签。去掉这三个标签的注释,在 这三个标签里分别输入none,true,true。结果就是这样:

<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>

也可以直接添加这三行到<initialWindow>标签里。

好 这时候按ctrl+F11看效果,已经是透明不规则窗体了。

三、拖动

但这窗体不能拖动,又没有关闭跟最小化按钮,现在我们来实现这些功能。

在mxml文件的<mx:Application>标签里插入如下语句:

<mx:scrīpt>
<![CDATA[
private function init():void{
bgImage.addEventListener(MouseEvent.MOUSE_DOWN, onStartMove)
}
//窗口最小化、关闭、拖动函数
public function minimizeWindow():void{
this.stage.nativeWindow.minimize();
}

public function closeWindow():void{
this.stage.nativeWindow.close();
}
public function onStartMove(event:MouseEvent):void{
this.stage.nativeWindow.startMove();
}
]]>
</mx:scrīpt>

再插入

<mx:Button click=”closeWindow();” x=”10″ label=”close” y=”10″  />
<mx:Button click=”minimizeWindow();” x=”100″ y=”10″ label=”min” />

<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>后面,插入到前面的话按钮会没有响应,因为图片的鼠标事件优先了。。

再为<mx:Application>标签添加一个属性:applicationComplete=”init();” 结果是这样:<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init();”>

代码很简单。程序运行完成的时候执行init()函数,函数里为bgImage就是刚才添加的png图片添加鼠标事件侦听,鼠标按下就开始移动。

下面两个按钮,不用多说~~基本功能就这样实现啦~~~

:完整example.mxml和example-app.xml代码:

example.mxml:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init();” width=”440″ height=”310″>
<mx:Style>
Application
{
background-color:””;
background-image:””;

}
</mx:Style>
<mx:scrīpt>
<![CDATA[
private function init():void{
bgImage.addEventListener(MouseEvent.MOUSE_DOWN, onStartMove)
}
//窗口最小化、关闭、拖动函数
public function minimizeWindow():void{
this.stage.nativeWindow.minimize();
}

public function closeWindow():void{
this.stage.nativeWindow.close();
}
public function onStartMove(event:MouseEvent):void{
this.stage.nativeWindow.startMove();
}
]]>
</mx:scrīpt>
<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>
<mx:Button click=”closeWindow();” x=”10″ label=”close” y=”10″  />
<mx:Button click=”minimizeWindow();” x=”100″ y=”10″ label=”min” />
</mx:Application>

example-app.xml:

<?xml version=”1.0″ encoding=”UTF-8″?>
<application xmlns=”http://ns.adobe.com/air/application/1.0″>
<id>example</id>
<filename>example</filename>
<name>example</name>
<version>v1</version>
<initialWindow>
<content>[This value will be overwritten by Flex Builder in the output app.xml]</content>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>

</initialWindow>
</application>

[AIR][开源]帐本程序

2008-2-12 评论(8) 分类:作品 Tags:

account

下载: account.air (595 KB) 使用本程序需要下载安装air runtime

源程序: account-source.zip (1.35M)

一直想为自己量身定做一个帐本,一直没有找到合适的做法,FLASH不支持写入文件,需要配合ASP等语言,用起来也麻烦,C++我也不熟,虽然它 能写入文件,但不知道用什么方式储存数据好。ADOBE AIR在上大学之前已经接触过了,不过仅是接触而已,最近偶然发现AIR可以写入文件,就动起了用它做个帐本软件的念头。做这个最大的困难就是国内实在没 什么资料,英文资料也挺少,遇到什么问题都搜不到答案,只能靠自己摸索,一直在啃英文帮助,头几天摸索file类就摸索了很久,摸索到几乎想放弃,不过后 来越写越顺,写得很爽。

这次跟以前做东西不同的是,我在还没写程序之前就把程序的流程写好了,考虑得还算挺周到,写程序的时候也增删了不少,这次注意了很多细节方面的 问题,所以,写了500多行代码~~~是我除了飞机游戏外写得最多的了。注释也写得挺多,应该比较容易看懂。有兴趣的可以下载源代码看看~~外观我模仿了 官方示例程序kuler,自我感觉外观做得挺不错~~有空我会写上用FLEX做AIR时的一些常见问题。