Whiteship's Note


[Spring BlazaDS Integration 레퍼런스] 3장 스프링 빈을 플렉스 리모팅용으로 공개하기

Adobe : 2010. 7. 26. 23:18


참조: http://static.springsource.org/spring-flex/docs/1.5.x/reference/html/index.html#introduction


3.1. 도입


스프링이 관리하는 MessageBroker 는 플렉스 클라이언트가 스프링 빈을 리모팅 호출할 수 있는 형태로 손쉽게 공개할 수 있게 해준다. 이 방법은 스프링 프레임워크가 제공하는 다른 리모팅 기술과 매우 유사한 방법이다. 리모팅은 기존의 스프링 빈을 마치 외부 설정 용으로 만들어 준다. MessageBroker 는 플렉스 AMF 데이터 형식과 자바 사이의 직렬화 및 역직렬화를 투명하게 처리해준다.


3.2. 리모팅 서비스 설정


BlazeDS RemotingService 는 BlazeDS XML 설정에 있는 remoting-config.xml을 추가할 때동으로 설정된다. 스프링이 관리하는 리모팅 목적지 만을 사용할 때는 이 설정 파일 없이 스프링 설정 파일에 message-broker 태그를 추가하면 감각적인 기본값에 의해 RemotingService 가 설정된다. 그 결과 BlazeDS 설정에 remoting-config.xml에 다음과 같이 설정하는 것과 같은 것이다.


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

<service id="remoting-service"

    class="flex.messaging.services.RemotingService">


    <adapters>

        <adapter-definition id="java-object" 

            class="flex.messaging.services.remoting.adapters.JavaAdapter" 

            default="true"/>

    </adapters>


    <default-channels>

        <channel ref="my-amf"/>

    </default-channels>

    

</service>    

    


이것은 애플리케이션 수준의 default-channels 설정이 있다고 가정한다는 것을 알아두자. 애플리케이션 수준 기본 설정에 의존하지 않는다면 원하는 서비스 관련 채널을 설정하는 것을 추천한다(아래 예제 처럼). 만약 애플리케이션 수준 기본값이 없다면, AMFEndpoint 를 사용하는 MessageBroker 에서 사용할 수 첫번째 가용 채널을 RemotingService의 기본값으로 설정한다.


만약 RemotingService에 설정되는 기본값을 더 명시적으로 제어하고 싶다면 message-broker 태그의 remoting-service remoyou하위 엘리먼트를 사용해서 설정할 수 있다. 


<flex:message-broker>

<flex:remoting-service default-adapter-id="my-default-remoting-adapter" 

    default-channels="my-amf, my-secure-amf" />

</flex:message-broker>


만약 레거시 BlazeDS 애플리케이션의 기존 remoting-config.xml이 있다면  RemotingDestinationExporter가 투명하게 모든 스프링이 관리하는 리모팅 목적지로 이전하게 해준다.


3.3. remoting-destination 태그 사용하기

remoting-destination 설정 태그는 기존에 스프링이 관리해주고 있는 서비스를 플렉스 클라이언트에서 직접 리모팅 할 수 있도록 해준다. 다음 스프링 빈 설정은 productService 빈을 설정하고 있다.


    

<bean id="productService" class="flex.samples.product.ProductServiceImpl" />

    


그리고 message-broker 태그를 설정하여 스프링이 관리하는 MessageBroker가 있다고 가정하겠다. 이때 다음의 최상위 remoting-destination 태그가 productService라는 서비스 목적지를 플렉스 클라이언트가 리모팅할 수 있게 공개해준다. 


<!-- Expose the productService bean for BlazeDS remoting -->

<flex:remoting-destination ref="productService" />

    


기본으로 플렉스 클라이언트에 공개되는 리모트 서비스 목적지는 목적지의 서비스 id로 빈 이름을 사용하는데 이 값을 remoting-destination 태그의 destination-id 애트리뷰트로 재정의할 수 있다. 


remoting-destination 태그를 사용하는 방법의 대안으로 bean 정의의 하위 엘리먼트를 사용하는 방법이 있다. 도메인 계층 빈 설정과 플렉스 리모팅 같은 기반 관련 설정을 분리할 필요가 없을 때 사용할 수 있다. (분리하는 것이 테스트를 더 편하게 할 수 있다는 것을 명심하자.) 다음과 같은 설정은 위와 동일한 결과를 가져다준다.


    

<bean id="productService" class="flex.samples.product.ProductServiceImpl" >

<flex:remoting-destination />

</bean>

    


플렉스 클라이언트가 호출할 수 있는 메서드를 remoting-destination 태그의 include-methods와 exclude-methods 애트리뷰트를 사용해서 보다 엄격하게 관리할 수 있다. 목적지를 공개할 BlazeDS 채널은 channels 애트리뷰트를 사용해서 제어할 수 있다. (최상위 엘리먼트로 사용하든 내부 엘리먼트로 사용하든 이 애트리뷰트를 사용할 수 있다.) 좀 더 커스터마이징한 예제는 다음과 같다.


<flex:remoting-destination ref="productService" 

    include-methods="read, update" 

    exclude-methods="create, delete" 

    channels="my-amf, my-secure-amf" />

    


remoting-destination 태그는 공개하는 빈 마다 투명하게 RemotingDestinationExporter 빈 인스턴스를 등록해 준다. 네임스페이스를 사용하지 않고 빈 설정을 하면 다음과 같다.


<!-- Expose the productService bean for BlazeDS remoting -->

