List-Grid& MX-Grid 이미지 구현

 학습목표

List-Grid의 필드 유형 변경 기능과 MX-Grid 지원 함수를 사용해 셀에 서버에 저장된 이미지를 나타낼 수 있습니다.

또한 List-Grid 수식을 이용하여 조건에 따라 나타낼 이미지를 설정할 수 있습니다.

1. List-Grid 이미지 구현

 List-Grid의 필드 유형 변경 기능을 사용하여 이미지를 나타낼 수 있습니다. 

컨트롤 생성

1. Label과  List-Grid 컨트롤을 생성합니다.
   - Label :  [UI Bot > Label]
   - List-Grid :  [UI Bot > Grid > List-Grid]
   
   
   
   
2. Lable 컨트롤의 속성을 변경합니다.
   - Text :  "1. LIST-GRID 이미지 구현"

데이터 가져오기

1. [편집 그룹 > Script Editor]를 선택하여 스크립트 에디터 창을 실행합니다.
   
   
   
   
   
2. Data Source를 마우스 우클릭한 뒤, New를 선택하여 새로운 데이터 소스를 생성합니다.
   
   
   
   
3. Connection 선택창을 클릭하여 원하는 DB에 연결합니다.
   - DB : edu_40
   
   
   
   

4. 데이터를 가져오기 위해 SQL을 작성하고 [Execute] 버튼을 클릭하여 쿼리의 실행 결과를 확인하고 저장합니다.

   

   Discription

   사용된 SQL

   SQL  원본 펼치기

   SELECT  
   	FLAG_IMAGE_NAME,
   	COUNTRY_NAME
   FROM EDU_DEV_COUNTRY_FLAG 
   ORDER BY 1 ASC LIMIT 20

   이미지 파일명과 확장자

   쿼리문을 사용하여 데이터를 가져올 때, 이미지 파일명을 이미지 파일의 확장자와 같이 가져와야 합니다. DB 테이블에 데이터가 들어있다면 그대로 가져오면 되지만 만약 파일명만 존재하고 확장자가 존재하지 않는다면 데이터를 가공하여 가져와야 합니다.

   ex) 예시 SQL

   SQL  원본 펼치기

   SELECT  
   	CONCAT(COUNTRY_NAME, '.png') AS "FLAG_IMAGE_NAME",
   	COUNTRY_NAME
   FROM EDU_DEV_COUNTRY_FLAG 
   ORDER BY 1 ASC LIMIT 20

   
   

    중요

   이미지 파일은 SQL로 가져온 파일명과 똑같은 이름과 확장자로 서버에 업로드 되어있어야 합니다.  (필수)

   데이터 바인딩

   List-Grid에 가져온 데이터를 연결합니다.
   - DataSource : Data1

List-Grid 디자인

1. List-Grid를 마우스 우클릭하여 디자인 설정 창을 실행합니다.
   
   
   
   
   
2. 좌측 리스트에서 SQL을 사용해 가져온 데이터 중 이미지 파일명의 필드를 선택하고 필드 유형을 [Image]로 변경하고 원하는 이미지의 너비와 높이를 설정합니다.
   - 필드 유형 :  Image
   - 이미지 너비 : 45
   - 이미지 높이 : 30
   
   
   
   
3. 이미지의 크기를 설정했으면 필드에 이미지가 나타날 수 있게 필드의 너비와 높이를 설정합니다.
   - 필드 너비 : 45
   - 필드 높이 : 30
   
   
   
   
4. 헤더 보기의 Row와 Column의 체크 박스를 해제하여 비활성화한 뒤,  [확인] 버튼을 클릭하여 설정을 완료합니다.
   
   
   
   
5. [실행] 버튼을 클릭하여 이미지가 나타나는 것을 확인합니다.
   \
   

2. MX-Grid이미지 구현

 MX-Grid에서 지원하는 자체 함수를 사용하여 원하는 셀에 서버에 업로드 된 이미지를 불러올 수 있습니다.

컨트롤 생성

1. MX-Grid 이미지 구현을 위해 Label과  MX-Grid 컨트롤을 생성합니다.
   - Label :  [UI Bot > Label]
   - List-Grid :  [UI Bot > Grid > MX-Grid]
   
   
   
   
2. Lable 컨트롤의 속성을 변경합니다.
   - Text : "2. MX-Grid 이미지 구현"
   
   
   

MX-Grid 디자인 실행

