메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 api문서포함

82
메메메메 3 메메메메 메메메메 메메메메

Upload: uenginesolutions

Post on 10-May-2015

896 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

메타웍스 3 교육자료

기초부터 활용까지

Page 2: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

2Page

교육커리큘럼구 분 시 간 프로그램 비 고

3 월 9 일

(1 일차 )

~13:30워크숍 장소 집결 및 회의준비

( 장비세팅 및 물품구매 )

14:00~15:00상호인사 및 메타웍스 3 프레임워크

소개장진영 대표

15:00~15:10 휴 식

15:10~18:00 설치 및 기초실습

김승현 부장

조진원 과장

홍세진 과장

18:30~20:00 석 식

20:30~ 자유실습 및 토론의 장 개별 실습

3 월 10 일

(2 일차 )

~09:50 기상 및 조식

10:00~11:00

어드밴스드 메타웍스 3:

샘플어플리케이션 소개 및

개발과정 설명

장진영 대표

조진원 과장

11:00~12:00 각자 실습 - 예제 어플리케이션 개별 실습

12:00~13:00 중식

13:00~14:00 정리 및 해산

Page 3: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

3Page

AGENDA

- 메타웍스 3 기반 프레임워크의 이해

- 메타웍스 3 를 이용한 개발 실전

- 메타웍스 3 기반의 프로세스 코디 구현 방안 공유

Page 4: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

4Page

메타웍스 3 프레임워크 소개

메타웍스 3 프레임워크 특장점

메타웍스 3 프로젝트 설치 및 실행

메타웍스 3 프레임워크의 주요 파일들

메타웍스 3 개요I

Page 5: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

표준웹기반 생산성 극대화를 위한 프레임워크 – 메타웍스 3

유엔진 오픈소스 BPM 프로젝트장진영[email protected]

Page 6: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Concurrent Web-based Applications :

Page 7: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

고난이 요구사항

• 순수웹• 페이지 비전환• Lazy Loading• 키 / 마우스 바인딩• 모바일 동시지원• NIO 기반 채팅

품질

• 트랜잭셔널• 요소간 간섭최소화• 일관성 있는 사용자

경험과 예측성• UI 기반의 테스트

자동화

생산성• 서버 / 클라이언트

개발자 그리고 디자이너 역할구분어려워 – CSS/JS/Java/AJAX

• 다양한 언어를 넘나드는 과정의 커뮤니케이션 비용

• 순수자바개발자만있다 .

어떤 도구를 사용할 것인가 ?

시장의 요구수준

Page 8: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

UI 프레임워크 – 메타웍스 3기존 프로그래밍 모델 ( 이벤트 드리븐 ) 과 약간 차이가 있는 “선언형 프로그래밍 모델” – MDA, 메타데이터와 리플랙션을 계승함

1. 모델 중심 아키텍처의 장점은 적은 코드량과 도메인 중심의 비즈니스 목적 중심의 코드로 품질과 생산성을 동시에 높힘

2. 메타웍스 3 의 독특한 POJO 선언은 웹의 입력값과 버튼을 객체의 ‘필드’와 ‘메서드’로 기본매핑하여 ‘모델 기반 기본 앱’을 자동으로 구현해주어 ‘선 - 프로토타이핑’ 이 가능하다 .

3. 이후 객체에 특화된 디자인과 인터랙션을 공통모듈 디자이너와 개발자가 분산되어 작업할수 있으며 , 그 사이에도 도메인 개발자는 작업을 지속할 수 있다 .

4. 컴포넌트가 쌓이면 쌓일수록 개발의 추상성과 생산성은 배가된다 .

Page 9: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

선언형 방식이 뭔가요 ?선언형 프로그래밍 모델 일반 이벤트 - 드리븐 모델

#Only in Server / only in Domain-class @AutowiredFromClientpublic FormDefinition formDefinition;

@ServiceMethod( when=MetaworksContext.WHEN_VIEW, where="in-container", keyBinding=”delete", inContextMenu=true)

public FormDefinition remove() {

formDefinition.formFields.remove(this);return formDefinition;

}

#Clientdocument.addEventListener(new function(e){

If( when==MetaworksContext.WHEN_VIEW, && where=="in-container” e.keyCode==”delete", $.ajax(“/server/FormEditor”, …..);});

… context menu 등록 코드 생략 … .

#Serverpublic FormDefinition remove(Request req) {

…. Request 에서 formDefinition 을 unmarshalling 하는 코드 생략 … ..

formDefinition.formFields.remove(this);return formDefinition;

}

• 짧은 코드량• 의미중심• 해석 방식의 전환 용이e.g. 스프링 어노테이션 프레임워크

• 구현 중심의 긴 코드• 구현중심의 코드로 해석이 어려움• 양산된 코드는 일괄전환 어려움

Page 10: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

메타웍스 기반 개발 과정Steps:1. 무엇이 ‘객체’인지 파악하기2. 객체를 잘 ( 응집도 높게 ) 모델링하기3. 객체에 화장시키기4. 객체들을 데리고 앱을 만들기

