Java and Flex

1. Java and Flex

2. Mysql-java-flex with a flex server • You’ll need a flex server: • Fds-tomcat has been pre-configured to run flex apps. • Regular tomcat can run flex too • JRun can be downloaded preconfigured with LCDS (Flex life-cycle data services express edition) • You’ll also need Hibernate, mysql & java • Hibernate is open source and comes as a jar file that needs to be in the classpath. • http://blogs.adobe.com/mtg/2006/08/my_first_hibernate_enabled_fle.html • This tutorial was relatively easy to do using JRun.

3. Install LDS (adobe livecycle data services) with integrated JRun4.. • This contains the same LCDS as the fds-tomcat and has a similar bunch of samples. • JRun comes preconfigured. • This is the version I used although the next screen shot is of the fancier version

4. JRun4 – the full-blown version shown below - needs to be configured for LCDS but allows you to add servers as needed.

5. This tutorial (approximately the next 14 slides) • You’ll need to comment out the java.home definitionin the jvm.config.xml file or you’ll get a version error between your compiler and the jvm packaged with the LCDS. • The main.mxml works fine but you’ll need to do some work to get the popup window working.

6. Create a mysql database and a table in it named employee…use this script if you like CREATE DATABASE SampleDB;USE SampleDB; DROP TABLE IF EXISTS `employee`;CREATE TABLE `employee` (  `employeeid` int(10) unsigned NOT NULL auto_increment,  `firstname` varchar(255) default NULL,  `lastname` varchar(255) default NULL,  PRIMARY KEY  (`employeeid`)) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `employee` (`employeeid`,`firstname`,`lastname`) VALUES (1,'Conrad','Simms'), (2,'Akira','Tanaka'), (3,'Rye','Woodard');

7. Create Employee.java package EmployeeManagement;       public class Employee {     private int id;              private String firstname;              private String lastname;              public void setId(int id)             {                     this.id = id;           }              public int getId()          {                    return this.id;              }                     public void setFirstname(String firstname)              {                    this.firstname = firstname;              }              public String getFirstname()              {                   return firstname;              }                 public void setLastname(String lastname)              {                this.lastname = lastname;              }              public String getLastname()              {                    return lastname;              }       }

8. Save Employee.java • Save it in c:\fds\jrun4\servers\default\flex\WEB-INF\src\EmployeeManagement\Employee.java • Create directories as needed • Compile it and save the .class file in c:\fds\jrun4\servers\default\flex\WEB-INF\classes\EmployeeManagement\

9. Hibernate mapping file <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC              "-//Hibernate/Hibernate Mapping DTD 3.0//EN"                     "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">        <hibernate-mapping>           <class name="EmployeeManagement.Employee" table="employee">                     <id name="id" column="employeeid">                     <generator class="native"/>                     </id>                     <property name="firstname"/>                     <property name="lastname"/>            </class>       <!-- This is a named query that we will use later -->           <query name="all.employees">From Employee</query></hibernate-mapping> • Save this file as Employee.hbm.xml in the same folder where we just placed our persistent (java) class

10. Creating the Hibernate configuration file •   This file contains the configuration settings that will enable Hibernate to connect to the database that we would like to access. The following Hibernate configuration contains the minimal settings required for this tutorial to work: <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC        "-//Hibernate/Hibernate Configuration DTD 3.0//EN"        "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd"><hibernate-configuration>    <session-factory>         <!-- Database connection settings -->        <property name="connection.driver_class">com.mysql.jdbc.Driver</property>        <property name="connection.url">jdbc:mysql://localhost/SampleDB</property>        <property name="connection.username">root</property>        <property name="connection.password"></property>         <!-- JDBC connection pool (use the built-in) -->        <property name="connection.pool_size">1</property>         <!-- SQL dialect -->        <property name="dialect">org.hibernate.dialect.MySQLDialect</property>         <!-- Enable Hibernate's automatic session context management -->        <property name="current_session_context_class">thread</property>         <!-- Disable the second-level cache  -->        <property name="cache.provider_class">org.hibernate.cache.NoCacheProvider</property>         <!-- Echo all executed SQL to stdout -->        <property name="show_sql">true</property>         <!-- Load the database table mapping file -->        <mapping resource="EmployeeManagement/Employee.hbm.xml"/>     </session-factory> </hibernate-configuration> • This file must be named hibernate.cfg.xml and must be in the application's classpath. Therefore, we will save this file in the following location: C:\fds2\jrun4\servers\default\flex\WEB-INF\classes

