회원가입은 아이디, 비밀번호, 이름 등의 정보를 받아서
RemoteObject를 통해 Join메소드를 호출하기만 하면 끝입니다 ^^

그냥 값만 넘겨주면 자바클래스에서 처리를 합니다.













[code]
public int Join(String id, String pwd, String name, int age, String sex, String tel)
{
  Connection con = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;
 
  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);

   // 입력한 ID와 같은 ID를 추출(이미있는 id인지 확인위함)
   pstmt = con.prepareStatement("SELECT id FROM bs_Member WHERE id = ?");
   pstmt.setString(1, id);
   rs = pstmt.executeQuery();
   if (rs.next()) {
    return 2;
   } else {
    // 신규등록을 위해 INSERT문을 이용해 DB에 삽입
    pstmt = con.prepareStatement(
                "INSERT INTO bs_Member (id, pwd, name, age, sex, tel) " +
                "VALUES (?, ?, ?, ?, ?, ?)");
    pstmt.setString(1, id);
    pstmt.setString(2, pwd);
    pstmt.setString(3, name);
    pstmt.setInt(4, age);
    pstmt.setString(5, sex);
    pstmt.setString(6, tel);
    pstmt.executeUpdate();
    return 1;
   }
  } catch (SQLException e) {
   e.printStackTrace();
   return 0;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (pstmt != null) try { pstmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
 }
[/code]
이미 있는 ID인지 확인을 위해 검사해서 ID가 있으면 2를 리턴, 없으면 DB에 삽입 후에 1을 리턴합니다.

FLEX로 가봅시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" xmlns:comp="*" backgroundColor="#c0c0c0" backgroundAlpha="0.7"
creationComplete="initWindow()">
 
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private function initWindow():void {
    joinwindow.x = this.width / 2 - 150;
    joinwindow.y = this.height / 2 - 200;
   }
   
   private function RequestJoin():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    /*
     아이디 길이등의ㅣ 검사문-_-; 귀찮아서-_-;
    */
   
    if (sextext.text == "남" || sextext.text == "여"){
     srv.Join(
       idtext.text, pwtext.text,
       nametext.text, agetext.text, sextext.text, teltext.text);
    } else {
     Alert.show("남 또는 여 라고 입력하세요!");
     return;
    }
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show("가입에 성공했습니다.");
      idtext.text = "";
      pwtext.text = "";
      nametext.text = "";
      agetext.text = "";
      sextext.text = "";
      teltext.text = "";
      visible = false;
      break;
     case 2 :
      Alert.show("ID가 이미있습니다.");
      break;
    }
   }
   
   private function faultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 <mx:TitleWindow id="joinwindow" width="300" height="300"
layout="absolute" title="회원가입하기">
  <mx:Label x="72.5" y="35" text="ID "/>
  <mx:Label x="72.5" y="61" text="PW"/>
  <mx:Label x="70.5" y="87" text="이름"/>
  <mx:Label x="70.5" y="113" text="나이"/>
  <mx:Label x="70.5" y="139" text="성별"/>
  <mx:Label x="70.5" y="167" text="전화"/>
  <mx:TextInput id="idtext" x="103.5" y="33" width="112"/>
  <mx:TextInput id="pwtext" x="103.5" y="59" width="112"
displayAsPassword="true"/>
  <mx:TextInput id="nametext" x="103.5" y="85" width="112"/>
  <mx:TextInput id="agetext" x="103.5" y="111" width="112" restrict="0-9"/>
  <mx:TextInput id="sextext" x="103.5" y="137" width="112"/>
  <mx:TextInput id="teltext" x="103.5" y="165" width="112"/>
  <mx:Button x="79.5" y="193" label="가입신청" click="RequestJoin();"/>
  <mx:Button x="157.5" y="193" label="취소" click="visible=false"/>
 </mx:TitleWindow>
</mx:Canvas>

[/code]
가입신청버튼을 클릭하면 RequestJoin()을 호출합니다. 이것은 RemoteObject를 통해 Join메소드를 호출합니다. 그리고 리턴값에 따라 1이면 성공, 2이면 이미 id가 있다고 알려줍니다. 텍스트박스를 다 초기화하고 visible을 false로 바꿔 창을 다시 로그인창으로 바꿉니다.