Page 11: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Step 1. 분석무엇이 “객체”인가 ?그리고 .. 무엇이 “컨텍스트”인가 ?

Page 12: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

12

1. Recognizing Objects in facebook- Login.java

userId property

UserIdPassword

Login

Login.java

Login methodPassword property

Page 13: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

1. Recognizing Objects in facebook - Main.java

Person objectContents objectMenu object Selection object

Page 14: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

UserIdPassword

Login

Login.java Main.java

Content.javaMenu.java

Selection.java

return new Main()

return new AContent()AContent.java

Bcontent.javareturn new BContent()

Page 15: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

1. Recognizing Objects in facebook1.1. Person objects in different ‘Context’

Where: NORMAL Where: MINIMISED Where: MEDIUM

Page 16: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Step 2. 모델링객체와 화면요소를 최대한 단순하게 매핑하라 !

Page 17: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

UserIdPassword

Login

Login.java Main.java

Content.javaMenu.java

Selection.java

return new Main()

login() 이 실행되면 Main 을 리턴하므로

Main 을 화면에 그려라 !

Page 18: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함
Page 19: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함
Page 20: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

UserIdPassword

Login

Login.java Main.java

Content.javaMenu.java

Selection.java

return new Main()

return new AContent()AContent.java

Bcontent.javareturn new BContent()

( 화면에 여러 객체가 이미 존재하는 경우 ) 리턴된 객체는 자신이 가장

부합되는 응집력을 가진 화면 요소에 가서 그려짐

Page 21: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

21

Page 22: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함
Page 23: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

모델링이 곧 구현 !

# 객체의 응집도를 따라 서버에서 리턴된 객체가 표시될 위치를 잡는다 타겟을 정의하지 않아도 위치를 찾기 때문에 UI 컨트롤 코드가 배제됨

# 도메인 객체 이외의 UI 와 관련된 컨트롤은 가능한 대표 모델 몇가지만을 사용하고 가능한 어노테이션에 옵션을 준다 (e.g. Face) 일괄적 UI 표준을 적용하기 용이함

# 데이터를 접근하는 ‘ databaseMe()’ 를 통해 데이터와 웹입력 값의 비교 및 처리를 추상화한다 데이터 접근에 대한 구체적인 코드가 줄어들고 모델레벨이 유지됨

Page 24: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

# 퀴즈

# 메인화면에서 로그인 화면으로 이동하는 “로그아웃”은 어떻게 하면 될까요 ?

Page 25: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Step 3. UX 일관성기반 디자인디자이너는 매핑된 모델별로 디자인 작업을 ,

그리고 자바스크립트 개발자는 유저 인터랙션이 높은 것들을

최대한 “컴포넌트” 단위로 작성한다 .

* 요구사항 별로 작성하지 않고 , 요구사항을 수집하여 공통사항을 일반화 하여 컴포넌트 단위로 UI 와 , 스크립트를 ‘한번만’ 만든다 .

Page 26: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

UI 프레임워크 – 메타웍스 3메타웍스 3 컴포넌트 래핑 예시 – 구글 챠트 컴포넌트

자바 = 모델 HTML = Face

자바스크립트 = Face-Helper

Page 27: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

UI 프레임워크 – 메타웍스 3메타웍스 3 컴포넌트 래핑 예시 – 챠트 컴포넌트

자바 = 모델

Page 28: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

UI 프레임워크 – 메타웍스 3메타웍스 3 컴포넌트 래핑 예시 – 챠트 컴포넌트

HTML = Face

Page 29: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

자바스크립트 = Face-Helper

UI 프레임워크 – 메타웍스 3메타웍스 3 컴포넌트 래핑 예시 – 챠트 컴포넌트

Page 30: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Step 4. 추상성 높은 앱 개발1. 자바스크립트와 CSS, 심지어 JSP, 서블릿도

모르는 일반 자바만을 다루는 개발자로 구성된 팀

2. 적당한 도메인 지식을 갖고 있고 ,

3. 고객과 협의를 할 수 있는 커뮤니케이션 스킬을 가졌다고 가정 .

Page 31: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

UI 프레임워크 – 메타웍스 3컴포넌트 조합 – 화이트박스 사용

자바 개발자는 UI 요소들을 자바의

관점으로만 통합하여불러쓴다

Page 32: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

32

Page 33: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Domain Class(Java)

메타웍스 동작 메커니즘 : – 흩어진 메타데이터를 자동으로 관리하는 메타웍스 3

View DAO

Con-troller

View DAO

Con-troller

metadat

a

metadat

a

metadat

a

metadat

a

Domain class (JS version)

Domain class (java ver-

sion)

Domain class (Hibernate

version)

MetaworksSynchronizes the Proxy

MetaworksSynchronizes the Proxy

General Approach:Spring MVC, JSON, jQuery, Hibernate

Using Metaworks3:

You have toSynchronize the gap

Page 34: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

34

“ 메타웍스 3 우산”

< 선언형 프로그래밍 모델과 추상성 극대화를 통한 생산성 >• 프로그래밍 모델 추상화

• 자바 - 자바스크립트 간 통신 추상화 • 자바 - 자바스크립트 간 메타데이터 자동 동기화• 자바스크립트 인터랙션 ( 버튼 , 키보드 / 마우스 ) 추상화• 네비게이션 추상화• 롱 -폴링 기반 콜백 추상화

• 데이터베이스 접근 추상화• JPA 어노테이션 기반 ORMapping• 데이터베이스 캐시 / 동기화 • 트랜잭션 자동화 ( 스프링없이 동작가능 )

< 테스트 자동화와 품질 향상 >• 매우 짧은 코드 – 품질에 직결• 설계가 곧 구현 – 모델중심의 생산성과 품질• 아규먼트 없는 서비스메서드 – 객체의 응집도를 유지• 웹 기반 테스팅 자동화• Guided Tour 기능 자동화

Page 35: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Applications

www.metaworks3.org website Social CMS

Page 36: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Applications

ProcessCodi Cloud IDE

Page 37: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

Applications

ProcessCodi Enterprise 2.0 Platform

Page 38: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

38Page

dwr.xml 에 패키지 경로 설정

메타웍스 3 에서 자바 클래스 사용법

메타웍스 3 의 자바 클래스에서 Annotation 사용법

메타웍스 3 의 API 레퍼런스

메타웍스 3 에서 EJS 템플릿 사용법

메타웍스 3 실전II

Page 39: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

39Page

메타웍스 3 프로젝트 설치 및 실행

1. 메타웍스 3 프로젝트 설치

1. 이클립스 웹 프로젝트 생성

2. 메타웍스 3 관련 jar 파일 추가 – WEB-INF\lib[ uEngine 제공 파일들 – spring / dwr 포함 ]

3. 설정 파일 구성[ applicationContext.xml, dwr.xml ]

2. 메타웍스 3 프로젝트 실행

1. 연동해서 사용할 DBMS 기동

2. WAS 기동 – [ ex. %CATALINA_HOME%\bin\startup.bat ]

3. 웹 브라우저 : http://localhost:8080/metaworks3/index.html

Page 40: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

40Page

주요 설정 파일들

파일명 현재 경로 설명 비고applicationContex-t.xml

WebContent/WEB-INF

스프링 프레임워크 관련 설정 및 DBMS 설정

스프링 사용시만 적용

dwr.xml WebContent/WEB-INF

dwr 프레임워크에서 사용될 pack-

age 경로설정metaworks.js WebContent/

scripts/metaworksmetaworks 동작 관련 스크립트

metaworks folder WebContent Ejs 파일 Path

metaworks3.jar WebContent/WEB-INF/lib

메타웍스 3 프레임워크 관련 API

springframework * . jar

WebContent/WEB-INF/lib

스프링 프레임워크 관련 API

Page 41: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

41Page

dwr.xml 에 패키지 경로 설정

1. Metaworks3 작업할 Java 작업 package 를 만든다 .Ex) example.login.* package 의 경우

2. Package 를 Metaworks3 프로젝트에서 인식할 수 있도록 dwr.xml 에 등록한다 .<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd"><dwr>

<init> <converter id="metaworks" class="org.metaworks.dwr.MetaworksConverter"/></init>

<allow> <create creator="spring" javascript="Metaworks" scope="page"> <param name="beanName" value="MetaworksRemoteService"/> </create> <convert converter="bean" match="org.metaworks.dwr.*"/><convert converter="metaworks" match="example.login.*"/>

<convert match="java.lang.Exception" converter="exception"> <param name="include" value="message,lineNumber"/></convert> </allow></dwr>

3. 서버를 재 시작하거나 JREBEL 를 통해 Hot Deploy 되도록 한다 .

Page 42: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

42Page

자바 클래스 선언법1. Pure Java [ ex. Login.java ] 1 단계

package examples.login;

public class Login {String userId;

public String getUserId() {return userId;

}public void setUserId(String userId) {

this.userId = userId;}

String password;public String getPassword() {

return password;}public void setPassword(String pass-

word) {this.password = password;

}}

Page 43: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

43Page

자바 클래스 선언법1. Pure Java [ ex. Login.java ] 2 단계

package examples.login;

public class Login {String userId;

public String getUserId() {return userId;

}public void setUserId(String userId) {

this.userId = userId;}

String password;public String getPassword() {

return password;}public void setPassword(String password) {

this.password = password;}

@ServiceMethod(callByContent=true)public Main login() throws Exception{

return 버튼클릭시 표시될 자바클래스 생성 ;// ex) return new Main();

}}

Page 44: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

44Page

자바 클래스 선언법2. DB 연동 Java [ ex. ILogin2.java / Login2.java ] 1 단계

package examples.login;

import javax.persistence.Id;import javax.persistence.Table;

