ImageViewer 소개

ImageViewer 컴포넌트는 이미지 콘텐츠를 화면에 보이도록 처리합니다. 웹에서 이미지를 처리하는 것은 이미지를 보여주고 정렬하는 수준이라면 ImageViewer 컴포넌트는 해당 영역에 텍스트를 추가하고 편집할 수 있습니다.

사용 예

이미지는 단독으로 쓰이기도 하지만 주로 텍스트를 보조하기 위한 수단으로 사용합니다. 텍스트를 사용하는 단락과 어울리게 이미지를 배치하고 활용하는 방법이 필요합니다. 또한, 이미지를 적당한 크기로 배치하는 것도 중요합니다.

ImageViewer 만들기

ImageViewer 컴포넌트는 이미지를 담기 위한 용도로 사용합니다. 여기에 텍스트를 추가해서 이미지를 설명할 수 있으며 경계선을 추가해서 액자와 같은 효과를 줄 수 있습니다.

ImageViewer 컴포넌트 생성하기

툴바에서 ImageViewer 항목을 선택한 후, Form 위에 드래그 앤 드롭해 생성합니다. 빈 흰색 상자가 화면에 표시됩니다.

image 속성값 설정하기

image 속성값에는 이미지 파일이 있는 URL을 지정할 수 있습니다. 공개된 이미지 파일 중 아래 이미지 주소를 입력합니다. 이미지 파일 크기가 320x480이므로 ImageViewer 컴포넌트의 width, height 속성값도 320, 480으로 지정합니다.

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Bob_Dylan_1978.jpg/320px-Bob_Dylan_1978.jpg

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행합니다. 화면에 지정된 이미지가 나타나는 것을 확인할 수 있습니다.

ImageViewer 컴포넌트를 생성하면 text 속성값이 default 값으로 설정됩니다. text가 이미지 위에 보이지 않게 하려면 해당 속성값을 지워야 합니다.

이미지 폴더에 있는 이미지 보여주기

애플리케이션에서 자주 사용하는 이미지는 이미지 폴더에 따로 저장해놓고 필요한 이미지를 사용할 수 있습니다. 넥사크로 스튜디오에서는 서비스 폴더를 추가해서 이미지 폴더에 손쉽게 접근할 수 있습니다.

예제

버튼 클릭 시 지정된 이미지를 로드해 화면에 표시합니다. 이미지 파일은 미리 올려놓은 파일을 사용합니다.

sample_imageviewer_01.xfdl

예제에서 사용한 핵심 기능

image: 표시될 이미지 파일의 경로를 지정합니다. 이미지를 지정하는 방식은 여러 방식을 사용할 수 있습니다. 외부 경로에 있는 파일이라면 URL을 직접 지정하고 애플리케이션과 같은 프로젝트에 포함된 경우라면 TypeDefinition에 지정된 이미지를 사용합니다. 이번 예제에서는 TypeDefinition에 지정된 이미지를 사용합니다.

예제 구현 방법

화면 구성하기

ImageViewer, Button 컴포넌트를 예제 화면과 같이 배치합니다. ImageViewer 컴포넌트의 width, height 속성값은 320, 480으로 지정합니다. 그리고 화면에 text가 표시되지 않도록 default 속성값은 삭제합니다.

ImageResource 추가하기

Resource Explorer에서 ImageResource 항목을 선택하고 컨텍스트 메뉴에서 [Import ImageResource] 항목을 선택합니다. 파일 대화 상자를 열어 이미지 파일을 선택하면 ImageResource를 추가할 수 있습니다.

추가된 이미지 파일은 Resource Explorer에서 확인할 수 있습니다.

참고한 이미지 파일 URL은 아래와 같습니다.

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Bob_Dylan_1978.jpg/160px-Bob_Dylan_1978.jpg

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Bob_Dylan_1978.jpg/320px-Bob_Dylan_1978.jpg

Image 속성값 지정하기

애플리케이션이 실행됐을 때 보여줄 이미지를 지정합니다. ImageViewer 컴포넌트를 선택하고 속성창에서 image 속성값 항목 옆에 있는 목록을 펼쳐보면 앞 단계에서 ImageResource로 등록된 이미지 파일을 확인할 수 있습니다.

Button 컴포넌트 이벤트 함수 작성하기

Button 컴포넌트를 선택한 후 onclick 이벤트 함수를 작성합니다. 각 버튼에 지정된 이미지 파일을 image 속성값으로 지정합니다.

this.btn320_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.set_image("imagerc::320px-Bob_Dylan_1978.jpg");
};