아 그리고 agetext를 보면 restrict="0-9"라고 써 놓으면 저 필드에는 숫자밖에 입력이 안됩니다. 좋은 정보입니다 핫핫-_-;

예매시스템 소스파일입니다.
http://mudchobo.tomeii.com/tt/108
 
Posted by 머드초보
,
 

플렉스 세션에 대한 예제가 별로 없어서 찾기 힘들었는데 그냥 서블릿세션처럼 쓰면 되는 것이더군요-_-;

우선 플렉스세션을 만들어야하는데 서버측 프로그래밍할 때 그냥 FlexSession쓸라고하면 에러납니다. LCDS깔 때 있는 flex.war파일에 포함되어있는 jar파일을 서버측 프로그래밍 할 때 즉 컴파일할 때 필요합니다.

저는 작업할 때 Flex Builder2랑 Eclipse랑 두개 띄워놓고 작업합니다-_-;
자바 프로그래밍 하기 위해서 Eclipse에서 세션을 만들어봅시다.

우선 Dynamic Web Project로 프로젝트를 하나 만듭니다.

그리고 필요한 jar파일을 넣어야합니다. flex.war가 디플로이 되면 WEB-INF\LIB폴더에 JAR파일이 있는데 여기서 message관련된거 이클립스에서 만든 프로젝트 lib에다가 복사합니다(사실 잘 몰라서 다 복사했습니다-_-;)
flex-messaging.jar, flex-messaging-common.jar, flex-messaging-opt.jar, flex-messaging-req.jar ^^

[code]
package flex.session;

import flex.messaging.FlexSession;
import flex.messaging.FlexContext;

public class SessionRO {

 public void setSession(String id) {
  FlexSession session = FlexContext.getFlexSession();
  session.setAttribute("id", id);
  System.out.println("세션설정성공");
 }
 
 public String getSession() {
  FlexSession session = FlexContext.getFlexSession();
  String id = session.getAttribute("id").toString();
  System.out.println("세션가져오기성공");
  return id;
 }
 
 public void removeSession() {
  FlexSession session = FlexContext.getFlexSession();
  session.invalidate();
 }
}
[/code]
간단합니다. setSession은 세션을 설정(로그인시)하는 것이고, getSession은 세션을 가져오는 것이고(있으면!), removeSession은 세션을 삭제(로그아웃시)하는 것입니다.

근데 문제점은 이놈을 테스트하려면 {was}/webapp/flex/WEB-INF/classes/에 복사해놓고 mxml이나 as에서 밖에 테스트를 못합니다-_-; jsp에서 테스트를 하려니 안되더군요 ^^ 꽤 고생했습니다-_-;

아 그리고 DB구조는 이렇게 되어있습니다.
[code]
CREATE TABLE `bs_Member` (
  `id` varchar(20) NOT NULL,
  `pwd` varchar(20) default NULL,
  `name` varchar(20) default NULL,
  `age` int(10) unsigned default NULL,
  `sex` varchar(20) default NULL,
  `tel` varchar(20) default NULL,
  PRIMARY KEY  (`id`)
)
[/code]