import org.metaworks.annotation.ServiceMethod;import org.metaworks.dao.IDAO;

@Table(name="login2")public interface ILogin2 extends IDAO {

@Idpublic String getUserId();public void setUserId(String userId);

public String getPassword();public void setPassword(String password);

@ServiceMethod(callByContent=true)public Main login() throws Exception;

}

DB Schema

create table login2 (userId varchar(20) primary key,password varchar(20)

);

Page 45: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

45Page

자바 클래스 선언법2. DB 연동 Java [ ex. ILogin2.java / Login2.java ] 2 단계package examples.login;import org.metaworks.dao.Database;public class Login2 extends Database<ILogin2> implements ILogin2{

String userId;public String getUserId() {

return userId;}public void setUserId(String userId) {

this.userId = userId;}

String password;public String getPassword() {

return password;}public void setPassword(String password) {

this.password = password;}

public Main login() throws Exception{if(databaseMe().getPassword().equals(getPassword()))

return new Main();else

throw new Exception("Password is wrong. Forgot?");}

}

Page 46: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

46Page

자바 클래스 선언법2. DB 연동 Java [ ex. Main.java ]

3 단계

package examples.login;public class Main {

public Main() {setMessage(“login success”);

}

String message;public String getMessage() {

return message;}public void setMessage(String mes-

sage) {this.message = message;

}}

Page 47: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

47Page

UI 선언법

# “Face” 라고 칭하며 JSP, ASP 와 유사한 스크립트렛식을 기반하여 앞서 개발한 자바 클래스를 화면에 뿌리는 로직을 작성합니다 .

# 저장위치[ 자바클래스와 동일패키지 이하 / 동일 클래스명 .ejs ]

# 사용 가능 표현

expressions 설명 비고

Fields.필드명 .here() 자바 클래스에 선언된 field 와 연결하는 object

Method. 메서드명 .here() 자바 클래스에 선언된 method 와 연결하는 object

Method. 메서드명 .caller() method 의 경우 해당 method 를 onclick 과 같은 event 에 연결하기 위해 사용

value fields 부터 data 추출시 사용

mw3 Metaworks 기본 객체

Page 48: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

48Page

UI 선언법 - 예시

사용자 ID:<%=fields.userId.here()%>

패스워드 :<%=fields.password.here()%>

<%=methods.login.here()%>

Page 49: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

49Page

인터랙션 스크립트 선언법

# FaceHelper 라고 칭하며 , ejs 파일과 동일 위치에 OOO.ejs.js 로 선언해줌

