最近一直在做有关JSP开发的网站,重复的登陆验证页面,重复的语法以及重复的跳转页面,熟悉的不能再熟悉的struts构建流程。
做项目的期间,还自己学习了HIBERNATE,ajax,等等
所以在写JSP代码的同时,也考虑到了JSP可以不可以和特效结合起来,于是在工作完成的时候,自己会去看一些flex的东西,很有好的界面,很炫的组件,真是被flex所深深吸引。
1. Flex结合tomcat
Flex只是个运行库或者说是web application,用来处理mxml类型的文件,其运行库就是Flex.war,所以它可以部署到任何一个兼容的jsp服务器上:比如 Tomcat, weblogic、websphere、Jrun,Jboss等,而Coldfusion目前也是运行库或者说是web application,用来处理cfml类型的文件,其运行库就是cfusion.war,所谓standalone版本的coldfusion只是把 jrun和cfusion.war一起打包安装而已,所以就没有Flex和Coldfusion结合之说了。
所以要想tomcat做flex的服务器,很简单的说安装完Flex Dada Services,目前名字叫Adobe_LiveCycle_Data_Services,我本人安装的版本是(Adobe_LiveCycle_Data_Services_ES_2.5.1)
需要的话可以共享给大家,你也可以自己去下载,下载完不用去找序列号,因为我差了半天也没查到,默认可以有60天的试用期。
下一步需要做的就是把flex项目下的flex.war和samples.war拷贝到tomcat下的webapp目录里,考完后,tomcat会自动部署文件,不需操作,这样输入项目路径 : http://localhost:8080/samples 就可以看到里面的flex程序了,就是这么简单。
2.FLEX结合JSP
其实flex里夹杂了ajax异步调用的技术,因为本身ACTIONSCRIPT就和JAVASCRIPT有着异曲同工之妙。我做了一个例子是参考手册上面的,不过自己改了一下,大概的程序就是这样的,首页当然是flex服务器来解析hxml,然后后台通过jsp文件交互数据库,然后把数据动态的封装成xml格式,最后在把xml标签与flex程序绑定在一起,就可以了。 这样当运行flex前端程序的时候,后台就会把绑定好的数据显示到了flex的组件里,看起来很有成就感。哈哈。。。。。。
我的mxml代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()" backgroundGradientColors="[#000000, #000000]">
<mx:HTTPService id="feedRequest" url="http://localhost:8080/test/index.jsp" useProxy="false">
<mx:request xmlns="">
<directory>{test.text}</directory>
</mx:request>
</mx:HTTPService>
<mx:Panel id="blog" width="359" height="520" title="{feedRequest.lastResult.rss.channel.title}" verticalCenter="188.5" horizontalCenter="179">
<mx:DataGrid id="dgPosts" dataProvider="{feedRequest.lastResult.rss.channel.item}" width="340" height="167">
<mx:columns>
<mx:DataGridColumn headerText="题目" dataField="title"/>
<mx:DataGridColumn headerText="路径" dataField="url"/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea width="388" height="129" htmlText="{dgPosts.selectedItem.description}"/>
<mx:LinkButton label="查看详细" click="navigateToURL(new URLRequest(dgPosts.selectedItem.url));"/>
<mx:Label text="选择ID号" />
<mx:TextInput id="test" width="115" height="23"/>
<mx:Label text="{test.text}" />
<mx:Button label="登陆" id="Submit" click="feedRequest.send();"/>
</mx:Panel>
<mx:Image width="717" height="151" top="31" horizontalCenter="0">
<mx:source>file:///C|/Documents and Settings/Administrator/桌面/banner.gif</mx:source>
</mx:Image>
<mx:MenuBar x="188" y="203" width="539" height="45"></mx:MenuBar>
</mx:Application>
注释:
(1).application里creationComplete="feedRequest.send()" 这一属性是每次程序运行时,调用httpservice 里的Send()方法,在这个程序里实际上是请求http://localhost:8080/test/index.jsp,
把得到的数据以xml形式返回,把内容绑定到DataGrid 的组件上,flex是这样来绑定的:
(2).dataProvider="{feedRequest.lastResult.rss.channel.item}" 此句的语法,应该是,得到最后的返回结果,按照rss,channel,item此三层标签去绑定所遍历的数据,
<mx:columns>
<mx:DataGridColumn headerText="题目" dataField="title"/>
<mx:DataGridColumn headerText="路径" dataField="url"/>
</mx:columns>
以上代码就是创建分别叫题目和路径的2个列,title和url即为遍历出来的信息源标签。
(3).click="navigateToURL(new URLRequest(dgPosts.selectedItem.url));" linkbutton的属性,强调一点的是dgPosts是datagrid中所产生的选项,而navigateToURL(new URLRequest(url))此句就是另外打开一个url。
3. Flex 和数据库MYSQL(目前公司用的MYSQL)
这个时候可能有的人要问了,flex如何传值呢? 后台怎么接收有FLEX界面提交的值呢?
带着这个问题,让我们进入下个简单的程序:
先写一个简单的flex组件,代码如下
<mx:Label x="10" y="10" text="用户名" id="label1"/>
<mx:TextInput x="53" y="8" id="username"/>
<mx:Label x="10" y="66" text="密码" id="label2"/>
<mx:TextInput x="55" y="64" id="password" displayAsPassword="true"/>
<mx:Button x="55" y="113" label="登陆" id="Submit" click="login_user.send();"/>
这就是一个基本的用户交互界面,做完特效可以变成如下界面:
这个时候需要注意的是数据绑定,
数据的绑定也是通过FLEX标签来定义的。。
<mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://localhost:8080/test/MyJsp.jsp" useProxy="false">
<mx:request xmlns="">
<username>
{username.text}
</username>
<password>
{password.text}
</password>
</mx:request>
</mx:HTTPService>
这个代码说明了,我本地项目的MyJsp.jsp会去接受此控件传过来的值,之前我测试是否接收到了FLEX传值的时候,是这样测试的 :
在MyJsp.jsp页面打印
<% out.println(“success”); %>
结果半天就没看到jsp页面输出成功信息。
后来经过MSN里探讨,原来flex本身就有着异步调用的过程,所以它不会显示JSP页面的内容,
呵呵,,原来是这样,,浪费我半天的时间,还以为程序错误呢。。很感谢他。。
这样以来,我在jsp页面 直接打印
<% System.out.println(username); %>
<% System.out.println(password); %>
这样在后台就打印出来了 username 和 password;
所以,可以得到了flex 页面传来的数据,这样后台就完全可以用 jsp 或者 struts 等来实现和数据库的交互过程。
看来flex入门真是不容易啊。。如果没有人引路,估计我还自己停留在某一个地方,原地不动呢,
所以总体看来,程序都是相同的,高人的指点也是必须的,呵呵
以上内容都是我自己总结的,希望能相互学习。。呵呵
4. flex 和 xml
以下内容 是我查资料时候看到的,代码可以直接用,很快捷。。。。。。。
其实很久以前我就有过用Flash动态生成xml菜单的想法,可是…(种种原因)…没实现,当时非常不甘心。
现在有Flex了,我又想把xml菜单做一下,昨天搞了一天,终于小有成果,就来和大家分享一下,我认为代码其实写的不好,因为我是从网上七拼八凑拿来的代码,好的是一种思路,‘拖动式的思路’(暂且用这个词吧)
代码说明:主要代码段都在Panel组件里,而在Panel里Tree的作用 举足轻重,Tree的功能很强大,在内部就拖动根节点和叶节点,任意拖动节点就免去了代码实现节点们顺序的问题,我当时就被它这点折服了,还又个垃圾箱, 你可以将根节点或叶节点拖到垃圾箱里,这样也免去了删除节点的麻烦,我其实就只完成了个增加节点的功能,并且还只是在最后增加节点(不过由于其天生可拖动 性,我这样就完全可以了,你可以把生成的最后节点拖到想要的位置啊!!)。好了,我也不多说了,取之于网民,给之于网民,代码和大体效果下面都有,(里面 又很多效果,希望你都理解!毕竟flex太强大了)Enjoy it!!
<?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.XMLListCollection;
[Bindable]
var companyList:XMLListCollection=new XMLListCollection();
private function addFolder():void
{
var newNode:XML = <node label="单击此处修改" url="" isBranch="true">
<node label="单击此处修改" url=""/>
</node>;
companyList.addItem(newNode);
}
private function addLeaf():void
{
var newNode:XML =<node label="单击此处修改" url=""/>
companyList.addItem(newNode);
}
]]>
</mx:Script>
<mx:Panel id="panel" width="500" height="450" layout="absolute" horizontalCenter="-1" verticalCenter="0" title="修改Lebel">
<mx:Tree id="XmlTree" width="282" height="223" x="0" showRoot="false" editable="true"
dataProvider="{companyList}" labelField="@label" dragEnabled="true" dropEnabled="true"/>
<mx:Tree id="DirtyTree" width="75" height="25" x="302" showRoot="false" dropEnabled="true" y="198"/>
<mx:Button x="96" y="231" label="Creater Xml"
click="txt.text=''+XmlTree.dataProvider;menu.dataProvider=XmlTree.dataProvider;menu.labelField='@label'"/>
<mx:TextArea id="txt" x="0" y="261" width="100%" height="127"/>
<mx:Button x="290" y="71" label="Add Folder" click="addFolder()" width="97"/>
<mx:Button x="290" y="118" label="Add Leaf" width="97" click="addLeaf()"/>
<mx:ComboBox x="290" y="19" id="cobox"
dataProvider="{[{label:'修改Label', data:'@label'}, {label:'修改Url', data:'@url'}]}"
change="XmlTree.labelField=cobox.selectedItem.data;panel.title=cobox.selectedLabel">
</mx:ComboBox>
<mx:Label x="324" y="172" text="垃圾箱" width="35" textAlign="center"/>
</mx:Panel>
<mx:MenuBar id="menu" y="97" horizontalCenter="0">
</mx:MenuBar>
</mx:Application>
因为不是我写的,所以没有注释,关键是体会到了Flex强大,不过是就太占资源了,哎,,,如果有两全其美的本法该有多好啊。。。。
做项目的期间,还自己学习了HIBERNATE,ajax,等等
所以在写JSP代码的同时,也考虑到了JSP可以不可以和特效结合起来,于是在工作完成的时候,自己会去看一些flex的东西,很有好的界面,很炫的组件,真是被flex所深深吸引。
1. Flex结合tomcat
Flex只是个运行库或者说是web application,用来处理mxml类型的文件,其运行库就是Flex.war,所以它可以部署到任何一个兼容的jsp服务器上:比如 Tomcat, weblogic、websphere、Jrun,Jboss等,而Coldfusion目前也是运行库或者说是web application,用来处理cfml类型的文件,其运行库就是cfusion.war,所谓standalone版本的coldfusion只是把 jrun和cfusion.war一起打包安装而已,所以就没有Flex和Coldfusion结合之说了。
所以要想tomcat做flex的服务器,很简单的说安装完Flex Dada Services,目前名字叫Adobe_LiveCycle_Data_Services,我本人安装的版本是(Adobe_LiveCycle_Data_Services_ES_2.5.1)
需要的话可以共享给大家,你也可以自己去下载,下载完不用去找序列号,因为我差了半天也没查到,默认可以有60天的试用期。
下一步需要做的就是把flex项目下的flex.war和samples.war拷贝到tomcat下的webapp目录里,考完后,tomcat会自动部署文件,不需操作,这样输入项目路径 : http://localhost:8080/samples 就可以看到里面的flex程序了,就是这么简单。
2.FLEX结合JSP
其实flex里夹杂了ajax异步调用的技术,因为本身ACTIONSCRIPT就和JAVASCRIPT有着异曲同工之妙。我做了一个例子是参考手册上面的,不过自己改了一下,大概的程序就是这样的,首页当然是flex服务器来解析hxml,然后后台通过jsp文件交互数据库,然后把数据动态的封装成xml格式,最后在把xml标签与flex程序绑定在一起,就可以了。 这样当运行flex前端程序的时候,后台就会把绑定好的数据显示到了flex的组件里,看起来很有成就感。哈哈。。。。。。
我的mxml代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()" backgroundGradientColors="[#000000, #000000]">
<mx:HTTPService id="feedRequest" url="http://localhost:8080/test/index.jsp" useProxy="false">
<mx:request xmlns="">
<directory>{test.text}</directory>
</mx:request>
</mx:HTTPService>
<mx:Panel id="blog" width="359" height="520" title="{feedRequest.lastResult.rss.channel.title}" verticalCenter="188.5" horizontalCenter="179">
<mx:DataGrid id="dgPosts" dataProvider="{feedRequest.lastResult.rss.channel.item}" width="340" height="167">
<mx:columns>
<mx:DataGridColumn headerText="题目" dataField="title"/>
<mx:DataGridColumn headerText="路径" dataField="url"/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea width="388" height="129" htmlText="{dgPosts.selectedItem.description}"/>
<mx:LinkButton label="查看详细" click="navigateToURL(new URLRequest(dgPosts.selectedItem.url));"/>
<mx:Label text="选择ID号" />
<mx:TextInput id="test" width="115" height="23"/>
<mx:Label text="{test.text}" />
<mx:Button label="登陆" id="Submit" click="feedRequest.send();"/>
</mx:Panel>
<mx:Image width="717" height="151" top="31" horizontalCenter="0">
<mx:source>file:///C|/Documents and Settings/Administrator/桌面/banner.gif</mx:source>
</mx:Image>
<mx:MenuBar x="188" y="203" width="539" height="45"></mx:MenuBar>
</mx:Application>
注释:
(1).application里creationComplete="feedRequest.send()" 这一属性是每次程序运行时,调用httpservice 里的Send()方法,在这个程序里实际上是请求http://localhost:8080/test/index.jsp,
把得到的数据以xml形式返回,把内容绑定到DataGrid 的组件上,flex是这样来绑定的:
(2).dataProvider="{feedRequest.lastResult.rss.channel.item}" 此句的语法,应该是,得到最后的返回结果,按照rss,channel,item此三层标签去绑定所遍历的数据,
<mx:columns>
<mx:DataGridColumn headerText="题目" dataField="title"/>
<mx:DataGridColumn headerText="路径" dataField="url"/>
</mx:columns>
以上代码就是创建分别叫题目和路径的2个列,title和url即为遍历出来的信息源标签。
(3).click="navigateToURL(new URLRequest(dgPosts.selectedItem.url));" linkbutton的属性,强调一点的是dgPosts是datagrid中所产生的选项,而navigateToURL(new URLRequest(url))此句就是另外打开一个url。
3. Flex 和数据库MYSQL(目前公司用的MYSQL)
这个时候可能有的人要问了,flex如何传值呢? 后台怎么接收有FLEX界面提交的值呢?
带着这个问题,让我们进入下个简单的程序:
先写一个简单的flex组件,代码如下
<mx:Label x="10" y="10" text="用户名" id="label1"/>
<mx:TextInput x="53" y="8" id="username"/>
<mx:Label x="10" y="66" text="密码" id="label2"/>
<mx:TextInput x="55" y="64" id="password" displayAsPassword="true"/>
<mx:Button x="55" y="113" label="登陆" id="Submit" click="login_user.send();"/>
这就是一个基本的用户交互界面,做完特效可以变成如下界面:
这个时候需要注意的是数据绑定,
数据的绑定也是通过FLEX标签来定义的。。
<mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://localhost:8080/test/MyJsp.jsp" useProxy="false">
<mx:request xmlns="">
<username>
{username.text}
</username>
<password>
{password.text}
</password>
</mx:request>
</mx:HTTPService>
这个代码说明了,我本地项目的MyJsp.jsp会去接受此控件传过来的值,之前我测试是否接收到了FLEX传值的时候,是这样测试的 :
在MyJsp.jsp页面打印
<% out.println(“success”); %>
结果半天就没看到jsp页面输出成功信息。
后来经过MSN里探讨,原来flex本身就有着异步调用的过程,所以它不会显示JSP页面的内容,
呵呵,,原来是这样,,浪费我半天的时间,还以为程序错误呢。。很感谢他。。
这样以来,我在jsp页面 直接打印
<% System.out.println(username); %>
<% System.out.println(password); %>
这样在后台就打印出来了 username 和 password;
所以,可以得到了flex 页面传来的数据,这样后台就完全可以用 jsp 或者 struts 等来实现和数据库的交互过程。
看来flex入门真是不容易啊。。如果没有人引路,估计我还自己停留在某一个地方,原地不动呢,
所以总体看来,程序都是相同的,高人的指点也是必须的,呵呵
以上内容都是我自己总结的,希望能相互学习。。呵呵
4. flex 和 xml
以下内容 是我查资料时候看到的,代码可以直接用,很快捷。。。。。。。
其实很久以前我就有过用Flash动态生成xml菜单的想法,可是…(种种原因)…没实现,当时非常不甘心。
现在有Flex了,我又想把xml菜单做一下,昨天搞了一天,终于小有成果,就来和大家分享一下,我认为代码其实写的不好,因为我是从网上七拼八凑拿来的代码,好的是一种思路,‘拖动式的思路’(暂且用这个词吧)
代码说明:主要代码段都在Panel组件里,而在Panel里Tree的作用 举足轻重,Tree的功能很强大,在内部就拖动根节点和叶节点,任意拖动节点就免去了代码实现节点们顺序的问题,我当时就被它这点折服了,还又个垃圾箱, 你可以将根节点或叶节点拖到垃圾箱里,这样也免去了删除节点的麻烦,我其实就只完成了个增加节点的功能,并且还只是在最后增加节点(不过由于其天生可拖动 性,我这样就完全可以了,你可以把生成的最后节点拖到想要的位置啊!!)。好了,我也不多说了,取之于网民,给之于网民,代码和大体效果下面都有,(里面 又很多效果,希望你都理解!毕竟flex太强大了)Enjoy it!!
<?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.XMLListCollection;
[Bindable]
var companyList:XMLListCollection=new XMLListCollection();
private function addFolder():void
{
var newNode:XML = <node label="单击此处修改" url="" isBranch="true">
<node label="单击此处修改" url=""/>
</node>;
companyList.addItem(newNode);
}
private function addLeaf():void
{
var newNode:XML =<node label="单击此处修改" url=""/>
companyList.addItem(newNode);
}
]]>
</mx:Script>
<mx:Panel id="panel" width="500" height="450" layout="absolute" horizontalCenter="-1" verticalCenter="0" title="修改Lebel">
<mx:Tree id="XmlTree" width="282" height="223" x="0" showRoot="false" editable="true"
dataProvider="{companyList}" labelField="@label" dragEnabled="true" dropEnabled="true"/>
<mx:Tree id="DirtyTree" width="75" height="25" x="302" showRoot="false" dropEnabled="true" y="198"/>
<mx:Button x="96" y="231" label="Creater Xml"
click="txt.text=''+XmlTree.dataProvider;menu.dataProvider=XmlTree.dataProvider;menu.labelField='@label'"/>
<mx:TextArea id="txt" x="0" y="261" width="100%" height="127"/>
<mx:Button x="290" y="71" label="Add Folder" click="addFolder()" width="97"/>
<mx:Button x="290" y="118" label="Add Leaf" width="97" click="addLeaf()"/>
<mx:ComboBox x="290" y="19" id="cobox"
dataProvider="{[{label:'修改Label', data:'@label'}, {label:'修改Url', data:'@url'}]}"
change="XmlTree.labelField=cobox.selectedItem.data;panel.title=cobox.selectedLabel">
</mx:ComboBox>
<mx:Label x="324" y="172" text="垃圾箱" width="35" textAlign="center"/>
</mx:Panel>
<mx:MenuBar id="menu" y="97" horizontalCenter="0">
</mx:MenuBar>
</mx:Application>
因为不是我写的,所以没有注释,关键是体会到了Flex强大,不过是就太占资源了,哎,,,如果有两全其美的本法该有多好啊。。。。