整合Flex和 Java—配置篇

整合Flex和 Java—配置篇在分享这几种配置之前,先简单的介绍一下需要用到的一些资源。

1、 MyEclipse+Flex 插件(官网下载)2、 Tomcat6.0作为服务器(官网下载)3、用 BlazeDS(免费)代替 LCDS(收费):没钱啊,只能先使用免费的了。

从 Adobe官方网站上下载下来,将 blazeds.war、ds-console.war、samples.war 三个文件放在tomcat的webapps目录下。

Flex+Java配置:第一种: Java工程和 Flex 工程独立,这种方式也是很多人使用的方式, Flex 程序员和 Java程序员相互独立的工作,这种方式网上有很多的资料,在这里就不再赘述了。

第二种:Flex工程加入 Java 元素1、切换到 Flex视图,新建 Flex project,如下图说明: Java source folder 就是你自己 java业务源码存放的根目录,在 FB3 里, LCDS项目旨在将 Java J2ee 项目和 FlexLcds 项目混合。

当然如果你不选择 combined 两个在一起,那么就麻烦些:要么你再单独新建一个Flex 项目,而这个项目只写 java代码。

要么再建一个J2ee工程写 java代码,而这因为我们是要 java 和 flex结合,所以在服务器选择上我们选择 J2EE存放java类的源文件,我们的目的就是Flex 和 java在一个工程里,所以我们这里选择上个项目只写 Flex 代码,但最后要把 Java 编译后的 class 文件放到这个项目下的webroot\web-inf\classes 目录中。

即不管怎样,最后发布时,java 编译后的class文件必须和 lcds 部署的项目在一起。

2、点击Next,配置 J2EE服务器,如下图说明:Target runtime 实际上没什么用(后来我删除了配置文件里的对应信息,也没问题),但是不指定就不能继续,如果这里显示的是<none>那么就新建一个Tomcat 的runtime,简单的只需要指定tomcat 的安装目录即可。

Content folder 实际上就是最终编译后的容器目录,因此,BlazeDS 的blazeds.war文件将会发布到该目录下的 web-inf 下的 flex 目录中。

同时因为教程采用的是MyEclipse,他默认的就是发布 WebRoot 里的内容,为了自动化,因此这里改为了WebRoot(这也是 java 开发的习惯)Flex WAR file 指的是安装了 lcds 后的 flex.war 文件的路径,但是在这里我们采用的是BlazeDS来取代 lcds,所以这里设置的是 blazeds.war的路径。

Compilation options 指定了 flex 文件的编译方式,选择推荐的在FlexBuilder 里编译吧,虽然开发时多耗点时间,但是在发布后不会占用服务器的编译处理时间,对用户来说是有好处的。

Output folder 指的是 Flex 编译后的 swf 和 html 等文件存放的路径,这里改为了WebRoot,意思是发布到根目录就可以了。

当然你可以根据你的需要和习惯自行设置其他的路径因为我们采用的 BlazeDS,所以这里要设置 BlazeDS 的路径这里我们可以自定义输出路径,一般情况下设置成根目录WebRoot 就可以了3、点击下一步,采用默认的配置就可以,点击完成,该工程就建立完成。

下图为该工程的目录结构4、让它变成 web工程由MyEclipse发布吧Flex 文件的源文件夹Java 源文件夹自动生成的flex 的配置文件Flex 编译后发布的文件。

我们发布在根目录下点击Finish,现在我们的工程的图标变成了 J2EE Web 工程了,这意味着,你可以注意,不要点的太快了,要把这里的对号勾掉,这样就不会覆盖 BlazeDS创建的 web.xml 用MyEclipse来发布它或者添加更多容器,比如hibernate、spring等5、工程建好以后,你可以通过右键—>属性来进行更多的设置。

6、这样一个 Flex+Java的工程就建立完成。

7、编写例子,测试在介绍完第三种方式以后统一介绍。

第三种:由 Web project反向加入 Flex,也就是Java+Flex1、先建立一个 web工程:flexweb。

(略)2、向flexweb 工程手工添加 Flex需要的元素。

1)首先将 BlazeDS需要的jar文件拷到工程的 lib 目录下。

可以将上面建的那个 flex工程的 lib下的jar文件拷到该工程下的 lib目录下。

2)然后要加入 Flex BlazeDS需要的配置文件。

在 WEB-INF下新建一个名为 flex 的文件夹,然后将我们上面建立的那个 firstFlex 该文件夹下的四个 xml 文件拷到该文件夹下。

3)最后,修改 web.xml 文件,加入 Flex 的配置。