1. 생성자var 패키지명 . 클래스명 = function(objectId, className){ this.objectId = objectId; this.className = className;

// object : 객체의 id // className : 객체의 class name}// 패키지명은 . 대신 _ ( 언더바 ) 로 표시

2. FaceHelper function 작성패키지명 . 클래스명 .prototype. 함수명 = function(args){}

3. FaceHelper function 사용방법 (ejs 에서 )mw3.getFaceHelper(‘<%=objectId%>’). 함수명 ();

4. FaceHelper 값 맵핑패키지명 . 클래스명 .prototype.setValue = function(args){ var object = mw3.getObject(this.objectId);

object.필드 = 값 ;}

5. 서버 응답 Metaworks 객체 얻는 방법mw3.getObject(objectId); 또는 mw3.objects[objectId];

Page 50: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

50Page

인터랙션 스크립트 선언법 #java/lang/Boolean.ejs

#java/lang/Boolean.ejs.js

Page 51: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

51Page

Annotation 레퍼런스

Annotation 설명 비고@ServiceMethod 실제 화면에서의 동작과 관련된 메서드를 선언하기 위해 사용

@AutowiredFromClient 객체를 Client 에서 Server 로 주입받기 위해 사용 public 필수

@AutowiredToClient Server 에서 Client 로 주입하기 위해서 사용

1. Server Interaction 관련 Annotation

Page 52: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

52Page

@ServiceMethod- 실제 화면에서의 동작과 관련된 메서드를 선언하기 위해 사용하는 annotation

1. callByContent : ServiceMethod 실행 시 화면 (client) 에 존재하는 해당 객체의 모든 필드 객체를 받아온다 .

2. except : callByContent 속성 사용 시 너무 많은 필드 객체를 받아오면 성능에 대한 이슈가 발생하므로 except 선언된 field 는 제외하고 받아온다 . ( 일반적으로 받아오길 원하는 필드 객체가 받지 않을 필드 객체 보다 많을 시에 사용 )

3. payload : callByContent 를 사용하지 않으면 @Id annotation 을 사용한 필드 객체 외에는 받아오지 않는데 추가로 필드 객체를 받아오기 위해서 사용된다 . ( 일반적으로 받아오길 원하는 필드 객체가 받지 않을 필드 객체 보다 적을 시에 사용 )

4. target : ServiceMethod 를 통해 반환된 객체를 화면에 표시하는 유형을 정의한다 . 기본은 TARGET_AUTO 로 Metaworks 가 알아서 화면에 표시한다 .

5. when, where, how : MetaworksContext 값에 해당되는 값이 존재 할때 ejs templete 에 표시하기 위해 사용한다 .

6. keyBinding : ServiceMethod 에 key event 를 할당하여 해당 화면 (client) 에서 keyBinding 속성에 할당된 key event 발생 시 해당 ServiceMethod 를 호출한다 .

7. mouseBinding : ServiceMethod 에 mouse event 를 할당하여 해당 ServiceMethod(button) 에서 mouseBinding 에 할당된 mouse event 발생 시 해당 ServiceMethod 를 호출한다 .

8. inContextMenu : inContextMenu 속성을 true 로 설정하면 해당 ServiceMethod 는 context menu 형식으로 표현한다 . ( 일반적으로 mouse event 혼합하여 적용 )

Annotation 레퍼런스

Page 53: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

53Page

@AutowiredFromClient- 화면 (client) 에 존재하는 객체를 server 로 받아오기 위한 annotation 이다 .

public class FormField { @AutowiredFromClient FormDefinition formDefinition;

String fieldName; public String getFieldName() { return fieldName; } public void setFieldName(String fieldName) { this.fieldName = fieldName; }

String type; public String getType() { return type; } public void setType(String type) { this.type = type; }

public FormDefinition save() throws Exception{ }

public FormDefinition add() throws Exception{ }

public FormDefinition remove() throws Exception{ }}

∙ FormField 는 FormDefinition 의 ArrayList 객체인데 FormField 에서 FormDefinition 을 얻기위해 @AutowiredFromClient 를 사용하여 처리한다 .

Annotation 레퍼런스

Page 54: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

54Page

@AutowiredToClient- client 에 존재하는 객체를 server 로 받아오기 위한 annotation 이다 .

public class Post { String postId; @Hidden @AutowiredToClient public String getPostId() { return postId; } public void setPostId(String postId) { this.postId = postId; }

String content; public String getContent() { return content; } public void setContent(String content) { this.content = content; }}

∙ Hidden 또는 Available 그리고 ejs 에서 fields.postId.here() 를 사용하지 않아 해당 필드 객체가 화면에 표시되지 않는 상황에 해당 필드 객체를 서버로받아오기 위해 강제로 Client 주입하는 annotation

Annotation 레퍼런스

Page 55: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

55Page

Annotation 설명 비고@Face 객체의 ejs 연동을 위한 필요한 정보를 설정하기 위해 사용

@Available 옵션에 따라 해당 객체를 Client 에 표시하기 위해 사용

@NonEditable MetaworksContext 가 edit 상태일 때에도 view 상태로 표시할 때 사용 ( 수정 불가하게 )

@Hidden 객체를 Client 에 표시하지 않기 위해 사용

2. UI Control 관련 Annotation

Annotation 레퍼런스

Page 56: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

56Page

@Face- ejs templete 연관된 annotation

1. ejsPath : 기본적으로 같은 패키지명 . 클래스명에 존재하는 ejs templete 이나 없을경우 ObjectFace.ejs 를 사용하지만 ejsPath 속성을 지정할 경우 해당 ejs templete 을 사용한다

2. displayName : ejs templete 에서 표시할 객체의 이름을 설정하여 ejs templete 에서 사용한다 .

3. options, values : ejs templete 에 option 에 해당하는 value 설정하여 ejs templete 의 사용성을 확장한다 .

@Face(ejsPath=“genericfaces/Window.ejs”, displayName=“연락처” , options={“width”, “height”}, values={400, 900})public class ContactWindow{ IUser user; public IUser getUser(){ return this.user. }

public void setUser(IUser user){ this.user = user; }}

Annotation 레퍼런스

Page 57: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

57Page

@Available- ejs templete 에 객체를 특정한 상황에 표시하기 위한 annotation

1. when, where, how : MetaworksContext 값에 해당되는 값이 존재 할때 ejs templete 에 표시하기 위해 사용한다 .

public class Wizard implements ContextAware { MetaworksContext metaworksContext; public MetaworksContext getMetaworksContext() { return metaworksContext; } public void setMetaworksContext(MetaworksContext metaworksContext) { this.metaworksContext = metaworksContext; }

String packageName; @Available(when={"edit", "view"}) public String getPackageName() { return packageName; } public void setPackageName(String packageName) { this.packageName = packageName; }

String className; @Available(when={"step1", "view"}) public String getClassName() { return className; } public void setClassName(String className) { this.className = className; }

@ServiceMethod @Available(when="edit") public void next1() { getMetaworksContext().setWhen("step1"); }

@ServiceMethod @Available(when={"step1", "view"}) public void save() { getMetaworksContext().setWhen("view"); }}

Annotation 레퍼런스

Page 58: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

58Page

@NonEditable- ejs templete 에서 MetaworksContext 가 edit mode 일때도 view 상태로 표기

public class Post { String postId; public String getPostId() { return postId; } public void setPostId(String postId) { this.postId = postId; }

String content; public String getContent() { return content; } public void setContent(String content) { this.content = content; }

IUser author; @NonEditable public IUser getAuthor() { return author; } public void setAuthor(IUser author) { this.author = author; }}

∙ author(글쓴이 ) 는 사용자에게 입력 받지 않는 부분이므로 입력하지 못하게 @NonEditable annotation 처리

Annotation 레퍼런스

Page 59: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

59Page

@Hidden- ejs templete 에서 표시하지 않을 Object 에 사용하는 annotation

∙ postId 는 사용자에게 보여지지 않는 부분이므로 입력하지 못하게 @Hidden annotation 처리

public class Post { String postId; @Hidden public String getPostId() { return postId; } public void setPostId(String postId) { this.postId = postId; }

String content; public String getContent() { return content; } public void setContent(String content) { this.content = content; }

IUser author; public IUser getAuthor() { return author; } public void setAuthor(IUser author) { this.author = author; }}

Annotation 레퍼런스

Page 60: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

60Page

Annotation 설명 비고@Table DAO 객체에 DB Table 의 맵핑을 위해 사용

@Id DB Table 의 primary key 와 맵핑을 위해 사용

@NonSavable transient 상태로 지정하기 위해 사용

@ORMapping Database 의 Table 필드와 객체의 필드를 맵핑하기 위해 사용

3. Database 관련 Annotation

Annotation 레퍼런스

Page 61: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

61Page

@Table- DAO Object 가 DAO 명과 다른 이름을 사용할 시에 Table 명과의 맵핑을 위해 사용

1. name : DAO Object 와 맵핑될 Database 의 Table 명을 정의 한다 .

@Table(name="user")public interface ILogin extends IDAO {

public String getUserId(); public void setUserId(String userId);

public String getUserName(); public void setUserName(String userName);

public String getPassword(); public void setPassword(String password);

}

∙ DAO 명 (ClassName) 은 Login 이지만 실제로 맵핑될 Table 은 user 라는 이름을 가진 Table 이므로 @Table annotation 처리

Annotation 레퍼런스

Page 62: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

62Page

@Id- DAO Object 를 핸드링 하기 위한 key value 으로 unique 한 value 가진 field 지정

public interface ILogin extends IDAO {

@Id public String getUserId(); public void setUserId(String userId);

public String getUserName(); public void setUserName(String userName);

public String getPassword(); public void setPassword(String password);

}

∙ 사용자 Table 에서는 userId 가 조회 및 삭제 , 수정이 이루어지므로 userId 에 @Id annotation 을 사용하여 DAO 를 핸들링 한다 .

Annotation 레퍼런스

Page 63: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

63Page

@NonSavable- DAO Object 를 에서 Database 에 저장 및 수정 시 사용하지 않을 field 에 사용public interface ILogin extends IDAO {

public String getUserId(); public void setUserId(String userId);

public String getUserName(); public void setUserName(String userName);

public String getPassword(); public void setPassword(String password);

@NonSavable public String getSSN(); public void setSSN(String ssn);

}

∙ ssn(주민번호 ) 필드는 본인확인을 위해서만 필요하고 실제 Database 에 저장하지 않을 것이므로 @NonSavable annotation 사용하여 처리

Annotation 레퍼런스

Page 64: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

64Page

@ORMapping- DAO Object 를 field 와 Database Table column 과의 맵핑을 처리하기 위해 사용

public interface User extends IDAO { @ORMapping(databaseFields={"empNo"}, objectFields={"userId“}) public String getUserId(); public void setUserId(String userId);

@ORMapping(databaseFields={"empName"}, objectFields={"userId“}) public String getUserName(); public void setUserName(String userName);

public String getPassword(); public void setPassword(String password);}

∙ Table 의 column 명과 DAO Object 의 field 명이 서로 달라 맵핑이 필요한 경우에 @ORMapping annotation 을 사용한다

public interface IPost extends IDAO { public String getPostId(); public void setPostId(String postId);

public String getContent(); public void setContent(String content);

@ORMapping(databaseFields={“authorId"}, objectFields=“userId") public IUser getAuthor(); public void setAuthor(IUser author);}

∙ 또한 Table Post 의 authorId column 을 Iuser 의 userId 필드와 Object 의 맵핑에서도 사용된다 .

Annotation 레퍼런스

Page 65: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

65Page

DB 접근 API 레퍼런스

메서드 설명 비고createDataBaseMe() DAO 객체에 입력된 정보로 Database 에 입력 후 입력된

DAO 객체를 return

databaseMe() DAO 객체에 Annotation @Id 로 설정된 Field 로 Data-base 를 검색하여 결과를 DAO 객체로 return

syncToDAtabaseMe() DAO 객체에 Annotation @Id 로 설정된 Field 의 해당하는 Database 를 입력된 정보로 수정 후 DAO 객체를 return

deleteDatabaseMe() DAO 객체에 Annotation @Id 로 설정된 Field 의 해당하는 Database 를 삭제

sql(Class, String) 쿼리를 직접 호출하여 결과를 특정 Class 타입으로 맵핑하여 return

sql(String) 쿼리를 직접 호출하여 결과를 return

org.metaworks.dao.Database

Page 66: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

66Page

개발 관련 FAQ

1. 서버 관련 FAQ - 1

질문 ) 필드명과 메서드명을 동일하게 작성했더니 실행이 되지 않습니다 .

int indent = 0;@ServiceMethodpublic void indent(){ indent += 10;}

답변 )서비스 메서드와 필드명이 동일한 경우 메타웍스 3 에서는 정상적으로 필드와 메서드를 구분하지 못해 오류를 발생시킵니다 . 위의 코드는 다음과 같이 서로 다른 이름으로 사용하세요 .

int indentDepth = 0;@ServiceMethodpublic void indent(){ indentDepth += 10;}

Page 67: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

67Page

개발 관련 FAQ

1. 서버 관련 FAQ - 2

질문 ) 다음과 같이 서비스 메서드가 매개변수를 가질 수 있나요 ?

@ServiceMethodpublic void indent(int x){ indentDepth += x;}

답변 )메타웍스 3 에서는 아키텍처 상에서 서비스 메서드를 호출할 때에는 매개변수를 전달할 수 없도록 하여 응집도 높은 객체설계를 유도합니다 . 이는 개발 생산성과 품질에 직결됩니다 . 만약 특정 값을 사용하고자 할 경우에는 아래 예시처럼 멤버 필드를 선언하거나 @AutowiredFromClient 를 사용하세요 .

int getX() { … }void setX(int x) { … }

@ServiceMethodpublic void indent(){ indentDepth += getX();}

Page 68: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

68Page

개발 관련 FAQ

1. 서버 관련 FAQ - 3

질문 ) 다음과 같이 코드를 하였는데 화면이 멈추어 버립니다 .

class Node {Node[] child;

}

답변 )메타웍스 3 에서는 자신과 동일한 객체를 직접 가지면 재귀호출이 발생하게 됩니다 . 따라서 자신과 동일한 객체를 소유하려면 ArrayList 와 같은 Collection 등을 이용하여 우회적으로 사용하여야 합니다 .

