Your SlideShare is downloading. ×
Download It
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Download It

464
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
464
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • <?xml version="1.0"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doInit();" title="Add Employee" width="362" height="186" borderColor="#408080" alpha="1.0" backgroundAlpha="1.0" layout="absolute"> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; import mx.rpc.events.FaultEvent; import EmployeeManagement.*; import mx.rpc.AsyncToken; import mx.data.*; [Bindable] private var employee:Employee; private function doInit():void { // Center the TitleWindow container // over the control that created it. PopUpManager.centerPopUp(this); } private function addEmployee():void { // Add the employee to the database, then kill this window. employee = new Employee(); employee.firstname=newfirstname.text; employee.lastname=newlastname.text; var ir:ItemReference = hibernate.createItem(employee); hibernate.commit(); PopUpManager.removePopUp(this); } 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)"/> <mx:Form x="4" y="4"> <mx:FormItem label="First Name"> <mx:TextInput id="newfirstname" width="100%"/> </mx:FormItem> <mx:FormItem label="Last Name"> <mx:TextInput id="newlastname" displayAsPassword="false" width="100%"/> </mx:FormItem> </mx:Form> <mx:HBox x="4" y="92"> <mx:Button click="addEmployee();" label="OK"/> <mx:Button click="PopUpManager.removePopUp(this);" label="Cancel"/> </mx:HBox> </mx:TitleWindow>
  • Transcript

    • 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 definition in 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:fdsjrun4serversdefaultflexWEB-INFsrcEmployeeManagementEmployee.java
      • Create directories as needed
      • Compile it and save the .class file in c:fdsjrun4serversdefaultflexWEB-INFclassesEmployeeManagement
    • 9. Hibernate mapping file
      • <?xml version=&quot;1.0&quot;?>
      • <!DOCTYPE hibernate-mapping PUBLIC               &quot;-//Hibernate/Hibernate Mapping DTD 3.0//EN&quot;                      &quot;http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd&quot;>        <hibernate-mapping>            <class name=&quot;EmployeeManagement.Employee&quot; table=&quot;employee&quot;>                      <id name=&quot;id&quot; column=&quot;employeeid&quot;>                      <generator class=&quot;native&quot;/>                      </id>                      <property name=&quot;firstname&quot;/>                      <property name=&quot;lastname&quot;/>             </class>        <!-- This is a named query that we will use later -->           <query name=&quot;all.employees&quot;>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         &quot;-//Hibernate/Hibernate Configuration DTD 3.0//EN&quot;         &quot;http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd&quot;> <hibernate-configuration>     <session-factory>
      •         <!-- Database connection settings -->         <property name=&quot;connection.driver_class&quot;>com.mysql.jdbc.Driver</property>         <property name=&quot;connection.url&quot;>jdbc:mysql://localhost/SampleDB</property>         <property name=&quot;connection.username&quot;>root</property>         <property name=&quot;connection.password&quot;></property>
      •         <!-- JDBC connection pool (use the built-in) -->         <property name=&quot;connection.pool_size&quot;>1</property>
      •         <!-- SQL dialect -->         <property name=&quot;dialect&quot;>org.hibernate.dialect.MySQLDialect</property>
      •         <!-- Enable Hibernate's automatic session context management -->         <property name=&quot;current_session_context_class&quot;>thread</property>
      •         <!-- Disable the second-level cache  -->         <property name=&quot;cache.provider_class&quot;>org.hibernate.cache.NoCacheProvider</property>         <!-- Echo all executed SQL to stdout -->         <property name=&quot;show_sql&quot;>true</property>
      •         <!-- Load the database table mapping file -->         <mapping resource=&quot;EmployeeManagement/Employee.hbm.xml&quot;/>
      •     </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:fds2jrun4serversdefaultflexWEB-INFclasses
    • 11. edit the data-management-config.xml file located in C:fdsjrun4serversdefaultflexWEB-INFflex
      • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>        <service id=&quot;data-service&quot;               class=&quot;flex.data.DataService&quot;               messageTypes=&quot;flex.data.messages.DataMessage&quot;>        <adapters>                      <adapter-definition id=&quot;actionscript&quot; class=&quot;flex.data.adapters.ASObjectAdapter&quot; default=&quot;true&quot;/>               <adapter-definition id=&quot;java-dao&quot; class=&quot;flex.data.adapters.JavaAdapter&quot;/>        </adapters>
      •        <default-channels>                      <channel ref=&quot;my-rtmp&quot;/>        </default-channels>
      •    <destination id=&quot;employee.hibernate&quot;>         <adapter ref=&quot;java-dao&quot; />         <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=&quot;id&quot;/>             </metadata>             <network>                 <session-timeout>20</session-timeout>                 <paging enabled=&quot;false&quot; pageSize=&quot;10&quot; />                 <throttle-inbound policy=&quot;ERROR&quot; max-frequency=&quot;500&quot;/>                 <throttle-outbound policy=&quot;REPLACE&quot; max-frequency=&quot;500&quot;/>             </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:fdsjrun4serversdefaultflexWEB-INFlib
      • 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=&quot;EmployeeManagement.Employee&quot;)]               public class Employee               {                      public function Employee() {}                                           public var id:int;                      public var firstname:String=&quot;&quot;;                      public var lastname:String=&quot;&quot;;               }        }
      • Save this file as Employee.as in :
      • C:fds2jrun4serversdefaultflexEmployeeManagerEmployeeManagement
    • 14. The flex application
      • <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;absolute&quot; creationComplete=&quot;getEmployees()&quot;> <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,&quot;all.employees&quot;,[]);                      }                                           private function handleFault(event:FaultEvent):void {                             mx.controls.Alert.show(event.message.toString());                                                  }               ]]>        </mx:Script>        <mx:DataService id=&quot;hibernate&quot; destination=&quot;employee.hibernate&quot; fault=&quot;handleFault(event)&quot; autoCommit=&quot;true&quot; />        <mx:ArrayCollection id=&quot;myArray&quot; /> <mx:VBox width=&quot;783&quot; height=&quot;562&quot; y=&quot;10&quot; x=&quot;10&quot;> <mx:ApplicationControlBar width=&quot;782&quot; borderColor=&quot;#408080&quot; fillColors=&quot;[#408080, #408080]&quot; fillAlphas=&quot;[0.53, 0.53]&quot; autoLayout=&quot;true&quot;> <mx:Text text=&quot;Employee Management Console&quot; fontSize=&quot;26&quot; fontWeight=&quot;bold&quot; fontStyle=&quot;italic&quot; themeColor=&quot;#ff8000&quot; alpha=&quot;0.52&quot;/> </mx:ApplicationControlBar> <mx:HBox x=&quot;10&quot; y=&quot;10&quot; width=&quot;783&quot; height=&quot;455&quot; id=&quot;hbox1&quot;> <mx:Panel  id=&quot;listEmployeePanel&quot; width=&quot;783&quot; height=&quot;455&quot; layout=&quot;absolute&quot; title=&quot;Employee List&quot; cornerRadius=&quot;8&quot; borderColor=&quot;#408080&quot; fontSize=&quot;13&quot;>        <mx:DataGrid id=&quot;dgrid&quot; dataProvider=&quot;{myArray}&quot; editable=&quot;false&quot; width=&quot;763&quot; height=&quot;411&quot; bottom=&quot;0&quot; right=&quot;0&quot;>               <mx:columns>                      <mx:DataGridColumn headerText=&quot;Employee ID&quot; dataField=&quot;id&quot;/>                      <mx:DataGridColumn headerText=&quot;First Name&quot; dataField=&quot;firstname&quot;/>                      <mx:DataGridColumn headerText=&quot;Last Name&quot; dataField=&quot;lastname&quot;/>               </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 Flex Accessing 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-INFflexservices-config.xml inside <services-config> tag:           <factories>                <factory id=&quot;spring&quot; class=&quot;flex.samples.factories.SpringFactory&quot;/>           </factories> 4). If you are using JRun as app server, set the following in WEB-INFjrun-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 ootWEB-INFapplicationContext.xml
      • see next slide
    • 30. A piece of Webapps ootWeb-infapplicationContext.xml
      • <bean id=&quot;dataSource&quot; class=&quot;org.springframework.jdbc.datasource.DriverManagerDataSource&quot;>
      • <property name=&quot;driverClassName&quot; value=&quot;org.gjt.mm.mysql.Driver&quot;/>
      • <property name=&quot;url&quot; value=&quot;http://localhost:3306/test&quot;/>
      • <property name=&quot;username&quot; value=&quot;root&quot;/>
      • <property name=&quot;password&quot; value=&quot;&quot;/>
      • </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)
    • 34.  

    ×