做法一个简单的把上面我们新建的那个 flex工程的web.xml的部分代码拷过来。

(注意:这样会出错,可以把<web-app version="2.4"xmlns="/xml/ns/j2ee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/j2ee/xml/ns/j2ee/web-app_2_4.xsd">改为:<web-app>)<context-param><param-name>flex.class.path</param-name><param-value>/WEB-INF/flex/hotfixes,/WEB-INF/flex/jars</param-val ue></context-param><!-- Http Flex Session attribute and binding listener support --><listener><listener-class>flex.messaging.HttpFlexSession</listener-class></listener><!-- MessageBroker Servlet --><servlet><servlet-name>MessageBrokerServlet</servlet-name><display-name>MessageBrokerServlet</display-name><servlet-class>flex.messaging.MessageBrokerServlet</servlet-class> <init-param><param-name>services.configuration.file</param-name><param-value>/WEB-INF/flex/services-config.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>MessageBrokerServlet</servlet-name><url-pattern>/messagebroker/*</url-pattern></servlet-mapping>3、将该工程发布到tomcat下,并启动 tomcat。

(注:一定要启动tomcat,因为在后面的设置中,它要验证工程的路径)Add Flex Project Nature◊Flex Project Nature◊4、然后在该工程上右键5、设置完成后,会发现 web工程的目录结构已经发生了改变,如下图。

我们发现以这种形式建立的工程的目录结构和第二种方法有少许的不同,flex 的mxml文件默认的放在 src文件夹中,和java文件共用一个目录。

并且没有像上一个工程那样自动的编译出可运行的文件。

配置服务器路径配置正确的显示建议不要修改这里的配置6、如果你对这个目录结构不太满意,还想让 flex 的文件放在 flex_src 目录下,别急,属性来设置。

如下图 我们可以通过右键在这里你可以重新设置你的 flex源文件夹和输出目录7、配置 flex 默认的 sdk。

这样配置完,还不行,程序可能还不能正常地运行,还需要配置他使用的 sdk。

如下图8、马上就大功告成了,让我们来写个程序测试一下吧。

1)新建一个 java类:Hello.javapackage com;public class Hello {public String hello(String name){System.out.println("flex调用我了,真好~~~~");return "hello "+name;}}2)为flex配置这个要调用的对象,修改WEB-INF/flex下remoting- config.xml 加入:<destination id="hello"><properties><source>com.Hello</source></properties></destination>3)编写一个Flex程序<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="/2006/mxml"layout="absolute"><mx:Script><![CDATA[import mx.rpc.events.ResultEvent;function gg(evnet:ResultEvent):void{var ff:String = evnet.result as String;ggg.text = ff;}function remotingSayHello():void{var sname:String = nameInput.text;h.hello(sname);}]]></mx:Script><mx:RemoteObject destination="hello" id="h"result="gg(event)"endpoint="http://localhost:8080/flexweb/messagebroker/amf" ></mx:RemoteObject><mx:TextArea id="ggg" x="109" y="122"/><mx:Button label="say hello" click="remotingSayHello();"x="144" y="193"/><mx:TextInput id="nameInput" x="109" y="73"/><mx:Label text="name" x="47" y="75"/></mx:Application>4)重启tomcat,运行flexweb.mxml.第三种方法,在编译完后,访问网页会出现 404 异常。

合集下载

MyEclipse 8.0+flex 4 plugin+Blazeds配置

MyEclipse 8.0+flex 4 plugin+Blazeds配置

需要软件:jdk-6u12-windows-i586-p.exe、apachetomcat.exe、myeclipse-8.0.0-win32.exe、blazeds-turnkey-4.0.0.14931.zip、FlashBuilder_4_Plugin_LS10.exe一、安装jdk按照步骤,选择路径安装,安装成功后,在安装路径下有java文件,包含jdk和jre 两个子文件。

二、JDK环境变量配置的步骤如下:1.我的电脑-->属性-->高级-->环境变量.2.配置用户变量:a.新建JAVA_HOMEC:\Program Files\Java\jdk1.5.0(JDK的安装路径)b.新建 PATH%JAVA_HOME%\bin;c.新建CLASSPATH.;%JAVA_HOME%\lib;3.测试环境变量配置是否成功:开始-->运行--〉CMD键盘敲入:JAVAC -version出现jdk版本信息,而不是出错信息,即表示配置成功!环境变量配置的理解:1. PATH环境变量。

作用是指定命令搜索路径,在i命令行下面执行命令如javac编译ja va程序时,它会到PATH变量所指定的路径中查找看是否能找到相应的命令程序。

我们需要把jdk安装目录下的bin目录增加到现有的PATH变量中,bin目录中包含经常要用到的可执行文件如javac/java/javadoc等待,设置好PATH变量后,就可以在任何目录下执行javac/java 等工具了。

2. CLASSPATH环境变量。

作用是指定类搜索路径,要使用已经编写好的类,前提当然是能够找到它们了,JVM就是通过CLASSPTH来寻找类的。

我们需要把jdk安装目录下的lib子目录中的dt.jar和tools.jar设置到CLASSPATH中,当然,当前目录“.”也必须加入到该变量中。

3. JAVA_HOME环境变量。

它指向jdk的安装目录,Eclipse/NetBeans/Tomcat等软件就是通过搜索JAVA_HOME变量来找到并使用安装好的jdk。

整合Flex和Java--配置篇

整合Flex和Java--配置篇

3、 将该工程发布到 tomcat 下,并启动 tomcat。 (注:一定要启动 tomcat,因为在后面 的设置中,它要验证工程的路径) 4、 然后在该工程上右键Flex Project NatureAdd Flex Project Nature
配置正确的显示
配置服务器路径
建议不要修改这里的配置
<mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; function gg(evnet:ResultEvent):void{ var ff:String = evnet.result as String; ggg.text = ff; } function remotingSayHello():void{ var sname:String = nameInput.text; h.hello(sname); } ]]> </mx:Script> <mx:RemoteObject destination="hello" id="h" result="gg(event)" endpoint="http://localhost:8080/flexweb/messagebroker/amf" > </mx:RemoteObject>
<listener-class>flex.messaging.HttpFlexSession</listener-class> </listener> <!-- MessageBroker Servlet --> <servlet> <servlet-name>MessageBrokerServlet</servlet-name> <display-name>MessageBrokerServlet</display-name> <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class> <init-param> <param-name>services.configuration.file</param-name> <param-value>/WEB-INF/flex/services-config.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>MessageBrokerServlet</servlet-name> <url-pattern>/messagebroker/*</url-pattern> </servlet-mapping>

最佳实践:Flex Spring JAVA BLAZEDS整合

最佳实践:Flex Spring JAVA BLAZEDS整合

BlazeDS初始化时用于动态创建services, destinations, and adapters。

SpringRemotingDestinationBootstrapService扩展AbstractBootstrapService。

SpringRemotingDestinationBootstrapService 自动导出包含"@Service标注及以FlexService结尾"的Spring Bean为RemoteObject。

@SuppressWarnings("all")public class SpringRemotingDestinationBootstrapService extends AbstractBootstrapService {public static final String DEFAULT_INCLUDE_END_WITH_BEANS = "FlexService";private static Logger logger =LoggerFactory.getLogger(SpringRemotingDestinationBootstrapService.cla ss);private String destChannel;private String destSecurityConstraint;private String destScope;private String destAdapter;private String destFactory;private String serviceId;private String includeEndsWithBeans;@Override/***初始化入口*/public void initialize(String id, ConfigMap properties) { serviceId = properties.getPropertyAsString("service-id", "remoting-service");destFactory = properties.getPropertyAsString("dest-factory", "spring");destAdapter = properties.getProperty("dest-adapter");destScope = properties.getProperty("dest-scope");destSecurityConstraint =properties.getProperty("dest-security-constraint");destChannel = properties.getPropertyAsString("dest-channel", "my-amf");includeEndsWithBeans =properties.getPropertyAsString("includeEndsWithBeans",DEFAULT_INCLUDE_END_WITH_BEANS);Service remotingService = broker.getService(serviceId);if (remotingService == null)throw createServiceException("not found Service with serviceId:" + serviceId);createSpringDestinations(remotingService);}private ServiceException createServiceException(String message) {ServiceException ex = new ServiceException();ex.setMessage(message);return ex;}/***将Spring的Service Name自动定义为destination*/private void createSpringDestinations(Service remotingService) { WebApplicationContext wac = WebApplicationContextUtils.getWebApplicationContext(broker.getServletContext());List<String> addedBeanNames = new ArrayList();for (String beanName : wac.getBeanDefinitionNames()) {Class type = wac.getType(beanName);logger.debug("{}: {}", new Object[]{beanName,type.getName()});boolean isCreateSpringDestination = !type.isAnnotationPresent(com.grgbanking.platform.core.flex.NoneRemoti ngObject.class)|| beanName.endsWith(includeEndsWithBeans) || isCreateDestination(beanName, type);if (isCreateSpringDestination) {createSpringDestination(remotingService, beanName);addedBeanNames.add(beanName);}}("[Auto Export Spring toRemotingDestination],beanNames={}", addedBeanNames);}protected boolean isCreateDestination(String beanName, Class type) {return false;}/** <!-- 动态生成的配置内容 --> <destination id="sampleVerbose"><channels> <channel* ref="my-secure-amf" /> </channels> <adapter ref="java-object" /> * <security> <security-constraint ref="sample-users" /> </security> * <properties> <source>pany.SampleService</source>* <scope>session</scope> <factory>myJavaFactory</factory></properties>* </destination>*/protected void createSpringDestination(Service service, String destinationId) {flex.messaging.services.remoting.RemotingDestinationdestination = (flex.messaging.services.remoting.RemotingDestination) service.createDestination(destinationId);destination.setSource(destinationId);destination.setFactory(destFactory);if (destAdapter != null) {destination.createAdapter(destAdapter);}if (destScope != null) {destination.setScope(destScope);}if (destSecurityConstraint != null) {destination.setSecurityConstraint(destSecurityConstraint);}if (destChannel != null) {destination.addChannel(destChannel);}service.addDestination(destination);}2)修改SpringFactory并扩展FlexFactory根据destination的id,将Flex的destination映射为Spring的Beanpublic class SpringFactory implements FlexFactory {private static final String SOURCE = "source";/***This method can be used to initialize the factory itself.It is called*with configuration parameters from the factory tag which defines the id*of the factory.*/public void initialize(String id, ConfigMap configMap) {}/***This method is called when we initialize the definition of an instance*which will be looked up by this factory.It should validate that the*properties supplied are valid to define an instance.Any valid properties*used for this configuration must be accessed to avoid warnings about *unused configuration elements.If your factory is only used for *application scoped components,this method can simply return a factory*instance which delegates the creation of the component to the*FactoryInstance's lookup method.*/public FactoryInstance createFactoryInstance(String id, ConfigMap properties) {SpringFactoryInstance instance = new SpringFactoryInstance(this, id, properties);instance.setSource(properties.getPropertyAsString(SOURCE, instance.getId()));return instance;} // end method createFactoryInstance()/***Returns the instance specified by the source and properties arguments.*For the factory,this may mean constructing a new instance, optionally*registering it in some other name space such as the session or JNDI, and*then returning it or it may mean creating a new instance and returning *it.This method is called for each request to operate on the given item*by the system so it should be relatively efficient.*<p>*If your factory does not support the scope property,it report an error*if scope is supplied in the properties for this instance.*/public Object lookup(FactoryInstance inst) {SpringFactoryInstance factoryInstance = (SpringFactoryInstance) inst;return factoryInstance.lookup();}/***Spring工厂实例,执行实际的查找动作.**@author yrliang**/static class SpringFactoryInstance extends FactoryInstance { SpringFactoryInstance(SpringFactory factory, String id, ConfigMap properties) {super(factory, id, properties);}@Overridepublic String toString() {return"SpringFactory instance for id="+ getId() + " source=" + getSource() + " scope=" + getScope();}@Overridepublic Object lookup() {Logger logger =LoggerFactory.getLogger(SpringFactory.class);ApplicationContext appContext = WebApplicationContextUtils .getWebApplicationContext(flex.messaging.FlexContext.getServletCo nfig().getServletContext());String beanName = getSource();try {logger.debug("lookup(): bean id=" + beanName);//flex.messaging.FlexContext.getHttpRequest().getSession().getAttribute (arg0);return appContext.getBean(beanName);} catch (NoSuchBeanDefinitionException nexc) {ServiceException e = new ServiceException();String msg = "Spring service named '"+ beanName + "' does not exist.";e.setMessage(msg);e.setRootCause(nexc);e.setDetails(msg);e.setCode("Server.Processing");logger.error("",nexc);throw e;} catch (BeansException bexc) {ServiceException e = new ServiceException();String msg = "Unable to create Spring service named '" + beanName + "' ";e.setMessage(msg);e.setRootCause(bexc);e.setDetails(msg);e.setCode("Server.Processing");logger.error("",bexc);throw e;}}}}3)配置service-config.xml<?xml version="1.0" encoding="UTF-8"?><services-config><factories><factory id="spring"class="com.grgbanking.platform.core.flex.spring.SpringFactory"/> </factories><services><service-include file-path="remoting-config.xml" /><service-include file-path="proxy-config.xml" /><service-include file-path="messaging-config.xml" /><service id="spring-remoting-service"class="com.grgbanking.platform.core.flex.spring.SpringRemotingDestina tionBootstrapService"><!-- 其它生成的RemotingDestination默认属性<adapters><adapter-definition id="java-object"class="flex.messaging.services.remoting.adapters.JavaAdapter"default="true" /></adapters><default-channels><channel ref="my-amf" /></default-channels>--><properties><!--<service-id></service-id><dest-factory></dest-factory><dest-adapter></dest-adapter><dest-scope></dest-scope><dest-channel></dest-channel><dest-security-constraint></dest-security-constraint><includeEndsWithBeans></includeEndsWithBeans>--></properties></service></services>4)FLEX客户端调用this.blogFlexService = new RemoteObject("blogFlexService");//这里需要指定endpoint,因为是动态的RemotingDestination,而静态的RemotingDestination ,flex编译器会将endpoint编译进源代码.//这个也是flex编译器需要指定配置文件而导致使用flex经常会犯的错误之一.this.blogFlexService.endpoint = '../messagebroker/amf';3.公司应用案例这种整合最早是在2010年的FEEL View 5.0中使用,后台的统一平台,FEEL View5.1中都采用这种方法进行整合。

Flex入门培训

Flex入门培训

Flex核心机制
3. 手工派发事件: Flex中可以通过dispatchEvent()方法手工派发事件, 所有 UIComponent的子类都可以调用此方法. 语法: 组件对象.dispatchEvent(new Event("event_type"):Boolean 参数event_type是Event对象的type属性. 函数的返回值总是True. 可以使用此方法派发任意事件, 而不仅仅是用户自定义事件, 比如: 可以派发一个Button 的Click事件. var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent.CLICK));在Flex应用中不是必须对新派发的事件进行处理, 如果触 发了一个事件, 而没有对应的Listener时,Flex忽略此事件.
Flex核心机制
绑定机制 Flex绑定机制的原理就是事件,在被Flex绑定的对象上增加了改变事件的监听,一旦某个 被Flex绑定对象改变后,就会分发一个“propertyChange”事件(默认的,也可以改变成 自己定义的事件),在其他组件中,会有propertyChange的事件监听,当捕捉到该事件后, 则会去更新组件的属性并显示。如果想让变量、类、方法的值与组件的值进行绑定,请在这 些对象上加上[Bindable]标记
Flex与Java通信示例
需求:
Flex有一个输入框、按钮和Lable,在输入框中输入信息后点击按钮,可以通过 RemoteObject方法调用java类中的方法。通过该类中的方法对数据进行处理并返回,将处 理后的数据显示在Lable上。
Flex与Java通信示例
.mxml
生编 成译 时

