ajax로 검색한 결과 :: 시소커뮤니티[SSISO Community]

정치	경제
문화	칼럼
비디오게임	스포츠
핫이슈	TV
포토	온라인게임
PC게임	에뮬게임
라이프	사람들
유머	만화애니
방송	1
1	1
1	1
1	1
1	1
1

ajax로 검색한 결과

등록일:2008-04-02 14:47:36
작성자:

제목:Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)

새로운 그래픽 툴로 ajax와 XML을 사용하여 사이트 품질 높이기

난이도 : 중급

Jack D Herrington, Senior Software Engineer, Leverage Software Inc.

2007 년 5 월 02 일

Web 2.0은 사용자 경험을 강조하고 있습니다. 이것의 일환으로 고급스러운 방식으로 사용자와 인터랙팅 하고 사용자에게 정보를 제공하는 것입니다. 이러한 새로운 인터페이스들을 위젯이라고 하며, Asynchronous JavaScript + XML (ajax)을 사용하여 서버와 통신합니다. 사이트와의 상호 작동을 향상시키는데 사용할 수 있는 다섯 개의 위젯에 대해 알아봅시다.

Web 2.0 혁명은 웹 사이트 상에서 고객과 상호 작동하는 독특하면서도 고급스러운 방식이 탄생했다. 이렇게 새롭고 혁신적인 많은 기술들은 서버와 통신하는 그래픽과 위젯을 사용하여 데이터를 가져오는데 까지 진화했다. 이 글에서는, 다섯 가지 위젯을 소개하겠다. 일부는 오픈 소스이고, 일부는 상용이며, 이러한 위젯들은 ajax와 XML을 통해 서버와 통신한다.

carousel: 이 위젯은 작은 그래픽으로 나타난 아이템 리스트를 스크롤 하는데 사용할 수 있는 회전식 이미지 뷰어이다. 사용자가 해당 아이템을 클릭할 때 어떻게 할 것인지는 여러분이 정한다. carousel의 예로는 Flikr 사이트와 Apple의 iTunes 인터페이스가 있으며, 이는 무료로 사용할 수 있으며, 대중적인 jQuery JavaScript 기반이다.
SWF/Charts: Adobe Flash 기반 컨트롤은 서버에 있는 차팅(charting) 데이터 및 스타일링 옵션용 XML을 읽고, 데이터에 기반하여 차트를 디스플레이 한다. 인터페이스는 고급스럽고, XML 데이터는 생성하기도 쉬워서 페이지에 동적 그래픽을 빠르게 추가할 수 있다.
SWF/Gauge: SWF/Charts의 사촌격인 이 Flash 위젯은 서버에 있는 XML을 사용하여 완전히 커스터마이징 가능한 게이지 디스플레이를 구현한다. 게이지는 비행기 또는 차에 있는 것과 비슷하다.
In-place editing: 엄밀히 말하면 위젯은 아니지만, In-place editing 컨트롤은 매력적이고, 대화식으로 사용자에게서 정보를 가져온다. In-place editing 기능은 Scriptaculous 프레임웍에 포함되어 있고, 이는 prototype.js 라이브러리에 있다.
DHTML windows: DHTML window는 모델이 없는 윈도우를 페이지 콘텐트에 놓는 장치이다. 사용자들은 윈도우를 이동하고, 사이즈를 조정하며, 제거하기도 한다. 이 윈도우의 콘텐트는 페이지 상에서 JavaScript 코드에 의해 지정되거나, 서버에서 ajax를 통해 읽힌다. 이러한 유형의 윈도우는 경고 장치로 사용하기에 알맞으며, 전체 페이지를 재 로딩 할 필요가 없는 작은 폼을 가져오는데 알맞다.

SWF/Charts 위젯부터 설명하겠다. 내가 생각하기에 이 위젯이 전개하기에 가장 쉽다. 노력에 비해 보상도 가장 크다.

SWF/Charts 위젯