로그인 메소드를 보도록 합시다.
[code]
public int Login(String id, String pw) {
  Connection con = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;
 
  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
        
   pstmt = con.prepareStatement("SELECT pwd FROM bs_Member WHERE id = binary(?)");
   pstmt.setString(1, id);
   rs = pstmt.executeQuery();
   rs.last();
   int rowCount = rs.getRow();
   rs.beforeFirst();

   if(rowCount != 0) {
    rs.next();
    if(pw.equals(rs.getString("pwd"))) {
     return 1;
    } else {
     return 2;
    }
   }
   else {
    return 3;
   }
  } catch (SQLException e) {
   e.printStackTrace();
   return 0;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (pstmt != null) try { pstmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
 }
[/code]
bs_Member테이블에서 로그인한 id가 있는지 검사를 하고 id가 있으면 3를 리턴하고, 없으면 비밀번호가 같은지 검사하고 같으면 1을 리턴하고, 틀리면 2를 리턴합니다. 플렉스 as에서 1을 받으면 성공이라고 뿌리고 이런식으로 했습니다.

자 그러면 flex에서 보도록 합시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" xmlns:comp="*" backgroundColor="#c0c0c0"
backgroundAlpha="0.7" creationComplete="initWindow()">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private function initWindow():void {
    loginwindow.x = this.width / 2 - 150;
    loginwindow.y = this.height / 2 - 150;
   }
   
   private function RequestLogin():void {
    var srv:RemoteObject = new RemoteObject();
    loginbtn.enabled = false;
    joinbtn.enabled = false;
    srv.destination = "booksystem";
   
    srv.Login(idtext.text, pwtext.text);
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "session";
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show(idtext.text + "님 환영합니다.");
      srv.addEventListener("result", sessionresultHandler);
      srv.addEventListener("fault", sessionfaultHandler);
      srv.setSession(idtext.text);
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
     case 2 :
      Alert.show("비밀번호가 틀립니다.");
      pwtext.text = "";
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
     case 3 :
      Alert.show("ID가 없습니다.");
      pwtext.text = "";
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
    }
   }
   private function faultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
    loginbtn.enabled = true;
    joinbtn.enabled = true;
   }
   
   private function sessionresultHandler(event:ResultEvent):void {
    parentApplication.loginid = idtext.text;
    parentApplication.infota.text = idtext.text + "님 방가방가!";
    idtext.text = "";
    pwtext.text = "";
    visible = false;
   }
   
   private function sessionfaultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 
 <mx:TitleWindow id="loginwindow" width="300" height="200" layout="absolute"
   title="M.C the MAX공연 예매 시스템에 오신 것을 환영합니다.">
  <mx:Label x="64.5" y="35" text="ID : "/>
  <mx:Label x="64.5" y="65" text="PW : "/>
  <mx:TextInput id="idtext" x="103.5" y="33" width="112"/>
  <mx:TextInput id="pwtext" x="103.5" y="63" width="112"
displayAsPassword="true" enter="RequestLogin();"/>
  <mx:Button id="loginbtn" x="64.5" y="93" label="로그인"
width="73" click="RequestLogin();"/>
  <mx:Button id="joinbtn" x="145.5" y="93" label="회원가입"
click="parentApplication.showJoin();"/>
 </mx:TitleWindow>
</mx:Canvas>
[/code]
id, pw를 입력하고 엔터 또는 로그인버튼을 클릭하게 되면 RemoteObject를 통해서 Login메소드를 호출하게 됩니다. 호출을 해서 성공적으로 리턴하면 resultHandler함수에 리턴값을 받아 그 리턴값에 따라 Alert을 해줍니다. 로그인을 성공해버리면 setSession을 통해 세션을 설정합니다.

이게 다군요-_-; 로그인을 성공하게 되면 자기자신은 visible을 false로 바꿔버립니다. 그래서 뒤에 있는 실제 메뉴를 건드릴 수 있게 했죠-_-; 아....진짜 이따구로도 가능하다는 것을 보여주는군요.

예매시스템 소스파일입니다.
http://mudchobo.tomeii.com/tt/108
 
Posted by 머드초보
,
 

아....친구한테 RemoteObject를 했다고하니까 욕먹었습니다-_-; 실무에서 쓰이지 않는다고 하더군요. 이 LCDS라는게 좀 비싸서 ^^

그리고 객체지향적인 AS3.0의 특성을 살리지 않고, 멋대로지향적으로 설계를 했습니다-_-; 다시 객체지향적으로 변경해서 해보도록 하겠습니다-_-;

뭐 그래도 삽질했으니까 올립니다. 보고 플렉스를 공부하시는 분들 도움이 되셨으면 좋겠어요(아마 도움이 안될껍니다-_-;)
이따구로도 플렉스를 할 수 있다는 것을 보여준 참 좋은 예인거 같습니다-_-;

프로그램은 간단합니다.
로그인, 회원가입으로 아이디를 생성하고, 예약하고 싶은 좌석을 선택해서 예약하면 예약되고-_-;
예약한 좌석 리스트를 보고 예약취소하고 싶으면 선택해서 취소해버리면 됩니다-_-;