Flex框架介绍

Flex框架介绍

Flex 开发框架介绍框架介绍Flex语言包含了一个丰富的用户界面组件库,MXML(一种基于XML的标记语言)和ActionScript(面向对象编程语言)。

MXML用于排布用户界面和处理应用中其他方面的问题,而ActionScript用来处理用户交互逻辑。

这些应用程序利用Adobe® Flash® Player 和Adobe AIR® 运行时跨浏览器、桌面和操作系统实现一致的部署。

公司开发框架通过AS语言和MXML相结合的MVC模式的框架。

Flex开发可以分模块开发,最后统一加载到主页(Main application)上,每个Flex工程都有一个主页面。

这样开发降低了各个模块之间的耦合性。

与JAVA服务端交互可以通过json或xml数据格式。

模块:模块开发住要有以下几个部分组成:Model : 组件之间所有的传递的信息和数据,这是一个Bindable(可绑定的)对象。

Controller:控制页面请求,调用Service (JA V A端服务),与Model 组件数据交互。

Ui:显示从服务端获取的数据。

相关代码:Model在Model代码中,定义的public的变量,用来存放由数据库获取数据,和需要与服务器交互的参数,几乎所有的服务层返回的信息都需要在Model中有一个相应的对象。

绑定当数据属性改变时,Flex自动复制源属性的值到任何目标属性。

