한빛출판네트워크

제공: 한빛 네트워크
저자: Sreekumar Parameswaran Pillai, 이대엽 역
원문: Introducing OpenLaszlo

소개

이 튜토리얼은 여러분이 데스크톱 클라이언트 소프트웨어의 사용자 인터페이스 능력을 지녔지만 설치할 필요가 전혀 없는 웹 애플리케이션을 만들기 위한 오픈소스 플랫폼인 오픈라즐로(OpenLaszlo)를 시작하는데 도움이 될 것이다. 오픈라즐로 프로그램은 XML과 자바스크립트로 작성되어 플래시로 투명하게 컴파일된다. 즉, "한번 작성하면 어디에서든 실행된다"는 것이다. 한 머신에서 개발된 오픈라즐로 애플리케이션은 모든 주요 웹 브라우저와 데스크톱 운영체제상에서 작동할 것이다. 또한 오픈라즐로상에서 만들어진 애플리케이션은 데스크톱 클라이언트로서 단독 모드로도 실행될 수 있다. 여러분은 여기에서 오픈라즐로에 대해 좀 더 배울 수 있다.

이 기사는 라즐로의 개발환경을 설정하기 위한 오픈소스 툴에 대해서만 알아볼 것이다. 이는 개인적인 프로젝트를 시작하기 위해 내가 개발했던 실제 설정들이다. 기사에는 모든 단계들이 설명되어 있으며 단계에 관련된 스크린샷이 나타나 있다.

또한 이 튜토리얼은 여러분이 매우 편리한 기능들을 제공하기는 하지만 실질적인 디플로이에는 아파치 Ant만을 사용하는 이클립스에서 사용가능한 오픈소스 플러그인인 "IDE for Laszlo"의 환경설정을 하는데 도움이 될 것이다. 그것의 목표는 오픈라즐로를 이용한 개발시 빌드 및 디플로이에 걸리는 시간을 단축하는 데 있다.

디플로이에 Ant를 사용하는 것을 권장하는 이유는 Ant 자체의 단순함과 빠른 실행시간 때문이다. 이와 비교해 보았을 때 IDE for Laszlo 플러그인은 느리다. 게다가 Ant는 자동화된 테스트, 리포팅, 웹 애플리케이션 디플로이 등과 같은 추가적인 기능들을 제공해줄 수 있다.

하지만 오픈라즐로를 이용한 애플리케이션 개발은 이 튜토리얼의 범위에만 국한되는 것은 아니다. 좀 더 상세한 오픈라즐로 아키텍처, 문법, 그리고 튜토리얼을 보려면 라즐로 웹 사이트에 있는 문서들을 참고하기 바란다.

필요한 소프트웨어 다운로드

튜토리얼의 각 단계들을 시험해 보려면 다음의 소프트웨어들이 필요하다. 여러분은 그것들을 아래에 링크된 각각의 위치에서 다운로드 할 수 있다.

1. 최신 JDK 1.5.0_02
2. 오픈라즐로 3.2
3. Web Tools Platform이 탑재되어 있는 My Eclipse
4. 아파치 Ant 1.6.5
5. 이클립스용 Laszlo Ide

여러분이 다운로드한 소프트웨어들이 각 단계에서 언급된 소프트웨어들과 동일한 버전인지를 확인해 보아야 하는데, 왜냐하면 이 튜토리얼은 위 버전의 소프트웨어들로만 설계되고 테스트되었기 때문이다.

소프트웨어 설치

Tools라는 폴더를 C:＼에 생성한 다음 다음의 소프트웨어들을 설치한다. 공통으로 사용되는 위치는 좀 더 나은 추적성을 확보할 수 있도록 해주는데 왜냐하면 디플로이 폴더를 종종 확인할 필요가 생길 수 있기 때문이다.

1. Jdk 1.5.0_02 폴더 : C:＼jdk1.5.0_02
2. Open Laszlo 3.2 폴더 : C:＼Tools＼OpenLaszlo Server 3.2
3. 이클립스 폴더 : C:＼Tools＼eclipse
4. 아파치 Ant 1.6.5 폴더 : C:＼Tools＼ant-1.6.5.
   
   
   그림 1. 필요한 소프트웨어가 설치되어 있는 C:＼Tools 폴더