덤으로 차팅도 두개 넣었구요. 로그인 로그아웃 등의 flexSession을 이용해서 제작했습니다.

웹에다가 올리려고 했는데 서버가 다운됐어요-_-; 친구한테 욕먹게 생겼어요-_-;
친구한테 물어보고 되면 올려볼께요-_-; 뭐 보고싶은 사람도 없겠지만-_-;

아 올렸어요-_-; 예제사이트입니다-_-;
http://mudchobo.tomeii.com/flex/Booksystem/Booksystem.swf

소스는 플렉스꺼랑 자바클래스꺼랑 두개가 있습니다!
이게 플렉스꺼 mxml파일들입니다.




이게 자바클래스입니다 ^^




DB구조입니다.



나중에 삽질한 거 설명하면서 차근차근 올려보도록 하겠습니다-_-;
사용자 삽입 이미지
사용자 삽입 이미지

사용자 삽입 이미지
사용자 삽입 이미지

 
Posted by 머드초보
,
 

Remote Object
RemoteObject는 Flex데이터 서비를 설치한 WAS(ex.톰캣 등)에서 자바빈즈를 호출하여 그 결과를 Binary 형태의 AMF(Action Message Format)로 처리합니다.
우선 뭔지 잘 모르겠지만, 자바빈즈를 가져올 수 있는 듯하네요 ^^

우선 전에 포스팅한 환경설정을 다 했다면 톰캣폴더\webapps\flex\ 폴더가 생겼을 껍니다.

자 이제 flex builder2 를 켜봅시다.

File -> New -> Flex Project 합시다.
3번째의 Flex Data Services를 선택하고, 옵션은 Complile on the server when the page is viewed로 합시다.

사용자 삽입 이미지


넥스트를 하면 폴더지정하라고 나오는데요.
Root folder는 톰캣폴더\webapps\flex 로 지정하면 되구요.
Root URL은 톰캣은 8080을 써서 8080으로만 바꿔주면 돼요. JRUN이 8700으로 쓰더군요. 톰캣도 뭐 바꾸면 바꿀 수 있죠 ^^ 디폴트가 8080이니 8080으로 써줍시다.
context root는 flex로 합니다.

사용자 삽입 이미지

프로젝트 이름은 RemoteTest로 합시다. Finish로 하면 프로젝트가 하나 만들어집니다^^

자 그러면 빈즈를 작성하기위해 이클립스를 실행합시다.

File -> New -> Project -> Dynamic Web Project로 선택해서 Member라는 이름으로 하고 Finish를 합시다.
Java Resousrces: src에 대고 마우스오른쪽버튼을 눌러서 pakage를 선택합니다.

패키지이름은 flex.member라고 합시다.
이 패키지 안에 자바파일을 두개 만들껍니다. 하나는 Beans파일이고 하나는 Service파일입니다.

우선 Beans파일입니다. MemberVO.java 라는 이름으로 만듭시다.

beans파일은 이클립스가 다 만들어줍니다. 저도 멋도모르고 다 쳤는데 바보같은 짓하지 말고--;

우선 멤버변수만 써줍니다.
[code]
package flex.member;

public class MemberVO {
    String id;
    String password;
    String name;
    int age;
    String sex;
    String tel;
}
[/code]

위와 같이 써주고, Project Explorer에서 MemberVO.java에 오른쪽바우스버튼을 클릭하고 Source -> Generate getter and setter 클릭하시고, Select All하시고 OK만 누르면 자동으로 만들어집니다.

[code]
public class MemberVO {
 String id;
 String password;
 String name;
 int age;
 String sex;
 String tel;
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public int getAge() {
  return age;
 }
 public void setAge(int age) {
  this.age = age;
 }
 public String getSex() {
  return sex;
 }
 public void setSex(String sex) {
  this.sex = sex;
 }
 public String getTel() {
  return tel;
 }
 public void setTel(String tel) {
  this.tel = tel;
 }
}
[/code]

다음은 MemberService.java를 만들어봅시다.
[code]
package flex.member;

import java.util.ArrayList;
import java.util.List;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import flex.member.MemberVO;

