[펌] Open Laszlo를 사용해 만드는 리치 클라이언트

Open Laszlo를 사용해 만드는 리치 클라이언트(1)

open source의 리치 클라이언트를 사용하자

아사노 마모루
2005/4/22

본연재는 open source의 리치 클라이언트 제품으로서 최근 급속히 주목을 끌고 있는 「Laszlo」를 소개한다.Laszlo는 서버 사이드에서 생성한 컨텐츠를 Flash로서 클라이언트의 Web 브라우저에 전달하는 것으로, Macromedia사의 Flex와 매우 잘 닮은 아키텍쳐를 채용하고 있다.그 실력을 검증해 보자.

<@NHN@LINEBREAKER@NHN@>

■1 Laszlo란?

　Open Laszlo란,Laszlo Systems사가 개발한 리치·인터넷·어플리케이션을 개발, 배포하기 위한 플랫폼입니다.Laszlo Systems사는, 미국 캘리포니아주 꽁치 테오에 본사를 두는 소프트웨어 vender입니다.덧붙여서, Laszlo는 라즈로라고 발음합니다.

　Laszlo Systems사의프레스 릴리스에 의하면,2003년 3월에 Laszlo 프레젠테이션 서버를 개발자전용으로 릴리스 해, , 동년 6월에 기업용 제품을 릴리스 하고 있습니다.게다가 2004년 10월에는 Common Public License(CPL)에 의한 open source로서 공개하고 있습니다 .

　Laszlo의 리치·인터넷·어플리케이션이란, HTML, DHTML, CSS, JavaScript등에 의한 종래의 Web 클라이언트의 표현의 한계를 넘은 GUI(그림 1)에 의한유저·익스피리언스(experience)(을)를 Web 클라이언트로서 제공하는 것입니다.

화면 1　Laszlo의 GUI

■2 Laszlo 어플리케이션

　Laszlo에서는, Web 클라이언트에 배포하는 어플리케이션을,Laszlo 어플리케이션이라고 해, Laszlo 어플리케이션을 컴파일 해 배포하는 시스템이Laszlo 프레젠테이션 서버라고 합니다(화면 2).

　Laszlo 어플리케이션의 원시 코드는 XML 베이스의 객체 지향 언어 LZX, JavaScript 및 Laszlo 컴퍼넌트등을 사용해 기술됩니다.기술된 Laszlo 어플리케이션의 원시 코드는, 첫회의 액세스시에 Laszlo 프레젠테이션 서버에 의해 Flash 어플리케이션으로 컴파일 되고 클라이언트에 배포됩니다.다음번 이후는 캐쉬된 Laszlo 어플리케이션이 배포되므로 고속으로 액세스 할 수가 있습니다.

화면 2 Laszlo의 원시 코드는 Laszlo 프레젠테이션 서버에 캐쉬된다

■3 Laszlo의 아키텍쳐

　Laszlo 프레젠테이션 서버는, Java로 기술된 J2EE 어플리케이션 서버 또는 Java 서브 렛 컨테이너상에서 동작하는 open source의 서버 어플리케이션입니다.

　LZX, JavaScript로 기술된 Laszlo 어플리케이션의 원시 코드는 Laszlo 프레젠테이션 서버에 의해 Flash 어플리케이션에 컴파일 되고 Internet Explorer등의 Web 클라이언트에 배포됩니다.또 컴파일 된 Flash 어플리케이션은 캐쉬되어 다음번 이후는 캐쉬가 배포됩니다.

　Laszlo 어플리케이션과 Web 서버와의 통신은 SOAP, Web 서비스등의 XML 베이스로 행해집니다(그림 1).

그림 1 Laszlo의 아키텍쳐 개념도(Laszlo Systems사 제공)

■4 Laszlo를 사용하는 메리트

　리치 클라이언트(RIA) 개발로 Laszlo를 사용하는 메리트는 무엇입니까.우선은, open source 프로젝트이므로 자유롭게 사용할 수 있는 점을 들 수 있습니다만, 원시 코드를 보수하는 일도 가능합니다.이하에, 다른 리치 클라이언트 개발 환경과 비교하고 생각되는, Laszlo를 사용하는 메리트를 들어 보겠습니다.

• 페이지를 바꾸는 일 없이 일련의 조작을 실시할 수 있는 것 같은 유저 인터페이스를 Web 클라이언트상에 실현될 수 있다
  
  
• Java, 객체 지향, XML, JavaScript라고 하는 Web 엔지니어에게는 표준이 된 기술을 사용하고 있으므로, 개발의 도입 코스트를 낮게 억제할 수가 있다
  
  
• Laszlo 프레젠테이션 서버는 J2EE 어플리케이션 서버, Java 서브 렛 컨테이너상에서 동작해, Laszlo 어플리케이션과는 XML 베이스로 통신하므로, 기존의 J2EE 환경상에의 도입이 가능
  
  
• Flash Player(Flash5, 6, or 7 Player)가 인스톨 되고 있을 필요가 있지만, Flash 5이상으로 대응하고 있으므로 대체로의 클라이언트 환경에서 동작 가능
  
  
• 장래적으로는, 클라이언트의 플랫폼으로서 Flash Player 뿐만 아니라, 다른 플랫폼, 예를 들면, JVM,.NET CLR등에의 대응도 예정하고 있다(싱글 원시 코드 멀티 디바이스 대응).

■5 Laszlo 어플리케이션의 조작감

　Laszlo Systems사의 데모 사이트로부터 Laszlo 어플리케이션을 조작할 수가 있습니다.데모 소개의 페이지에 리스트 되고 있는Laszlo 어플리케이션 의 몇개인가는 실제로 기동할 수가 있으므로, 시험삼아 아마존 스토어를 클릭해 기동해 주세요.상품을 쇼핑 카드로드러그＆드롭으로 추가할 수 있는 등, Laszlo 어플리케이션 하지만 제공하는 리치·유저 인터페이스를 체감 할 수 있을 것입니다(화면 3).