Controller:调用服务端,保存返回数据。

UI:框架主要配置类:UrlProperties.as 配置服务器路径,及各个模块需调用的actionModuleLibrary 模块管理。

DEMO:http://192.168.0.20:8080/sunristerFramework/webmasterfront/sunristerFlexFrame.ht mlSvn相关文档:svn://192.168.0.102/2010/framework/Flex源代码:svn://192.168.0.102/2010/framework/SRC/sunristerFlexFrame。

Flex环境安装配置

Flex环境安装配置

1.安装JDK点击下一步点击下一步,如果想更换安装路径可以点击更改开始安装点击下一步,如果需要修改安装路径点击更改开始安装安装结束,点击完成配置环境变量(都配置到系统变量中),JAVA_HOME为JDK安装路径,默认通常为C:\Program Files\Java\jdk1.6.0_29;CLASSPATH为.;% JAVA_HOME%\lib;% JAVA_HOME%\lib\ tools.jar;PATH后面追加; % JAVA_HOME %\bin;% JAVA_HOME %\jre\bin,注意路径应该和自己的安装情况相一致,不要直接copy上面的示例路径。

至此JDK环境配置完成,在命令行下输入java –version若出现版本信息,说明配置成功。

2.安装tomcat7只需要将tomcat7直接解压即可,运行bin目录下的startup.bat文件,若可正常启动,说明没有问题。