public class MemberService {
 public List<MemberVO> getElements() throws SQLException {

  long startTime = System.currentTimeMillis();
 
  try {
   Class.forName("com.mysql.jdbc.Driver");
  } catch (ClassNotFoundException e) {
  }

  Connection con = null;
  List<MemberVO> list = new ArrayList<MemberVO>();

  String sql = "SELECT * FROM Member_List";

  try {
   String url = "jdbc:mysql://db주소";
   con = DriverManager.getConnection(url,"db아이디", "db비밀번호");
   PreparedStatement stmt = con.prepareStatement(sql);

   ResultSet rs = stmt.executeQuery();

   while (rs.next()) {
    MemberVO mb = new MemberVO();
    mb.setId(rs.getString("Id"));
    mb.setPassword(rs.getString("Password"));
    mb.setName(rs.getString("Name"));
    mb.setAge(rs.getInt("Age"));
    mb.setSex(rs.getString("Sex"));
    mb.setTel(rs.getString("Tel"));
    list.add(mb);
   }
  } catch (SQLException e) {
   e.printStackTrace();
  } finally {
   try {
    con.close();
   } catch (Exception ignored) {
   }
  }

  System.out.println("Service execution time: "
    + (System.currentTimeMillis() - startTime));

  return list;
 }
}
[/code]

DB를 구축해봅시다. MYSQL을 사용하도록 합시다.
[code]
CREATE TABLE `Member_List` (
  `ID` varchar(10) NOT NULL,
  `Password` varchar(10) NOT NULL,
  `Name` varchar(10) NOT NULL,
  `Age` int(2) NOT NULL,
  `Sex` varchar(2) NOT NULL,
  `Tel` varchar(12) NOT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=euckr COMMENT='회원 멤버 리스트입니다.';

INSERT INTO `Member_List` (`ID`, `Password`, `Name`, `Age`, `Sex`, `Tel`)
VALUES
('mudchobo', '1234', '성종천', 25, '남', '01000000000'),
('hermusseri', 'hermu', '김효진', 23, '여', '01000000000'),
('k1011606', '1234', '강현욱', 24, '남', '01000000000'),
('shs8326', '1234', '성현식', 58, '남', '01000000000'),
('jor0737', '1234', '조옥렬', 49, '여', '01000000000'),
('boazzang', 'boalove', '보아짱', 30, '여', '0100000000'),
('webserv', 'babo', '웹서비스', 45, '남', '01000000000'),
('child', 'ggoma', '꼬마', 15, '여', '01000000000'),
('mudcosdf', '1234', '성종텬', 99, '남', '01000000000');
[/code]

저 SQL을 그대로 가져다가 써봅시다.

자 이제 만들어진 클래스파일들을 복사해야합니다. 어디로 복사하느냐! flex에 있는 곳에 복사해야합니다.
이클립스에서 작업한 Member프로젝트에서 class폴더를 통채로 복사를 해서
톰캣폴더\webapps\flex\WEB-INF\classes폴더랑 합체를 합니다!

이제 이것을 쓸 수 있게 remoting-config.xml파일을 수정해야합니다. 이파일은 톰캣폴더\webapps\flex\WEB-INF\flex\ 폴더에 있습니다.

[code]
<destination id="member">
  <properties>
   <source>flex.member.MemberService</source>
  </properties>
 </destination>
[/code]
방금복사한 Service클래스를 소스로 id를 member로 지정해서 사용하겠다는 뜻으로 보입니다 ^^

자 이제 플렉스 프로그래밍 해봅시다!-_-;

맨처음 생성한 remotetest프로젝트에서 remotetest.mxml파일을 열어봅시다.
remote object를 사용하는 방법은 두가지 방법이 있는데 mxml태그를 사용할 수도 있고, action script를 사용할 수도 있습니다. action script로 해봅시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                           layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private var startTime:Number;
   
   private function resultHandler(event:ResultEvent):void{
        dg.dataProvider = event.result;
   }
   
   private function faultHandler(event:FaultEvent):void{
        mx.controls.Alert.show("실패 메세지 : " + event.fault.message);
   }
   
   private function retrieve():void
  {
   var srv:mx.rpc.remoting.RemoteObject = new RemoteObject();
   srv.destination = "member";
   
   startTime = new Date().time;
   srv.getElements();
    
   srv.addEventListener("result",resultHandler);
   srv.addEventListener("fault",faultHandler);
  }
   
  private function logResult():void
  {
   if (startTime > 0)
   {
    log.text = "" + (new Date().time - startTime) + " milliseconds";
   }
  } 
  ]]>
 </mx:Script>
 
  <mx:Panel title="AS를 이용한 RemoteObject예" width="100%" height="100%">
  <mx:DataGrid id="dg" width="100%" height="100%"
                 updateComplete="logResult()"/>
   <mx:ControlBar>
    <mx:Button label="데이터 가져오기" click="retrieve()"/>
   <mx:Label id="log"/>
   </mx:ControlBar>
 </mx:Panel>