<bean id="product" class="org.springframework.flex.remoting.RemotingDestinationExporter">

    <property name="messageBroker" ref="_messageBroker"/>

    <property name="service" ref="productService"/>

    <property name="destinationId" value="productService"/>

    <property name="includeMethods" value="read, update"/>

    <property name="excludeMethods" value="create, delete"/>

    <property name="channels" value="my-amf, my-secure-amf"/>

</bean>


3.4. @RemotingDestination 사용해서 리모팅 빈 공개하기


@RemotingDestination 애노테이션은 XML 리모팅-목적지 태그 대안으로 사용할 수 있다. @RemotingDestination 은 클래스의 타입에 사용하여 해당 빈을 공개할 수 있다. @RemotingInclude@RemotingExclude를 메서드에 사용하여 해당 메서드를 리모팅에 포함할지 제외할지 설정할 수 있다. 


다음 예제는 productService 빈을 애노테이션으로 리모팅 설정한 예에 해당한다.


package flex.samples.product;


import org.springframework.flex.remoting.RemotingDestination;

import org.springframework.flex.remoting.RemotingExclude;

import org.springframework.flex.remoting.RemotingInclude;

import org.springframework.stereotype.Service;


@Service("productService")

@RemotingDestination(channels={"my-amf","my-secure-amf"})

public class ProductServiceImpl implements ProductService {


@RemotingInclude

public Product read(String id) {

...

}

@RemotingExclude

public Product create(Product product){

...

}

@RemotingInclude

public Product update(Product product){

...

}

@RemotingExclude

public void delete(Product product) {

...

}

}

    


top

Write a comment.


[Spring BlazaDS Integration 레퍼런스] 2장 스프링에서 BlazeDS MessageBroker 설정 및 사용

Adobe : 2010. 7. 26. 22:06


참조: http://static.springsource.org/spring-flex/docs/1.5.x/reference/html/index.html#introduction


2.1. 도입

스프링 BlazeDS Integration을 사용할 때 반드시 설정해야 하는 핵심 요소는 MessageBroker다. 플렉스 클라이언트에서 발생한 HTTP 메세지는 스프링 DispatcherServlet 을 통해 스프링이 관리하는 MessageBroker로 전달된다. 스프링이 관리하는  MessageBroker를 사용할 때는 BlazeDS MessageBrokerServlet 을 설정할 필요 없다.


2.2. 스프링 DispatcherServlet 설정

스프링 WebApplicationContext의 시작점(bootstrap)으로 보통 web.xml에 DispatcherServlet 을 다음과 같이 설정한다.

<!-- The front controller of this Spring Web application, responsible for handling all application requests -->

<servlet>

    <servlet-name>Spring MVC Dispatcher Servlet</servlet-name>

    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <init-param>

        <param-name>contextConfigLocation</param-name>

        <param-value>/WEB-INF/config/web-application-config.xml</param-value>

    </init-param>

    <load-on-startup>1</load-on-startup>

</servlet>


2.3. 스프링에 MessageBroker 설정하기

WebApplicationContext에 MessageBroker를 설정할 때 편리한 스프링 XML 설정 네임스페이스가 제공된다. 그 네임스페이스를 사용하려면 스프링 XML 설정 파일에 스키마 위치를 추가해야 한다. 보통 다음 설정과 같을 것이다.


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

<beans xmlns="http://www.springframework.org/schema/beans"

  xmlns:flex="http://www.springframework.org/schema/flex"

       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

       xsi:schemaLocation="

           http://www.springframework.org/schema/beans

           http://www.springframework.org/schema/beans/spring-beans-2.5.xsd

           http://www.springframework.org/schema/flex 

           http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">

...

</beans>

    

    


이렇게 하면 설정 파일에서 flex 네임스페이스로 스프링 BlazeDS Integration 설정 태그를 사용할 수 있다. 다음 예제부터는 위와같이 설정했다고 가정을 하겠다. 이 네임스페이스에서 사용할 수 있는 모든 태그과 애트리뷰트는 spring-flex-1.0.xsd를 참조하기 바란다. 이클립스 같은 XSD를 인식하는 XML 편집기에서는 우리가 타이핑하는 것에 따라 문서를 자동으로 읽어줄 것이다.


스프링 WebApplicationContext에 최소한 MessageBrokerFactoryBean 을 설정하여 MessageBroker를 가동시켜야 하며 MessageBrokerHandlerAdapter 와 적절한  HandlerMapping (보통 SimpleUrlHandlerMapping) 을 사용하여 요청을 스프링이 관리하는  MessageBroker에 전달되게 해야한다. 


빈 설정 파일에 message-broker 태그를 등록하면 그러한 빈들을 자동으로 등록해 준다. 다음 예제가 가장 간단한 형태다.


<flex:message-broker/>    

    


이렇게 하면 MessageBroker 를 설정하고 필요한 기반 요소를 감각적인 기본값(sensible defaults)으로 설정해 준다. 그렇게 사용하는 기본값들은 message-broker 태그의 애트리뷰트 또는 하위 엘리먼트를 사용해서 재정의 할 수 있다. 예를 들어 BlazeDS XML 설정 파일의 기본 위치(/WEB-INF/flex/services-config.xml)를 services-config-path 애트리뷰트로 재정의할 수 있다. MessageBrokerFactoryBean 은 스프링의 ResourceLoader 추상화를 사용하기 때문에 스프링 리소스 패스를 사용할 수 있다. 그 예로, 애플리케이션 클래스패스에서 설정을 읽어오도록 다음과 같이 설정할 수 있다.


<flex:message-broker services-config-path="classpath*:services-config.xml"    

    