this.btn160_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.set_image("imagerc::160px-Bob_Dylan_1978.jpg");
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 이미지를 바꾸어가면서 확인해봅니다.

이미지 크기 조정하기

이미지를 화면에 표시할때 지정된 크기로 보여주어야 하는 경우 자동으로 크기를 조정하는 방식을 살펴봅니다.

예제

버튼 클릭 시 ImageViewer 컴포넌트의 크기에 따라 자동으로 이미지 크기를 조정합니다.

sample_imageviewer_02.xfdl

예제에서 사용한 핵심 기능

stretch: 이미지 크기를 늘리거나 줄여주는 기능을 처리합니다. 3가지 파라미터를 지정할 수 있습니다. 속성값을 "fit"으로 지정하면 가로, 세로 크기를 ImageViewer 컴포넌트의 크기에 맞춥니다. 이 과정에서 이미지의 가로, 세로 비율이 변경되면 이미지가 일그러진 상태로 보일 수 있습니다. "fixaspectratio"으로 지정한 경우에는 가로, 세로 비율은 유지되지만 공백이 생길 수 있습니다.

예제 구현 방법

화면 구성하기

ImageViewer, Button 컴포넌트를 예제 화면과 같이 배치합니다. ImageViewer 컴포넌트의 width, height 속성값은 샘플에서 사용할 이미지 크기보다 살짝 크게 지정합니다.

ImageResource 추가하기

추가된 이미지 파일은 Resource Explorer에서 확인할 수 있습니다.

참고한 이미지 파일 URL은 아래와 같습니다.

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Bob_Dylan_1978.jpg/160px-Bob_Dylan_1978.jpg

Image 속성값 지정하기

Button 컴포넌트 이벤트 함수 작성하기

Button 컴포넌트를 선택한 후 onclick 이벤트 함수를 작성합니다. 각 버튼에 지정된 stretch 속성값을 지정합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.set_stretch('fixaspectratio');
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.set_stretch('fit');
};

this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.set_stretch('none');
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 이미지 크기를 변경해봅니다.

Base64로 인코딩된 이미지 보여주기

이미지 파일을 변환한 Base 64 코드값을 다시 이미지로 보여주는 방법을 살펴봅니다.

예제

Edit 컴포넌트에 Base 64 코드값을 입력하고 Button 컴포넌트를 클릭하면 아래에 변환된 이미지와 이미지 크기 정보를 보여줍니다.

이미지 파일을 변환해 Base 64 코드값을 제공하는 온라인 사이트를 활용해 테스트해볼 수 있습니다.

아래 주소에서 이미지 파일을 업로드하면 Base 64 코드값을 확인할 수 있습니다.

https://www.base64-image.de/

sample_imageviewer_03.xfdl

예제에서 사용한 핵심 기능

imagewidth, imageheight: 화면에 표시할 이미지의 너비, 높이값을 반환하거나 설정할 수 있습니다.

넥사크로 브라우저를 사용하는 경우에는 system.saveToImageBase64String 메소드를 사용해 화면에 보여지는 컴포넌트 또는 오브젝트를 Base64로 인코딩된 문자열을 얻을 수 있습니다.

예제 구현 방법

Edit 컴포넌트와 Button 컴포넌트를 화면에 배치합니다.

Edit 컴포넌트 아래에 Static 컴포넌트를 배치하고 그 아래에 ImageViewer 컴포넌트를 배치합니다. Static 컴포넌트에는 표시할 이미지의 크기 정보를 보여줄겁니다.

ImageViewer 컴포넌트의 fittocontents 속성값은 "both"로 지정합니다. ImageViewer 컴포넌트의 크기와 상관없이 불러오는 이미지 파일 크기를 기준으로 표시됩니다.

Button 컴포넌트에 onclick 이벤트를 아래와 같이 추가합니다. Edit 컴포넌트에 입력된 텍스트를 그대로 image 속성값으로 지정합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ImageViewer00.set_image(this.Edit00.value);
};

ImageViewer 컴포넌트에 onload 이벤트를 아래와 같이 추가합니다. 이미지를 불러오면서 크기 정보를 표시하고 resetScroll 메소드를 호출해 화면 상태를 갱신합니다.

this.ImageViewer00_onload = function(obj:nexacro.ImageViewer,e:nexacro.LoadEventInfo)
{
	this.Static00.set_text(this.ImageViewer00.imagewidth + " x " + this.ImageViewer00.imageheight);
	this.resetScroll();
};