</mx:Application>
[/code]

이제 톰캣을 가동한다음에 ctrl + F11을 눌러서 실행해봅시다.
사용자 삽입 이미지


 
Posted by 머드초보
,
 
아직 저도 잘 모릅니다. 그래도 오늘 많이 삽질했으니 포스팅하겠습니다-_-;

플렉스를 이용한 환경을 다 만들었으면 플렉스를 해봐야겠죠!

FlexBuilder를 실행해봅시다.

익숙한 이클립스가 뜹니다! 덕분에 더 자신감을 가지게 해줍니다-_-; 자바개발자라면 누구나 써본 이클립스로 플렉스를 할 수 있다니!

File -> New -> Flex Project를 선택합니다.
3가지 종류가 나오는데 뭐 잘 모르니까 Basic를 선택합시다-_-;

넥스트를 눌러서 프로젝트 이름은 HelloWorld라고 찍읍시다. 정말 좋아하는 단어입니다.
Finish를 눌러서 프로젝트를 생성합니다.

HelloWorld.mxml 이라는 파일이 처음에 열려있네요.
mxml은 무슨 확장자냐! Machine-oriented extensible markup language 이라고 하더군요. 저도 잘모르겠습니다. 그런데 xml인거 같습니다 ^^ 태그 열고 닫고 하는게 xml과 같습니다.

이 프로젝트에서 ActionScript를 추가해봅시다.
File -> New -> ActionScript를 선택하고, HelloWorld폴더를 선택하고, 이름은 Greeter.as로 씁시다.

여기다가 코딩을 합시다.

[code]
package {
    public class Greeter {
        public static function sayHello():String {
            var greeting:String = "Hello World!";
            return greeting;
        }
    }
}
[/code]

내용을 보시면 package는 잘모르니 생깝시다. class를 정의 했는데 Greeter라는 클래스입니다. 이거의 멤버함수로 sayHello라는 것이 있습니다. 이건 리턴타입을 맨뒤에 써줍니다. 변수는 무조건 var로 선언하고, 타입은 그 뒤에 써줍니다. 안써주면 Object형이 됩니다.

클래스를 작성했으니 이 클래스를 mxml에서 사용해보도록 합시다.

[code]
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"   
 layout="vertical" creationComplete="initApp()"> 
 <mx:Script> 
 <![CDATA[ 
  public function initApp():void { 
       mainTxt.text = Greeter.sayHello(); 
     } 
 ]]> 
 </mx:Script> 
 <mx:TextArea id="mainTxt" width="400" /> 
</mx:Application>
[/code]

script부분의 initApp()함수를 보면 mainTxt.text라는 곳에다가 Greeter클래스의 static함수인 sayHello를 호출해서 넣겠다는 표현으로 보이구요.
아래에는 TextArea를 만드는데 이것의 이름이 mainTxt입니다. 거기의 text를 적겠다는 것 같습니다.

대충 보면 html처럼 위에 script는 자바스크립트라고 생각되고, 아래는 html처럼 input태그가 들어가는 것처럼 생각해도 되려나-_-; 어쨌든 그런 구조인거 같습니다 ^^

위에 플레이버튼 같이 생긴거 run을 클릭하면(Ctrl + F11) 아래와 같은 화면이 뜰껍니다.

사용자 삽입 이미지

정확한 동작구조는 파악을 못했는데요-_-; 좀더 공부해봐야 할꺼같습니다 ^^
 
Posted by 머드초보
,