설치 프로그램 마법사의 안내를 받아 Jdk와 마찬가지로 오픈라즐로도 설치한다. 이클립스와 Ant는 각 폴더에 압축을 풀기만 하면 되며 별도의 설치를 필요로 하지는 않는다.

이클립스용 라즐로 플러그인 설치

IDE for Laszlo는 lzx 파일의 생성, 편집, 디버그, 그리고 테스트를 할 수 있도록 도와주는 워크벤치를 제공해주는 이클립스용 애드온 프로그램이다. 그것이 제공해 주는 많은 기능들이 꽤 유용하므로 이것들을 이클립스에 통합시키는 방법에 대해 알아보도록 하자.

1. 이클립스 IDE를 실행한다. 작업공간(Workspace) 폴더에는 C:＼laszlosetup를 입력한다. 여기에는 아무 위치나 입력해도 되지만 만약 다른 경로를 사용하면 이 튜토리얼 상의 그 경로를 가리키고 있는 모든 곳에서도 그 경로를 제대로 반영하고 있는지 확인해 보아야 한다.
   
   
   그림 2. 이클립스의 작업공간 선택
   
   
2. 이제 Help >> Software Updates >> Find and Install 메뉴를 차례로 선택한다.
   
   
   그림 3. 이클립스의 플러그인 설치 창
   
   
3. 다음에 보여지는 창에서 "Search for new features to install"를 선택한다.
   
   
   그림 4. 설치할 새로운 기능들을 검색
   
   
4. 다음에 나타나는 창에서는 "New Archived Site"를 선택한 다음 laszloIDE-0.2.0-jdk1.5.zip를 찾아본다.
5. laszloIDE-0.2.0-jdk1.5.zip를 체크한다.
6. "Ignore features not applicable..." 체크박스는 선택된 채로 내버려 두고 Finish를 누른다.
   
   
   그림 5. 업데이트 사이트 선택
   
   
7. 확인 화면이 나온 다음에는 플러그인이 여러분의 이클립스 개발환경에 설치될 것이다. 지금까지 개발환경을 초기화하였다.

환경변수 설정

여기에서는 다음의 환경변수만을 설정할 필요가 있다:

1. JAVA_HOME - C:＼jdk1.5.0_02
2. ANT_HOME - C:＼Tools＼ant-1.6.5

이클립스 프로젝트 초기화

최초 Laszlo 프로젝트

1. File >> New >> Project를 차례로 선택한다
   
   
   그림 6. 라즐로 선택 마법사 페이지
   
   
2. Laszlo Project를 선택한 다음 Next를 클릭한다.
3. 프로젝트명은 "laszlotutorial"로 입력하고 Next를 클릭한다.
   
   
   그림 7. 신규 Laszlo 프로젝트 마법사
   
   
4. "관련된 퍼스펙티브를 여시겠습니까?(Open associated perspective?)"란 질문이 나올때 "Yes"라 대답하게 되면 라즐로 퍼스펙티브를 현재 작업공간에서 사용할 수 있게 된다.

helloworld.lzx 작성

1. 라즐로 프로젝트의 src 폴더에 오른쪽 버튼을 클릭하여 New > Other …를 선택한 다음 Laszlo File을 선택한다.
2. Next를 클릭한다.
3. 이름은 helloworld.lzx로 입력한 다음 Finish 버튼을 누른다. Container와 File type의 값은 각각의 기본값으로 내버려 둔다. 대부분 그림 8과 같이 나타날 것이다.
   
   
   그림 8. Laszlo 파일의 이름지정
   
   
4. Finish를 클릭하고 나면 helloworld.lzx가 수정될 수 있도록 라즐로 편집기에 열린다. 전체 워크벤치를 보려면 그림 9를 참조하라.
   
   
   그림 9. Laszlo 퍼스펙티브상의 helloworld.lzx (전체 크기로 보려면 이미지를 클릭하시오).

라즐로 퍼스펙티브에서 그림 9에 보여지는 숫자가 매겨진 각각의 창들은 다음의 기능들을 제공한다:

1. 스크립트 탐색기(Script Explorer)는 Laszlo에서 사용가능한 클래스 라이브러리를 포함한 라즐로 프로젝트의 내용을 볼 수 있도록 해준다.
2. 라즐로의 실질적인 텍스트 편집기인 Laszlo 편집기(Laszlo editor). 이 편집기는 코드를 구조화하여 컨텐츠 어시스턴스(content assistance)를 제공하도록 도와주기도 한다. 한 노드에 커서를 위치시킨 다음 Ctrl-스페이스바를 누르면 그 지점에서 사용가능한 옵션들이 팝업으로 나타날 것이다.
3. 편집기는 또한 비주얼 에디팅이 가능케 하는 소스와 디자인(Source and Design) 뷰를 제공하기도 한다.
4. 편집기의 디자인 뷰와 같이 컴포넌트 팔레트(Component Palette)는 라즐로 컴포넌트의 캔버스로의 시각적인 드래그 앤 드롭을 할 수 있도록 해준다.
5. 아웃라인 뷰(Outline view)는 라즐로 파일을 XML 구조와 같이 노드의 계층으로서 표현해 준다. 노드에 오른쪽 버튼을 클릭하여 속성이나 자식 노드를 추가하는 옵션을 사용할 수 있다.
6. 속성(Attributes) 창은 여러분이 텍스트 편집기나 아웃라인 뷰에서 선택한 각각의 속성들의 값을 설정할 수 있도록 해준다.

helloworld.lzx 수정

이제 약간의 내용, 말하자면 단순한 "Hello World"를 helloworld.lzx 파일에 추가하여 브라우저에서 볼 수 있도록 해보자. 이는 250픽셀 크기의 너비와 150픽셀 크기의 높이, 그리고 "Hello World"라는 메시지를 포함하는 매우 단순한 창이다. 아래에 나타나 있는 코드 조각들을 helloworld.lzx 파일에 복사하여 붙여넣는다.

리스팅 1. helloworld.lzx

helloworld.lzx 디플로이

.lzx 파일을 디플로이하는 것은 그것이 컴파일될 장소인 LPS(라즐로 프레젠테이션 서버; Laszlo Presentation Server)상에 파일을 배포하는 과정이다. 한번 디플로이되면 어떠한 표준 웹 브라우저도 서버로부터 이 파일에 접근할 수 있다.

Laszlo IDE는 라즐로 퍼스펙티브상에서 파일을 디플로이하는 기능을 제공한다. 이를 위해서는 Run 환경설정 창에서 실행설정을 생성할 필요가 있다. 실행설정을 만들려면 메뉴바로 가서 Run >> Run을 차례로 선택한다.

1. Run 환경설정 창에서 Laszlo Application을 선택한 다음 New… 를 클릭하고 그림 10에 나타나 있는 것과 같이 오른쪽 창에서 새로운 설정의 이름(laszlotutorial_config)을 지정한다.
2. Project 버튼을 선택하고 작업공간에서 Laszlo project을 탐색한다.
3. Project file을 가리키는 라디오 버튼을 선택하고 작업공간으로부터 helloworld.lzx 파일을 탐색하여 선택한다.
   
   
   그림 10. 실행(Run) 설정창
   
   
4. common 탭의 내용들을 그림 11에 나타나 있는 정보로 채운 다음 Run을 클릭한다.
   
   
   그림 11. 실행(Run) 설정 창(Common 탭)
   
   
5. helloworld.lzx 파일은 라즐로 프레젠테이션 서버상에 디플로이 될 것이며, 그런 다음 Hello World 창이 그림 12에 나타나 있는 것과 같이 기본 브라우저상에 보여질 것이다. (여러분은 이 과정이 다소 느리다는 것을 알게 될 것이다. 다음 섹션에서 여러분은 실제 상황에서 Ant가 어떻게 전체 과정의 속도를 높여줄 수 있는지를 보게 될 것이다.)
   
   
   그림 12. 브라우저에 나타난 Hello World

라즐로 웹 애플리케이션 아키텍처 살펴보기

우리는 환경설정 퍼스펙티브로부터 오픈라즐로 기반의 웹 애플리케이션의 기본적인 아키텍처에 대해 살펴볼 것이다. 보다 심층적인 내용은 이 기사의 범위를 넘어서지만 Laszlo 개발자 가이드에서는 제공되므로 여기에서 찾아볼 수 있다.

라즐로 프레젠테이션 서버(Laszlo Presentation Server ; LPS)의 역할

