[실습1-1][memo] DB, MXML 페이지 제작(memoFx.mxml)

[실습1-1][memo] DB, MXML 페이지 제작(memoFx.mxml)

[01] Flex Data Service HttpService의 사용

     - mx:Application 태그

       . layout="absolute": 콘트롤 배치 모드

       . creationComplete="init()": mxml이 실행시 자동으로 호출되는 함수

       . initialize="System.useCodePage=true": "euc-kr" 사용 가능 정의

       . jsp 페이지에서의 출력은 <%@ page contentType="text/xml; charset=euc-kr" %>에서

         "euc-kr"로 지정합니다.

    - Eclipse setting

      Project Type: Flex Project

      Project Name: memoFx

1. mxml 화면 디자인 순서

   1) VBox, HBox등을 배치

   2) 콘트롤 배치

   3) 콘트롤 레이블 수정

   4) id 등록, TextInput: txt~, TextArea: txa~, Button: btn~, Label: lbl~

   5) 콘트롤에 Event 함수 선언

   6) Style 작업 

      <mx:Style>

   7) Script 작업  

      <mx:Script>

2. JSP Middle ware 제작.

3. JSP Middle ware와 Flex 연결

[02] 제작

1.Database 테이블 구조

DROP TABLE memoFlex PURGE;

CREATE TABLE memoFlex(

    memoflexno NUMBER(5)    NOT NULL, -- 번호

    name       VARCHAR(255) NOT NULL, -- 성명

    content    VARCHAR(255) NOT NULL, -- 내용

    passwd     VARCHAR(10)  NOT NULL, -- 비밀 번호

    memodate   DATE,                  -- 등록일

    PRIMARY KEY(memoflexno)

);

INSERT INTO memoFlex(memoflexno, name, content, passwd, memodate)

VALUES((SELECT NVL(MAX(memoflexno), 0)+1 AS cnt FROM memoFlex),

       '가길동', '프로젝트 25일 1차 검사', '1', sysdate);

SELECT memoflexno, name, content, passwd, memodate       

FROM memoFlex

ORDER BY memoflexno DESC;    

-- 패스워드 체크

SELECT COUNT(*) as cnt

FROM memoFlex

WHERE memoflexno = 1 AND passwd='1';

COMMIT;

        

2. main 화면, mxml

     - 1024 X   768: width: 900, height:500  

     - 1280 X 1024: width: 1000, height:700  

>>>>> flex_memo.mxml

<?xml version="1.0" encoding="utf-8"?>