" 한편의 그림이 천마디 말보다 낫다"라는 속담을 무시할 수 없으며 특히, 그래프가 관여된 곳에서는 더욱 그렇다. 그러나, 웹에서의 그래프는 언제나 문제가 되며, 대부분의 웹 프레임웍들은 그래핑 툴이 부족하다. 따라서 여러분 스스로 그래프를 만들어야 한다.

XML 로 인코딩 된 데이터를 그릴 수 있는 위젯이 있다면 정말 좋을 것 같지 않은가? 마침 SWF/Charts가 있다. 이 위젯을 사용하려면, 사이트에서 SWF 파일과 이 위젯이 사용하는 추가 SWF 파일들을 다운로드 하고 나서, 사이트에 파일을 설치하고, HTML 페이지 상의 SWF 위젯에 링크를 추가했다. (Listing 1)

Listing 1. Chart_page.html

                
<html><body>

<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub.../swflash.cab#version=6,0,0,0" 
  width="400" height="250">
<param name="movie"
  value="charts.swf?xml_source=chart_data.xml&library_path=charts_library">

<embed
  src="charts.swf?xml_source=chart_data.xml&library_path=charts_library" 
  width="400" height="250" 
  type="application/x-shockwave-flash" 
  pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

</body></html>

Charts.swf 는 두 개의 매개변수를 취한다. 라이브러리 디렉토리의 위치와 XML 데이터의 URL이다. XML 데이터 포맷은 매우 쉽다. Listing 2는 예제이다.

Listing 2. Chart_data.xml

                
<chart>
  <chart_type>bar</chart_type>
  <chart_data>
    <row>
      <null/>
      <string>2005</string>
      <string>2006</string>
    </row>
    <row>
      <string>Projected</string>
      <number>500</number>
      <number>700</number>
    </row>
    <row>
      <string>Actual</string>
      <number>600</number>
      <number>900</number>
    </row>
  </chart_data>
</chart>

이 파일은 차트용 데이터이고, 선택적인 비주얼 정보도 있다. 이 경우, 필자는 차트 유형을 바(bar) 차트로 지정했다. SWF 파일을 다운로드 했던 사이트에는 더 많은 옵션들과 그래프 유형들이 있다.

Firefox 브라우저에서 파일을 검색하면 그림 1과 같은 그래프를 볼 수 있다.

그림 1. Chart Widget
Chart Widget 보기

기본 컬러 스킴과 모습도 멋지며, 그래프는 중심축 값을 보기 좋게 처리했다. 적은 노력으로 전체적으로 큰 효과를 보았다.

분 명히, graph_data.xml 파일을 동적인 웹 페이지로 대체할 수 있었다. 리턴된 데이터가 올바른 포맷으로 되어 있다면 그래프 컨트롤은 적은 부분만 신경 쓰면 된다. 이 글에 있는 대부분의 예제들이 이에 속한다. 사실, 웹 서버(Apache Tomcat 또는 IBM® WebSphere® Application Server)나 웹 프로그래밍 언어(PHP, Microsoft® ASP.NET, Java™ 2 Enterprise Edition [Java EE])를 사용하지 않고도 로컬 파일에 있는 웹 브라우저에서 이 예제들을 실행할 수 있다.

위로

SWF/게이지 위젯

데 이터를 나타내는 또 다른 방법은 게이지로 표현하는 것이다. 개인적으로는 게이지에 대해서는 흥미가 별로 없다. 적은 정보를 나타내는 데도 많은 공간을 차지하기 때문이다. 하지만, 게이지는 전문 대시보드의 핵심 기능이기 때문에, 이들을 빠르게 생성하는 기능은 매우 유용하다.

하지만, 웹이 간단한 바 차트도 잘 수행하지 못한다면, 원형 게이지 역시 수행할 수 없다. 따라서, XML/Graph를 만들었던 회사에 문의했다. 그들도 게이지에 대한 솔루션이 있었다. 바로 XML/Gauge였다.