라즐로 프레젠테이션 서버는 클라이언트(브라우저)와 통신하는 라즐로 애플리케이션을 적재한다. 계층화된 웹 애플리케이션 아키텍처 관점에서 보면 LPS는 뷰 (표현)를 생성하는 책임을 맡고 있다. 라즐로 파일은 서버에서 컴파일 되어 클라이언트로 .swf 파일의 형태로 다운로드되어 보여지는데, 이 플래시 파일은 브라우저의 플래시 플러그인에 의해 보여지게 된다. 그러나 뷰로 전달되는 데이터는 XML 파일 형식을 띤다.

톰캣(서블릿 컨테이너)의 역할

애플리케이션 서버는 비즈니스 로직을 실행하고 LPS와 통신하는 웹 애플리케이션을 적재한다. 라즐로 설치 패키지는 LPS 서버와 이미 연동되어 있는 톰캣 5.0 서버를 포함하고 있다. 그것은 개발목적상 편의성을 제공해 준다.

이제 웹 애플리케이션을 작성하고 그것을 톰캣 서버에 디플로이할 필요가 있다. 이는 "Hello World from the Server!!"라는 메시지를 helloworld.lzx로 리턴하는 jsp 파일일 뿐이다. 그리고 이러한 기초적인 애플리케이션은 현재 디플로이 설정을 검사하는데 도움이 된다. 우선 현 라즐로 퍼스펙티브에서 helloworld.lzx 파일을 다음과 같이 갱신한다:

리스팅 2. helloworld.lzx

위 파일은 이전에 작성하였던 helloworld.lzx와 다음의 사항들을 제외하고는 크게 다르진 않다:

1. 애플리케이션 계층에서 제공할 XML 데이터에 대한 데이터 원본을 생성하였다.
2. 데이터 집합의 src 속성은 jsp의 URL이나 애플리케이션 계층의 컨트롤러를 가리켜야 한다.
3. type은 서버로 전달되는 요청의 형식를 의미한다.
4. request의 불린(Boolean) 값은 LPS에게 데이터가 데이터 집합의 인스턴스화 즉시 접근되어야 할지, 혹은 명시적으로 요청된 실행시간 동안만 요청될지를 말해준다. 후자의 경우, request 속성은 false로 설정되어야 하며 "데이터 집합 객체의 인스턴스화시 데이터는 요청되지 않음"을 의미하며 데이터에 대한 요청은 인스턴스화 시점에서 미뤄진다.

이러한 사항을 알아두고 라즐로 코드가 애플리케이션 계층으로부터 동적인 데이터를 받아들일 수 있도록 통합하였다.

자바 웹 프로젝트 생성

1. File >> New… >> Project >>를 선택한 다음 마법사 상자에서는 Dynamic Web Project를 선택하고 Next를 클릭한다.
2. 프로젝트의 이름은 "laszloweb"이라 입력한다.
3. 다른 항목들은 기본값으로 선택하고 Finish를 클릭한다.
   
   
   그림 13. 신규 동적 웹 프로젝트(New Dynamic Web Project) 마법사
   
   
4. "관련된 퍼스펙티브 대화상자를 여시겠습니까?(Open Associated Perspective dialog box?)"라는 질문이 나타나면 yes를 클릭한다.
5. 편집기는 J2EE 퍼스펙티브를 펼친다.
6. 개발 편의성을 위해 관계없는 폴더는 이클립스의 Working Sets 탭을 설정함으로써 숨길 수 있다. 프로젝트 탐색기(Project Explorer)의 최종적인 모습은 그림 14와 같다.
   
   
   그림 14. 라즐로와 라즐로 웹 프로젝트가 있는 프로젝트 탐색기(Project Explorer)
   
   
7. laszloweb 프로젝트의 Web Content 폴더에 오른쪽 버튼을 클릭한 다음 New... >> JSP를 선택한다.
8. JSP 파일의 이름은 message.jsp로 주고 Finish를 클릭한다.
9. 다음의 코드조각을 복사하여 message.jsp 파일에 붙여 넣는다.
10. 이것은 단순히 jsp 파일의 contentType을 XML로 지정하고 적격한(well-formed) XML이 클라이언트로 리턴될 것이라는 것을 의미한다.

리스팅 3. message.jsp

<%@ page contentType="text/xml" %>

Ant로 라즐로와 웹 애플리케이션을 디플로이 하도록 설정하기