3.安装postgreSQL9.0点击next点击next,若需要修改安装目录点击后面的浏览按钮点击next,若需要修改安装目录点击后面的浏览按钮输入密码端口号使用默认的5432,点击next语言选择新加坡简体中文,点击next点击next开始安装安装完成,将安装stack builder的选项去掉,点击finish4.安装eclipse3.7根据自己的系统环境(32位或64位),选择对应版本的eclipse(64位系统可以选择32位或64位eclipse,而32位系统只能选择32位eclipse),解压即可。

5.安装Flex4插件首先要注意,不要把安装文件放置在包含汉语的文件路径下。

开始安装后弹出的第一个窗口,设置一个用来存放解压文件的临时目录,这个无关紧要,但是路径中不能包含汉语,像下图中的路径是典型导致Flex4插件安装失败的例子!Flex安装完成之后这些文件可以删除掉,设置好路径后,点击下一步点击确定点击下一步选中接受许可协议,点击下一步设置安装路径,点击下一步选择再插入一个eclipse,路径设置为eclipse的根目录,点击下一步点击安装点击完成,Flex4插件安装完毕安装完毕之后先打开eclipse,弹出下面的窗口,设置工作空间路径之后将下面的勾打上,然后点击OK然后关闭eclipse,再打开eclipse,这时就会弹出Flex的注册窗口运行flash builder 4keygen.exe,下面的软件名选择Adobe Flash Builder v4.x ,然后点击一下上面的Patch Hosts File按钮然后把生成的序列号粘贴到注册窗口中,点击继续Flex4插件激活完成6.配置eclipse环境打开eclipse,点击菜单栏的window->preferences-gerneral->editors-text editors,将右侧的show line numbers勾上,点击apply点击左侧的java->installed jres点击add按钮选择Standard VM然后点击Next,在弹出窗口中点击Directory设置jdk的路径,如下图所示:点击Finish按钮选中我们刚才添加的条目,然后点击OK再次打开window->preferences->webservice->cxf2.x preferences点击Add按钮,选择cxf的路径:点击Finish按钮将新出现的条目打上勾,然后点OK按钮。

