한빛출판네트워크

제공 : 한빛 네트워크
저자 : Markus Plesser and Daniel Lichtenberger
역자 : 정규현
원문 : Introducing [fleXive] - A Complementary Approach to Java EE 5 Web Development

코드를 작성해보자

[fleXive]의 몇가지 핵심기능을 보여주기 위해서 제품과 생산자들을 관리하기 위한 작은 애플리케이션을 만들어보자. 데이터는 일반 백엔드 애플리케이션에서 입력되고, 고객 프론트엔드 애플리케이션은 JSF로 작성된다.

다음의 명령어로 새로운 애플리케이션을 만들면서 시작해보자.

ant project.create

이름으로 products(제품들)을 사용하고, 새로 만들어진 디렉토리로 이동한다.

cd ../products

애플리케이션의 디렉토리 구조는 다음과 같다.

    |-- lib
    |-- resources
    |   |-- META-INF
    |   |-- messages
    |   |-- scripts
    |   |   |-- library
    |   |   |-- runonce
    |   |   `-- startup
    |   `-- templates
    |-- src
    |   `-- java
    |       |-- ejb
    |       |-- shared
    |       `-- war
    `-- web
        `-- index.xhtml

[fleXive] 빌드 시스템은 자동적으로 자원들을 인식하 이 디렉토리 들에 코드를 집어넣는다. 예를 들어 src/java/ejb밑에 클래스들을 추가하면, EJB jar파일이 생성되면서, 애플리케이션에 추가될 것이다. Resources/messages폴더 밑에 지역화를 위한 메시지를 넣는다면, 이것들은 [fleXive] 메시지 빈을 통해 사용가능하게 될 것이다.

자, 이제 개발을 위한 준비가 끝났다. 그러나 데이터 모델에 대해서 생각해야 할 것이 있다.

• 제품들은 이름과 다국어기반의 설명, 가격, 제조업체, 그리고 가능하면 제품 이미지를 필요로 한다. 특정 제품은 다양한 색상 변화와 더불어 각각의 제품 코드를 가지고 있다.
• 제조업체는 이름과, 다국어기반 설명, 회사로고, 그리고 모국을 가지고 있다.

[fleXive]에서 데이터 유형을 만드는 방법은 여러가지가 있다.

• 웹기반의 벡엔드 GUI를 사용
• [fleXive]의 Java API를 사용
• Groovy Builder를 사용

간단하게 하기 위해, 데이터 유형생성에 여기서는 Groovy를 선택했다. GroovyTypeBuilder에 이용되는 첫번째 파라메터는 유형 이름이다. 바디는 유형을 만들기 위한 모든 속성이 포함된다. 아래 예제는 테스트데이타 생성을 포함한 제조업체 데이터 모델을 어떻게 만드는지 보여준다.

import ...
// get countries select list
final FxSelectList countries =
    CacheAdmin.environment.getSelectList(FxSelectList.COUNTRIES)

// create product manufacturer type
new GroovyTypeBuilder().manufacturer(description:
    new FxString("Manufacturer")) {
    name        (assignment: "ROOT/CAPTION",
                 description: new FxString(FxLanguage.ENGLISH,
                                "Name"))
    description (dataType: FxDataType.HTML,
                 multilang: true,
                 description: new FxString(FxLanguage.ENGLISH,
                                "Description"))
    logo        (dataType: FxDataType.Binary,
                 description: new FxString(FxLanguage.ENGLISH,
                                "Company Logo"))
    basedIn     (dataType: FxDataType.SelectOne,
                 referencedList: countries,
                 description: new FxString(FxLanguage.ENGLISH,
                                "Based in"))
}

// create test data
GroovyContentBuilder builder =
    new GroovyContentBuilder("manufacturer")
builder {
    name("Police Inc.")
    basedIn(new FxSelectOne(false,
        countries.getItemByData("ca")))
    description(new FxHTML(FxLanguage.ENGLISH,
        "A global distributor of police-related accessoires.")
                .setTranslation(FxLanguage.GERMAN,
        "Ein weltweiter Distributor von Polizei-Accessoires."))
}
EJBLookup.contentEngine.save(builder.content)