QuickView(Ctrl + F6)로 실행한 후 Base64 인코딩된 문자열을 입력하고 버튼을 클릭해 이미지를 확인합니다.

이미지를 찾지 못할 때 대체 이미지 보여주기

이미지 파일명이 잘못되었거나 서버에 문제가 있을 때 대체 이미지를 보여주는 방식입니다. 특정 이미지 파일에 접근하지 못하는 경우에 유용할 수 있습니다.

예제

버튼을 클릭하면 두 개의 ImageViewer 컴포넌트에 image 속성값을 접속할 수 없는 URL로 지정합니다. 하나는 대체 이미지를 표시하고 하나는 깨진 이미지를 표시합니다.

sample_imageviewer_04.xfdl

예제에서 사용한 핵심 기능

imagewidth, imageheight: 화면에 표시할 이미지의 너비, 높이값을 반환합니다. 이미지를 가져오지 못한 경우에는 0을 반환합니다.

예제 구현 방법

ImageViewer 컴포넌트와 Button 컴포넌트를 화면에 배치합니다.

Button 컴포넌트에 onclick 이벤트를 아래와 같이 추가합니다. 실제 없는 URL 값을 image 속성값으로 지정합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ImageViewer00.set_image("https://dummy/Jack_Black_2007.jpg");
	this.ImageViewer01.set_image("https://dummy/Jack_Black_2007.jpg");
};

첫 번째 ImageViewer 컴포넌트에 onload 이벤트를 아래와 같이 추가합니다.

// https://commons.wikimedia.org/wiki/File:2016_RiP_Tenacious_D_-_Jack_Black_-_by_2eight_-_8SC8891.jpg
this.ImageViewer00_onload = function(obj:nexacro.ImageViewer,e:nexacro.LoadEventInfo)
{
	if(obj.imageheight == 0 && obj.imagewidth == 0)
	{
		this.ImageViewer00.set_image("https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/2016_RiP_Tenacious_D_-_Jack_Black_-_by_2eight_-_8SC8891.jpg/160px-2016_RiP_Tenacious_D_-_Jack_Black_-_by_2eight_-_8SC8891.jpg");
	}
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해서 이미지 표시 여부를 확인합니다.

이미지가 ImageViewer보다 클 경우 스크롤 처리하기

ImageViewer 컴포넌트는 자체 스크롤바를 가지고 있지 않아서 이미지 크기가 큰 경우에는 전체 이미지를 확인할 수 없습니다. ImageViewer 컴포넌트를 감싸는 Div 컴포넌트를 사용해 스크롤 기능을 처리하는 방법을 살펴봅니다.

예제

320x480 버튼 클릭 시 화면에 보여지는 ImageViewe보다 큰 크기의 이미지를 로딩하는데, 이때 스크롤바가 활성화되며 이미지 전체를 탐색할 수 있습니다.

sample_imageviewer_05.xfdl

예제에서 사용한 핵심 기능

imagewidth, imageheight: 이미지 로딩 시 화면에 표시할 이미지의 너비, 높이값을 반환합니다. 이미지 크기에 따라 ImageViewer 컴포넌트의 크기를 설정합니다.

예제 구현 방법

Div 컴포넌트를 배치하고 그 안에 ImageViewer 컴포넌트를 배치합니다. 그리고 Button 컴포넌트를 화면에 배치합니다.

Button 컴포넌트에 onclick 이벤트를 아래와 같이 추가합니다. 실제 없는 URL 값을 image 속성값으로 지정합니다.

this.btn320_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Div00.form.imageviewerMain.set_image("imagerc::320px-Bob_Dylan_1978.jpg");
};

this.btn160_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Div00.form.imageviewerMain.set_image("imagerc::160px-Bob_Dylan_1978.jpg");
};

ImageViewer 컴포넌트에 onload 이벤트를 아래와 같이 추가합니다.

이미지가 정상적으로 로딩되면 ImageViewer 컴포넌트의 높이와 너비를 이미지 크기에 맞게 설정합니다. 실제 표시되는 것은 ImageViewer 컴포넌트의 스크롤바가 아니라 Div 컴포넌트의 스크롤바가 보여집니다.

this.Div00_imageviewerMain_onload = function(obj:nexacro.ImageViewer,e:nexacro.LoadEventInfo)
{
	var nHeight = obj.imageheight;
	var nWidth = obj.imagewidth;
	
	obj.set_height(nHeight);
	obj.set_width(nWidth);
	
	this.Div00.form.resetScroll();
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해서 스크롤바 표시 여부를 확인합니다.