이와 동일한 순수 스프링 설정을 사용한 MessageBrokerFactoryBean 정의는 다음과 같다. 



<!-- Bootstraps and exposes the BlazeDS MessageBroker -->

<bean id="_messageBroker" class="org.springframework.flex.core.MessageBrokerFactoryBean" >

<property name="servicesConfigPath" value="classpath*:services-config.xml" />

</bean>    

    


message-broker 태그에서 특히 주목할 점은 MessageBroker에 커스텀 id를 설정할 필요가 없다는 것이다. 나중에 참조할 일도 없기 때문에 사실 그렇게 하는 것을 권장하지 않는다. 커스텀 id를 설정해야 하는 상황은 오직 WebApplicationContext에 MessageBroker를 두개 이상 가동할 경우이다.


2.4. 요청을 MessageBroker쪽으로 매핑하기


들어오는 요청을 스프링이 관리하는 MessageBroker로 전달하려면 세곳에 요청 매핑을 설정해야한다. 

  • web.xml에 DispatcherServlet 매핑
  • 스프링 WebApplicationContext에 HandlerMapping
  • BlazeDS services-config.xml에 채널 정의

가장 간단한 요청 매핑 시나리오는 앞단에 위치한 플렉스가 애플리케이션의 유일한 클라이언트인 경우이다. 이런 경우 /messagebroker를 요청 최상위 패스로 매핑할 수 있다. 그런 경우 web.xml에 다음과 매핑할 것이다.


<!-- Map all /messagbroker requests to the DispatcherServlet for handling -->