SWF게이지 위젯을 삽입하는 HTML 페이지로 시작하겠다. (Listing 3)

Listing 3. Gauge_page.html

                
<html><body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/.../swflash.cab#version=6,0,0,0"
  width="110" height="55">
<param name=movie VALUE="gauge.swf?xml_source=gauge_data.xml">
<embed src="gauge.swf?xml_source=gauge_data.xml"
  width="110" height="55" type="application/x-shockwave-flash"
  pluginspace="http://www.macromedia.com/go/getflashplayer">

</embed></object>

</body></html>

gauge.swf 영화는 하나의 인자를 취한다. 데이터의 위치이다. 이 경우, 그 위치는 gauge_data.xml이다. (Listing 4)

Listing 4. Gauge_data.xml

                
<gauge>

<circle fill_color="888888" start="275" fill_alpha="100"
  line_color="555555" line_thickness="3" line_alpha="90"
  radius="50" x="55" end="445" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="90"
  line_thickness="4" line_alpha="20" radius="45" x="55"
  end="440" y="55"/>
<circle fill_color="666666" start="317" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="322" y="55"/>
<circle fill_color="666666" start="337" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="342" y="55"/>
<circle fill_color="666666" start="357" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="362" y="55"/>
<circle fill_color="666666" start="377" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="382" y="55"/>
<circle fill_color="666666" start="397" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="402" y="55"/>
<circle fill_color="666666" start="417" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="422" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="100"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="FF4400" start="280" fill_alpha="100"
  radius="44" x="55" end="310" y="55"/>
<circle fill_color="44FF00" start="50" fill_alpha="100"
  radius="44" x="55" end="80" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="80"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="333333" start="270" fill_alpha="100"
  line_alpha="0" radius="20" x="55" end="450" y="55"/>

<rotate start="280" shake_span="2" shadow_alpha="15"
  step="1" x="55" span="0" y="55" shake_frequency="20">
  <rect fill_color="ffff00" fill_alpha="90" line_alpha="0"
    height="40" x="53" width="4" y="13"/>
</rotate>

<circle fill_color="111111" start="270" fill_alpha="100"
  line_thickness="5" line_alpha="50" radius="15" x="55"
  end="450" y="55"/>

</gauge>

여러분도 보듯, SWF는 이 위젯에 다른 방식을 취했다. 게이지(또는 그래프)용 데이터를 지정하는 대신, 원, 호, 직사각형 같은 그래픽 프리머티브에서 게이지를 구현한다.

솔직히, 필자는 데이터를 제공할 수 있는 기본 게이지를 선호한다. 하지만, 이 방식도 작동하고, 얼마든지 조정이 가능하다. 비록, 필자는 기본 예제들을 몇 개 더 사용했다.

내 브라우저에 있는 페이지로 갈 때, 그림 2와 같은 게이지를 볼 수 있다.

그림 2. Gauge Widget

그 래픽 프리머티브를 지정하는 것으로는, 이 위젯에서 얻을 수 있는 것이 많이 없다고 생각할 수도 있다. 그렇지 않다. 이 프리머티브에는 간단한 애니메이션 기술도 포함되어 있어서 바늘과 소리도 넣을 수 있고 사용자가 이것을 클릭하면 브라우저를 검색하는 중요한 연결 영역을 만드는 기능도 있다. 게다가, 이 콘트롤을 게이지에 사용하는 것뿐만 아니라, 간단한 그래픽 프리머티브 언어를 사용하여 어떤 유형의 이미지와 간단한 애니메이션을 구현할 수 있다.

위로

In-place editing

사 용자들은 이제 데스크탑 애플리케이션에서 In-place editing을 기대하지만, 이러한 기능은 아직까지는 웹에서는 찾아보기 힘들다. Web 2.0에서는 상호 작동이 우수하기 때문에, In-place editing 같은 기술은 보다 더 일반화 된다.