11. edit the data-management-config.xml file located in C:\fds\jrun4\servers\default\flex\WEB-INF\flex <?xml version="1.0" encoding="UTF-8"?>       <service id="data-service"               class="flex.data.DataService"               messageTypes="flex.data.messages.DataMessage">        <adapters>                     <adapter-definition id="actionscript" class="flex.data.adapters.ASObjectAdapter" default="true"/>              <adapter-definition id="java-dao" class="flex.data.adapters.JavaAdapter"/>       </adapters>        <default-channels>                     <channel ref="my-rtmp"/>       </default-channels> <destination id="employee.hibernate">        <adapter ref="java-dao" />        <properties>            <use-transactions>true</use-transactions>            <source>flex.data.assemblers.HibernateAssembler</source>            <scope>application</scope>            <metadata>       <!--This is the unique identifier from the hibernate-entity bean -->                <identity property="id"/>            </metadata>            <network>                <session-timeout>20</session-timeout>                <paging enabled="false" pageSize="10" />                <throttle-inbound policy="ERROR" max-frequency="500"/>                <throttle-outbound policy="REPLACE" max-frequency="500"/>            </network>            <server>                <hibernate-entity>EmployeeManagement.Employee</hibernate-entity>                <fill-method>                    <name>fill</name>                    <params>java.util.List</params>                </fill-method>                <fill-configuration>                    <use-query-cache>false</use-query-cache>                    <allow-hql-queries>true</allow-hql-queries>                </fill-configuration>            </server>        </properties>    </destination>   </service>

12. Adding dependent jars • copy the mysql-connector-java-3.0.15-ga-bin.jar to C:\fds\jrun4\servers\default\flex\WEB-INF\lib • From the Flex Data Services, navigate to the resources/hibernate folder, copy all of the jars from that folder to the same location as the MySQL driver you just copied.

13. Employee.as: an actionscript file package EmployeeManagement       {              [Managed]              [RemoteClass(alias="EmployeeManagement.Employee")]              public class Employee              {                     public function Employee() {}                     public var id:int;                     public var firstname:String="";                     public var lastname:String="";              }       } • Save this file as Employee.as in : • C:\fds2\jrun4\servers\default\flex\EmployeeManager\EmployeeManagement

14. The flex application <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="getEmployees()"> <mx:Script>              <![CDATA[                     import mx.controls.Alert;                     import mx.rpc.events.FaultEvent;                     import mx.collections.ArrayCollection;                     import flash.events.MouseEvent;                     import mx.rpc.AsyncToken;                     import mx.data.*;                     import EmployeeManagement.*;                     [Bindable]                     private var employee:Employee;                     private function getEmployees():void {                            currentState='';                            hibernate.fill(myArray,"all.employees",[]);                      }                     private function handleFault(event:FaultEvent):void {                            mx.controls.Alert.show(event.message.toString());                     }              ]]>       </mx:Script>        <mx:DataService id="hibernate" destination="employee.hibernate" fault="handleFault(event)" autoCommit="true" />       <mx:ArrayCollection id="myArray" /><mx:VBox width="783" height="562" y="10" x="10"><mx:ApplicationControlBar width="782" borderColor="#408080" fillColors="[#408080, #408080]" fillAlphas="[0.53, 0.53]" autoLayout="true"><mx:Text text="Employee Management Console" fontSize="26" fontWeight="bold" fontStyle="italic" themeColor="#ff8000" alpha="0.52"/></mx:ApplicationControlBar><mx:HBox x="10" y="10" width="783" height="455" id="hbox1"><mx:Panel  id="listEmployeePanel" width="783" height="455" layout="absolute" title="Employee List" cornerRadius="8" borderColor="#408080" fontSize="13"><mx:DataGrid id="dgrid" dataProvider="{myArray}" editable="false" width="763" height="411" bottom="0" right="0">              <mx:columns>                     <mx:DataGridColumn headerText="Employee ID" dataField="id"/>                     <mx:DataGridColumn headerText="First Name" dataField="firstname"/>                     <mx:DataGridColumn headerText="Last Name" dataField="lastname"/>              </mx:columns>       </mx:DataGrid></mx:Panel></mx:HBox>       </mx:VBox> </mx:Application>

15. Pop up window • In my flex.ppt (and on the adobe help page) you can find information on setting up a pop up window. • The code for a pop up window for this application to create a new employee is in this slide’s notes and accompanies the download files.