<servlet-mapping>

    <servlet-name>Spring MVC Dispatcher Servlet</servlet-name>

    <url-pattern>/messagebroker/*</url-pattern>

</servlet-mapping>    


message-broker 설정 태그를 사용하면  SimpleUrlHandlerMapping 이 설정되어 DispatcherServlet 으로 전달되는 모든 요청을 /* 경로 패턴을 따라 스프링이 관리하는 MessageBroker 에 매핑한다. 자신이 직접 작성한 HandlerMapping 빈을 설정할 때는   message-broker 태그의 disable-default-mapping 애트리뷰트를 사용해서 기본 매핑 사용을 제어할 수 있다. 기본으로 설정되는 SimpleUrlHandlerMapping 의 순서는 mapping-order 애트리뷰트로 설정할 수 있다. (동일한 컨텍스트에 여러 핸들러 매핑 타입이 존재하는 복잡한 경우에 사용할 수 있겠다.)


스프링 WebApplicationContext의 SimpleUrlHandlerMapping 은 모든 요청을 MessageBrokerHandlerAdapter를 통해 스프링이 관리하는 MessageBroker로 전달한다. 기본으로 설정되는 message-broker 태그는 다음과 같은 빈 정의와 동일하다.


<!-- Maps request paths at /* to the BlazeDS MessageBroker -->
<bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
    <property name="mappings">
        <value>
            /*=_messageBroker
        </value>
    </property>
</bean>

<!-- Dispatches requests mapped to a MessageBroker -->
<bean class="org.springframework.flex.servlet.MessageBrokerHandlerAdapter"/>    
		


BlazeDS services-config.xml의 채널 정의가 반드시 선택한 매핑에 대응해야 한다. 예를 들어, 위 매핑 전략에 대응하는 AMF 채널을 BlazeDS에 다음과 같이 설정할 수 있다. 

 

<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
    <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" 
    	class="flex.messaging.endpoints.AMFEndpoint"/>
    <properties>
        <polling-enabled>false</polling-enabled>
    </properties>
</channel-definition> 		
		

services-config.xml에 커뮤니테이션 채널을 설정하는 더 자세한 방법은  BlazeDS documentation 에서 참조하기 바란다.


2.5. 스프링 MVC 컨트롤러와 플렉스 클라이언트 같이 사용하기


플렉스 기반 클라이언트 뿐 아니라 더 다양한 클라이언트를 지원하는 애플리케이션이 더 흔할 것이다. 예를 들어 RESTful 아키텍처를 구성하여 여러 종류의 클라이언트를 지원할 수 있다. 잠재적으로 플렉스 HTTPService 컴포넌트를 사용하여 RESTful 종점(endpoint)를 구독할 수도 있다. 스프링 MVC의 컨트롤러 모델은 RESTful 종점 같은 것을 만들기 단순하며, 유연한 방법들을 제공한다. 이러한 하이브리드 웹 애플리케이션 시나리오에서는 다른 방식의 매핑 전략이 필요하다.


가장 간단한 방법은 여러 DispatcherServlet과 계층형 애플리케이션 컨텍스트를 사용하는 것이다. 이 방법에서는 주요 애플리케이션 계층(서비스, 보안, 기반시설 지원, 등)을 ContextLoaderListener가 로딩하는 상위 컨텍스트에 두고, 스프링 MVC 컨트롤러들을 그 하위 DispatcherServlet 컨텍스트에 두고, 플렉스 클라이언트와 관련된 모든 것들을 별도의 DispatcherServlet 컨텍스트에 두는 것이다. 이 방법을 적용한 web.xml은 다음과 같다.


<context-param>

    <param-name>contextConfigLocation</param-name>

    <param-value>

        /WEB-INF/spring/*-context.xml

    </param-value>

</context-param>


<listener>

    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>


<servlet>

    <servlet-name>flex</servlet-name>

    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <load-on-startup>1</load-on-startup>

</servlet>


<servlet-mapping>

    <servlet-name>flex</servlet-name>

    <url-pattern>/messagebroker/*</url-pattern>

</servlet-mapping>


<servlet>

    <servlet-name>spring-mvc</servlet-name>

    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <load-on-startup>1</load-on-startup>

</servlet>


<servlet-mapping>

    <servlet-name>spring-mvc</servlet-name>

    <url-pattern>/spring/*</url-pattern>

</servlet-mapping> 

 /WEB-INF/spring/ 디렉토리에  -context.xml 로 끝나는 파일 그룹을 묶어서 부모 애플리케이션 컨텍스트를 만든다. 플렉스 관련 하위 컨텍스트는  /WEB-INF/flex-servlet.xml을 사용하고 스프링 MVC 컨트롤러는 WEB-INF/spring-mvc-servlet.xml안에 설정할 것이다. 이 방법은 깔끔하게 관심사를 분리해주며 스프링 2.5+ 애노테이션 컨트롤러가 기본으로 동작하게 해준다.


이 대안이 될 수 있는 방법으로는 단일 DispatcherServlet 컨텍스트를 사용하는 것이다. 이 방법의 단점은 몇 가지 부가적인 설정을 필요로 한다. /spring/* 요처을 DispatcherSerlvet이 처리하고 mapping XML 네임스페이스 설정 태그를 사용해서 /messagebroker/*를 스프링이 관리하는 MessageBroker로 전달하는 것이다. 그런다음 BlazeDS 채널 정의를 적절하게 수정해야 한다. message-broker 태그로 기본 매핑 전략을 다음과 같이 수정할 수 있다.


<flex:message-broker>

    <flex:mapping pattern="/messagebroker/*" />

</flex:message-broker> 


그런다음 BlazeDS의 채널 정의에서 /spring/*을 고려해서 다음과 같이 수정해야 한다. 


<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">

    <endpoint url="http://{server.name}:{server.port}/{context.root}/spring/messagebroker/amf" 

    class="flex.messaging.endpoints.AMFEndpoint"/>

    <properties>

        <polling-enabled>false</polling-enabled>

    </properties>

</channel-definition> 


단일 매핑 전략에서는 message-broker 태그가 자동으로 등록해주는 HandlerMapping과 HandlerAdapter가 있기 때문에 스프링 MVC 문서에 따라 스프링 MVC 컨트롤러를 위한 HandlerMapping와 HandlerAdapter을 직접 등록해 줘야 한다.




top

  1. 미랭군 2010.08.16 16:16 PERM. MOD/DEL REPLY

    그런데 이렇게 부모 *-config.xml로 묶게 되면 flex에선 환경설정파일들을 잘 읽어들이는데 spring-mvc에선 *-config.xml 파일들을 불러들이지 못하는 문제가 있네요..

    <context:component-scan base-package="base"/>

    flex나 mvc나 둘다 스캔해야해서 이것을 app-config.xml이라는 부모환경설정파일로 뽑아서

    했는데..flex에선 잘 읽어들이는데..mvc디스패쳐서블릿에선 패키지에 있는 정보를 읽어들이지

    못합니다. 혹시 이 원인에 대해서 아시나요?

    Favicon of http://whiteship.me BlogIcon 기선 2010.08.17 20:56 PERM MOD/DEL

    메일로 문의하신 내용이군요.

    *-context.xml을 상위 WAC로 사용하기 때문에 두개의 DispatcherServlet의 WAC에서 모두 *-context.xml에 있는 빈을 참조할 수 있어야 하는게..맞습니다.

    그래도 안된다고 하시니깐.. 흠냐. 한번 확인해 보겠습니다.

Write a comment.


[Adobe] BlazeDS는 뭔가?

Adobe : 2010. 7. 20. 20:55


http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/

스프링 BlazeDS라는 프로젝트가 있다. 근데 BlazeDS가 뭔지 모른다. 그래서 살펴봤다.

http://opensource.adobe.com/wiki/display/blazeds/Overview

어도비 플랙스나 에어로 클라이어언트 단을 만들고 자바로 만든 서버 단과 연동하는데 필요한 서비스를 제공해준다. 거기다.. XML이나 SOAP 같은 텍스트 기반 서비스 보다 10배나 빠르단다.. 흠.... Push 기능도 구현할 수 있게 해준다는데.. 조금. 구미가 땡기기 시작한다.

주요 서비스는 다음과 같다.

- 리모팅: 서버단의 자바로 만든 서비스를 바로 호출할 수 있게 해준다.
- 메세지 서비스: 배포/구독 방식 메시징으로 실시간으로 데이터를 주고 받는 애플리케이션을 개발할 수 있다.
- 프록시 서비스: 뭔지 감이 잘 안옴.


top

TAG Abode, BlazeDS
  1. 선영욱 2010.07.21 08:57 PERM. MOD/DEL REPLY

    오오~배포/구독이 된다니~멋진데요. 채팅/게임서버를 구현 가능하겠습니다.

    Favicon of http://whiteship.me BlogIcon 기선 2010.07.21 21:01 PERM MOD/DEL

    한번 써보고 싶어요. 흠.. 액션스크립트에서 자바 코드를 호출한다는 것인지.. 자바 코드로 MXML을 조작한다는 것인지.. 아마도 전자일듯..

Write a comment.


[Adobe Flex] 초간단 Todo Flex 만들기 2: 스프링 액션스크립트 설정하기.

Adobe : 2010. 5. 21. 17:02



libs 폴더에 보이는 라이브러리 4개를 클래스패스에 추가합니다.
그런다음 빈 설정파일인 application-context.xml 파일을 작성합니다.

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

<objects xmlns="http://www.springactionscript.org/schema/objects"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://www.springactionscript.org/schema/objects

http://www.springactionscript.org/schema/objects/spring-actionscript-objects-1.0.xsd">


<!--

Spring ActionScript config

-->


<object id="autowiringStageProcessor" class="org.springextensions.actionscript.stage.DefaultAutowiringStageProcessor"/>


<object id="eventHandlerProcessor" class="org.springextensions.actionscript.ioc.factory.config.EventHandlerMetaDataPostProcessor"/>


<!--

Infrastructure: services

-->


<object id="todoService" class="whiteship.crud.infrastructure.service.InMemoryTodoService"/>


<!--

Presentation: presentation models

-->


<object class="whiteship.crud.presentation.TodoListPresentationModel">

<constructor-arg ref="todoService"/>

</object>


</objects>


http://www.springactionscript.org/asdoc/org/springextensions/actionscript/stage/DefaultAutowiringStageProcessor.html


살펴볼만한 API는 위 링크를 보시면 될 것 같군요. 나머지 설정 내용은 어떤것인지 대충 짐작이 갈 것 같습니다. bean대신 object를 사용하네요. 흠.. 머 더 알고 싶은게 없어서 이만;;


이 설정파일을 사용해서 ApplicationContext를 만드는 코드는 simpleCRUD.mxml 파일에 들어있습니다.


private var _appContext:FlexXMLApplicationContext = new FlexXMLApplicationContext();

...

_appContext.addConfigLocation("application-context.xml");

...

_appContext.load();


다음에는 오토와이어링 사용법좀 봐야겠네요. 오늘은 이만~
top

Write a comment.


[Adobe Flex] 초간단 Todo Flex 만들기 1: 돌아가는 예제

Adobe : 2010. 5. 21. 16:36


스프링 액션스크립트 예제 애플리케이션을 살짝 개조해서 Todo 애플리케이션을 만들었습니다. 초간단 버전이라 DB도 사용하지 않고 그냥;; 추가/수정/삭제/리스트 정도만 되는 애플리케이션을 만들어 봤습니다. 액션스크립트도 잘 모르고 플렉스도 잘 모르지만 예제 코드 고쳐가며서 만드니까 대충 만들 수 있겠더군요;


맥용 플래시 빌더로 만들었는뎅;; 인텔리J에서도 배포하는 방법을 터득해야 할텐데;; 일단 Todo로 미루고;;
소스코드를 올려둡니다.



top

Write a comment.


스프링 액션스크립트

Adobe : 2010. 5. 19. 22:45


http://www.springactionscript.org/

액션스크립트 3 기반으로 스프링 주요 기능을 제공해주는 프로젝트입니다. 자바로 만든 스프링을 액션스크립트3로 만들고 있나봅니다. 아직 포트폴리오도 아니고 


이슈 트래커를 보니.. 거의 1인 프로젝트입니다. 크리스토퍼 헤르만이라는 사람이 시작해서 계속 이끌고 있나본데.. 조만간 1.0이 나올것 같군요. 


여기서 스프링 액션스크립트 샘플 애플리케이션을 볼 수 있습니다.
top

Write a comment.


Adobe Flex Builder 4

Adobe : 2010. 4. 22. 19:30


http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026

Flex SDK 4와 Flex Builder 4 standaolne win 버전을 다운 받았습니다. 이클립스 플러그인 형태로도 제공해 주는데.. 플러그인 형태의 용량이 독립 버전보다 용량이 크더라구요.

http://www.adobe.com/devnet/flex/videotraining/xml/vid28.html

이전까지는 별로 필요없지 않을까 생각했는데 위 영상을 보니까 편집기가 쓸만 한 것 같습니다. 마치 비주얼 스튜디오처럼 말이죠.. 흠냐



오우.. 드래그 해보니까 느낌이 꽤 괜찮네요~ 쓸만합니다.


그냥 Run만 하면 툭 뜨는군요. 흠.. 인텔리J에서 작업하는 것보다 편합니다.

트라이얼 버전인데;; 30일 안에 마스터 해야되는건가.. ㅋ
top

  1. Favicon of http://koko8829.tistory.com BlogIcon 열이아빠 2010.04.22 23:54 PERM. MOD/DEL REPLY

    트라이얼 60일입니다. 여유있게 하셔도..^^
    혹 필요하시면 한글 도움말 프로젝트(?)를 진행하고 있습니다.
    http://sites.google.com/site/koreanflexdoc/
    참고하세요.

    Favicon of http://whiteship.me BlogIcon 기선 2010.04.23 08:10 PERM MOD/DEL

    우와!! 멋지세요. +_+

  2. Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 2010.05.13 17:58 PERM. MOD/DEL REPLY

    Flex Builder 3는 Flash Builder 4로 이름이 바뀌었습니다. ^^
    더이상 Builder가 Flex 만을 위한 것은 아니라는 것이지요.
    왜냐하면 Flex개발뿐 아니라 ActionScript 기반 개발이 모두 가능하고 AIR 개발시에 Flex, ActionScript 다 사용할 수 있고요. 더불어 Flash CS5와도 연동이 됩니다. ^^

    Flash Builder는 Eclise Plug-in으로 사용하심이 더 효율적일것 같아요. 어짜파 Java, PHP, C등과 연동하게 된다면 이 편이 훨씬 좋거든요 ^^

    Favicon of http://whiteship.me BlogIcon 기선 2010.05.13 18:09 PERM MOD/DEL

    앗;; 제가 이름을 잘못 적었나보군요.ㅋ

Write a comment.


[MXML] mx:style

Adobe : 2010. 4. 22. 18:57


참조: http://www.adobe.com/devnet/flex/tourdeflex/web/#docIndex=0;illustIndex=1;sampleId=9800
http://sses.tistory.com/83

정성들여만든(?) 야바위 게임의 글씨가 너무 작다;; 그래서 찾아봤더니 금방 나온다.

<mx:Style>
        .myclass { 
            color: Red;
        }

        Button { 
            fontSize: 10pt; 
            color: Yellow;
        }
    </mx:Style>

    <mx:Button styleName="myclass" label="Red Button"/>
    <mx:Button label="Yellow Button"/>

이런식으로 스타일을 줄 수 있구나~





top

TAG Adobe, flex, MXML, style

Write a comment.


[MXML] layout

Adobe : 2010. 4. 22. 18:19


참조: http://www.adobe.com/devnet/flex/videotraining/xml/vid12.html

absolute / vertical / horizontal 이 세개가 끝..

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>
    <mx:Button click="Alert.show('Hello, world')" label="Say Hello" x="5" y="10"/>
</mx:Application>

absolute로 설정한다음 모든 엘리먼트에 x, y 좌표를 설정하는 노가다를 해서 성능을 향상 시키느냐.. 
레이아웃 계산좀 하게 내비두고 vertical, horizontal을 사용할 것이냐~
나는 당연히 레이아웃;; @_@;;


이런거 만들라고 공부한게 아닐텐데;;

1. 제일 밖에 있는 Application은 기본값(vertical)으로 나뒀고; 
2. '야바위' 패널은 패딩 사이즈만 설정.
3. HBox를 사용해서 이미지랑 VBox를 감싸고.
3. VBox 안에는 Lable과 HBox를 감싸고
4. HBox 안에는 버튼 세개.



top

TAG flex, layout, MXML

Write a comment.


[ActionScript 3.0] 클래스

Adobe : 2010. 3. 29. 15:55


public class Shape
{
    var visible:Boolean = true;
}

true 값을 가지고 있는 visible이라는 Boolean 타입 변수를 가지고 있는 Shape 클래스.

// ActionScript 2.0
class flash.display.BitmapData {}

// ActionScript 3.0
package flash.display
{
public class BitmapData {}
}

3.0 부터는 package문을 사용하기 때문에 클래스 이름에 패키지 이름을 선언할 필요 없다.

클래스 속성(class attributes)

dynamic: 실행 중에 인스턴스에 추가적인 속성을 추가할 수 있다.
final: 다른 클래스가 확장할 수 없다.
internal(default): 같은 패키지에서만 참조할 수 있다.
public: 모든 곳에서 참조할 수 있다.

생략하면 internal 사용.

클래스 본문

변수, 상수, 메서드 등을 정의할 수 있다. 

function hello():String
{
    trace("hola");
}
class SampleClass
{
    hello();
    trace("class created");
}

3.0 부터는 명령문도 포함시킬 수 있다.

class StaticTest
{
static var message:String = "static variable";
var message:String = "instance variable";
}
// In your script
var myST:StaticTest = new StaticTest();
trace(StaticTest.message); // output: static variable
trace(myST.message); // output: instance variable

3.0 부터는 static 변수와 인스턴스 변수 이름가 같은 이름을 사용할 수 있다.

클래스 프로퍼티 속성(class property attributes)

클래스의 프로퍼티들이 가질 수 있는 속성

internal(default): 같은 패키지에서만 참조 가능
private: 같은 클래스 내부에에서만 참조 가능
protected: 같은 클래스와 상속 받는 클래스에서 참조 가능.
public: 어디서나 참조 가능
static: 해당 프로퍼티가 클래스에 속한다는 것을 명시.
사용자 정의 네임스페이스: 사용자가 정의한 커스텀 네임스페이스

2.0에서는 private으로 해놔도 실행 중에 []를 사용해서 접근할 수 있는데. 3.0부터는 안 됨. 대신 클래스가 dynamic으로 선언되어 있으면 접근은 되지만 undefined가 반한됨.

static 특성

상송되지 않음. 
클래스 범위에 속함. 
인스턴스가 아니라 클래스 이름으로 접근해야 함.

사용자 정의 네임스페이스

패스 나중에 자세히

변수

var 또는 const를 사용하여 선언할 수 있다.
const 키워드로 선언한 것을 상수라고 한다.

정적 변수

class StaticVars
{
public static var totalCount:int = 0;
public static const MAX_NUM:uint = 16;
}

var또는 const와 static을 추가하여 선언한다.
클래스의 인스턴스가 아니라 클래스에 연결된다.
외부에서는 반드시 클래스 이름으로 접근해야 한다. 인스턴스로 접근하면 에러 난다.
선언할 때 초기화 해야한다. 안그러면 에러난다.

인스턴스 변수

static 키워드 없이 var 또는 const로 선언한 것.
인스턴스 마다 고유한 값을 가진다.
하위 클래스에서 재정의 할 수 없다. getter나 setter를 재정의하면 된다.

메서드

클래스 정의에 포함되는 함수.
function이라는 키워드로 정의한다.

함수 명령문으로 함수 정의
public function sampleFunction():String {}

함수 표현식으로 함수 정의
public var sampleFunction:Function = function () {}

함수 명령문 사용하는 이유
- 간결하고 쉽게 읽을 수 있다.
- override나 final 키워드 사용가능

생성자 메서드

클래스 이름과 같은 이름을 가진 함수
new 키워드로 해당 클래스의 인스턴스를 만들 떄 사용한다.

class Example
{
public var status:String;
public function Example()
{
status = "initialized";
}
}
var myExample:Example = new Example();
trace(myExample.status); // output: initialized

생성자에는 public만 사용가능. 생략하면 기본으로 public. 사용자 정의 네임스페이스도 사용 못함.
super()를 사용하여 상위 클래스의 생성자를 명시적으로 호출 가능.
super()를 명시적으로 호출하지 않으면 자동으로 제일 먼저 호출해줌.
return 문을 사용할 수는 없지만 값을 반환하지는 못한다.

정적 메서드

static 키워드로 선언한 메서드.
인스턴스가 아니라 클래스에 연결된다.

인스턴스 메서드

static 키워드 없이 선언한 메서드

getter와 settter 메서드

class GetSet
{
    private var privateProperty:String;
    public function get publicAccess():String
    {
        return privateProperty;
    }
    public function set publicAccess(setValue:String):void
    {
        privateProperty = setValue;
    }
}

getXXX, setXXX 라는 이름을 사용하지 않아도 된다.

var myGetSet:GetSet = new GetSet();
trace(myGetSet.publicAccess); // output: null
myGetSet.publicAccess = "hello";
trace(myGetSet.publicAccess); // output: hello

이렇게 사용할 수 있다.

바운드 메서드(메서드 클로저)

함수의 인자로 전달되는 메서드
함수의 반환값으로 전달되는 메서드
바운드 메서드 내부에서 this는 해당 메서드를 구현하는 인스턴스에 연결된다.
함수 클로저의 this는 호출 시점에 함수와 연결된 객체를 가리킨다. 이게 차이점이다.

class ThisTest {
    private var num:Number=3;

    function foo():void // bound method defined
    {
        trace("foo's this: " + this);
        trace("num: " + num);
    }

    function bar():Function
    {
        return foo; // bound method returned
    }
}

var myTest:ThisTest = new ThisTest();
var myFunc:Function = myTest.bar();
trace(this); 
// output: [object global]
myFunc();
/* output: 
foo's this: [object ThisTest]
output: num: 3 */