In-place editing을 구현하려면, 직접 작성하거나, JavaScript 프레임웍들 중 하나를 사용한다. 가장 대중적인 툴킷은 Scriptaculous 프레임웍인데, 이것은 prototype.js에 구현된다. Scriptaculous 라이브러리를 사용하면 In-place editing 컨트롤을 매우 쉽게 구현할 수 있다.

In-place editing용 HTML 테스트 파일은 Listing 5를 참조하라.

Listing 5. Inplace.html

                
<html><head>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="controls.js"></script>
<script src="scriptaculous.js"></script>
</head><body>
<table width="100%">
<tr><th width="10%">Name</th>
<td width="90%"><p id="name">Candy bar</p></td>
</tr></table>
<script>
new ajax.InPlaceEditor('name', 'submitted.html' );
</script>
</body>
</html>

Inplace.html에는 필요한 모든 JavaScript 소스 파일이 포함된다. 간단한 테이블에 In-place editing 가능한 데이터를 포함하고 있는 단락을 넣는다. 이 파일의 끝에, 이 단락의 InPlaceEditor 객체를 생성하는 스크립트를 삽입한다.

InPlaceEditor 컨스트럭터는 인자로서 단락의 ID와 편집을 수행한 후에 제출을 처리할 페이지의 URL을 취한다. 이 경우, 이 페이지는 submitted.html이다. 하지만 현실적으로, 이것은 ASP.NET, Java EE, 또는 PHP 페이지 또는 기타 동적 웹 기술이다.

Listing 6은 submitted.html 파일이다.

Listing 6. Submitted.html

                
<p>Name changed!</p>

이제 테스트 할 차례이다. 브라우저를 HTML 파일에서 연다. 이곳에서 원래의 텍스트를 보게 된다. 텍스트에 마우스를 갖다 대면, 노란색으로 변한다. (그림 3)

그림 3. in-place editing의 시작 포인트

노란색 하이라이팅은 이것을 클릭하여 필드를 편집할 수 있다는 사용자용 인디케이터이다. 따라서, 필자는 그 필드를 클릭하고 Name 필드, ok 버튼, cancel 링크를 만들었다. (그림 4)

그림 4. 클릭한 후 텍스트 편집하기

텍스트를 수정하고 ok를 클릭한다. 이렇게 하면 데이터가 서버에 게시된다. (또는 이 경우 submitted.html page). 서버는 원래의 텍스트를 대체하는 HTML 페이지를 리턴한다. 이 경우에, 필자는 Name changed!를 보낸다. (그림 5) 실제로, 이것은 데이터의 새로운 값이 되어야 한다.

그림 5. ok를 클릭한 후 새로운 콘텐트

이 와 같은 간단한 인터페이스 업그레이드는 애플리케이션의 가용성에 차이를 만든다. 느린 서버에서 페이지 로드를 기다리는 것은 구식 인터페이스이다. In-place editing 같은 간단한 툴을 사용하면 구현 복잡성의 관점에서 볼 때 애플리케이션에 간단한 몸치장을 한 것과 같다.

위로

DHTML 윈도우

브 라우저에서 윈도우를 웹 페이지에 구현하기 힘들다는 것은 좋은 일일지도 모른다. 하지만 가끔씩, 작은 윈도우도 좋은 것이 될 수 있다. 이는 경고를 디스플레이 하거나 작은 폼을 가져오는데 편리하며, 페이지의 내용을 덮어버리는 성가신 광고를 실행하기에 좋은 방법이다. 잠깐 기다려라. 마지막 말은 취소해야겠다.

어쨌든, 내가 말했지만 Dynamic HTML (DHTML) 페이지용 윈도우를 구현하는 것은 쉬운 일이 아니다. 그래서, Protoype.js 라이브러리에 기반한 매우 강력한 윈도우 패키지를 발견했을 때 너무 기뻤다. 사용하기 쉬울 뿐만 아니라, 인터페이스도 가볍고 모든 브라우저에서 잘 작동한다. Listing 7은 window.html 페이지 모습이다.

