[Tapestry5.4] R&D 정리.

T5conduit

T5conduit allows seamless integration of LessCSS and CoffeeScript.

https://github.com/cezary-biernacki/t5conduit

-----------------------------------------------------------------------------------

예제 시작

1) mvn archetype:generate -DarchetypeCatalog=http://tapestry.apache.org

-----------------------------------------------------------------------------------

-----------------------------------------------------------------------------------

2) Tapestry 5.4 Alpha Version 적용.

-----------------------------------------------------------------------------------

build.gradle에 추가.

 compile "org.apache.tapestry:tapestry-core:5.4-alpha-22"

 디펜던시 에러로 인해 YUI는 주석 처리해야함

 //compile "org.apache.tapestry:tapestry-yuicompressor:5.3.7"

*Gradle Dependencies 변경 하는 방법.

-> project>clean 프로젝트선택.

*Ta서/main/resources/META-INF/

assets

modules

*Tapestry 5.4에서는 자체적으로 Bootstrap3.0을 지원한다.

만약 변경하고 싶다면, contributeApplicationDefaults에서

configuration.add(SymbolConstants.BOOTSTRAP_ROOT, "classpath:/META-INF/assets");를 따로 지정한다.

-----------------------------------------------------------------------------

3) [Tapestry 5.4] ModuleManager (RequireJS 설정)

-----------------------------------------------------------------------------

@Contribute(ModuleManager.class)

public static void setupBaseModules(MappedConfiguration<String, Object> configuration,

@Path("classpath:/META-INF/modules/모듈폴더or모듈명")

Resource modules){

configuration.add("ModuleName", new JavaScriptModuleConfiguration(modules).exports("ExportModuleName"));

}

*alias Path를 꼭잡아줘야함.

public static void contributeClasspathAssetAliasManager(MappedConfiguration<String, String> configuration){

    configuration.add("modules", "META-INF/modules");

}

-----------------------------------------------------------------------------

*만약 자동으로 빌드 안될때~

4) [Tapestry Auto Build] 개발모드일때 수정한것이 바로 바로 되고자 할때.

-----------------------------------------------------------------------------

1. /bin -> /build/classes로 변경

2. build.gradle eclipse 플러그인 추가.

apply plugin: "eclipse"

allprojects {

eclipse {

   classpath {

defaultOutputDir = file("build/classes/main")

file {

   whenMerged { cp ->

cp.entries.findAll{ entry ->

   entry.kind == 'src' && entry.path.startsWith("src/test/")

}*.output = "build/classes/test" 

   }

}            

   }

}

}

sourceSets {

    main {

        compileClasspath += configurations.provided

        output.resourcesDir = output.classesDir

    }

    test {

        compileClasspath += configurations.provided

        //runtimeClasspath += configurations.provided

        output.resourcesDir = output.classesDir

    }

}

제일 중요한건. tapestry.execution-mode를 development로 바꿔줘야한다는것.

개발 모드일때만, 자동 로드 되는듯하다.

jettyRun {

//httpPort = 9999

System.setProperty('tapestry.execution-mode','development')

}

-----------------------------------------------------------------------------

5) Fuel Component 적용시 - CSS 안 맞는 현상

 bootstrap 2.3.x 가 호환성이 되기때문에 그런 것임.

 3.x를 사용할 경우, 문제발생.

-----------------------------------------------------------------------------

-----------------------------------------------------------------------------

6) Bootstrap Version 변경 및 Root 경로 변경원할 경우.

contributeApplicationDefaults - ApplicationDefaults의 "tapestry.bootstrap-root" 설정을 바꿔준다.

-----------------------------------------------------------------------------

//Tapestry 5.4 Version - Bootstrap ROOT Change

configuration.add(SymbolConstants.BOOTSTRAP_ROOT, "classpath:/META-INF/assets");

*상위 경로만 위치 해주면, Tapestry가 알아서 하위의

css/bootstrap.css

js/모듈별.js

img/..

-----------------------------------------------------------------------------

7) Tapestry-DatePicker : Alternative Tapestry Datepicker

-----------------------------------------------------------------------------

repositories{

 mavenRepo name : "tapestry Datepicker", url: "https://oss.sonatype.org/content/repositories/snapshots/"

}

dependencies{

compile "com.trsvax:tapestry-datepicker:0.0.1-SNAPSHOT"

}

API : https://github.com/trsvax/tapestry-datepicker

-----------------------------------------------------------------------------

8) Javascript Alternatice : prototype -> JQuery

-----------------------------------------------------------------------------

@Contribute(SymbolProvider.class)

@ApplicationDefaults

public static void switchProviderToJQuery(MappedConfiguration<String, Object> configuration)

{

configuration.add(SymbolConstants.JAVASCRIPT_INFRASTRUCTURE_PROVIDER, "jquery");

}

@Contribute(Compatibility.class)

public static void disableScriptaculous(MappedConfiguration<Trait, Boolean> configuration)

{

configuration.add(Trait.SCRIPTACULOUS, false);

configuration.add(Trait.INITIALIZERS, false);

}

이걸해도 prototype 불러옴..-ㅅ-++

-----------------------------------------------------------------------------

9) jQuery를 제대로 못 불러오니까 다른 연동시 계속 에러가 발생한다.

bootstrap. 그외 컴포넌트도 jQuery.fn에 추가하려다 에러가 발생해

제대로 동작이 불가함.

-----------------------------------------------------------------------------

그래서 tapestry-jQuery를 넣어볼 생각임.

build.gradle 

 dependencies에 compile "org.got5:tapestry5-jquery:4.0.0-SNAPSHOT" 추가

 repositories에 

maven {

url "http://nexus.devlab722.net/nexus/content/repositories/snapshots"

}

 추가.

 tapestry-jQuery에서 switchProviderToJQuery 설정하므로, AppModule에 설정되어있다면 제거.

 conflicts with existing contribution (by com.nkia.t5first.services.AppModule.switchProviderToJQuery(MappedConfiguration) 

 conflicts with existing contribution (by com.nkia.t5first.services.AppModule.disableScriptaculous(MappedConfiguration)

 실패

 -----------------------------------------------------------------------------

웃긴건, jQuery AppModule 설정을 다한거 같은데도,

Render시에는 prototype으로 나온다는거...

아무래도 t5-core-dom-protype.js를 계속 가져오는것 같은데,

t5-core-dom.jquery.js를 가져오게 하면 해결될듯함.

 -----------------------------------------------------------------------------

configuration을 add하면 안되고 override하면 됨.

 conflicts with existing contribution (by org.apache.tapestry5.modules.JavaScriptModule.setupFoundationFramework

 브라우저 캐시지우니 잘됨.

http://tapestryjava.blogspot.kr/2013/01/tapestry-54-jquery-support-now-in-place.html

-----------------------------------------------------------------------------

Fuelux와 boostrap간의 CSS문제인데,

-----------------------------------------------------------------------------

-----------------------------------------------------------------------------

간단한 게시판 : Prototype만들기.

-----------------------------------------------------------------------------

1) Grid

 -> paging 처리시 T5.4의 경우, Bootstrap 3.x를 지원하므로

 컴포넌트 사용시 2.3과 호환 문제가 어떻게 처리해야할지 고민해봐야할듯.

 -> Long 클래스의 경우, 조건시 == 처리가 안됨. (객체로 인식)

 Integer는 자동 형변환해줬던 기억나는데

 따라서, longValue로 기본형으로 변환후 비교해야함.

 -> 문제발생)

  delete 후 <t:actionlink t:id="deletePerson" t:context="model.id">delete</t:actionlink>

  부분에서 에러발생.

  *예제에서는 event링크를 발생시킴. [동일하게 에러남]

  *setupRender랑 상관없음.

-> action / event 와의 차이점.

event -> url = toymain:delete/2

2) Editform

3) beanform