myFunc()는 바운드 메서드라 this가 여전히 자신이 속한 원래 인스턴스를 가리키고 있다.

클래스와 enum

enum을 지원하는게 딱히 없음.
그냥 java 5 이전처럼 static const 사용해서 정의.

public final class Day
{
public static const MONDAY:Day = new Day();
public static const TUESDAY:Day = new Day();
public static const WEDNESDAY:Day = new Day();
public static const THURSDAY:Day = new Day();
public static const FRIDAY:Day = new Day();
public static const SATURDAY:Day = new Day();
public static const SUNDAY:Day = new Day();
}

top

Write a comment.


[Flex] 플래시 개발 시작

Adobe : 2010. 3. 24. 15:30


<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        import mx.controls.Alert;

        protected function hello():void
        {
            Alert.show("hi! " + nameTextInput.text);
        }
        ]]></mx:Script>
    <mx:TextInput id="nameTextInput" />
    <mx:Button id="helloButton" click="hello()" label="Say Hello"/>
</mx:Application>

이전에 인텔리J에서 만들어 둔 hello world 예제를 약간 수정해서 만들어 봤다. 막상 만들려고 하니 액션 스크립트와 mxml 컴포넌트가 궁금했고 그래서 API와 문법을 참조할 수 있는 문서들을 모아두었다. 