Listing 7. Window.html

                
<html>
<head>
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="prototype.js"></script>
<script src="window.js"></script>
</head>
<body>
<script>
var win = new Window( 'myPopup', {
   title: "Terms and Conditions",
   top:70, left:100, width:300, height:200,
   resizable: true, url: "terms.html",
   showEffectOptions: { duration: 3 }
  } 
);
win.show();
</script>
</body>
</html>

prototype.js와 window.js 소스 파일을 헤더로 가져온다. 그런 다음, 내가 좋아하는 매개변수(크기, 위치, 타이틀, 위젯이 콘텐트를 얻는 페이지의 URL)로 팝(pop) 객체를 구현한다. ajax를 통해 페이지에서 콘텐트를 로딩하는 것은 콘텐트를 얻는 방법들 중 하나이다. JavaScript 코드를 통해 동적으로 설정할 수 있고 또는 기존 <div> 태그 주위에 윈도우를 래핑할 수 있다.

이 경우 필자는 terms.html 파일을 참조한다. (Listing 8)

Listing 8. Terms.html

                
<html><body bgcolor="white">
<h1>Terms and Conditions</h1>
<p>In order to use this site you must comply
with the following conditions...</p>
</body></html>

내 브라우저에서 이 페이지를 실행하면 그림 6과 같은 윈도우를 보게 된다.

그림 6. 초기 윈도우

이것은 단지 두 개의 Mac 윈도우만은 아니다. Mac 처럼 보이는 DHTML 윈도우가 있고 그 밖에는 실제 Firefox 브라우저 윈도우이다. 하지만 어쨌든 같은 것으로 보여진다.

윈도우를 늘려 이동할 수 있다. (그림 7)

그림 7. 이동 및 크기 조정 후 윈도우 모습

필 자는 본 기술자료와 내 작업을 위해 여러 드물 윈도우 라이브러리를 검토했고, 이것이 가장 좋았다고 자신 있게 말할 수 있다. 다른 윈도우 패키지들은 실행 문제들이 있었고, 세그먼트에서 실행되며, 사이즈를 재조정 하면 형편없이 실행되었다. 브라우저 안에 갇힌 실제 윈도우처럼 보인다.

위로

carousel 위젯

많 은 사용자 인터페이스(UI)를 다루어본 사람이라면 실제 상태를 나타내는 것이 중요하다고 말할 것이다. 꽉 찬 느낌을 주지 않고 주어진 공간에 최대로 담을 수 있는 데이터를 넣는 것이 중요하다. Apple iTunes의 carousel 컨트롤을 처음 보았을 때 깊은 감명을 받았다.

carousel 컨트롤은 고정된 공간에서 여러 이미지들을 보여준다. 이미지 블록의 왼쪽과 오른쪽은 왼쪽 화살표와 오른쪽 화살표이다. 화살표를 클릭하면, 이미지는 왼쪽 또는 오른쪽으로 이동하고, 새로운 이미지로 대체된다. iTunes 에서, 이 이미지는 앨범 커버였고, 각 장르마다 carousel 컨트롤이 있었다.

공간 절약은 중요하다. 세 개의 공간에 30 개의 앨범 커버를 넣을 수 있고, 각각 알맞은 크기로 보여줄 수 있다. 또한, 이 컨트롤은 매력적이다. 마치, 단순화 된 스크롤바 같다.

carousel의 단점은 구현이 쉽지 않다는 점이다. 특히, 이것의 특징 중 하나가 왼쪽 또는 오른쪽으로 이동하는 이미지의 애니메이션이기 때문이다. 따라서 jQuery JavaScript 프레임웍에 구현된 carousel이라고 하는 오픈 소스 carousel에 대해 알게 되었을 때 기뻤다.

필자는 웹 페이지에 간단한 carousel 위젯을 구현했다. ( Listing 9)