class Node {ArrayList<Node> child;

}

Page 69: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

69Page

개발 관련 FAQ

1. 서버 관련 FAQ - 4

질문 ) 다음과 같이 서버에서 Annotation 을 사용하여 Client 객체를 얻으려고 하는데 정상동작 하지 않습니다 .

class MainPage {@AutowiredFromClient ClientSession session;

}

답변 )메타웍스 3 에서는 클라이언트를 가져오는 객체에 대해서는 public 접근제한자에 국한해서 지원합니다 .

class MainPage {@AutowiredFromClient public ClientSession session;

}

Page 70: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

70Page

개발 관련 FAQ

1. 서버 관련 FAQ - 5

질문 ) ServiceMethod Annotation 을 사용했음에도 불구하고 has no method ‘myMethod' 라는 오류가 발생합니다 .

class MainPage implements IMainPage {@ServiceMethodpublic void myMethod() { … }

}

답변 )메타웍스 3 에서는 인터페이스를 상속하는 클래스에 대해서는 해당 인터페이스 메서드를 주 참조 클래스로 인식합니다 . 따라서 구현되는 서비스 메서드의 원형을 인터페이스에서도 넣어 주어야 합니다 .

Interface IMainPage {@ServiceMethodpublic void myMethod();

}class MainPage implements IMainPage{

public void myMethod() { … }}