이걸로 봄싹 플레이어나 만들어벌까. 줄여서 '봄플'인가. '봄TV'라고 할까나.




top

Write a comment.


[Flex] 플렉스의 북치기 박치기, ActionScript와 MXML

Adobe : 2010. 3. 24. 14:55


플렉스를 해보려고 삽질(?) 중인데 일단 두 가지가 걸린다. mxml과 actionscript. 
이 두 가지만 알면 대충 만들 수 있을 것 같다.

일단 mxml 파일에서 어떤 컴포넌트가 있고 각각의 속성들이 무엇인지 무엇인지는 이전에 올렸던 글에서 확인할 수 있다.

http://whiteship.me/2546

mxml 파일은 거의 html이랑 비슷하게 구성 요소를 그리는데 필요한 것 같고, 그 구성 요소를 가지고 놀 때 실행할 기능들은 actionscript로 만들어야겠다. 그래서 actionscript 문법과 API를 파악하면 될 것 같다.

API
http://livedocs.adobe.com/flex/3/langref/

레퍼런스
http://livedocs.adobe.com/flex/3/progAS_flex3.pdf
http://flexdocs.kr/download/flash_as3_programming.pdf




top

Write a comment.


플렉스 컴폰넌트와 샘플 코드

Adobe : 2010. 2. 7. 15:34