Listing 9. Carousel.html

                
<html>
<head>
<script type="text/javascript" src="js/jquery-1.0.3.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<style type="text/css">
#mycarousel { display: none; }
.jcarousel-scope {  position: relative; width: 255px;
  -moz-border-radius: 10px; background: #D4D0C8;
  border: 1px solid #808080; padding: 20px 45px; }
.jcarousel-list li { width: 81px; height: 81px;
  margin-right: 7px; }
.jcarousel-list li img { border: 1px solid #808080; }
.jcarousel-list li a { display:block;  outline: none;
  border: 2px solid #D4D0C8; -moz-outline:none; }
.jcarousel-list li a:hover { border: 2px solid #808080; }
.jcarousel-next {  position: absolute; top: 45px;
  right: 5px; cursor: pointer; }
.jcarousel-next-disabled { cursor: default; }
.jcarousel-prev { position: absolute; top: 45px;
  left: 5px; cursor: pointer; }
.jcarousel-prev-disabled { cursor: default; }
.loading { position: absolute; top: 0px;
  right: 0px; display: none; }
</style>
<script type="text/javascript">
function loadItemHandler( carousel, start, last, available ) {
  if (available) { carousel.loaded(); return; }
  var cr = carousel;
  jQuery.get("data.xml", function(data) { appendItemCallback(cr, start, last, data); });
};

function appendItemCallback( carousel, start, last, data ) {
  var items = data.match( /(\<img .*?\>)/g );

  for (i = start; i <= last; i++) {
    if ( items[ i - 1 ] == undefined ) break;
    var item = carousel.add( i, getItemHTML( items[i-1]) );
    item.each(function() {
      jQuery("a.thickbox", this).click(function() {
        var t = this.title || this.name || null;
        var g = this.rel || false;
        TB_show(t,this.href,g);
        this.blur();
        return false;
      });
    });
  }
  carousel.loaded();
};

function getItemHTML( item ) {
  var found = item.match( /href=\"(.*?)\"/ );
  var url   = jQuery.trim(found[1]);
  var title = jQuery.trim(found[1]);
  var url_m = url.replace(/_s.jpg/g, '_m.jpg');
  return '<a href="' + url_m +
	'" title="' + title +
	'" class="thickbox"><img src="' + url +
	'" width="' + 75 + '" height="' + 75 +
	'" alt="' + title + '" /></a>';
};

var nextOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-over.gif"); };

var nextOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next.gif"); };

var nextDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-down.gif"); };

function nextButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/next.gif")
      .mouseover(nextOver).mouseout(nextOut).mousedown(nextDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/next-disabled.gif")
      .unmouseover(nextOver).unmouseout(nextOut).unmousedown(nextDown);
  }
}

var prevOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-over.gif"); };

var prevOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev.gif"); };

var prevDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-down.gif"); };

function prevButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/prev.gif")
      .mouseover(prevOver).mouseout(prevOut).mousedown(prevDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/prev-disabled.gif")
      .unmouseover(prevOver).unmouseout(prevOut).unmousedown(prevDown);
  }
}

jQuery(document).ready(function() {
  jQuery().ajaxStart(function() { jQuery(".loading").show(); });
  jQuery().ajaxStop(function() { jQuery(".loading").hide(); });
  jQuery("#mycarousel").jcarousel({
    itemVisible: 3, itemScroll: 2, wrap: true,
    loadItemHandler: loadItemHandler,
    nextButtonStateHandler: nextButtonStateHandler,
    prevButtonStateHandler: prevButtonStateHandler
  });
});
</script></head><body><div id="mycarousel">
<div class="loading">
<img src="img/loading.gif" width="16" height="16" border="0" />Loading...</div>
<img src="img/horizontal-ie7/prev.gif" border="0" class="jcarousel-prev" />
<img src="img/horizontal-ie7/next.gif" border="0" class="jcarousel-next" />
<ul></ul>
</div></body></html>

이전 예제들 보다 방대하다. 하지만 코드 대부분이 그래픽을 설정하고 서버에서 리턴된 ajax 데이터를 인터프리팅 하는 것이다. 사실, 이 글에 소개된 대부분의 코드는 다운로드에서 제공하는 예제를 기반으로 하고 있다. 따라서 이 콘트롤을 사용하기 위해 많은 부분을 배우거나 문서를 읽을 필요가 없었다.

이 carousel용 데이터는 Listing 10에 나와있다.

Listing 10. Data.xml

                
<images>
<img href="pics/image1.jpg" />
<img href="pics/image2.jpg" />
<img href="pics/image3.jpg" />
<img href="pics/image4.jpg" />
</images>

이 경우, 파일은 <images> 태그와 각 이미지의 URL을 포함하고 있는 <img> 태그 세트들을 갖고 있는 XML 포맷으로 되어있다. 어떤 포맷을 사용하든지 간에, 이 컨트롤은 기본적으로 ajax 위젯이 아니다. 필자는 XML을 인터프리팅 하는 코드를 작성 중이고, 각각의 슬라이드 엘리먼트를 carousel에 구현하고 있다. 결과는 그림 8과 같다.

그림 8. 이미지 carousel

이미지를 클릭하고 그 이미지가 있는 페이지로 갈 수 있다. (또는 내가 지정한 URL로 간다.) 또는, 오른쪽/왼쪽 화살표를 클릭하여 carousel 주위를 스크롤 하여 더 많은 이미지들을 볼 수 있다. 효과는 매우 좋다.

위로

결론

웹 상에서 사용할 수 있는 무료/상용 위젯과 툴들을 소개했다. 이 글을 쓰면서 보았던 많은 툴들이 ajax를 사용하지 않았고, 이 주제에도 잘 맞지 않았다. 하지만, 그 자체로도 주목할 만한 가치가 있었다. 특히, 필자는 고급의 오픈 소스 WYSIWYG 에디터를 다운로드 할 수 있다는 것에 놀랐다. 사용자들은 자신들의 사이트에 있는 콘텐트에 볼드체, 이탤릭체, 링크, 이미지 등을 사용하려면 텍스트 박스에서 HTML을 사용해야 하는 것에 많이 좌절했다. 이러한 에디터들은 모든 HTML을 숨기고 사용자에게 워드 프로세스 애플리케이션과 비슷한 느낌으로 편집할 수 있도록 해준다.

소셜 북마크


	mar.gar.in

	Digg

	del.icio.us

	Slashdot

WYSIWYG 에디터 외에도, 프로그래스 바, 탭 다이얼로그 박스, 아코디언 컨트롤, 클락, 데이트 피커(date picker), RSS, Outline Processor Markup Language (OPML) 리더용 솔루션도 있다. 심지어 대화형 터미널 윈도우용 솔루션도 있다. DHTML 또는 Flash 컨트롤을 직접 구현하기 전에, 인터넷에서 (무료로) 무엇을 사용할 수 있는지 찾아봐야 한다. 이러한 위젯들을 사용하여 많은 노력을 들이지 않고도 사이트에 역동성을 부여할 수 있다.

기사의 원문보기

ajax and XML: Five cool ajax widgets

참고자료

교육

한국 developerWorks XML 존
jQuery와 prototype.js: 유명한 JavaScript 프레임웍 참고
IBM XML 인증
XML 기술자료: 한국 developerWorks XML 존의 기술자료, 팁, 튜토리얼, 표준, IBM Redbook 참고하기
developerWorks 기술 이벤트와 웹캐스트
ajaxian

제품 및 기술 얻기

JCarousel
SWF/Gauge와 SWF/Charts:SWF/Gauge와 SWF/Charts, maani.us. XML 슬라이드쇼 위젯
DHTML window
Scriptaculous: Scriptaculous 다운로드, script.aculo.us 사이트의 추가자료, Prototype library.

토론

필자소개


		Jack D. Herrington은 20년 경력을 지닌 소프트웨어 엔지니어이다. Code Generation in Action, Podcasting Hacks, PHP Hacks 의 저자이다. 30개 이상의 기술자료를 기고했다. (jherr@pobox.com)