Page 71: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

71Page

개발 관련 FAQ

1. 서버 관련 FAQ - 6

질문 ) 자바 클래스를 정상적으로 생성했음에도 불구하고 No Converter for ‘your-Class’ 라는 오류가 발생합니다 .

package my.one.two;class yourClass { … }

답변 )메타웍스 3 에서는 사용하려는 패키지에 대해서는 dwr.xml 파일에 선언해 주어야 합니다 . 이는 화면에서 참조하는 클래스를 인식하기 위함입니다 .

dwr.xml

<convert converter="metaworks" match=“my.one.two.*"/>

Page 72: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

72Page

개발 관련 FAQ

1. 서버 관련 FAQ - 7

질문 ) ORMapping Annotation 이 인식되지 않는것 같습니다 .

@Table(name=“Login”)interface ILogin extends IDAO {

@Id@ORMapping(databaseFields={“id”}, objectFields={“num”})public int getNum();….@ORMapping(databaseFields={“name”}, objectFields={“name”})public String getName();….

}

답변 )ORMapping 은 DB Table 의 필드명과 자바 클래스의 필드명이 다를 경우에 인식이 됩니다 . 따라서 동일한 이름으로 되어 있을 경우에는 ORMapping 을 사용할 필요가 없습니다 . 만약 사용하게 되면 어떤 공간을 저장 영역으로 써야 할 지에 대한 혼돈이 발생하게 됩니다 .