화면 3　상품을 쇼핑 카드로 드러그＆드롭으로 추가

■6 Laszlo의 동작환경

　·6.1 대응 플랫폼
　바이너리 형식은 「Mac OS X 10.2 or above」 「Linux/Unix」와「Windows 2000 or XP」의 3개의 플랫폼에 대응한 버젼이 릴리스 되고 있습니다.

　·6.2 실행 환경
　Laszlo 프레젠테이션 서버가 동작하려면 , JavaSDK가 인스톨 되고 있을 필요가 있습니다.인스톨되어 있지 않은 경우는,http://Java.sun.com/j2se/1.4/ (으)로부터 다운로드해 인스톨 할 필요가 있습니다※.

※Mac OS X 의 경우는, JavaSDK가 디폴트로 인스톨 되고 있다.

　

Open Laszlo를 사용해 만드는 리치 클라이언트(2)
Open Laszlo로 일본어를 표시해 보자


아사노 마모루
2005/4/28

　「Reset」버튼을 클릭해 원시 코드를 오리지날에 되돌립니다.다음에, 「Hello World」를 「헬로 월드」라고 변경해 일본어를 입력해 「Update」버튼을 클릭합니다.그러나 Laszlo 어플리케이션 의 결과는 글자가 깨져 버립니다.

　도로지도에 의하면, Laszlo 프레젠테이션 서버는 3.0 b1로부터 Unicode를 취급할 수 있게 되어 있어 일본어에 대응하고 있습니다.LaszloExplorer도 이하와 같이 JSP 파일을 변경하는 것만으로, Unicode를 취급할 수 있게 됩니다.

• C:\Program Files\Laszlo Presentation Server 3.0b2\Server
  \lps-3.0b2\Laszlo-explorer\ source.jsp를 에디터로 열립니다.
  
  