http://www.adobe.com/devnet/flex/tourdeflex/web/#docIndex=0;illustIndex=0;sampleId=100


오호.. 액션 스크립트를 MXML에 <mx:script> 를 사용하여 포함시킬 수도 있군요. 저기서 예제 코드들을 참조하면 될 것 같습니다.

JQuery 사이트에 있는 예제 코드들도 유용하게 참조해서 썼는데.. 플렉스도 비슷한 페이지가 있네요.
top

Write a comment.


[Flex] "Hello, Flex" with IntelliJ IDEA

Adobe : 2010. 2. 2. 11:55


참조: http://www.adobe.com/devnet/flex/videotraining/xml/vid03.html

모든 언어나 프레임워크를 공부할 때 가장 먼저하는 일이 단순 메시지 출력인데 플렉스 강좌를 보니까 이클립스 기반의 플렉스 빌더를 가지고 설명하고 있습니다. 하지만 저는... 이클립스에 질려버렸고 요즘은 똑똑한 인텔리J랑 사이좋게 지내고 있기 때문에 인텔리J로 강의를 따라하고 있습니다.

이클립스를 사용하시는 분들은 플렉스 빌더를 받아서 위 동영상을 따라하시면 될 듯...

이 아래는 인텔리J에서 헬로우 Flex를 띄우는 과정입니다.

