JSP- JSP에서 사용가능한 컴포넌트(Editor, chart, report ...)

컴포넌트란 무엇인가?

프로그래밍이나 엔지니어링에서 말하는 컴포넌트란, 더 큰 프로그램이나 구조물에서 식별 가능한 "일부분"입니다.
객체지향 프로그래밍(OOP)과 분산객체기술에서의 컴포넌트는 재사용이 가능한 프로그램 빌딩 블록으로서, 하나의 애플리케이션을 형성하기 위해 같은 컴퓨터에 있거나 또는 네트웍 상의 다른 컴퓨터에 있는 컴포넌트들과 조합될 수 있습니다.
썬 마이크로시스템즈에서는 일반적으로 컴포넌트 인터페이스의 노출과 발견, 컴포넌트 속성, 이벤트 처리, 영속성, 프로그램 개발 지원, 컴포넌트 패키징(JAR) 등과 같은 서비스를 제공하는 것을 "컴포넌트 모델"로 정의하고 있습니다.
[원본 출처] : 텀즈 (http://www.terms.co.kr/component.htm) <-클릭 자세한 내용보기.
소프트웨어에서 말하는 Component라는 것은 클라이언트에게 어떤 기능을 제공하는 독립적인 단위입니다.
- 각 Component는 operation, property, event 형태의 interface를 제공하며, 따라서 일단 특정기능의 Component를 구현하면 다른 제품에 그 Component를 재사용할 수 있으며 그 Component를 판매할 수 도 있습니다. 또한 각 Component를 원거리에 분산시켜 module화 된 개발 이 가능하며 분산 처리 계산을 할 수도 있습니다. 현재 Component는 각 프로그래밍언어인 Java, C++, Visual Basic등으로 구현 될 수 습니다.
- [원본 출처] : 한국과학기술정보연구원 우종욱님의 PDF 한글화 버전페이지 (http://209.85.173.132/search?q=cache:OiInedffPAUJ:www.mctnet.org/nev/tech/down.jsp%3Ftype%3Dview%26file%3D0806-1(Component%25B1%25E2%25BC%25FA%25C1%25BE%25B7%25F9%25B9%25D7%25BB%25E7%25BF%25EB).pdf+JSP+component+%26+%EC%A2%85%EB%A5%98&cd=1&hl=ko&ct=clnk&gl=kr&lr=lang_ko)

JSP에서 사용가능한 대표적 컴포넌트들

이미 수많은 개발자들에 의해서 많은 컴포넌트들이 만들어져 있습니다. 물론,어떠한 개발자도 자신에 맞게 컴포넌트들을 개발할 수도 있지만, 초보자일 경우에는 이미 만들어진 컴포넌트들을 가져와서 사용하면,왠만한 홈페이지는 거뜬히 만들 수 있습니다.
[종류]
- 손쉬운 웹 에디터 툴 -> FCKEditor , SmartEditor(국내), TinyMCE
- 파일을 업로드하고 폼 데이터를 분석하는 도구 -> Cos.JAR
- 다양한 차트 작성을 위한 도구 -> Chart FX for JAVA 6.5
- ...
- ...... 등
이 컴포넌트들은무료/유료 버전으로 나누어지며, 각 사용방법은 해당 컴포넌트를 배포하는 사이트 등에서 방법을 알 수 있습니다.

이왕이면 풍부한 글쓰기를 구현해보자 - FCKeditor & TinyMCE & SmartEditor 소개

이미, JSP를 사용하는 사용자에게 있어서 반가운 것은, 수많은 컴포넌트들이 존재하고, 그것을 사용하는 방법만 익혀서 JSP 페이지내에 적용시켜 사용하면 된다는 것입니다.
최종 사용자가 홈페이지를 사용하면서 가장 많이 사용하는 것은, 글쓰기가 아닐까 합니다.
이 글쓰기를 단순한 HTML의 textArea 로 구현하게 되면 아래의 그림과 같이 너무 부족한 부분이 많다는 것을 만들어 보신 분은 아실 겁니다.
참...너무 허전하군요 ㅡ.,ㅡ;;;;;;;;;;;;;;;;;
여튼 이러한 단점을 보안하기 위해 무료로 배포하는 많은 에디터 들이 있습니다만, 그 중에서 WYSIWYG(위지윅 : 편집기나 프로그램은 그래픽 사용자 인터페이스 또는 텍스트 페이지를 만들기 위한 인터페이스 또는 콘텐츠 개발도구) 즉. 실시간 웹에디터로 유명한 FCKeditor와 TinyMCE 그리고한국의 네이버에서 개발중인 SmartEditor 를 소개합니다.

▶JSP를 공부하면서 가장 아쉽고 짜증이 났던 것은, "왜! 이렇게 못 생겼냐!" 하는 것이었습니다.

그래서, 괜히 아는 것도 없으면서 FLEX 라는 GUI가 화려한 것에 눈을 돌리기도 했었지요.

아, 그렇다고 FLEX가 나쁘거나 그렇다는 것은 아닙니다.

FLEX도 웹 2.0의 RIA(Rich Internet Application)에 기반을 둔 Ajax를 능가하는 좋은 도구입니다.

여튼 , 서두는 이정도로 두고, 이제 각 컴포넌트의 예제를 뜯어보고자 합니다.

각 컴포넌트의 적용사례- 넌 유명하구나. FCKEditor

[참고] : 이 문서의 내용은http://docs.fckeditor.net/의 문서를 참고하였습니다.

FCKEditor 란 무엇인가?
- FCKEditor는 웹페이지에 사용되는 경량 텍스트 편집기입니다. 대부분의 워드와 같은 데스크톱 환경의 편집자들을 위한 기능들로서 웹에서도 사용할 수 있도록 다양한 기능을 제공합니다.
- 텍스트 뿐만 아니라, 표를 생성할 수도 있으며, FCKEditor은 추가적인 설치를 필요로 하지 않습니다.
사용범위
- CMS(Content Management System)
- 개인 웹 사이트
- 블로그 시스템
- 커뮤니티 사이트
- 포럼(Forum)
- 그리고, 더 많은 곳에서 사용이 가능합니다.
지원 언어
- JavaScript
- AFP
- ASP
- ASP.NET
- ColdFusion
- Java
- PHP
- Python
- 그리도 다른 서버 기반의 언어
지원 웹 브라우저
- Internet Explorer 5.5+
- Firefox 1.5+
- Safari 3.0+
- Opera 9.5+
- Netscape 7.1+
- Camino 1.0+

윈도우용설치 방법 > 따라하기
- 사용하고자 하는 웹페이지의 ROOT에 "fckeditor"라는 이름의 폴더를 생성하고 압축을 해제합니다.

▲ [1] 다음의 파일을 다운 받습니다. FCKeditor_2.6.4.zip

▲ [2] 압축은 사용하는 홈페이지의 루트에 압축을 해제하시면 됩니다.

▲ [3] 성공적으로 압축을 풀었다면, TOMCAT을 시작하고, 웹사이트를 테스트 해봅니다. 위와 같이 나온다면 성공 ^^

# 오픈소스에다가 무엇보다 풍부한 글쓰기를 제공하지만, FCKeditor는 사실 사용하고 적용하기가 여간 까다로운 게 아닙니다.

# 그럼 이왕이면, 이렇게 많은 기능보다는, 조금이나마 사용하기 쉽고 간단한 컴포넌트는 없을까요?

# 이제 소개 합니다 :D 바로 TinyMCE 컴포넌트!!

각 컴포넌트의 적용사례- TinyMCE editor

#서론

FCKeditor 를 조사하고, 적용하면서 가장 큰 난관에 부딛혔던 문제 중 하나는 바로.
설치를 어떻게 하고, 어떻게 적용해야하냐는 것이었습니다.
즉, 써먹기 어려웠다 이말이죠 네.....

#중론 <- 중론은 또 뭐야.?

그러던 중에(당연히, 여러 editor 를 살펴보고 조사를 했지요.) FCKeditor 와 견줄만한 새로운 에디터를 찾게 됩니다. 바로 FCKeditor 보다는 쉽고, 그렇다해서 UI(사용자 인터페이스)가 뒤떨어지는 것도 아닌데, 뭔가 더 이쁜거 같은 에디터. 바로 TinyMCE 라는 녀석을 알게 되었습니다.

#본론

TinyMCE 란 ?
- TinyMCE는 MSIE(Internet Explorer) 혹은 Mozilla(FireFox)와 같은 웹 브라우저에 대한, 보다 사용자 친화적인 방법의 에디터로서, 사용자는 HTML 내용을 편집할 수 있는 강력한 위지윅(WYSIWYG)편집기 컨트롤입니다.
- 편집기 컨트롤을 매우 유연하고 통합적인 목적으로 인트라넷이나 CMS와 같은 시스템에 내장하여 사용할 수 있습니다.
기능
- 단 몇 줄의 코딩만으로도 기존의 페이지와의 통합이 가능합니다.
- 테마와 템플릿을 지원합니다.
- 커스텀코드로의 변환이 쉽습니다.(플러그인과 콜백기능)
- HTML 출력에 따라 변환이 쉬우며, 다국어를 지원합니다.
- 대부분의 브라우저를 지원하며, 현재는 (모질라, 익스플로러, 파이어폭스 및 Mac 및 Linux)의 일부 제한된 사파리를 지원합니다.

설치하기 (윈도우용 + 이클립스 + JSP)

다음 웹 페이지를 참고 http://wiki.moxiecode.com/index.php/TinyMCE:Installation하였습니다.

▶TinyMCE는 FCKeditor 보다 쉽게 설치하여 사용이 가능합니다.

따라해볼까요.? :D

▶설치하기에 앞서, 다음을 확인하세요.

JavaScript를 사용하는 페이지라면, 웹 브라우저에 대한 직접적인 요구사항은 제외하고 있습니다.

TinyMCE는 종료코드가 없습니다.

TinyMCE 작업으로 하는 HTML양식에는 textarea를 사용하도록 할 수 있으며, 양식을 꾸밀때는 데이터베이스 또는 파일에 저장하는 시스템을 가지게 되는 HTML 코드를 변환하게 출력합니다.
페이지에 변화가 생기므로, TinyMCE는 사용자의 소스코드에 대한 기존 컨텐츠를 읽을 수 있습니다.

윈도우 설치에 문제 혹은 소스코드에 TinyMCE를 정의하지 않았거나 "}"를 빼먹는다면 오류를 맞이할 수 있습니다.

이 문제점의 원인 중 하나는 "아파치의 설정 중 EnableSendfile이 있는데, 이는 httpd.conf 파일에서 # 으로 구성된 주석파일을 제거해야 해결이 가능합니다. 그리고 EnableSendfile 옵션을 꺼야겠죠 ^^

(참고사이트) http://wiki.moxiecode.com/index.php/TinyMCE:Installation

===============================================================================================================================================

▲ [1] 위의 사이트에서 다운로드가 가능합니다. 어서 다운 받으세요! :D

▲ [2] 여러가지의 버전이 있지만, 두번째, 개발자 버전을 다운 받습니다.

▲ [3] 열기를 이용하시는 분이 참 많은데, 그냥 저장하세요 ㅡ_ㅡ.

▲ [4] 임의의 경로(추천 > 웹사이트의 루트 혹은 wwwroot에 저장을 권장합니다)

▲ [5] 외국사이트라 속도가 저주받은거 같지만 참으세요.

▲ [6] 현재폴더에 압축을 풀도록 합니다.

▲ [7] 압축을 풀었다면 위와 같은 파일들이 보일겁니다.

▲ [8] UNIX 혹은 LINUX 쉘 환경에서는 위와 같이 압축을 해제합니다.

▲ [9] 위의 경로처럼 압축이 해제되고, 파일이 주루룩 생깁니다.

압축을 풀었다면, javascript 를 TinyMCE의 환경에 맞게 구성을 변경하고 추가해야 합니다.
모든 웹 사이트에서는 변경되거나 추가되는 ".js"에 대해 경로(path) 설정을 제대로 해줘야 합니다.

▲ [10] 위의 예제에 있는 버튼은 moxiecode.com 사이트로 전송하고,

이 내용을 다시 사용자에게 보여주는 예제입니다.

차암~~~~~~~~~~쉽죠잉~~~~~~♬

각 컴포넌트의 적용사례- SmartEditor

#서론

지금까지, 유명한 웹 위지윅 에디터를 두루두루 살펴보았습니다. 하아! ! 예제를 적용한 것만 보아도
이것 참 할일이 한 두개가 아니다. 라고 느끼실 분들이 많을텐데요................
하지만, 직접 코딩하는 것보다야 100배 천배는 낫죠
그런데, 다 좋은데 왜 다 외국에서 만든거고, 하필이면 외국어로 된 설명서를 읽어야 하는냐
그리고 한글 지원은 왜 이렇게 어설프게 되느냐가 새로운 문제가 됩니다. (--)(__)끄덕끄덕

#본론

그렇다면, 한글도 지원하고, 설명서도 한글이고. 또 설치도 무지무지하게 간단한 웹 에디터는 뭐가 있을까? 하는 것이죠..
바로, 우리나라의 개발자들이 모여 만든 SmartEditor 가 있습니다. 브 라 보 ~ ♬

설치하기 (윈도우용 + 이클립스 + JSP)
- 우선! 이 컴포넌트의 개발 페이지를 참고하면(http://dev.naver.com/wiki/smarteditor/index.php/SmartEditorBasic%EA%B8%B0%EB%8A%A5%EC%B6%94%EA%B0%80%EA%B8%B0%EB%B3%B8) 설치방법이 제시되어 있습니다.
- 설치 권장 및 사양은 대부분의 에디터 컴포넌트와 비슷합니다 ^^

▲ [1] 위의 페이지에서 다운받으실 수 있습니다. ^ㅡ^

▲ [2] 최신버전은 늘 ~ 늘 ~ 업데이트 되고 있기 때문에, 며칠 전에 제가 받은 거보다 최신 버전이 ㅡ,.ㅡ;;;;;

▲ [3] 제발 열기 하지 마시고 저장 해주세요 -_ㅠ

▲ [4]나중에 찾아갈 수 있는 경로(자신이 알만한)로 저장합니다.

▲ [6] 저장하고 압축을 풀면 위와 같은 파일목록을 보실 수 있습니다.

▲ [7] 먼저 install_guide.html 을 실행해봅니다. 그러면 설치를 하는 방법이 담긴 문서를 볼 수 있습니다.

▲ [8] 다음은 예제 페이지를 볼 수 있는 파일 SEditorDemo.html을 실행합니다.

응? # 진도 프레임웍이라는 것이 필요하다고 하네요. 경로를 따라가서 다운 받습니다.

▲ [9] 다른건 필요없고 jindo.min.js 라는 파일을 다운 받으시면 됩니다.

▲ [10] 제발... 저장해주세요. :D

▲ [11] 파일의 저장경로는 SmartEditor 가 있는 폴더의 js 폴더 안에 저장합니다.

▲ [12] 이제 예제 파일을 실행하면 정상적으로 에디터가 보이실 거에요 ~ ^^ 와우! 쉽다!!!

▲ [13] 이클립스에서도 적용하는 방법은 매우 쉽습니다. 프로젝트의 WebContent 에 복사하시면 끝!

▲ [14] 마찬가지로, 예제 파일을 실행하면~ ^^ 정상적으로 실행하는 모습을 보실 수 있습니다.

○ 후기

지금까지, 3가지의 무료 위지윅형 웹 에디터인 FCKeditor , TinyMCE, SmartEditor에 대해 간략하게 알아보았습니다.

다음편은 3가지의 웹 에디터 중 SmartEditor 에 대해서 어떻게 JSP에 적용하고 사용하는지 알아보도록 하겠습니다.

:D

저작자표시 비영리 변경금지

'Languages > JSP' 카테고리의 다른 글

JAVA Bean과 Session, 그리고 Cookie (0)	2013.02.24
JSP - JSP 태그 [기초문법], 액션 (0)	2012.10.26
JSP - 스크립트 요소 (0)	2012.10.26
JSP - 데이터를 담는다! BEAN! (0)	2012.10.26
JSP - 컴포넌트 - SmartEditor JSP에 적용하기 (5)	2012.10.26

Web Develop Engineer - minam.cho

JSP- JSP에서 사용가능한 컴포넌트(Editor, chart, report ...) - 예제

'Languages > JSP' 카테고리의 다른 글

티스토리툴바

JSP- JSP에서 사용가능한 컴포넌트(Editor, chart, report ...) - 예제

'Languages > JSP' 카테고리의 다른 글

'Languages/JSP' Related Articles

티스토리툴바