Page 73: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

73Page

개발 관련 FAQ

2. 클라이언트 관련 FAQ - 1

질문 ) ejs 를 만들었는데 반영이 되지 않습니다 . 이유가 무엇인가요 ?

답변 )ejs 는 자바클래스와 동일한 폴더에 작성할 수도 있고 , webapps 이하의 contents 영역에 자바클래스의 패키지와 똑같은 이름의 path 상에 작성할 수도 있습니다 . 그러나 만약 두 군데 모두 ejs 가 존재할 경우 자바클래스와 동일한 폴더 내에 작성된 ejs 가 우선 적용됩니다 .만약 자바클래스에서 @Face Annotation 을 통해 특정 ejs 를 지정한 경우에는 @Face 를 통해 지정된 ejs 가 최우선 적용됩니다 .

질문 ) ejs 가 변경되었을 때 반영되는 속도가 느립니다 . 빠르게 할 수 있나요 ?

답변 )ejs 의 경로 URL 을 웹 브라우저로 하나 열어 두고 변경 시 그곳을 refresh 시키면 ejs 의 반영이 빨라 집니다 .

Page 74: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

74Page

개발 관련 FAQ

2. 클라이언트 관련 FAQ - 2

질문 ) 자바클래스로 일부의 값이 전달되어 오지 않습니다 . 이유가 무엇인가요 ?

myEjs.ejs

ID : <%= fields.userId.here() %><br/>PW : <%= fields.password.here() %><br/>

답변 )fields 객체를 사용할 경우 동일명의 필드를 호출하게 되면 가장 마지막에 입력된 값을 가져오게 됩니다 . 위 예시와 같이 fields 의 id 를 잘못하여 두번 사용하게 되면 실제 자바클래스에서는 id 값으로 pw 값이 들어오게 됩니다 .

myEjs.ejs

ID : <%= fields.userId.here() %><br/>PW : <%= fields.password.here() %><br/>

Page 75: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

75Page

개발 관련 FAQ

2. 클라이언트 관련 FAQ - 3

질문 ) 화면이 뜨지 않고 깨집니다 . 이유가 무엇인가요 ?

myEjs.ejs<!-- <%= fields.xxx.here() %> -->Hello!!!

답변 )자바클래스와 연동된 객체를 호출하는 것은 ejs 의 코멘트에 의해 실행을 막을 수 없습니다 . 결론적으로 ejs Template 엔진이 계속하여 코멘트 영역에 html 을 넣게 되므로 화면이 깨지게 됩니다 .

Page 76: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

76Page

개발 관련 FAQ

3. 클라이언트 관련 스크립트 FAQ - 1

질문 ) ejs.js 생성자에서 자바클래스 객체를 얻어오지 못합니다 . 이유는 ?

myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) { var obj = mw3.getObject(objectId);}

답변 )ejs.js 내의 생성자와 getValue 메서드 내에서는 mw3.getObject(objectId) 대신 mw3.object[objectId] 를 사용해야 합니다 .

myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) { var obj = mw3.object[objectId];}

Page 77: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

77Page

개발 관련 FAQ

3. 클라이언트 관련 스크립트 FAQ - 2

질문 ) ejs.js 에서 자바클래스 객체의 필드를 얻고자 합니다 .

myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) { this.objectId = objectId; this.className = className; alert(this.userId); // 가능한가요 ?}

답변 )ejs.js 내의 this 는 FaceHelper 클래스입니다 . 따라서 자바클래스 객체를 획득 후 해당 필드를 얻으셔야 합니다 .myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) { …. var obj = mw3.objects[this.objectId]; alert(obj.userId);}

Page 78: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

78Page

개발 관련 FAQ

3. 클라이언트 관련 스크립트 FAQ - 3

질문 ) 다음과 같은 오류는 왜 발생하나요 ?

Error marshalling data. See the logs for more details.

답변 )ejs.js 의 package_className.prototype.getValue 에서 값을 type 에 맞지 않게 넣을때 발생하므로 type 확인 및 넘겨주는 값 (value) 확인하셔야 합니다 .

질문 ) ejs.js 파일이 반영이 되지 않습니다 . 이유가 무엇인가요 ?

답변 )ejs.js 는 기본적으로 ejs 파일이 존재해야 그 경로를 통해 ejs.js 를 찾아내어 실행하게 됩니다 . 따라서 ejs 파일이 존재하는지 확인하세요 .

Page 79: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

79Page

메타웍스 3 기반의 ProcessCodi

PaaS 를 지원하는 Cloud IDE

확장 메타웍스 3III

Page 80: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

80Page

메타웍스 3 기반의 ProcessCodi

Page 81: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

81Page

PaaS 를 지원하는 Cloud IDE

Page 82: 메타웍스3 워크숍 - 개념소개 및 예제, 그리고 간단한 API문서포함

82Page

감사합니다 !