FlexApplicationsWithNetBeans - NetBeans Wiki

FlexApplicationsWithNetBeans

Create Flex Applications with NetBeans 6.5 and FlexBean

flexlogo netbeanslogo flexbean logo

Written by Siegfried Bolz
The original blog is available at Another Random Developer Blog
If you have comments, suggestions.. feel free to drop a line in my blog.




In this Blog i will show you how to develop Adobe Flex Applications with the NetBeans 6.5 IDE. The used plugin FlexBean is still under development by Arnaud Vincent. Many features are missing in the Version 1.0.1 used in this Blog, for example syntax highlighting and a GUI-Designer.

Contents




Introduction

In this "proof-of-concept" you will create a Flex Application which sends Login-Data to a Java-Servlet (also created with NetBeans 6.5). The Servlet returns an answer which will be interpreted by the Flex Application. It is a very simple Application, you should only see how easy it is to go productive with FlexBean.


FlexBean Plugin

Before you can create Flex Applications with NetBeans, you have to install the FlexBean Plugin. Follow the Instructions for the Installation.


Create the Flex Application

Create a new "Flex Application"-Project.

http://blog.jdevelop.eu/uploads/2009/01/bild1.png


Name the Project "SimpleFlexApp" and hit "Finish".

http://blog.jdevelop.eu/uploads/2009/01/bild2.png


You see now the new Project with the opened MXML-File.

http://blog.jdevelop.eu/uploads/2009/01/bild3.png


Replace the Content of "Main.mxml" with this Code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple Flex App which sends login-data to a Servlet
	 located at: http://localhost:8084//simplelogin/loginservlet

	 @author Siegfried Bolz
-->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="" color="#FFFFFF" layout="absolute" borderColor="#FDFEFF" backgroundGradientAlphas="[[1.0,1.0 | 1.0, 1.0]]" backgroundGradientColors="[#205CF6,#01013D]" width="400" height="300">

	<mx:Script>
		<![CDATA[

			import mx.events.ValidationResultEvent;
			import mx.controls.Alert;
 			import mx.rpc.events.FaultEvent;
         	import mx.rpc.events.ResultEvent;


			private function validateID(event:MouseEvent):Boolean{
				 if (idValidator.validate().type == ValidationResultEvent.VALID) {
				 	return true;
			     } else{
				 	Alert.show("Please insert an ID !");
				 	return false;
				 }
			}


			private function validatePassword(event:MouseEvent):Boolean {
				 if (passValidator.validate().type == ValidationResultEvent.VALID){
				 	return true;
			     } else{
				 	Alert.show("Please insert a Password !");
				 	return false;
				 }
			}


			private function checkLoginData(event:MouseEvent):void {
			     if (validateID(event)==true && validatePassword(event)==true) {
			 		submitLoginData(txtID.text,txtPassword.text);
			 	 }
			}



			private function submitLoginData(id:String, password:String):void {
				lblError.visible = false;
				var login:LoginVO = new LoginVO(id,password);
				loginService.cancel();
				loginService.send(login);
			}


			private function onResult(event:ResultEvent):void{
				var resultObj:Object = event.result;
			 	var result:String = resultObj.message;

			 	if (result=="true") {
			 		Alert.show('Login successful!');
			 	} else {
			 		Alert.show('Login denied!');
			 	}

			}


	        private function serverFault(evt:FaultEvent):void {
				lblError.visible = true;
	        }


		]]>
	</mx:Script>


    <!-- Connection to the Server -->
    <mx:HTTPService id="loginService" useProxy="false" method="POST" resultFormat="object"
    	url="http://localhost:8084//simplelogin/loginservlet" result="onResult(event)"
    	fault="serverFault(event);" />

   	<!-- Validators -->
    <mx:StringValidator id="idValidator" source="{txtID}" property="text" triggerEvent=""/>
    <mx:StringValidator id="passValidator" source="{txtPassword}" property="text" triggerEvent=""/>

    <!-- GUI Elements -->
    <mx:Label text="Please insert your Login data" fontWeight="bold" x="122.5" y="32" fontSize="12"/>
    <mx:Label text="ID" x="72" y="71" fontSize="11" fontWeight="bold"/>
    <mx:Label text="Password" x="72" y="129" fontSize="11" fontWeight="bold"/>
    <mx:TextInput x="72" y="87" editable="true" color="#010000" id="txtID"/>
    <mx:TextInput x="72" y="144" color="#020000" displayAsPassword="true" id="txtPassword" editable="true"/>
    <mx:Button x="72" y="195" label="Submit" id="cmdSubmit" click="checkLoginData(event)"/>
    <mx:Label x="72" y="242" text="Error, wrong login data!" width="222" id="lblError" color="#FF0000" fontSize="16" fontWeight="bold" visible="false"/>

