 |
|
난이도 : 중급 Yury Kats, Advisory Software Engineer, IBM
2008 년 11 월 04 일 본 글은 IBM Rational Application Developer Version 7.5에서 JavaServer Faces를 지원하는 가장 중요한 새로운 기능들에 대해 설명합니다.
JSF(JavaServer Faces) 기술 지원은 지난 몇 년간 IBM Rational Application Developer의 주요 기능 중 하나였다. Rational Application Developer는 웹 개발자들에게 제공하는 IDE(통합 개발 환경: Integrated Development Environment)로, JSF 애플리케이션 툴링 기능과 확장적 JSF 컴포넌트 세트를 지원한다.
새로 출시된 Rational Application Developer Version 7.5는 새로운 기능을 지속적으로 추가해 예전보다 더 쉽고 빠르게 JSF 개발을 할 수 있다. 이 글은 가장 중요하고 두드러진 새 기능들을 소개한다.
제네릭 JSF 컴포넌트 라이브러리
JSF 컴포넌트 라이브러리는 Application Developer JSF 기능 세트 중 가장 중요하고 소중한 추가 사항이라 할 수 있다. Rational Application Developer에서 IBM이 개발한 JSF 컴포넌트의 확장적 라이브러리를 제공하긴 하지만 많은 개발자가 MyFaces Tomahawk, MyFaces Trinidad, JBoss RichFaces 같은 다른 컴포넌트 라이브러리를 사용하고 싶다는 의사를 밝혀왔다.
웹 애플리케이션에서는 어떤 컴포넌트 라이브러리든 사용할 수 있지만 소스 모드에서 JSP(JavaServer Pages)와 XML 파일을 수동으로 편집하는 데 그쳤다. Rational Application Developer에서 써드파티 JSP 컴포넌트 라이브러리를 인식하는 것은 매우 어렵기 때문에 컴포넌트는 팔레트에서 보이고, Design 뷰에서 렌더되고, Properties와 Quick Edit 뷰로 지원되며 전체적으로 IBM의 JSF 컴포넌트와 같은 통합 개발 환경의 일부분이 된다.
하지만 더 이상은 아니다. V7.5부터 개발자들은 일반적인 컴포넌트 라이브러리에 대해 메타데이터를 제공할 수 있고 툴링은 이런 라이브러리를 인식하고 IDE의 부분으로 만든다. 메타데이터는 마법사를 사용해 라이브러리 JAR(Java archive) 파일을 입력해 만들 수 있고 특수한 편집기로 편집해 다른 개발자들과 공유할 수 있다.
새 Faces library definition을 만들어 라이브러리(파일 시스템 어디서나 또는 현재 작업공간에서)를 가진 JAR 파일을 입력하는 것으로 시작하자.
예를 들어 Rational Application Developer가 MyFaces Tomahawk 라이브러리를 지원한다고 하면 MyFaces에서 Tomahawk JAR 파일을 다운로드하고 이를 사용해 File > New >
Other > Faces library definition 순으로 선택해 라이브러리 정의를 만들어 마법사를 불러오고 Tomahawk JAR(그림 1을 보자)에 이를 입력한다.
그림 1. JSF 라이브러리 정의 만들기
마법사에서 Finish를 클릭하면 Rational Application Developer가 JAR을 분석해 어떤 JSF 컴포넌트에 있는지, 컴포넌트의 속성은 무엇인지, JAR 파일에서 라이브러리에 관해 취합할 수 있는 정보는 무엇인지 찾아낸다. 이 모든 데이터는 JLD(JSF library definition) 파일에 저장되고 파일은 편집기에서 열 수 있으며 이를 원하는 방식으로 커스터마이즈할 수 있다(그림 2를 보자). 언제나 JLD 파일을 열고 편집해 라이브러리에 관한 추가 정보를 제공할 수 있기 때문에 이 모든 것을 만들 필요는 없다.
그림 2. 라이브러리 정의 편집기
Rational Application Developer에 제공할 수 있는 라이브러리에 관한 정보가 꽤 있다. 여기서는 컨트롤할 수 있는 스니펫에 대해서만 설명하겠다.
- 팔레트. 명령, 이미지, 라벨을 포함해 어떻게, 어떤 컴포넌트로 나타낼지를 보여준다. JAR 파일에서 라이브러리 정의가 제일 먼저 만들어질 때 JAR에 있는 모든 컴포넌트가 팔레트에 보인다.
- 컴포넌트 속성. 각 속성의 유형은 지정될 수 있으므로 Rational Application Developer는 주어진 속성에 어떤 값이 맞는지, 속성 값을 편집할 때 제공되는 헬퍼 대화상자가 무엇인지 안다. 라이브러리 정의가 JAR 파일에서 처음 만들어질 때 많은 표준 JSF 속성(ID, 값, 렌더 등)은 자동으로 적절하게 타입될 것이다.
- 디자인 뷰의 컴포넌트 시각화. Rational Application Developer의 Page Designer는 컴포넌트의 렌더러를 호출해 Design 뷰의 어떤 JSF 컴포넌트든 자동으로 렌더하려고 시도할 것이다. inputText 같은 아주 간단한 컴포넌트만 적용된다 하더라도 디자인할 때 없는 산출물에 따라 코드를 렌더링하는 것이 복잡하기 때문에 더 어려운 컴포넌트에 적용하기 힘들다(자바스크립트 라이브러리나 데이터 커넥션 등). 이런 컴포넌트들에는 HTML 스니펫을 제공해 렌더러를 작동하는 것보다는 디자인 시(design-time) 시각화로 사용할 수 있다.
- 리소스. 많은 JSF 컴포넌트는 페이지나 애플리케이션에 더해질 추가 리소스를 요구한다. 이 리소스들은 대체로 자바스크립트와 CSS 파일을 포함하고 애플리케이션의 Web.xml과 faces-config.xml 파일이 런타임에 라이브러리가 요구하는 추가 JAR 파일에 업데이트된다.
라이브러리 정의가 작업공간에 만들어지고 저장되면 Rational Application Developer는 새 컴포넌트 라이브러리를 인식하고 새 컴포넌트는 팔레트(그림 3을 보자), Design 뷰(그림 4를 보자), Properties 뷰, Quick Edit 뷰, Data 바인딩 등 IBM 컴포넌트가 사용되는 모든 IDE에서 쓰인다.
그림 3. 팔레트 뷰의 컴포넌트 라이브러리
그림 4. 디자인 시 시각화
맞춤 JSF 컴포넌트
서로 다른 JSF 컴포넌트 라이브러리를 전부 사용할 수 있는 것은 다행스러운 일이다. 하지만 그 어떤 것도 여러분이 원하는 컴포넌트를 포함하지 않는다면? 나만의 것을 만들면 된다! 너무 복잡하다고? Rational Application Developer V7.5로는 가능하다. 새 컴포넌트를 만들고자 하든, 몇 가지 간단한 컴포넌트를 계속 사용하든 이 새 버전으로 기존의 것에서 자신만의 JSF 컴포넌트를 쉽게 만들 수 있다(예를 들어 누군가에 대한 입력 정보 같은).
Rational Application Developer에서 새 JSF 컴포넌트를 만드는 것은 일반적인 웹 페이지를 개발하는 것과 매우 흡사하다. 사실 Faces Componet Library 프로젝트는 웹 프로젝트 중 하나이고 맞춤 컴포넌트는 일반 JSP로 개발된다. 여기에 필요한 모든 친숙한 도구를 전부 가지고 있다. 팔레트에서 기존 JSF 컴포넌트를 끌어 Page Data 뷰를 사용해 데이터를 통합하고 Properties 뷰를 사용해 행위를 바꾸고 Quick Edit 뷰를 사용해 스크립트 이벤트를 바꾸면 된다.
맞춤 컴포넌트가 변경될 때는 언제나 Rational Application Developer가 변경사항을 알리고 JSF 컴포넌트를 구성하는 자바 파일을 자동으로 생성하여(예를 들어 컴포넌트와 태그 클래스) XML 파일이 컴포넌트와 라이브러리 구성(faces-config.xml과 TLD)을 가지게 한다. 그러고 나서 모든 생성된 산출물이 다른 개발자들과 공유할 수 있는 단일 JAR로 패키지되어 어떤 Faces Web 애플리케이션에서나 사용할 수 있다.
File > New >
Project > Faces Component Library Project 메뉴 순으로 선택해 Component Library를 만들기 시작하자. 나타나는 마법사(그림 5)는 특별한 구성을 사용한다는 것 외에는 웹 프로젝트를 만들던 마법사와 같은 마법사다.
그림 5. 새 Faces Component Library 마법사
Component Library는 JSF 컴포넌트(원하는 만큼)를 가진다. 새 컴포넌트를 만드는 방법은 새 웹 페이지를 만드는 것과 비슷하다. 그저
New >
Faces Custom Component 순으로 선택하면 된다(그림 6).
그림 6. 새 Faces
컴포넌트 만들기
컴포넌트가 만들어지면 이름, 유형, 속성 목록 같은 속성을 구성할 수 있고 팔레트에서 기존 JSF 컴포넌트를 추가하고 구성할 수 있다.
예를 들어 페이지에서 사람 이름과 나이를 입력하라는 입력 필드가 자주 등장하는 것 같으면 “사람(person)”이라는 새 컴포넌트를 만드는 것이 좋다. 이로써 여러 페이지에서 같은 태그를 계속 복사하기보다 태그 하나만 사용할 수 있다. 이런 컴포넌트는 세 가지 특정 속성(성, 이름, 생년월일)과 세 개의 입력 필드를 그리드 안에 갖는다.
그림 7은 컴포넌트의 소스가 어떻게 보이는지, Design 뷰에서 어떻게 시각화되는지, Properties 뷰에서 속성이 보이는지를 보여준다. 이 새 컴포넌트를 만드는 데 사용되는 모든 일반적이고 친숙한 JSF 태그를 찾아보기 바란다.
그림 7.
정의된 “사람(Person)” 컴포넌트
컴포넌트를 가지는 페이지를 마치고 저장하면 Rational Application Developer는 자바와 XML 파일을 생성하고 이것들을 JAR 파일에 패키지할 것이다. 또한 같은 라이브러리 프로젝트에 간단한 테스트 페이지를 만들어 런타임에 컴포넌트의 렌더링과 행위를 쉽게 테스트할 수 있도록 할 것이다.
이전 절(제네릭 JSF 컴포넌트 라이브러리)에서 설명한 것처럼 여러분과 여타 개발자들은 Rational Application Developer의 완성된 Component Library를 사용할 수 있다. 그림 8은 팔레트에, JSP 소스에 추가된, Design 뷰에 시각화된, Properties 뷰의 모든 속성을 가진 새 컴포넌트를 보여준다. 그림 7에서 보여준 소스 코드에서 사용된 12개의 JSF 태그가 어떻게 단 하나의 <fc:person> 태그가 됐는지 살펴보자.
그림 8. 애플리케이션에서 사용된 새 Person 컴포넌트
생성 템플릿
Rational Application Developer V7.5에서 크게 향상된 또 다른 점은 데이터 객체가 페이지에 추가될 때 생성되는 JSF 태그를 쉽게 커스터마이즈할 수 있다는 것이다. 팔레트나 Page Data 뷰, 또는 다른 소스에 데이터 객체를 넣을 때마다 Rational Application Developer는 객체의 데이터 유형을 분석하고 주어진 객체로 생성될 수 있는 JSF 컨트롤 목록을 제공한다.
예를 들어 페이지에 바이트 배열을 넣는다면 Rational Application Developer는 배열을 이미지, 링크, 파일 업로드 컴포넌트(그림 9를 보자)와 함께 사용하고자 하는지 물을 것이다. 선택한 후 마법사에서 선택한 것에 따라 몇 가지 JSF 태그가 페이지에 추가된다.
그림 9. 바이트 배열 객체 추가하기
Rational Application Developer는 어떤 JSF 컨트롤이 필요한지 알아내고 JSP에 맞는 효율적인 코드를 생성하는 데 매우 뛰어나다. 하지만 Rational Application Developer가 제공한 선택사항이나 생성한 태그가 마음에 들지 않으면 어떻게 해야 하나? 새 Component Library(이전 절을 보자)만을 지원하고자 한다면, 그리고 이제 페이지에 데이터를 넣을 때 Rational Application Developer가 새 컴포넌트를 사용하기를 원한다면 어떻게 해야하나? 이 때 새 생성 템플릿(Generation templates)이 필요하다.
예전에는 데이터 넣기용 코드 생성이 템플릿을 기반으로 했다. 하지만 템플릿은 매우 복잡했고 이해하기 힘들었으며 변경하기 어려웠다. Rational Application Developer UI는 어디서나 가능하지 않았다. 새로 출시된 버전에서는 JSF 코드를 생성하는 모든 템플릿이 Preferences에 있고 간단한 JSP 같은 구문에서 사용할 수 있다. Window
> Preferences 메뉴로 이동해 Web > JavaServer Faces Tools
> Generation Templates 순으로 선택해 가능한 템플릿 목록을 보자(그림 10을 보자).
그림 10. 생성 템플릿
여기에는 세 가지 유형의 템플릿이 있다.
- sttring, Boolean, integer, date 같은 간단한 데이터 유형용 Data
- 배열과 목록 같은 컬렉션 Iterative
- 자바 메서드용 Method
각 템플릿은 자바 타입과 관련이 있고 마법사에 나타나는 이름이 있으며(그림 9를 보자) 입력이나 출력 모드에서 사용될 수 있고 템플릿이 사용될 때 생성되는 태그와 태그 속성을 커스터마이즈하는 변수를 제공함으로써 JSP 같은 구문에서 설명된다.
배열과 나열 같은 컬렉션 유형과 관련된 반복 템플릿(그림 11을 보자)은 래퍼 태그(예: <dataTable>)와 반복 태그(예: <column>) 모두를 지정한다.
그림 11. 반복 템플릿
Rational Application Developer는 가장 표준적인 자바 타입용과 표준 및 IBM JSF 컴포넌트 사용용으로 꽤 많은 생성 템플릿을 포함한다. 이제 Preferences UI를 사용해 이 템플릿들을 쉽게 편집하거나 자신만의 것을 만들 수 있다. 또한 템플릿을 익스포트, 임포트하여 개발자들과 공유할 수 있다.
끝으로 가장 중요한 것은 생성 템플릿 역시 라이브러리 정의(이전 절을 보자)의 부분으로 지정될 수 있다는 것이다. 이전에 설명했듯이 새 컴포넌트 라이브러리로 메타데이터를 제공한다면 그 라이브러리의 컴포넌트를 사용하는 생성 템플릿 또한 만들 수 있다. 예를 들어 MyFaces Tomahawk용 라이브러리 정의를 만든다면 java.util.Date 자바 타입용 생성 템플릿을 만들고 Tomahawk의 <t:inputDate> 컴포넌트를 활용할 수 있다.
디자인 시 유효성 검사
디자인 시 유효성 검사는 서버에 배치하고 디버깅을 하지 않고도 웹 애플리케이션에서 발생할 수 있는 잠재적 문제나 버그를 찾는 강력한 도구다. Application Developer V7.5에서는 이전 버전에 비해 JSF 유효성 검사 능력을 엄청나게 확장했다. 이제 JSF 식을 검사하고 데이터 유형을 확인하고 JSF 태그와 JSF 구성 파일을 연결하는 등 많은 작업을 할 수 있다.
그림 12는 Rational Application Developer가 JSF 페이지에 대해 경고하는 것이 무엇인지에 관한 몇 가지 예를 보여준다.
- 첫 번째
<commandButton> 태그는 “성공(success)”의 네비게이션 결과를 사용하지만 faces-config.xml 파일에는 동급의 네비게이션 규칙이 없다.
- 두 번째
<commandButton>은 액션으로 빈 메서드를 사용하지만 “config”를 관리하는 빈은 “결과(outcome)”라는 메서드를 가지고 있지 않다.
<inputText>는 java.util.Date 객체에 묶여 있지만 컨버터를 사용하지 않는다.
모든 세 가지 문제점은 애플리케이션이 서버에 배치되면 런타임에 심각한 문제를 일으킨다. 유효성 경고 덕에 이 문제들을 빨리 잡아내고 고칠 수 있다.
그림 12. 새로운 유효성 검사 기능
그림 13. 유효성 검사 환경 설정
새 JSF 유효성 검사는 강력하기만 한 것이 아니라 UI의 Preferences 탭(그림 13을 보자)을 통해 쉽게 커스터마이즈할 수 있다. Preferences에서 Web > JavaServer Faces Tools
> Validation 순으로 선택하면 많은 유효성 검사 설정을 찾을 것이다.
하지만 조심해야 할 점은 Rational Application Developer가 디자인 시 JSF EL 식을 언제나 정확하게 평가, 검사할 수 없다는 것이다. 특히 식이 복잡하거나 디자인 시 알 수 없는 유형과 데이터 객체를 사용할 때 더욱 그렇다. 그러므로 Rational Application Developer가 정확한 식에도 경고를 생성할 수 있다. 이런 일이 발생하면 경고를 무시하거나 유효성 검사 환경 설정을 살짝 바꿔 Rational Application Developer가 특정 유효성 검사 규칙을 무시하도록 하면 된다.
자동 완성과 하이퍼링크
이 기사에서 강조하는 마지막 두 가지 기능은 페이지의 시각적 표현이 아닌 JSP 소스 코드로 직접 작업하는 것을 선호하는 개발자들이 좋아할 만한 것이다. Rational Application Developer V7.5는 JSF 소스를 편집하는 데 두 가지 주요 향상점을 가져왔다. 자동 완성과 하이퍼링크가 그것이다.
자동 완성은 자바나 JSP 개발자라면 누구나 친숙할 것이다. 코드를 입력하다 Ctrl+Space를 누르면 직접 모든 코드를 기억, 타이핑하지 않더라도 자바 메서드 이름, JSP 태그 또는 현재 컨텍스트에 적합한 그 어떤 것이든 Rational Application Developer가 제안을 하고 개발자는 그 중에서 선택할 수 있다.
Rational Application Developer V7.5에서 JSP로 작업할 때 자동 완성은 JSF 환경에 대해 “인식하고” 관리된 빈 이름(그림 14를 보자), 속성, 메서드, 속성 값(그림 15를 보자)을 제안할 수 있다.
그림 14. JSF 식(expression)용 자동 완성
그림 15. JSF 속성용 자동 완성 응답
Rational Application Developer나 이클립스로 작업하는 데 친숙한 또 다른 소스 코드 편집 도움기는 하이퍼링크(hyperlinks)다. 키보드에서 Ctrl 키를 누르며 코드의 일부분에 마우스를 갖다대면 그 코드의 일부분이 하이퍼링크로 바뀐다. 링크를 클릭하면 프로젝트에서 클릭된 부분이 정의된 영역으로 이동한다. 많은 자바 개발자가 이 기술을 사용해 자바 클래스의 메서드 사이를 이동한다.
이 버전에서 같은 방법을 사용해 JSF 산출물 사이를 이동하는 데 많은 시간을 절약할 수 있다. Rational Application Developer 편집기는 현재 작업 중인 JSF 컨텍스트를 인식하고 마우스 버튼을 한 번 클릭하는 것만으로 JSP에서 자바 클래스로나 faces-config.xml 파일에서 JSP로 직접 이동할 수 있다.
그림 16은 JSF 애플리케이션에서 하이퍼링크를 사용하는 두 가지 예를 보여준다.
그림 16. 하이퍼링크
JSP 소스 코드의 관리된 빈(config)의 이름에 Ctrl+click을 사용할 때 이 관리된 빈이 정의된 faces-config.xml 파일로 이동한다. 빈의 메서드(doAction) 상에서 Ctrl+click을 사용할 때 메서드가 정의된 클래스의 자바 편집기로 이동한다.
참고자료 교육
제품 및 기술 얻기
토론
필자소개 | | | Yury Kats는 IBM Rational Application Developer 팀의 개발자로 JSF 구현, 컴포넌트, 툴링에 관한 작업을 하고 있다. |
기사에 대한 평가
|
| 이 문서 북마킹 하기
|
| 