<!-- 페이지 로딩시 listData() 함수 실행 -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

    backgroundGradientColors="[#F7F794, #F61C06]"

    creationComplete="listData()" 

    width="676" height="496" 

    layout="vertical" 

    backgroundGradientAlphas="[1.0, 1.0]"

    >

 

    <mx:Style>

        global {

        font-size:11;

        }

    </mx:Style>

    

    <mx:Script> 

    <![CDATA[

        import mx.controls.Alert; // Alert 경고창 생성 

        import mx.rpc.events.FaultEvent; // HTTPService 호출 실패시 이벤트 

        import mx.rpc.events.ResultEvent;// HTTPService 호출 성공시 이벤트

        import mx.events.ListEvent; // DataGrid 관련 이벤트

        

       

        public var urlData:String = "http://localhost:8081/www_flex/memo/";

        public var list:String = urlData + "read_list.jsp";

        public var create:String = urlData + "create.jsp";

        public var update:String = urlData + "update.jsp";

        public var remove:String = urlData + "remove.jsp";         

        

        public var dataObj:Object = {

                       memoflexno:"",

                       name:"",

                       content:"",

                       passwd:"",

                       memodate:""

                   };

        

        /* 클릭한 데이터 그리드의 값의 인덱스 저장 */

        public var dataGridCursorIndex:int=0;//데이터 그리드의 인덱스

        

        

        public function resetData(){

            dataObj.memoflexno = "";

            dataObj.name = "";

            dataObj.content = "";

            dataObj.memodate = "";

            dataObj.passwd = "";

        }

        

        /* 데이터 그리드를 크릭하면 호출되는 함수 */

        public function itemClickEvent(event:ListEvent):void {

            dataGridCursorIndex = event.target.selectedIndex;

            /* 폼값에 클릭한 데이터 값 세팅 */

            if(dataGridCursorIndex != -1) {

                txtName.text = event.currentTarget.selectedItem.name;

                txtContent.text = event.currentTarget.selectedItem.content;

                txtMemodate.text = event.currentTarget.selectedItem.memodate; 

                // txtPasswd.text = event.currentTarget.selectedItem.passwd;

            }

        }

          

        /* 폼값을 리셋 */

        public function resetForm():void {

            txtName.text = '';

            txtContent.text = '';

            txtMemodate.text = '자동 입력';

            txtPasswd.text=''; 

        }

                

        /* 변경한 데이터 그리드의 값의 인덱스 변수에 저장 */        

        public function changeEvent(event:Event):void{

            dataGridCursorIndex = event.target.selectedIndex;

        }

        

        /* 현재 작업중인 데이터 그리드의 값을 Object형 dataObj에 저장 */        

        public function captureData():void {

            dataObj.memoflexno = dg.selectedItem.memoflexno;

            dataObj.name = dg.selectedItem.name;

            dataObj.content = dg.selectedItem.content;

            dataObj.memodate = dg.selectedItem.memodate;

            dataObj.passwd = dg.selectedItem.passwd;           

        }

        public function deleteCaptureData():void {

            dataObj.memoflexno = dg.selectedItem.memoflexno;

            dataObj.name = dg.selectedItem.name;

            dataObj.content = dg.selectedItem.content;

            dataObj.memodate = dg.selectedItem.memodate;

            dataObj.passwd = txtPasswd.text;

            // dataObj.passwd = dg.selectedItem.passwd;           

        }

                

        /* 목록 출력을 위해 서버에 요청, 조회 */

        public function listData():void {

            svcList.url = list; // read_list.jsp

            // 결과가 도착했을 때 처리할 함수 listResultHandler 등록

            //listHTTPSvc.addEventListener("result", listResultHandler);

            svcList.send();

            resetForm();   // 폼 삭제

        }

        

        /* 서버에 등록 요청 */

        public function registerData():void {

            

            if (txtName.text == ""){

                mx.controls.Alert.show("이름을 입력해주세요.");

                return;

            }

            if (txtContent.text == ""){

                mx.controls.Alert.show("메모를 입력해주세요.");

                return;

            }

            if (txtPasswd.text == ""){

                mx.controls.Alert.show("패스워드를 입력해주세요.");

                return;

            }

                        

            dataObj.name = txtName.text;                        

            dataObj.content = txtContent.text; 

            dataObj.passwd = txtPasswd.text;

                           

            svcUpdate.url = create;           

            svcUpdate.send(dataObj);

        }     

        

        /* 수정 요청 */

        public function updateData():void {

            dataObj.memoflexno = dg.selectedItem.memoflexno;            

            dataObj.name = txtName.text;                        

            dataObj.content = txtContent.text;

            dataObj.passwd = txtPasswd.text;

              

            svcUpdate.url = update;           

            svcUpdate.send(dataObj);

        }     

        /* 삭제 요청 */

        public function deleteData():void {

            resetData();

            deleteCaptureData();//현재  데이터를 캡쳐해서 DataObj에 세팅           

            svcUpdate.url = remove;           

            svcUpdate.send(dataObj);

        }

        

                   

        /* 조회 결과 처리, 개발자 지정 태그: result_set.result_meta.err_code */

        public function listResultHandler(event:ResultEvent):void {

            var err_code:uint = event.result.result_set.result_meta.err_code;

            var proc_cnt:uint = event.result.result_set.result_meta.proc_cnt;           

            if(err_code >= 1) {

                mx.controls.Alert.show("응답은 성공했으나 JSP 처리중 에러가 발생했습니다.", "에러 발생");                

            } else {

                if(proc_cnt == 0) {

                    mx.controls.Alert.show("처리된 데이터가 없습니다.", "처리 결과");                                  

                } else {

                    // mx.controls.Alert.show("처리된 데이터가 있습니다.", "처리 결과");

                    // dataProvider로 지정되는 태그는 반복 태그 record 까지 지정

                    dg.dataProvider = event.result.result_set.record;                               

                }

            }

        }

        

        /* 수정, 삭제  결과 처리 */

        public function updateResultHandler(event:ResultEvent):void {

            var err_code:uint = event.result.result_set.result_meta.err_code;

            var proc_cnt:uint = event.result.result_set.result_meta.proc_cnt;

            var message:String = event.result.result_set.result_meta.message;           

            if(err_code >= 1) {

                mx.controls.Alert.show("처리중 에러가 발생했습니다.\n" + message, "에러 발생");                

            } else {

                if(proc_cnt == 0) {

                    mx.controls.Alert.show("처리된 데이터가 없습니다.", "처리 결과");  

                } else {                

                    //mx.controls.Alert.show("처리 되었습니다.", "처리 결과");       

                    listData(); // 목록 출력     

                }

            }

        }   

        

        /* 수정, 삭제  실패시 결과 처리 */             

        public function faultHandler(event:FaultEvent):void {

            mx.controls.Alert.show(event.fault.faultString, 'Error');

        }

        

    

    ]]>

   </mx:Script>

   

   

    <!-- SELECT 처리 서비스 

    result="listResultHandler(event)": 응답 성공 핸들러 함수 등록

    fault="faultHandler(event)"      : 응답 실패 핸들러 함수 등록   

    -->

    <mx:HTTPService id="svcList" 

        useProxy="false" 

        showBusyCursor="true" 

        result="listResultHandler(event)"

        fault="faultHandler(event)" 

        method="POST" />

    

    <!-- INSERT, DELETE, UPDATE 처리 서비스 -->

    <mx:HTTPService id="svcUpdate" 

        useProxy="false" 

        showBusyCursor="true" 

        result="updateResultHandler(event)" 

        fault="faultHandler(event)" 

        method="POST"/>

    

    

    

    <mx:Panel title="메모 처리 예제" layout="vertical" width="616" height="448" verticalAlign="top" horizontalAlign="center">

        

        <!-- itemClick="itemClickEvent(event);: 클릭 이벤트 핸들러 -->

        <mx:DataGrid id="dg" 

            dataProvider="" width="590" height="196" 

            change="changeEvent(event)"

            editable="true" 

            itemClick="itemClickEvent(event);">

            <mx:columns>

                <mx:DataGridColumn dataField="memoflexno" headerText="번호" editable="false" visible="true" width="50"/>

                <mx:DataGridColumn dataField="name" headerText="작성자" width="50"/>

                <mx:DataGridColumn dataField="content" headerText="내용" width="400"/>

                <mx:DataGridColumn dataField="memodate" headerText="입력일자" width="150"/>                

                <mx:DataGridColumn dataField="passwd" headerText="패스워드" width="150" visible="false"/>

            </mx:columns>

        </mx:DataGrid>  

          

        <mx:Form width="100%" height="154">

            <mx:FormItem label="작성자" required="true">

                <mx:TextInput id="txtName" text="한글"/>

            </mx:FormItem>

            <mx:FormItem label="내용" required="true">

                <mx:TextInput id="txtContent" text="한글" width="494"/>

            </mx:FormItem>

            <mx:FormItem label="입력날짜" required="true">

                <mx:TextInput text="자동입력" id="txtMemodate" editable="false"/>

            </mx:FormItem>

            <mx:FormItem label="패스워드" required="true">

                <mx:TextInput id="txtPasswd" text="한글" displayAsPassword="true" />

            </mx:FormItem>

        </mx:Form>  

                

        <mx:ControlBar horizontalAlign="center">

            <mx:Button label="조회" id="btnList" click="listData()"/>

            <mx:Button label="새로 입력" id="btnCreate" click="resetForm()"/>

            <mx:Button label="저장" id="btnSave" click="registerData()"/>

            <mx:Button label="삭제" id="btnDelete" click="deleteData()"/>            

            <mx:Button label="수정" id="btnUpdate" click="updateData()"/>                

        </mx:ControlBar>

    </mx:Panel>

