Another Random Developer 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.


Please note:
I have contributed this blog to the NetBeans Community.


Table of contents

• Introduction
• FlexBean Plugin
• Create the Flex Application
• Java Servlet
• Start the Application
• Downloads

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.




Name the Project “SimpleFlexApp” and hit “Finish“.




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




Replace the Content of “Main.mxml” with this Code:


Main.mxml

<?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]" 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:


LoginVO.as

/**
 * 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;

		}

	}
}

Your Project have to look like this:




Build the Project to see that everything is working.




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




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“.




Paste this Code into the file:

LoginServlet.java

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>

}

Start the Application

First start the Java Servlet and than the Flex Application.




The Flash Player opens.




Insert some data and click on “Submit” to send the input to the Java Servlet.




If the connection is set up alright (check the HTTPService in “Main.mxml“) you will receive a positive answer.




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

NetBeans 6.5 Flex Project: download
NetBeans 6.5 Java Servlet Project: download
Adobe Flex Builder 3 Project: download

Technorati Tags: adobe, flex, flexbean, Java, NetBeans, servlet

Tags: adobe, flex, flexbean, Java, NetBeans, servlet

Trackback URI | Comments RSS