• 선두 XML 코멘트행의 다음( 「<%@ page import="Java.util.ArrayList,」행의 앞)에 이하의 1행을 추가합니다( 각 「」 안은 1행).
  「<%@ page contentType="text/html; charset=UTF-8" %>」
  
  
• 「String src = request.getParameter("src");」행의 앞에 이하의 1행을 추가합니다( 각 「」 안은 1행).
  「request.setCharacterEncoding("UTF-8");」
  
  
• 「BufferedWriter writer = new BufferedWriter(new FileWriter(tempFile));」행을 comment out 해 이하의 3행을 추가합니다( 각 「」 안은 1행).
  「FileOutputStream fos = new FileOutputStream(tempFilePath);」
  「OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");」
  「BufferedWriter writer = new BufferedWriter(osw);」
  
  
• 「response.addHeader("Content-Type", "application/octet-strem");」행을 comment out 해 이하의 1행을 추가합니다( 각 「」 안은 1행).
  「response.setContentType("application/octet-stream; charset=UTF-8");」
  
  
• 「File file = new File(temp?tempFilePath:application.getRealPath(src));」와「BufferedReader reader = new BufferedReader(new FileReader(file));」의 2행을 comment out 해 이하의 3행을 추가합니다( 각 「」 안은 1행).
  「FileInputStream fis = new FileInputStream(temp?tempFilePath:application.getRealPath(src));」
  「InputStreamReader isr = new InputStreamReader(fis, "UTF-8");」
  「BufferedReader reader = new BufferedReader(isr);」
  

　수정이 끝나면(자) 「Reset」버튼을 클릭해 원시 코드를 오리지날에 되돌립니다.다음에, 「Hello World」를 「헬로 월드」라고 변경해 일본어를 입력해 「Update」버튼을 클릭합니다.이것으로 「헬로 월드」가 표시될 것입니다(화면 1).

화면 1　일본어를 표시할 수 있었다

　「Laszloin 10 Minutes」에서는, 「Hello World」로부터 시작되어 Laszlo 어플리케이션의 기능을 대충 설명하고 있으므로, 꼭 시험해 주세요.

■ Laszlo 프로그래밍 아키텍쳐(architecture)
　· 개발툴

　Laszlo 프레젠테이션 서버 3.0 b2전용의 개발 환경으로서는, 텍스트 문자 편집기나 XML 에디터를 사용합니다.또, 후술 하는 Eclipse 베이스의 IDE 환경에 대해서는, IBM사부터 제공되고 있어 이것을 이용하는 일도 가능합니다.

　코딩 한 원시 파일을 「C:\Program Files\Laszlo Presentation Server 3.0b2\Server\lps-3.0 b2\my-apps」에 보존하면(자) 그 실행 결과를 http://localhost:8080/lps-3.0 b2/my-apps/원시 파일로 확인할 수가 있습니다.

　시험삼아 상기의 원시 코드를, 메모장등의 텍스트 문자 편집기에 카피＆페이스트 해, 문자 코드를 UTF-8으로 해, test.lzx 라고 하는 파일명 보존해 주세요.

　브라우저로http://localhost:8080/lps-3.0b2/my-apps/test.lzx에 액세스 하면(자) 어플리케이션의 실행 결과가 표시될 것입니다.

　· LZX

　LZX는 Laszlo 어플리케이션을 기술하는 XML와 JavaScript를 베이스로 한 객체 지향의 언어입니다.

　LZX의 편입 오브젝트, 메소드, 프롭퍼티나 클래스는, XML 엘리먼트로서 기술되고(녹색 부분), 처리 논리는 JavaScript를 사용해 기술됩니다(황색 부분).

<canvas width="200">     <button onclick="vw.toggleSize() " text="Toggle Size" />     <view id="vw" y="30" width="100" height="200" bgcolor="blue" >        <method name="toggleSize">          if ( width == 100 ) {            this.setWidth(200); this.setHeight(100); }          else {            this.setWidth(100); this.setHeight(200); }       </method>     </view> </canvas>

　· 이벤트 처리

　LZX에서는, 이벤트의 콜백 루틴을 method 엘리먼트로 기술할 수 있습니다(황색 부분)
＜리스트 1＞

<canvas width="200">     <!-- setWidth 메소드는 onwidth 이벤트를 발생시킨다.-->     <button onclick="vw.setWidth(200) "          text="Expand Width" />     <view id="vw" bgcolor="blue"             y="30" width="100" height="100" >        <!-- width 가 변경되면(자) onwidth 이벤트가 발생한다 -->        <!-- onwidth 의 이벤트 핸들러를 정의한다―->        <method event="onwidth" >            this.setBGcolor(0xFF0000)        </method>            </view> </canvas>

　여기까지로 일본어 표시를 할 수 있었을 것인가.다음번부터는, Lazslo의 컴퍼넌트나 데이타바이닝, 또 Eclipse를 사용한 개발까지를 쫓고 싶다.최종적으로는, Laszlo를 사용해 Amazon의 Web 서비스의 프론트엔드의 작성까지를 실시할 예정이다.

Open Laszlo를 사용해 만드는 리치 클라이언트(3)
Open Laszlo의 이벤트 컴퍼넌트를
커스터마이즈 한다


아사노 마모루
2005/6/7

■ 이벤트 처리(계속)

　전회(참조：Open Laszlo로 일본어를 표시해 보자)의 이벤트 처리에서는, 이벤트 핸들러의 간단한 예를 소개했습니다.

　전회의리스트 1을 봐도 알도록(듯이), OpenLaszlo의 이벤트 처리의 기술 방법은 JavaScript의 이벤트 핸들러를 닮은 형식과 메소드 자체를 인스턴스(view나 button등의 오브젝트)의 이벤트 핸들러로서 기술하는 방법이 있습니다.

　예를 들면, 이하의 코드에서는, view 의 onclick 이벤트 핸들러로서 doClick() 메소드가 불려 갑니다만, 이것은, JavaScript의 이벤트 핸들러의 기술 방법과 꼭 닮습니다.

<canvas>     <view onclick="doClick() ">        <method name="doClick">          <!-- do something -->        </method>     </view> </canvas>

　

　이것과는 별도로 최초부터 메소드를 이벤트 핸들러로서 기술하는 것이 가능합니다.아래와 같은 코드에서는 메소드를 미리 특정의 이벤트 onclick의 이벤트 핸들러로서 정의하고 있습니다.

<canvas>     <view>        <method event="onclick">          <!-- do something -->        </method>     </view> </canvas>

·기본 이벤트

　button 컴퍼넌트에 대한 onclick 이벤트의 존재는 용이하게 상상이 다합니다만, 그럼 이 밖에는 어떤 이벤트가 있는 것일까요.각 컴퍼넌트가 서포트하고 있는 이벤트는LZX Reference Manual에 기술되고 있습니다.LZX Reference Manual는 OpenLaszlo explorer의 사이드바에 있는 Documentation 메뉴로부터 표시할 수가 있습니다.

· on이벤트

　컴퍼넌트의 속성치가 변화하면(자) OpenLaszlo는 ON＋속성명 이벤트를 발생시킵니다.예를 들면, window 컴퍼넌트의 x속성치가 변화하면(자)(즉 window가 x축으로 이동하면(자)) onx 이벤트가 발생합니다.

<canvas width="200">   <window height="100" width="150">     <method event="onx">       this.setAttribute("title", "Moved!");     </method>   </window> </canvas>

　상기의 코드에서는, window 를 이동하면(자) 이벤트 핸들러가 불려 가고 window의 타이틀이 변경됩니다.

·이벤트의 발생

　전항 1.2에서는, setAttribute()로 속성치를 변경하는 것으로 on이벤트가 자동적으로 발생하고 있었습니다만, sendEvent()를 사용하는 것으로 임의의 타이밍에 이벤트를 발생시킬 수가 있습니다.이것은 커스텀 컴퍼넌트를 작성할 경우에 중요해집니다.

<canvas width="200">   <window height="100" widht="150">     <attribute name="windowtitle" type="number"/>     <method event="onx">       this.windowtitle = "Moved!";      this.onwindowtitle.sendEvent();     </method>     <method event="onwindowtitle">       this.aetAttribute("title",                         this.getAttribute("windowtitle"));     </method>   </window> </canvas>

　상기의 코드에서는 windowtitle 속성에 직접치를 설정해, sendEvent()로 명시적으로 이벤트를 발생시키고 있습니다.

　이것으로, OpenLaszlo에서도 JavaScript와 같이 이벤트 핸들러에 의해 이벤트 발생시의 행동을 기술할 수 있는 것을 이해해 주실 수 있었다고 생각합니다.

·　스크립트

　LZX에서는 어플리케이션의 처리를, <script> 태그 및 <method> 태그로 둘러싼 부분에, JavaScript 호환의 스크립트로 기술합니다.아래와 같은 코드는, LZX에 짜넣어지고 있는 디버그용의 윈도우를 이용한 스크립트의 쓰는 법의 간단한 샘플입니다.

<canvas width="500" height="200" debug="true">   <script>     Debug.write("Hello, World!");   </script> </canvas>

　스크립트의 기술로 조심하지 않으면 안 되는 것은, XML의 태그의 기술로 사용되는 < 나 > 를 사용하는 경우입니다.그 경우는, &lt;나 &gt;를 사용하는지, 스크립트를 <![CDATA[ 와 ]]> 로 둘러쌀 필요가 있습니다.

<canvas height="150" debug="true">   <script>     for (var i = 0; i &lt; 5; i++)     {       Debug.write(i);     }   </script> </canvas> <canvas height="150" debug="true">   <script>     <![CDATA[     for (var i = 0; i < 5; i++)     {       Debug.write(i);     }     ]]>   </script> </canvas>

　<script> 태그나 <method> 태그로 둘러싸 기술하는 것 외에, JavaScript 같이 이벤트 핸들러로서 직접 스크립트를 기술할 수가 있습니다.

<canvas height="150" width="150>   <window title="Not clicked yet." width="150">     <button text="click me!"       onclick="this.parent.setAttribute('title', 'Clicked!')"/>   </window> </canvas>

■기본 컴퍼넌트

　지금까지의 설명으로 <canvas> <window> <button> 라고 하는 컴퍼넌트를 사용해 왔습니다.다음은, OpenLaszlo가 미리 준비해 있는 컴퍼넌트의 screen shot를 소개하고 싶다고 생각합니다.screen shot를 봐 주시면, 어떤 컴퍼넌트가 미리 준비되어 있을까를 감각적으로 잡을 수 있다고 생각합니다.

·alert


·button

·checkbox

·combobox
(편집 불가)
(편집가능)


·datepicker


·edittext


·floatinglist


·form


·grid


·gridcolumn


·gridtext


·hscrollbar


·list


·listitem


·menu


·menubar


·menuitem

·menuseparator

·modaldialog

·radiobutton
·radiogroup

·scrollbar

·simpleinputtext

·slider

·statictext

·tab

·tabelement
·tabslider

·tabpane

·tabs

·tabsbar

·tabscontent

·textlistitem

·tree

·vscrollbar

·window

·windowpanel

　이상으로, Laszlo의 이벤트 컴퍼넌트의 커스터마이즈 방법을 설명했습니다.다음번은 Laszlo 어플리케이션을 기술하는 XML와 JavaScript를 베이스로 한 객체 지향 언어의 LZX의 클래스를 정의해 코드를 재이용하는 방법이나, 기존의 클래스를 확장하는 방법을 해설합니다.

---

　덧붙여 전회의 기사 「Open Laszlo로 일본어를 표시해 보자」게재 이후,OpenLaszlo 3.0이 릴리스 되었습니다(참조 기사：open source가 RIA 시장의 기폭제가 되는, 라즈로 CEO).기능적으로는 베타 2로 크고 변함없는듯 하지만, 아키텍쳐의 네이밍이 약간 변경되어 문서의 정리도 베타의 무렵보다는 진행되고 있는 것 같습니다.

　이번은, MacOSX상에 인스톨 한 OpenLaszlo를 사용해 screen shot의 capther-나 동작 확인을 실시하고 있습니다.OS X에 인스톨 했는데 인스톨 에러가 발생해 버렸으므로, OS X를 사용하시는 분으로 인스톨에 실패했다고 하는 (분)편은, 다음의 조작을 시험해 보세요.

• openlaszlo-3.0-osx-dev-install.pkg를 Ctrl＋클릭해 context menu를 표시해, 「패키지의 내용을 표시」를 선택한다.
• Contents 폴더가 표시되므로 Contents 폴더를 연다.
• Resource 폴더가 표시되므로 Resource 폴더를 연다.
• postflight라고 하는 파일을 선택해 Ctrl＋클릭으로 context menu를 표시해, 「정보를 본다」를 선택한다.
• 터미널 어플리케이션을 기동해, 표시된 정보 다이얼로그의 장소 필드에 있는 디렉토리에 체인지 디렉토리 한다.
• chmod u＋x postflight 커멘드를 실행해, postflihgt에 실행 허가를 준다.

Open Laszlo를 사용해 만드는 리치 클라이언트(4)
Open Laszlo의 클래스를 정의해 코드를 활용한다


아사노 마모루
2005/7/8

　

■객체 지향

　LZX는 객체 지향 언어이므로, 클래스를 정의해 코드를 재이용하는 것이나, 기존의 클래스를 확장하는 것이 가능합니다.

·클래스와 인스턴스

　클래스의 정의는<class>태그를 사용해 실시합니다.

　아래와 같이에서는 MyClass라는 이름의 text 컴퍼넌트를 가진 간단한 클래스를 정의하고 있습니다.

　여기에서는 클래스를 정의했을 뿐이므로, 이 코드를 컴파일 한 OpenLaszlo 어플리케이션을 브라우저에 다운로드해도 아무것도 표시되지 않습니다(밑그림：OpenLaszlo explorer screen shot).

<canvas width="500" height="800">   <class name="MyClass" width="80" height="25"          bgcolor="#EEF1F5">     <text align="center" valign="middle">Hello, World!</text>   </class> </canvas>

　텍스트 Hello, World!(을)를 표시시키기 위해서(때문에)는, MyClass를 인스턴스화할 필요가 있습니다.　　

　MyClass 클래스의 인스턴스화는 이하와 같이 기술합니다(밑그림：OpenLaszlo explorer screen shot).

<MyClass/>

　<class>태그의 name 속성에 쓴 이름의 XML 엘리먼트가 인스턴스가 됩니다.

·속성과 메소드

　클래스의 속성은, XML 엘리먼트의 속성으로서 기술하는 일도<attribute>태그를 사용해 기술하는 일도 가능합니다.

<canvas height="30">   <class name="square" width="20" height="20"          bgcolor="red"/>   <square/> </canvas> <canvas height="30">   <class name="square">     <attribute name="width" value="20"/>     <attribute name="height" value="20"/>     <attribute name="bgcolor" value="red"/>   </class>   <square/> </canvas>

　상기 2개의 클래스는, 어느쪽이나 같은 붉은 정방형■을 표시합니다.

　클래스 정의시에 속성에 세트 된 값은, 인스턴스의 규정치로서 이용됩니다.또 인스턴스화할 때에 속성치를 세트 하는 일도 가능합니다.

<canvas height="30">   <class name="square">     <attribute name="width" value="20"/>     <attribute name="height" value="20"/>     <attribute name="bgcolor" value="red"/>   </class>   <square/>   <square bgcolor="blue"/> </canvas>

　상기의 예에서는, <square/>에서는 클래스 정의시의 값이 그대로 사용되어 인스턴스화 됩니다만, <square bgcolor="blue"/>에서는 bgcolor 속성이 blue의 값으로 인스턴스화 됩니다.

　메소드는<method>태그를 사용해 기술합니다.

<canvas>   <class name="square" width="20" height="20" bgcolor="red"          clickable="true" onclick="doClick() ">     <method name="doClick">       this.setAttribute('bgcolor', blue);     </method>   </class>   <square/> </canvas>

　상기의 예에서는, 적색의 정방형■을 클릭하면(자) 정방형의 색이 파랑에■변화합니다.

·메소드의 인수와 반환값

　<method>태그로 정의한 메소드에 파라미터를 건네주는 경우는, 속성 args를 사용합니다.또 반환값을 돌려줄 수도 있습니다.

<canvas>   <class name="square" width="20" height="20" bgcolor="red"          clickable="true" onclick="doClick() ">     <method name="doClick">       var size = this.getSize(2);       this.setAttribute('width', size);       this.setAttribute('height', size);     </method>     <method name="getSize" args="m">       var size = this.getAttribute('width');       return size * m;     </method>   </class>   <square/> </canvas>

　상기 메소드 getSize()에서는 인수 m를 args="m"로 받아, 현재의 width를 m 배가 된 값을 return size * m로 돌려주고 있습니다.복수의 인수를 받는 경우는, args="a, b"와 같이 칸마로 단락지어 늘어놓아 기술합니다.

·속성과 제약

　정방형의 view를 나타내는 square 클래스를 만들어, 속성 및 메소드를 간단하게 설명해 왔습니다.이 square 클래스에서는, width 속성, height 속성에 같은 수치를 설정하는 것으로 정방형의 특징을 표현하고 있었습니다만, LZX의 제약을 사용하면(자) 좀 더 적확하게 표현할 수가 있습니다.

<canvas>   <class name="square" width="${size}" height="${size}"          bgcolor="red">     <attribute name="size" value="20"/>   </class>   <square size="15" bgcolor="yellow"/>   <square/>   <square size="40" bgcolor="blue"/> </canvas>

　상기에서는 width와 height에 size의 값을 설정하는 것으로 정방형을 나타내고 있습니다.즉 height와 width는 size에 제약되고(의존하고) 있는 상태가 되어 있습니다.이 코드를 실행하면(자) 아래와 같은 사이즈와 색이 다른 3개의 정방형이 표시됩니다.

　제약은 $when{expression} 와 같이 기술합니다.when에는 immediately, once, always의 어느쪽이든을 기술합니다.when가 생략 되었을 경우의 규정치는 always입니다.expression에는 JavaScript를 기술할 수 있습니다.제약을 사용하면(자) 인스턴스간의 의존관계(dependencies)를 기술할 수가 있습니다.

·계승과 확장

　LZX는 객체 지향 언어이므로, 기존의 클래스를 계승해 새로운 클래스를 기술할 수가 있습니다.기존의 클래스를 계승하는 경우는, <class>태그의 extends 속성을 사용합니다.

<canvas width="200">   <class name="MyButton" text="My Button!" extends="button"/>   <MyButton/> </canvas>

　상기의 코드에서는 기본 컴퍼넌트 button를 계승한 MyButton 클래스를 정의해 인스턴스화하고 있습니다.이 코드는밑그림의 버튼을 표시합니다.

　LZX에서는 C++와 같은 다중 상속은 서포트하고 있지 않았기 때문에, 복수의 클래스로부터 계승한 클래스를 정의할 수 없습니다.그런데, 일전에 예로서 든 클래스 <MyClass> 나 <square> 에서는 어느 클래스도 계승하고 있지 않는 것처럼 보입니다만, 실은 기본 컴퍼넌트의 view 클래스를 계승하고 있습니다.LZX에서는 class 정의의 extends 속성이 생략 되었을 경우, view 클래스가 계승됩니다.

　클래스의 계승을 이용해 기존 클래스의 기능이나 동작을 확장하는 것이 가능합니다.

<canvas>   <class name="resize_view" width="20"          height="20" bgcolor="red" onclick="doClick() ">     <method name="doClick">       setAttribute('width', getAttribute('width')*2);       setAttribute('height', getAttribute('height')*2);     </method>   </class>   <class name="color_view" extends="resize_view">     <method name="doClick">       super.doClick();       setAttribute('bgcolor', blue);     </method>   </class>   <simplelayout axis="y" spacing="10"/>   <resize_view/>   <color_view/> </canvas>

　상기의 예에서는, 클릭하면(자) 사이즈가 바뀌는 resize_view 클래스를 우선 처음에 정의하고 있습니다.다음에 이 클래스를 계승해 클릭하면(자) 사이즈와 색이 바뀌는 color_view 클래스를 정의하고 있습니다.

　color_view 클래스에서는 doClick 메소드를 재정의해, 친클래스의 doClick 메소드를 호출한 후에 색을 파랑으로 설정해 있습니다.이와 같이 차분을 실장하는 것으로 클래스의 기능이나 동작을 확장하는 것이 가능합니다.

＜클래스 정의 파일＞

　클래스의 정의와 인스턴스화를 <include> 태그, <library> 태그를 사용해 다른 파일에 기술할 수가 있습니다.이하의 코드가 파일 myclass.lzx에 기술되고 있다고 합니다.

<library>   <class name="MyButton" text="MyButton"/> </library>

　이 파일에 정의되고 있는 클래스를 다른 파일로부터 사용하는 경우는, 이하와 같이 기술합니다.

<canvas width="50">   <include href="myclass.lzx"/>   <MyButton/> </canvas>

　여기까지로, 클래스 정의 후의 코드의 재이용이나, 기존 클래스를 확장할 수가 있었을 것인가.잘 활용해, 효율적인 Web 어플리케이션을 개발 해 주었으면 한다.다음번부터는 프레이스먼트나 데이타바이닝에 대해 해설한다.

Open Laszlo를 사용해 만드는 리치 클라이언트(5)
Laszlo Application 배치의 2개의 방법

아사노 마모루
2005/8/16

■Laszlo Application 배치의 2개의 방법

　전회까지로,Laszlo Application의 실장 방법을 어딘지 모르게 알아 받을 수 있었다고 생각합니다.이번은 작성한 Laszlo Application의 배치 방법에 대해 설명하고 싶다고 생각합니다.

　Laszlo Application를 배치하려면 2개의 방법이 있습니다.1개는 Laszlo Presentation Server(LPS)를 사용하는 방법, 이제(벌써) 1개는 미리 컴파일 해 두었다 Laszlo Application (.swf 파일)을 IIS나 Apache라고 하는 Web 서버로 배포하는 방법입니다.후자의 방식은 SOLO(Standard OpenLaszlo Output) 또는 서바레스(LPS를 사용하지 않기 때문에)로 불리고 있습니다.

■Laszlo Presentation Server(LPS)로 배치한다

　Laszlo Application의 원시 코드 파일 .lzx 파일을　LPS의 부하의 폴더에 보존합니다.Windows의 경우, 유저 어플리케이션의 보존 장소는 인스톨시의 디폴트 설정에서는,

C:\Program Files\OpenLaszlo Server 3.0\Server\lps-3.0\my-apps

(이)가 되어 있습니다.여기에 보존한 Laszlo Application는, 이하의 URL로 액세스 할 수 있습니다(XXXX는 원시 코드의 파일명).또 my-apps의 폴더명을 임의의 명칭에 변경해도 문제 없습니다.

http://localhost:8080/lps-3.0/my-apps/XXXX.lzx

　클라이언트(Web 브라우저)로부터 액세스 된 LZX 원시 파일은 SWF 형식에 동적으로 컴파일 되어 최초로 컴파일 된 아르바이트 코드는 캐쉬되어 클라이언트에 다운로드됩니다.

　그럼, my-apps에 간단한 원시 코드를 작성하고 시험해 봅시다.메모장을 시작 이하의 코드를 입력해 my-apps 폴더에hello.lxz라고 하는 파일명으로 보존해 주세요.

<canvas>       <text>Hello Laszlo!</text> </canvas>

　http://localhost:8080/lps-3.0/my-apps/hello.lzx에 브라우저로부터 액세스 하면(자), Hello Laszlo!(이)라고 표시될 것입니다.

　LPS로 배치했을 경우, LPS가 가지는 미디어·트랜스 코딩, 데이터·매니저, 파시스텐트·connection·매니저, 캐쉬등의 기능을 이용할 수가 있습니다(화면 1).다만 퍼포먼스와 트레이드 오프 하는 경우가 있는 것 같습니다.

화면 1　Laszlo Presentation Server(LPS)의 아키텍쳐

· LPS Request Types

　방금전 액세스 한 Laszlo Application, hellow.lzx에서는화면 2와 같은 버튼이 표시되고 있습니다.이것은 LPS가 Lazlo Application를 랩핑 하는 HTML 컨텐츠를 돌려주고 있기 (위해)때문입니다.이 HTML 컨텐츠의 내용은, LPS Request Type를 지정하는 것으로 제어할 수가 있습니다.전기 URL의 마지막에?lzt=html를 붙여 액세스 하면(자), 방금전까지 표시되고 있던 버튼이 표시되지 않게 됩니다.

화면 2　개발툴 버튼

　LPS Request Type는, lzt=html 외에, lzt=html, lzt=html-object, lzt=window, lzt=embet, lzt=js, lzt=object-tag, lzt=swf, lzt=app_console, lzt=source, lzt=xml, lzt=log, lzt=clearlog, lzt=logconfig, lzt=clearcache, lzt=serverinfo, lzt=errorcount, lzt=errorcount&clear=1, lzt=stat, lzt=gc등이 있습니다.자세한 것은 「System Administrator's Guide to Deploying Laszlo Applications」의 「Chapter 4. LPS Request Types」를 봐 주세요.

　이것들 LPS Request Type에 의해 LPS가 돌려주는 HTML의 원시 코드를, 작성한 어플리케이션을 기술하는 HTML 소스의 템플릿으로서 이용할 수도 있습니다.

■SOLO(Standard OpenLaszlo Output)로 배치한다

　SOLO로 Laszlo Application를 배포하려면 , 미리 컴파일 해 둘 필요가 있습니다.

· Lazlo Application의 컴파일
　
　Laszlo Application를 컴파일 하려면 이하의 3방법의 방법이 있습니다.

• 커멘드 라인으로부터 컴파일 한다
• 쿠에리-파라미터 lzproxied=false를 지정해 LPS로 컴파일 한다
• LZX 소스의 canvas 태그의 속성에 proxied="false"를 지정한다

　컴파일 커멘드 lzc는, 디폴트 설정의 인스톨에서는, C:\Program Files\OpenLaszlo Server 3.0Ybin에 존재하고 있습니다.「Software Developer's Guide to Laszlo Applications」에는, lzc filename.lzx로 하는 것으로 컴파일 할 수 있는 기술이 있습니다만, 현버젼에서는 정상적으로 동작하지 않는 것 같습니다.

　그럼, 방금전 사용한 hello.lzx를 컴파일 해 SWF 형식으로 해 봅시다.이하의 URL에 액세스 해 보세요.LPS가 hello.lzx를 컴파일 해, my-apps 폴더에hello.lzx.swf라고 하는 명칭으로 보존합니다.

http://localhost:8080/lps-3.0/my-apps/hello.lzx?lzproxied=false

· IIS에 배치한다

　IIS의 설정의 상세한 것에 대하여는 생략합니다만, 사용의 PC에 IIS가 인스톨 되고 있어 공개하고 있는 폴더가 있으면(디폴트 상태에서는 C:\Inetpub\wwwroot), 거기에 hello.lzx.swf를 카피해 브라우저로부터 액세스 해 주세요.역시와 같이 Hello Laszlo!(이)라고 표시될 것입니다(화면 3).

화면 3　IIS로 배치한 Laszlo Application

· Wrapper HTML

　SOLO로 배치했을 경우, SWF 파일을 직접 URL로 지정했습니다만 SWF 파일을 HTML내에 기술해 배치하는 일도 당연 가능합니다(화면 4).이 때의 HTML에 대해서는, LPS를 사용하는 것으로 간단하게 작성할 수가 있습니다.hello.lxz를 예로 하면(자) 이하의 순서로 작성할 수 있습니다.

• LZX 원시 파일에 lzt=html-object의 LPS Request Type를 지정해 액세스 한다
• 브라우저의 뷰소스로 HTML 소스를 표시해, 편집자에게 카피＆페이스트 한다
• data="hello.lzx?lzt=swf" 를 data="hello.lzx.swf" 에 수정한다
• <param name="movie" value="hello.lzx?lzt=swf"＞ (을)를 <param name="movie" value="hellow.lzx.swf"> (으)로 변경한다
• 파일을 임의의 html 파일로서 보존해, hello.lzx.swf를 배치한 폴더에 배치한다

화면 4　IIS로 배치한 Wrapper HTML

　Wrapper HTML의 작성 방법은, SOLO에 의한 배치 만이 아니게 LPS로 Laszlo Application를 배치하는 경우에도 이용하는 것이 가능합니다.

　여기까지로, Laszlo Application 배치의 2 방법에 대해 이해하실 수 있었는지요.다음번은 LZX의 데이터 형식과 바인딩에 대해 해설합니다.

Open Laszlo를 사용해 만드는 리치 클라이언트(6)
Laszlo Application의 데이터 형식과 바인딩

아사노 마모루
2005/9/27

■Laszlo Application 배치의 2개의 방법

　전회(Laszlo Application 배치의 2개의 방법)까지로,Laszlo Application의 실장 방법, Laszlo Application의 2개의 배치 방법에 대해 설명했습니다.

　이번은, LZX에서의 데이터의 취급 방법에 대해 개요를 설명합니다.

　LZX에서는 이하와 같은 데이터 조작이 가능합니다.

• Dataset로서 Laszlo Application에 데이터를 격납한다
• 리모트에 있는 데이터 소스로부터 데이터를 받는다
• Web 서비스를 개입시켜 데이터를 받는다
• 실행시에 데이터를 생성, 조작한다
• 유저 인터페이스에 데이터를 선언적으로 바인드 한다

　리모트의 데이터 출처에 도착해, 이번은, 수신 방법에 대한 보고 설명하겠습니다.

■데이터 형식

　LZX로 조작하는 데이터는 XML 형식에서 다루어져 XPath의 부분집합을 사용해 액세스 합니다.

■Dataset

　dataset 태그를 사용해 canvas내에 데이터를 정의할 수가 있습니다.(아래와 같이) 이와 같이 정의된 데이터를 로컬 데이터라고 부릅니다.

<canvas> 　 <dataset name=”shelf”> 　　 <bookshelf> 　 　　　 <book binding=”paperback”> 　　 　　　　 <titile>Acts of the Apostles</title> 　　 　　　　<author>John F.X. Sundman</author> 　　 　　　　<publisher>Rosalita Associates</publisher> 　　 　　　　<price>15.00</price> 　　 　　　　<year>1999</year> 　　 　　　　<category>thriller</category> 　　 　　　　<rating>4.5</rating> 　　　　 </book> 　　　　 <book> 　　　　…(생략) 　　 　 </book> 　　 </bookshelf> 　 </dataset> </canvas>

　이 dataset에는 canvas.shelf라고 하는 표기로 액세스 할 수 있습니다.

■LZX로부터의 데이터 조작

　LZX로부터는, dataset, datapath, datapointer 태그를 사용해 데이터 조작을 실시합니다.

■dataset와 datapath

　그럼 dataset와 datapath를 사용해 로컬 데이터에 액세스 해 봅시다.

<canvas heitht="80" width="500"> 　<dataset name="myData"> 　　<myXML> 　　　<person show="simpsons"> 　　　　　<firstName>Homer</firstName> 　　　　　<lastName>Simpson</lastName> 　　　</person> 　　　<person show="simpsons"> 　　　　　<firstName>Marge</firstName> 　　　　　<lastName>Simpson</lastName> 　　　</person> 　　　<person show="simpsons"> 　　　　　<firstName>Montgomery</firstName> 　　　　　<lastName>Burns</lastName> 　　　</person> 　　</myXML> 　</dataset> 　<text datapath="myData:/myXML[1]/person[1]/firstName[1]/text() "/> </canvas>

　상기의 코드에서는 <dataset name="myData"> 로 정의한 데이터 세트를, text 태그의 datapath 속성의 XPath치로 지정해, text 태그에 바인드 하고 있습니다.이 코드를 실행하면(자) 브라우저상에 "Homer" 라고 표시됩니다.

　이 코드에서는 선두의 person 엘리먼트의 firstName 엘리먼트의 텍스트를 절대 패스로 기술하고 있습니다.그러나, 복수의 엘리먼트 데이터를 표시할 때에, 하나 하나 절대 패스를 기술하는 것은 귀찮습니다.그 경우는, view 태그로 묶는 것으로 XPath의 일부를 생략 할 수가 있습니다.

<view name="rowOfData" datapath="myData:/myXML[1]/person[1]/"> 　<simplelayout axis="x" /> 　<text datapath="firstName/text() "/> 　<text datapath="lastName/text() "/> 　<text datapath="@show"/> </view>

　상기의 코드에서는 view 태그의 속성 datapath에 myData:/myXML[1]/person[1]/ 을 지정하는 것으로 canvas 태그의 datapath의 기술은 view 태그의 datapath치로부터의 상대 패스로 기술하고 있습니다.

　복수의 엘리먼트 데이터의 표시에 대해서는, <simplelayout axis="x" />태그를 지정하는 것으로, 데이터를 x축방향으로 늘어놓아 표시할 수가 있습니다(화면 1).

화면 1　복수의 엘리먼트 데이터의 표시

　상기의 코드에서는 복수의 엘리먼트 데이터를 1행으로 표시하고 있습니다만, 행이 반복하는 것 같은 경우는, view 태그와 simplelayout 태그를 네스트 하는 것으로, 복수행으로 표시하는 것이 가능합니다.

<view name="myTable"> 　<simplelayout axis="y"/> 　 <view name="rowOfData" datapath="myData:/myXML[1]/person[1]/"> 　　<simplelayout axis="x" /> 　　<text datapath="firstName/text() "/> 　　<text datapath="lastName/text() "/> 　　<text datapath="@show"/> 　</view> </view>

화면 2　복수의 엘리먼트 데이터의 복수행에서의 표시

■데이터 소스

　지금까지의 설명은 문서내(LZX 원시 코드내)에 직접 기술된 데이터의 취급입니다만, 직접 기술하는 것 외에, 외부 파일에 기술해 인클루드 하는 것이나, 서버로부터 HTTP로 취득하는 것이 가능합니다.

■인클루드 데이터

　 문서내에 직접 기술하고 있던 dataset를 외부 파일에 기술해 인클루드 하는 방법입니다.기술 방법은 아래와 같이 됩니다.데이터는 컴파일시에 로드 됩니다.

<dataset name="데이터 세트명 " src="xml 파일에의 상대 패스 " />
예：<dataset name="myData" src="myXMLDoc.xml" />

　이 예에서는, 로드 된 데이터는 myData라는 이름의 데이터 세트가 됩니다.

■HTTP 데이터

　 URL로 지정된 데이터 소스로부터 실행시에 HTTP 경유로 데이터를 로드할 수가 있습니다.데이터 소스는 XML를 돌려줄 필요가 있습니다.기술 방법은 아래와 같이 됩니다.

<dataset name="데이터 세트명 " autorequest="true 또는 false" type="http" src="URL 또는 xml 파일에의 상대 패스 " />

예：<dataset name="myData" autorequest="true" type="http" src="myXMLDoc.xml" />
예：<dataset name="myData" src=http://www.datasetserver.com/cgi-bin/getdata.cgi />

　autorequest 속성의 값이 true의 경우는, 어플리케이션이 로드 되자마자 데이터가 로드 됩니다.src 속성의 값이 http://를 포함하고 있는 경우는 type 속성을 생략 할 수가 있습니다.

　데이터의 로드는 src 속성의 값이 setQueryString() 메소드나 setURL() 메소드로 변경되는 타이밍에 로드하는 것이나, doRequest() 메소드로 임의의 타이밍에 로드할 수가 있습니다.

■Datapointer

　 datapointer를 사용하면(자) 스크립트중에서의 데이터 조작을 실시할 수가 있습니다.아래와 같은 코드를 실행하면(자), person 엘리먼트의 show 속성의 값이 south park의 데이터가, 디버그 윈도우에 표시됩니다.

<canvas height="180" width="500" debug="true"> 　 <dataset name="myData"> 　　 <myXML> 　　　 <person show="simpsons"> 　　　　 <firstName>Homer</firstName> 　　　　 <lastName>Simpson</lastName> 　　　 </person> 　　　 <person show="simpsons"> 　　　　 <firstName>Marge</firstName> 　　　　 <lastName>Simpson</lastName> 　　　 </person> 　　　 <person show="simpsons"> 　　　　 <firstName>Montgomery</firstName> 　　　　 <lastName>Burns</lastName> 　　　 </person> 　　　 <person show="south park"> 　　　　 <firstName>Eric</firstName> 　　　　 <lastName>Cartman</lastName> 　　　 </person> 　　　 <person show="south park"> 　　　　 <firstName>Stan</firstName> 　　　　 <lastName>Marsh</lastName> 　　　 </person> 　　 </myXML> 　 </dataset> 　 <datapointer xpath="myData:/" ondata="processData() "> 　　 <method name="processData"> 　　　 this.selectChild(2); 　　　 do { 　　　 　if (this.xpathQuery( '@show' ) == 'south park') { 　　　 　　　 Debug.write(this.xpathQuery('firstName/text()')); 　　　 　} 　　　 } while (this.selectNext()); 　　 </method> 　 </datapointer> </canvas>

화면 3　person 엘리먼트의 show 속성의 표시

　<datapointer xpath="myData:/" ondata="processData() "> 그럼, 데이터 세트 myData의 문서 루트가 datapointer에 끈 붙일 수 있어 데이터 로드시에 processData() 메소드가 불려 가도록(듯이) 기술되고 있습니다.

　 processData() 메소드에서는 최초로 this.selectChild(2)로 선두의 person 엘리먼트를 선택해, this.xpathQuery('@show') 그리고 person 엘리먼트의 show 속성의 값을 꺼내 south park와 비교하고 있습니다.일치하는 경우는, Debug.write(this.xpathQuery('firstName/text()') 그리고 firstName 엘리먼트의 값을 디버그 윈도우에 출력합니다.while 문중의 this.selectNext()로 person 엘리먼트가 존재하는 한 처리를 계속하고 있습니다.

　이상이 LZX에서의 데이터 표현 및 데이터 조작의 개요입니다.데이터와 유저 인터페이스와의 바인딩의 상세, 데이터 갱신의 타이밍과 뷰 갱신의 타이밍의 컨트롤에 대해서는, 「Software Developer's Guide to Laszlo Applications」의 제32장 「Data Access and Binding」에 상세가 기술되고 있습니다.이 연재가 open source로 리치 클라이언트를 구축할 때에 도움이 되면 다행입니다.애독 감사합니다.