16. The application loads hibernate from mysql and uses a simple java bean and flex… here it is running on JRun4

17. Pop up window to add new employee

18. Mysql table shows new employees added

19. Multiple web apps • One way to establish multiple web apps running on the server is to create multiple directories under lcds/jrun4/servers/default. • Create a subdirectory employee (or something) at this level and copy necessary files over, maintaining the directory structure.

20. Note url

21. About Java DAO and Flex • Coenraets’ fds-tomcat contains an entire tomcat distribution configured to run flex. • Download it at: 30 minute test drive • This “test drive” also contains tutorials and examples showing flex use with hibernate, spring and java. • His pdf on java dao/flex (Flex Data Management Services Tutorial link in the index) is a good starting point tutorial to get your feet wet. • Careful, there may be a typo or two. His blog site has tips: http://coenraets.org/blog/2007/01/flex-data-management-services-tutorial/

22. Coenraets fds tutorial

23. Hw – complete the Coenraets tutorial • Coenreats uses a hibernate database that comes with the fds-tomcat. Be careful to make copies of various xml config files which you change. • Good idea to save the original zip to restore settings if things get goofed up. • In particular, we will later use mysql to interface with flex. This involves changing a properties file which will break the Coenreats’ tutorial webapp.

24. Other details: classpath • To do your own DAO coding, you’ll need more jar files in your class path: spring.jar and flex-messaging.jar • You can set the classpath as you compile or with a separate instruction: C:> sdkTool-classpath classpath1;classpath2... -or- C:> set CLASSPATH=classpath1;classpath2... • It may be easiest to make a batch file or set the class path environment variable to include the path settings… go to control panel->system->advanced->environment variables->edit classpath • You can find more details by searching online.

25. About Java DAO and FlexAccessing Spring beans from flex (FDS) • Lin lin has a pretty good tutorial also for building the entire DAO layer by hand and provides a flex client interface also. • Tutorial URL at http://weblogs.macromedia.com/lin/archives/fdslcds/index.html • There may be an error in here, too. Certainly, as with Coenraets, there are a few omissions.

26. Screenshot: a DAO layer interfacing with MySQL and displayed in Flex, running in the fds-tomcat server

27. Spring Configuration • 1). Download spring.jar and flex-spring-factory.jar to your machine, and put them into your flex app’s WEB-INF/lib directory. 2). Add the following into your flex app’s WEB-INF/web.xml file, inside <web-app> tag. • <context-param>   <param-name>contextConfigLocation</param-name>    <param-value>/WEB-INF/applicationContext.xml</param-value></context-param> <listener>    <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class></listener> • 3). Add the following into to WEB-INF\flex\services-config.xml inside <services-config> tag:           <factories>               <factory id="spring" class="flex.samples.factories.SpringFactory"/>          </factories>4). If you are using JRun as app server, set the following in WEB-INF\jrun-web.xml to avoid parser conflicting:          <jrun-web-app>              <load-system-classes-first> true</load-system-classes-first>          </jrun-web-app>  Now you are ready to use flex to access Spring beans. 

28. Properties file for mysql connection • In webapps/root/web-inf/src edit the file flexdemodb.properties. Be sure to save the old version which shows how to connect to hibernate!!! jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql:test ///your_db_name jdbc.user=root jdbc.password=

29. Other errata • For some reason, I needed to use MyAssembler as well as MyAssemblerSpring… I couldn’t find where the system was looking for it, but I copied both identical class files to my java class directory. Because this file accessed “MyService” I wound up sticking both MyService and MyServiceSpring (identical class files) into my java classes directory. • Besides the properties file, you need to put database connection details in webapps\root\WEB-INF\applicationContext.xml • see next slide

30. A piece of Webapps\root\Web-inf\applicationContext.xml <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="org.gjt.mm.mysql.Driver"/> <property name="url" value="http://localhost:3306/test"/> <property name="username" value="root"/> <property name="password" value=""/> </bean>

31. Hw: complete lin lin tutorial • Complete tutorial. • Then add reasonable CRUD functionality to your web app.

32. Automatically generate flex and java code • http://www.adobe.com/devnet/flex/articles/daoflex_print.html • http://www.adobe.com/devnet/flex/articles/daoflex_03.html

33. A flex-jrun app example • http://coenraets.org/blog/2006/10/building-collaborative-applications-with-flex-data-services-and-flash-media-server/ • http://www.ecosvirtuales.com/tutoriales/flex2_gettingstarted.pdf (a large pdf on installing and using Flex Builder)