builder = new GroovyContentBuilder("manufacturer")
builder {
    name("Amor")
    basedIn(new FxSelectOne(false,
        countries.getItemByData("it")))
    description(new FxHTML(FxLanguage.ENGLISH,
        "Love is Amor"s business.")
                .setTranslation(FxLanguage.GERMAN,
        "Liebe ist Amor"s Geschu00E4ft."))
}
EJBLookup.contentEngine.save(builder.content)

builder = new GroovyContentBuilder("manufacturer")
builder {
    name("Atlantic Enterprises")
    basedIn(new FxSelectOne(false,
        countries.getItemByData("us")))
    description(new FxHTML(FxLanguage.ENGLISH,
        "Atlantic deals with poker hardware.")
                .setTranslation(FxLanguage.GERMAN,
   "Atlantic ist ein Hersteller von Glu00FCcksspiel-Hardware."))
}
EJBLookup.contentEngine.save(builder.content)

이 스크립트는 Administration / Scripts / Groovy console 에 있는 백엔드 애플리케이션에 있는 스크립팅 콘솔에서 실행할 수 있다. 결과는 백엔드의 Structure 탭에 있는 데이터 구조에서 볼수 있다.

인스톨할 때마다 코드조각을 실행시킬 수는 없기 때문에, 스크립트 파일을 resources/scripts/runonce 안에 넣어놓는다. 이런 방식은 애플리케이션이 실행되는 각각의 데이터베이스 마다 정확히 한번씩만 실행되게 해준다. (모든 애플리케이션이 시작할 때 마다, 수행되는 스크립트들을 위한 시작폴더 이기도 하다.)

백엔드 애플리케이션은 다양한 [fleXive] 컨텐츠 유형을 위한 강력한 에디터를 제공한다. 실제 데이터 구조에 따라 다르지만, 에디터는 입력필드를 만들고 제거할 수 있는 버튼들과, 위치를 바꿀 수 있는 기능을 제공한다. (정렬된 데이터 구조에 유용한 기능이다. 예를 들어 여러 개의 단락과 이미지로 구성된 뉴스기사를 들 수 있다.)

새로운 컨텐츠를 만들기 위해서는 –새로운 유형의 첫번재 인스턴스로서– 왼쪽에 있는 content tree텝을 클릭한 다음, 트리의 최상위 노드에서 마우스 오른쪽 버튼을 클릭한다. 그리고 나서 Create content…를 선택하고 새로 등록된 유형들의 리스트를 확인한다. 위의 유형정의에서 만들어진 제조업체 양식은 다음과 같이 보인다.


[그림 3] 새로운 제조업체 인스턴스 만들기

제품 에디터는 제조업체를 참조할 수 있는 필드를 제공하며, 더불어 연결된 변수그룹을 제공한다. 박스 왼쪽 상단 구석에 있는 이미지를 클릭해서 다양한 변수를 추가할 수 있다.


[그림 4] 새로운 제품 인스턴스 만들기

이런 방식으로 제품과 제조업체 설명을 만들 수 있다. 왼쪽에 있는 Content Tree에 인스턴스들이 어떻게 뜨는지 주의해야 한다. 제품유형을 위해 폴더들을 새로 만드는 것과 같이 당신만의 계층구조를 만들 수 있다. Content Tree를 아예 사용하지 않을 수도 있으며, 이것이 데이터 오브젝트를 조직화하는데 도움이 될 수도 있다. 이미 존재하는 컨텐츠 유형을 찾으려면, 왼쪽의 Structure탭에 있는 컨텍스트 메뉴를 이용한다.

[fleXive] API는 어떨까?

일반적인 입력 폼들은 코드에디터 없이 데이터를 관리하는데 편리하기는 하지만, 고객에게 데이터를 보여주기 위한 웹 페이지 또한 필요하다. [fleXive]는 웹 애플리케이션의 [fleXive] 컨텐츠를 손쉽게 보여줄 수 있는 JSF에 기반한 컴포넌트 툴킷을 제공한다. 첫번째 소개에서 우리는 쉽사리 커스터마이징 될 수 있고 JSF가 제공하는 여러가지 방법으로 확장될 수 있는 제품정보에 대해 읽기만 할 수 있는 뷰를 가진 기초적인 코드를 구현할 것이다.

컨텐트 쿼리와 결과 셋

프론트엔드의 메인 페이지는 모든 제품의 목록을 보여준다. 모든 제품들을 불러오기 위해서 [fleXive]의 커스텀 검색 엔진을 사용하는 쿼리를 사용하고, 일반적인 JSF 데이터테이블을 이용하여 결과를 보여준다. 쿼리들은 SQL과 유사한 형태일 수도 있고, Java의 builder 클래스를 사용할 수도 있다. 결과는 JSF EL을 통해서 접근할 수 있는 JSF 빈을 통해 가져온다. 이 클래스가 웹 애플리케이션의 일부이기 때문에, 이것을 src/java/war 폴더 밑에 놓는다. 이 패키지의 구성은 당신에게 달렸고, 우리는 com.flexive.example.war로 정했다.

검색엔진 EJB를 이용해서 FxSQL 쿼리언어를 사용한 쿼리를 쓸 수도 있다.

EJBLookup.getSearchEngine().search(
    "SELECT co.@pk, co.product/name, co.product/price, "+
    " co.product/variant/articlenumber " +
    "FROM content co " +
    "FILTER co.version=LIVE " +
    "WHERE (co.typedef = 7) " +
    "ORDER BY co.product/name",
    0, 1000, null)

다음으로 제품들을 보여줄 프론트엔드 페이지가 필요하다. [fleXive]는 JSF페이지를 만들기 위해 Facelets를 사용하며, 이것은 아주 깔끔한 XHTML문법을 사용할 수 있게 한다. 컴포넌트 템플릿들이 resources/templates에 위치하는 반면에, 모든 프론트엔드 페이지는 web디렉토리에 저장된다. 한 페이지 이상에 대해 제품 테이블이 필요하기 때문에, resources/templates/productTable.xml에 템플릿을 정의하고, resources/META-INF/products.taglib.xml에 템플릿을 등록해야 한다. 실제 템플릿은 보통 JSF이다. 데이터 모델은 모든 제품의 목록을 돌려주고, 이것은 JSF데이터 테이블을 이용해서 보여진다.

  
    
  
  
    
      #{fxMessageBean["products.productTable.column.product"]}
    
    
  
  
    
      #{fxMessageBean["products.productTable.column.price"]}
    
       EUR
  
  
    
      
        #{fxMessageBean["products.productTable.button.details"]}
      
  

결과 HTML은 다음과 같다.


[그림 5] 만들어진 제품 목록