1. Flex SDK 다운 받기

http://opensource.adobe.com/wiki/display/flexsdk/Downloads

여기서 오픈소스가 필요하지 않다면 그냥 Free Adbove Flex SDK를 받습니다.
압축을 풀어서 적당한 위치에 놓고..

2. 인텔리J에서 Flex 프로젝트를 만듭니다.

012345


3. 실행하기

3-1. Run Configuration을 만듭니다. MXML 파일을 우클릭하고 Create "HelloWorld" .. 메뉴를 클릭합니다.


3-2. 실행합니다.

사실 3-1 건너띄고 바로 실행해도 됩니다. 실행하면 SWF 파일이 열리고 버튼이 떠있고 클릭하면 메시지가 나옵니다. 메시지를 조금 수정해서 hello flex를 띄울 수 있습니다.

Run Configuration 파일을 열어서 SWF 파일말고 wrapper.html 파일을 선택한뒤 실행하면 자동으로 브라우저에 새 탭을 열고 SWF 파일을 브라우저에서 재생해 줍니다.

http://www.adoberia.co.kr/


팁. Flex 만드는 도중에 Pure ActionScript 어쩌구 메뉴를 체크하시면 MXML이 아니라 액션스크립트로 작성된 HelloWorld 예제를 볼 수 있습니다. 동작하는 방법은 그냥 단순 출력이라 이전거랑은 좀 다릅니다.

package {

import flash.display.Sprite;
import flash.text.TextField;

public class HelloWorld extends Sprite {
    public function HelloWorld() {
        var textField:TextField = new TextField();
        textField.text = "Hello, World";
        addChild(textField);
    }
}

이런 코드네요. 흠.. 자바랑 비슷해 보이면서도 뭔가 좀..  변수 선언할 때 타입이 아니라 이름부터 적는군..


ps: 흠.. 다른 웹 애플리케이션과는 어떻게 연동해야하려나;; 차차 나오겠지;?




top

Write a comment.


플래시, 플렉스, 플래시 플레이어, 에어(Air) 비교

Adobe : 2010. 2. 1. 12:54


참조: http://www.adobe.com/devnet/flex/videotraining/xml/vid01.html

Flash: Fl

비두얼 툴과 타임라인을 사용하여 애플리케이션 레이아웃과 액션스크립트를 만든다.

플래시가 액션스크립트를 컴파일하여 SWF 파일을 만든다.

애니메이션과 비주얼 엘리먼트를 작성하는데 최적화 되어있다.

Flex: Fx

비주얼 컴포넌트와 클래스로 구성되어 있는 프레임워크를 제공하며, 비주얼 레이아웃에 사용할 MXML과 비즈니스 로직에 사용할 액션스크립트 프로그래밍 언어를 제공한다.

MXML과 액션스크립트 코드를 액션스크립트로 변환한 뒤 SWF 파일로 컴파일 한다.

Adobe Flex SDK 오픈소스로 제공한다.

Adobe Flex Builder는 SDK를 포함하고 있으며 디자인, 개발, 테스팅을 원할하게 도와준다.

=> 플래시와 플렉스 모두 사용자가 서버에 요청을 하면 동적으로 데이터를 가져와서 다시 사용자에게 보여줄 수 있다.

=> 이 둘을 같이 활용하여 플래시로 애니메이션을 만들고 플렉스로 가져와서 컴파일/편집 할 수 있다.

Flash Player

플래시나 플렉스 애플리케이션을 브라우저에서 보려면 플래시 플레이어 9 런타임이 필요하다.

AIR

어도비 에어는 데스크탑 애플리케이션 용 어도비 런타임이다.

브라우저가 아니라 데스크탑 애플리케이션으로 동작하는 RIA(리치 인터넷 애플리케이션)를 만들 수 있다,


http://www.adoberia.co.kr/
top

TAG 어도비
  1. Favicon of http://helols.pe.kr BlogIcon is윤군 2010.02.01 15:54 PERM. MOD/DEL REPLY

    왠 갑자기 flash ? '';;

    Favicon of http://whiteship.me BlogIcon 기선 2010.02.01 16:00 PERM MOD/DEL

    플렉스나 좀 봐보게..

    Comet이 쉬운가 플렉스가 쉬운가;;

  2. Miracle 2010.02.01 16:27 PERM. MOD/DEL REPLY

    플렉스는 진짜 Push가 가능하지.. 소켓 열어서.. ㅎㅎ;

    Favicon of http://whiteship.me BlogIcon 기선 2010.02.01 16:46 PERM MOD/DEL

    괜히 (현재의) Servlet 스펙으로 안 되는거 되게 하려고 복잡해지느니.. 애초에 가능한 기술로 해보는게 나을지도 몰겠단 생각에...

  3. Favicon of http://helols.pe.kr BlogIcon is윤군 2010.02.02 14:38 PERM. MOD/DEL REPLY

    플레쉬 소켓을 이용한건...
    comet으로 안쳐주는데;;ㅎㅎ

    Favicon of http://whiteship.me BlogIcon 기선 2010.02.02 15:01 PERM MOD/DEL

    그럼 Comet 말고 걍 플래시라고 하지뭐.
    사용자 한테 그게 Comet이던 플래시던 뭔 상관이겠어ㅋㅋ

Write a comment.