1. 생성한 MX-Grid 컨트롤에서 마우스 우클릭하여 [디자인]을 클릭합니다.
   
   
   
   
2. 표시할 이미지의 설명을 입력합니다. 
   - B2 : SALE < 70
   - B3 : 40 <SALE< 70
   - B4 : SALE < 40
   
   
   
   
3. 서버에 저장된 이미지 파일명을 확장자와 같이 입력합니다.
   - C2 : GREAT.png
   - C3 : GOOD.png
   - C4 : BAD.png
   
   
   
   

4. 이미지를 표시하기 위해 MX-Grid 함수를 사용합니다.
   - D2 : =AUD_IMAGE(C2)
   - D3 : =AUD_IMAGE(C3)
   - D4 : =AUD_IMAGE(C4)
   

   Discription

   AUD_IMAGE 함수

   : 셀에 이미지를 출력하는 함수로 엑셀 내장 함수가 아니라 AUD에서 지원하는 MX-Grid 함수

   *함수 구문

   = AUD_IMAGE(imageName)

   - imageName 필수 요소입니다. 서버에 저장된 이미지의 경로 정보입니다. 파일명과 확장자가 포함되어야 합니다.

   ▶ 참고

   • 콜론(:)으로 시작할 경우 현재 엑셀 파일 내에 동일한 이름을 가진 이미지의 이름을 출력합니다.
   • 웹 경로(http://, https://) 로 시작하는 경우 해당 URL의 이미지를 가져옵니다. (단 서버에서 해당 URL으로 연결이 되어야 합니다.)
   • 그 외에는 해당 이미지를 reports/WEB_IMAGES/ 하위에서 탐색합니다.

5. [SAVE]버튼을 클릭하여 파일을 저장합니다.
   
   
   
   

6. AUD에서 [실행] 버튼을 클릭하여 이미지가 정상적으로 출력되는지 확인합니다.
   

3. List-Grid 조건부 이미지 구현

"1. List-Grid 이미지 구현"에서 완성한 List-Grid를 사용하여 조건부 이미지 구현을 할 수 있습니다.

컨트롤 생성

1. List-Grid 조건부 이미지 구현을 위해 Label을 생성합니다.
   - Label :  [UI Bot > Label]
   
   
   
   
2. "1. List-Grid 이미지 구현"에서 완성한 List-Grid를 복제합니다. 
   - List-Grid :  [List-Grid> 우클릭 > 복사 & 붙여넣기]
   
   
   
   
3. Lable 컨트롤의 속성을 변경합니다.
   - Text :  "3. LIST-GRID 조건부 이미지 구현"
   
   

데이터 가져오기

1. [편집 그룹 > Script Editor]를 선택하여 스크립트 에디터 창을 실행합니다.
   
   
   
   

2. Data Source를 마우스 우 클릭하여 New를 클릭하고 SQL을 작성한 뒤, [Execute] 버튼을 클릭하여 쿼리의 실행 결과를 확인하고 저장합니다.
   

   Discription

   사용된 SQL

   SQL  원본 펼치기

   SELECT  
   	FLAG_IMAGE_NAME
   	,COUNTRY_NAME
    	,VALUE AS "SALE"
   FROM EDU_DEV_COUNTRY_FLAG 
   ORDER BY 1 ASC LIMIT 20

   
   

3. List-Grid에 가져온 데이터를 연결합니다.
   - DataSource : Data2
   

List-Grid 디자인

1. List-Grid를 마우스 우클릭하여 디자인 설정 창을 실행합니다.
   
   
   
   
2. 이미지 필드를 선택하고 수식의 [] 버튼을 클릭하여 수식 편집기 창을 실행합니다.
   
   
   
   

3. SALE 필드의 값에 따라 이미지가 변경되는 수식을 작성하고 [적용] 버튼을 눌러 수식을 적용합니다.
   

   Discription

   사용된 수식

   수식  원본 펼치기

   CASE(
     [SALE] > 70, "GREAT.png",
     [SALE] < 71 AND [SALE] > 40, "GOOD.png",
     [SALE] < 41 , "BAD.png")

4. 이미지의 사이즈와 형태에 맞춰서 너비와 높이를 조절한 뒤, [확인] 버튼을 눌러 설정을 완료합니다.
   - 이미지 너비 : 30
   - 이미지 높이 : 30
   
   
   
   
5. [실행] 버튼을 클릭하여 이미지가 정상적으로 출력되는지 확인합니다.