</mx:Application> 	 




Create a new ActionScript-File, name it "LoginVO" and paste this code into it:

/**
 * Transfer-Object for the HTTPService-call.
 *
 * @author Siegfried Bolz
 */
package
{
	public class LoginVO {

		public var id:String;
		public var password:String;


		// Konstruktor
		public function LoginVO(id:String,password:String) {

			this.id = id;
			this.password = password;

		}

	}
}




http://blog.jdevelop.eu/uploads/2009/01/bild5a1.png


Your Project have to look like this: http://blog.jdevelop.eu/uploads/2009/01/bild4.png


Build the Project to see that everything is working.

http://blog.jdevelop.eu/uploads/2009/01/bild5c.png


If you get this error: "Error: could not find a JVM":

http://blog.jdevelop.eu/uploads/2009/01/bild5d.png


your Flex SDK Configuration File is invalid. Open the file "jvm.config" located in your "<SDK>/BIN" -directory and check that the variable "java.home=" is set to a valid Java JRE directory (remove the last slash!). Here is an example:

java.home=C:/Program Files/Java/jre1.6.0_07




Java Servlet

Create a new Java Web Application Project, name it "SimpleLogin" and add a Servlet (LoginServlet.java) with URL-Pattern "/loginservlet".
http://blog.jdevelop.eu/uploads/2009/01/bild5b.png


Paste this Code into the file:

package eu.jdevelop.blog.flexbean;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Login Servlet
 * 
 * @author Siegfried Bolz
 */
public class LoginServlet extends HttpServlet {
   
    /** 
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     * 
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {

            String id = request.getParameter("id");
            String password = request.getParameter("password");

            System.out.println("received data from the Flex Application: id=" + id + " password=" + password);

            if (id==null || password==null) {
                out.println("<message>false</message>");
            } else {
                out.println("<message>true</message>");
            }
            
        } catch (Exception x) {
            System.out.println("Error: " + x.getMessage());
        } finally { 
            out.close();
        }
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /** 
     * Handles the HTTP <code>GET</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /** 
     * Handles the HTTP <code>POST</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
     * Returns a short description of the servlet.
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}




http://blog.jdevelop.eu/uploads/2009/01/bild6.png


Start the Application

First start the Java Servlet and than the Flex Application.
http://blog.jdevelop.eu/uploads/2009/01/bild7.png


The Flash Player opens.
http://blog.jdevelop.eu/uploads/2009/01/bild8.png


Insert some data and click on "Submit" to send the input to the Java Servlet.
http://blog.jdevelop.eu/uploads/2009/01/bild9.png


If the connection is set up alright (check the HTTPService in "Main.mxml") you will receive a positive answer.
http://blog.jdevelop.eu/uploads/2009/01/bild10.png


As you can see, it is possible to work with NetBeans in the Flex Environment, but there are many improvements necessary to replace the Adobe Flex Builder with the FlexBean-Plugin. Arnaud Vincent has enriched the NetBeans-Community with a new way, how NetBeans can be used for the Development today. It shows how flexible the NetBeans-Platform is, to fit the needs of the future.


Downloads



Have a lot of fun!

---
Siegfried Bolz
Another Random Developer Blog

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo