gwt-ext 라이브러리를 내 GWT 프로젝트에서 사용하기

올해목표 // 10월 어학연수 떠나자~ 자수씨

카테고리

전체글 (1457)

Brand New! (28)

주절주절 (213)

MOT (11)

해외쇼핑 (49)

쇼핑노트 (150)

취미생활 (94)

iPhone (4)

Eclipse (121)

Google (83)

Spring (31)

JAVA (176)

JavaScript (59)

WEB (49)

Database (20)

OS (26)

Tools (8)

Tips (26)

IT정보 (1)

Book (21)

Programming (37)

외부행사 (43)

주변인들 (17)

여행노트 (60)

학교생활 (30)

회사생활 (52)

사회생활 (5)

외국어공부 (12)

잡동사니 (30)

Total

Today

Yesterday

12-27 00:08

RSS FEED

티스토리 가입하기!

달력

공지사항

최근에 올라온 글

최근에 달린 댓글

gwt-ext 라이브러리를 내 GWT 프로젝트에서 사용하기

Google/GWT / 2008. 2. 29. 16:54

먼저 해당 프로젝트 사이트(http://gwt-ext.com/) 로 들어가서 GWT-Ext 라이브러리를 다운받습니다.

다운로드 경로는 요기~ http://gwt-ext.com/download/

gwtext.2.0.1.zip 파일을 다운받습니다.

깔끔하게 압축을 풀어줍니다.

압축을 풀면 다음과 같은 폴더와 파일들이 나옵니다.

doc 당연히 javadoc이겠죠~
samples demo가 컴파일되어 있는 폴더입니다.
gwtext.jar 이것이 라이브러리~

기존 GWT 프로젝트를 열고 라이브러리 폴더에 gwtext.jar를 붙여넣습니다.

이것만 넣는다고 끝나지는 않습니다.
프로젝트 설정파일을 열고 GwtExt 프로젝트를 inherit을 위한 설정을 추가해줍니다.

gwt 프로젝트 public 폴더에 나머지 파일들도 샤샤샥 넣어 줍니다.
물론 소스는 gwt-ext sample에서 참고를해서....
gwtext-2.0.1\samples\Showcase2\src\com\gwtext\sample\showcase2\public

Showcase2.html과 Showcase2.css를 제외한 나머지 파일을
복사해서 붙여 넣습니다.
사실 사용하지 않는 파일들도 있지만 귀차니즘 때문에????

Showcase2.css는 열어서 프로젝트의 css에 append 해주시면 되구요~
Showcase2.html은 열어서 자신의 프로젝트 html에 맞게 수정을 해줍니다.

<html>
<head>
    <title>Showcase2 Application</title>
    
    <style type="text/css">
        #loading {
            position: absolute;
            left: 45%;
            top: 40%;
            padding: 2px;
            z-index: 20001;
            height: auto;
            border: 1px solid #ccc;
        }
        #loading a {
            color: #225588;
        }

#loading .loading-indicator {
            background: white;
            color: #444;
            font: bold 13px tahoma, arial, helvetica;
            padding: 10px;
            margin: 0;
            height: auto;
        }

#loading-msg {
            font: normal 10px arial, tahoma, sans-serif;
        }
    </style>
	
    <link rel="stylesheet" href="변경하세요~ Showcase2.css">
</head>
<body>
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

<div id="loading">
    <div class="loading-indicator">
        <img src="js/ext/resources/images/default/shared/large-loading.gif" width="32" height="32"
             style="margin-right:8px;float:left;vertical-align:top;"/>GWT-Ext<br/>
        <span id="loading-msg">Loading styles and images...</span></div>
</div>

<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
<link id="theme" rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-gray.css"/>
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>

<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>

<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>

<script type="text/javascript" src="변경하세요~ com.gwtext.sample.showcase2.Showcase2.nocache.js"></script>

<script type="text/javascript">Ext.get('loading').fadeOut({remove: true, duration:.25});</script>
</body>
</html>

이 분들 아이디어에 감동을 받은 점은 js는 동기적으로 내려 받기 때문에

사용자들에게 어느정도까지 진행이 되는지를 알려준다는 점이었습니다.

가뜩이나 무거운 js들을 마냥 기다리는데 지치신 분들에게는 희소식~~

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

준비는 완료되었습니다. 이제 gwt-ext를 사용해서 개발만 하면 되겠네요~

불친절한자수씨

카테고리

달력

공지사항

최근에 올라온 글

최근에 달린 댓글

gwt-ext 라이브러리를 내 GWT 프로젝트에서 사용하기

글 보관함

최근에 받은 트랙백

링크

티스토리툴바