eclipse成立Flex项目之Blazeds篇1(测试成功完整版)

创建Flex 与Java 通信项目之Blazeds篇一、环境:1、blazeds_turnkey(内含tomcat)2、Flex Build3(Flex的eclipse插件)3、Eclipse二、搭建1、成立一个Web Project注意:创建项目完以后,将其部署到Tomcat中,为配置Flex类型做预备2、导入Blazeds导入方式有两种:一种是,打开下载到的blazeds_turnkey,找到紧缩包,copy里面的WEB-INF文件到web项目WebRoot 目录下,覆盖原先的WEB-INF目录;另一种,软件导入。

(1)右击项目”WebRoot”目录,选择”Import”->”File system”(2)在From directory选项当选择解压缩的途径(3)选中“blazeds”,点击”finish”(4)显现Question提示,点击”Yes to All”3、添加Flex项目类型1、创建Flex_src目录,用于,专门寄存flex的源代码文。

(为后面修改Flex配置做预备)如以下图:2、添加Flex项目类型(1)右击FlexBlazedsDemo项目,选择“Flex Projext Nature ”->”Add Flex Project Nature”(2)点击点击”Next”(3)配置属性:Root folder:指的是项目发布的目录location(选择刚部署到Tomcat中的FlexBlazedsDemo) Root URL:指定是项目的发布的根URL地址(访问途径)Context root:指定是项目名Output folder:Flex编译后HTML文件寄存位置然后点击Valdate Configuration按钮,没有任何错误提示点击Finish即完成项目创建,此flex项目中注意:若是Tomcat是启动状态,点击Valdate Configuration会显现:“The web root folder and root URl are valid”。

Flex讲解