1. 이 목적을 달성하기 위해 두 개의 파일을 작성하는데, 하나는 Ant 스크립트 파일인 build.xml이며 다른 하나는 설정 통제에 필요한 변수들을 포함하는 추가적인 build.properties 파일이다.
2. 다음의 build.xml 파일을 웹 프로젝트의 루트 폴더에 복사한다.
   
   리스팅 4. build.xml

3. 아래의 build.properties 역시 마찬가지로 build.xml 파일과 함께 웹 프로젝트의 루트 폴더로 복사한다.
   
   리스팅 5. build.properties

   # Base directories
   laszlo.basedir=C:/laszlosetup/laszlotutorial
   laszlo.src=${laszlo.basedir}/src
   
   # Web Application folders
   webapp.basedir= C:/laszlosetup/laszloweb
   
   # Web application properties
   war.name=laszlotutorial
   webapp.src=${webapp.basedir}/WebContent
   webinf=${webapp.src}/WEB-INF
   build.dir=${webapp.basedir}/build
   dist.dir=${webapp.basedir}/dist
   classes.dir=${build.dir}/classes
   javac.debug=true
   junit.fork=true
   compile.deprecation=true
   
   # name of the laszlo application
   laszloapp.name=laszlotutorial.
   
   # 2 Java application properties
   java.base=${webapp.basedir}/src
   java.project.name=laszlojava
   
   # deployment directories
   laszlo.deploy.dir=C:/Tools/OpenLaszlo Server 3.2/Server/lps-3.2/laszlotutorial
   tomcat.webapps=C:/Tools/OpenLaszlo Server 3.2/Server/tomcat-5.0.24/webapps
   tomcat-home=C:/Tools/OpenLaszlo Server 3.2/Server/tomcat-5.0.24
   

build.xml의 Ant 뷰 활성화

1. window >> Show View >> Other... 로 간 다음 Show View에서 Ant를 선택한다.
   
   
   그림 15. Ant 뷰의 build.xml
   
   
2. Ant 뷰에서 "Add Build files"(ant 아이콘을 가진 버튼)를 클릭하고 build.xml 파일을 선택한다.
3. Ant 뷰에는 이제 build.xml 파일내에 들어있는 ant 타겟이 나타나야 한다.
   
   
   그림 16. build.xml내의 타겟들

애플리케이션 디플로이

1. deploy-all target을 더블 클릭하게 되면 라즐로와 웹 애플리케이션 둘 모두 각자의 서버상의 위치로 디플로이 된다.
   
   
   그림 17. deploy-all target 실행후의 콘솔창(전체 크기의 이미지를 보려면 클릭하시오.)
   
   
2. 브라우저를 열고 다음의 URL를 입력한다: http://localhost:8080/lps-3.2/laszlotutorial/helloworld.lzx. 서버로부터의 메시지를 받은 창이 나타나야 한다.
   
   
   그림 18. 브라우저상에 나타난 "Hello World from the Server!!"

런타임 컴파일

라즐로 프레젠테이션 서버는 컴파일된 코드를 클라이언트로 전달하는 속도를 향상시키는 내장된 캐싱 메커니즘을 가지고 있다. 서버가 시작되면 캐시는 재구축된다. 개발단계 동안에는 서버는 변경된 파일에 대한 기본 설정이 새로이 캐시되어야 하기 때문에 종종 재시작될 필요가 있다. 여기에서 구축한 현재 설정에서는 변경사항이 브라우저에서 반영되어야 할 때에만 리프레시를 필요로 한다. 서버를 재시작하는 것은 설정 파일에 변경이 있을 때에만 필요한 것이다. 그렇기 때문에 일반적인 .lzx 파일의 뷰의 디플로이와 새로고침의 전체 과정은 애플리케이션 계층으로부터의 데이터를 읽어오는 것에 기인한 지연이 아닌 이상 3초 이상이 소요되어서는 안된다.

결론

개발환경을 설정하는 것은 다소 위압적인 작업이 될 수도 있는데, 특히 신기술일 때 그러하다. 이 기사는 주로 라즐로/자바 웹 애플리케이션을 개발하기 위한 오픈소스 툴을 이용하여 플랫폼을 초기화하는 데 초점을 맞추고 있다. 필자는 이 튜토리얼이 독자들의 라즐로 개발을 재빨리 시작하는 데 도움을 주리라 확신한다.