</mx:Application>

메인화면 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" width="798" height="607"> <mx:Style> global{ fontSize: 12; } </mx:Style> <mx:Script> <![CDATA[ public function evtRefresh():void{ } public function evtClear():void{ } public function evtSave():void{ } public function evtUpdateSave():void{ } public function evtDelete():void{ } ]]> </mx:Script> <mx:Panel layout="absolute" left="5" top="5" right="5" bottom="5" title="메모장" fontSize="12"> <mx:HBox left="0" top="0" bottom="0" right="0"> <mx:VBox height="100%" width="435" backgroundColor="#FFFFFF"> <mx:DataGrid height="100%" width="100%" id="dg"> <mx:columns> <mx:DataGridColumn headerText="번호" dataField="memoflexno" textAlign="center" width="40"/> <mx:DataGridColumn headerText="날짜" dataField="memodate" textAlign="center" width="80"/> <mx:DataGridColumn headerText="성명" dataField="name" textAlign="center" width="60"/> <mx:DataGridColumn dataField="content" headerText="내용" textAlign="left"/> </mx:columns> </mx:DataGrid> <mx:Button label="새로고침" width="100%" id="btnRefresh" click="evtRefresh()"/> </mx:VBox> <mx:VRule width="6" height="100%" strokeColor="#CCC4C4"/> <mx:Canvas width="100%" height="100%" backgroundColor="#D4F8CC"> <mx:VBox backgroundColor="#DBEDC8" left="10" top="10" bottom="10" right="10"> <mx:Label text="분류"/> <mx:TextInput width="100%" id="txtGrp"/> <mx:Label text="성명"/> <mx:TextInput id="txtName"/> <mx:Label text="내용"/> <mx:TextArea height="100%" width="100%" id="txaContent"/> <mx:Label text="비밀번호"/> <mx:TextInput id="txtPass"/> <mx:HBox width="100%" horizontalGap="1" horizontalAlign="center"> <mx:Button label="새로 입력" id="btnNew" cornerRadius="0" click="evtClear()"/> <mx:Button label="저장" id="btnSave" cornerRadius="0" click="evtSave()"/> <mx:Button label="수정 저장" id="btnUpdateSave" cornerRadius="0" click="evtUpdateSave()"/> <mx:Button label="삭제" id="btnDelete" cornerRadius="0" click="evtDelete()"/> </mx:HBox> </mx:VBox> </mx:Canvas> </mx:HBox> </mx:Panel> </mx:Application>