Flex事件机制(二) 事件机制( 事件机制
Event类作为创建Event对象的基类,当发生事件时,Event对象将作为参数传递 给事件侦听器。如MouseEvent、KeyboardEvent • Event类有几个常用的公共属性: ◆是否冒泡:bubbles; ◆目标对象:target; ◆所处阶段:eventPhase; ◆当前对象:currentTarget; Flex事件机制中的自定义事件,也就是向监听器传递自己定义的事件类型,同 时可以通过事件传递参数。 • 1.创建自定义事件名称的Event dispatchEvent(newEvent(“myEvnet”,true,false)); • 2.创建自定义事件类 Public class MyEvent extends Event{ dispatchEvent是EventDispatcher的方法: publicfunctiondispatchEvent(event:Event):Boolean将事件调度到事件流中。事件 目标是对其调用dispatchEvent()方法的EventDispatcher对象。 •
控件简介(二)
• • • • • • • • • • • • • • • • • • • 5:flex控件: 警告alert弹出警告框 下拉列表combobox下拉数据列表 选色器colorpicker可选择的调色盘 数据表格datagrid 数据表格 日期选择器datechooser选择日期控件 日期条 datefield 单击弹出日期选择器 水平列表horizontalList 水平列表项目 水平尺/垂直尺 hrule vrule单个水平或垂直标尺 水平、垂直滑竿 hslider,vslider 图像 image 支持gif jpeg png svg swf 列表list 可滚动的数据组 计数器numericstepper单击向上的按钮增加数据,单击向下的按钮减少数据 进度条progressbar 当前操作进度 滚动条 水平,垂直滚动 scrllbar,hscrollbar,vscrollbar swf加载器 显示swf文件 列表条tabbar一组水平的列表 排列列表tilelist类似表格的行列对正排列的项目 树tree、以展开树的方式显示继承关系的数据 音像videodisplay flex应用中的数据流媒体

Flex布局做出自适应页面(语法和案例)

Flex布局做出⾃适应页⾯(语法和案例)Flex布局简介Flex英⽂为flexiable box,翻译为弹性盒⼦,Flex布局即弹性布局。

Flex布局为盒⼦模型提供了很⼤的灵活性,任何⼀个容器都可以指定为Flex布局,设置⽅法为:.box{display: flex;}⾏内元素使⽤Flex布局.box{display: inline-flex;}在webkit内核的浏览器上必须加上webkit前缀.box{display: flex;display: -webkit-flex;}注意:使⽤Flex布局之后,⾥⾯的float、clear、vertical-align属性将失效。

Flex布局中的基本概念采⽤ Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。

它的所有⼦元素⾃动成为容器成员,称为 Flex 项⽬(flex item),简称"项⽬"。

容器默认存在两根轴:⽔平的主轴(main axis)和垂直的侧轴(cross axis)。

主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;侧轴的开始位置叫做cross start,结束位置叫做cross end。

项⽬默认沿主轴排列。

单个项⽬占据的主轴空间叫做main size,占据的侧轴空间叫做cross size。

容器的属性1、flex-driection2、flex-wrap3、flex-flow4、justify-content5、align-items6、align-content1、flex-driection设置项⽬的排列⽅向,默认为rowflex-driection: row | row-reverse | column | column-reverse当设置为flex-driection: row,效果:当设置为flex-driection: row-reverse,效果:当设置为flex-driection: column,效果:当设置为flex-driection: column-reverse,效果:如下代码直接复制保存为html⽂件即可以查看效果:<style type="text/css">.box{display: flex;display: -webkit-flex;/*⽔平⽅向,左端对齐*/flex-direction: row;/*⽔平⽅向,右端对齐*//*flex-direction: row-reverse;*//*垂直⽅向,顶部对齐*//*flex-direction: column;*//*垂直⽅向,底部对齐*//*flex-direction: column-reverse;*/background: #999;width: 100%;}.box span{margin: 10px 10px;padding: 10px;background: #ff0;width: 50px;}</style><div class="box"><span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span></div>2、flex-wrap设置项⽬是否在⼀条线上,默认为nowrapflex-wrap: wrap | nowrap | wrap-reverse当设置为flex-wrap: wrap,效果:当设置为flex-wrap: nowrap,效果(不换⾏,默认会缩放):当设置为flex-wrap: wrap-reverse,效果(第⼀⾏在下⽅):如下代码直接复制保存为html⽂件即可以查看效果:<style type="text/css">.box{display: flex;display: -webkit-flex;/*换⾏*//*flex-wrap: wrap;*//*不换⾏,默认*//*flex-wrap: nowrap;*//*换⾏,第⼀⾏在下⽅*//*flex-wrap: wrap-reverse;*/background: #999;width: 100%;}.box span{margin: 10px 10px;padding: 10px;background: #ff0;width: 50px;}</style><div class="box"><span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span><span>你好5</span><span>你好6</span><span>你好7</span></div>3、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap4、justify-content属性定义项⽬在主轴上的对齐⽅式,默认值为flex-startjustify-content: flex-start | flex-end | center | space-between | space-around当设置为justify-content: flex-start,效果:当设置为justify-content: flex-end,效果:当设置为justify-content: center,效果:当设置为justify-content: space-between,效果:当设置为justify-content: space-around,效果:如下代码直接复制保存为html⽂件即可以查看效果:<style type="text/css">.box{display: flex;display: -webkit-flex;/*默认,项⽬左对齐*/justify-content: flex-start;/*项⽬右对齐*//*justify-content: flex-end;*//*项⽬居中对齐*//*justify-content: center;*//*项⽬两端对齐*//*justify-content: space-between;*//*每个项⽬两侧的间隔相等*//*justify-content: space-around;*/background: #999;width: 100%;}.box span{margin: 10px 10px;padding: 10px;background: #ff0;width: 50px;}</style><div class="box"><span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span><span>你好5</span><span>你好6</span><span>你好7</span></div>5、align-items属性定义项⽬在纵轴上的对齐⽅式,默认值为stretch,适⽤于项⽬在纵轴上⾼度不⼀样的情况,为了更好的看到效果,我为项⽬添加了⼀些样式align-items: flex-start | flex-end | center | baseline | stretch当设置为align-items: flex-start,效果:当设置为align-items: flex-end,效果:当设置为align-items: center,效果:当设置为align-items: baseline,效果:当设置为align-items: stretch,效果:如下代码直接复制保存为html⽂件即可以查看效果:<style type="text/css">.box{display: flex;display: -webkit-flex;/*纵轴的顶部对齐*//*align-items: flex-start;*//*纵轴的底部对齐*//*align-items: flex-end;*//*纵轴的中点对齐*//*align-items: center;*//*项⽬的第⼀⾏⽂字的基线对齐*//*align-items: baseline;*//*默认对齐⽅式,如果项⽬未设置⾼度或设为auto,将占满整个容器的⾼度*/align-items: stretch;background: #999;width: 100%;}.box span{margin: 10px 10px;padding: 10px;background: #ff0;width: 50px;}.box span:nth-of-type(2n){height: 80px;padding-top: 20px;}</style><div class="box"><span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span><span>你好5</span><span>你好6</span><span>你好7</span></div>6、align-content属性定义了多根轴线的对齐⽅式。

基于Flex和J2EE架构的数据发布系统的设计与实现

基于Flex和J2EE架构的数据发布系统的设计与实现摘要:提出了开发基于Flex和J2EE架构的数据发布系统,应用Flex作为展现层实现,应用Hibernate作为持久层实现,结合Spring技术作为业务层实现,进行框架整合,从而设计了一套松耦合、可扩展的RIA数据发布系统,初步解决了当前数据发布中存在的问题。

关键词:RIA;数据发布;Flex;Spring框架;Hibernate框架为了解决Web应用程序中人机界面单调、交互性弱、开发效率低、用户体验差等一系列问题,产生了富因特网(Rich Internet Applications)技术,RIA程序是将桌面应用程序的用户交互体验与传统的Web应用的部署灵活性和成本分析结合起来的网络应用程序。

RIA中提供可承载已编译客户端应用程序(以文件形式,用HTTP传递)的运行环境,客户端应用程序使用异步客户/服务器架构连接现有的后端应用服务器,这是一种安全、可升级、具有良好适应性的新的面向服务模型。

作为最完善的RIA系统开发技术,Adobe Flex提供了一整套的RIA组件框架和运行时数据处理服务来构建复杂的网络应用程序,利用它可以开发出具有良好的软件体系结构、很好的兼容性和更具吸引力的用户体验的软件。

本文根据Web应用的经典分层理论,应用Flex 作为展现层实现,应用Hibernate作为持久层实现,并结合Spring技术作为业务层实现,进行框架整合,设计出一套足够灵活、松散耦合、可扩展性强、高效的数据发布系统。

1系统需求分析系统需求分析是系统项目成功的基础,需要按照软件工程方法进行全面合理的需求分析。

数据发布系统有着自身的特点和需求,现进行分析设计。

1.1系统流程分析系统参与者有系统管理员、数据管理员、普通用户3种,图1为参与者进入系统后的活动图。

图1系统活动图1.2系统功能性需求数据发布系统主要由3个功能模块组成:数据发布模块、用户管理模块、系统管理模块。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
相关文档
最新文档