프로그래밍 – 페이지 105

2011-12-092017-01-31

[Flex] SparkSkin을 통한 버튼 디자인

플랙스에서 컴포넌트의 스킨을 디자인하는 가장 쉬운 방법은 이미지를 이용하는 것입니다. 예를 들어 버튼의 경우.. 버튼의 up, over, down, disabled 상태에 따라 각기 다른 이미지를 만들어 주고 지정해 주면 됩니다. 디자이너의 역량에 따라 매우 높은 퀄리티를 낼 수 있습니다.

이 글은 이미지를 이용하는 방식이 아닌.. 각 상태에 따라 직접 그려주는 방법에 대한 설명입니다. 이렇게 이미지가 아닌 직접 버튼의 스킨을 그려주는 방식에 대한 장점은… 버튼의 크기가 변경이 되어도 스킨이 깨지않고 자연스럽게 표현할 수 있다는 점입니다.
사용자 삽입 이미지 설명을 위해 제가 테스트 해 본 것은 버튼을 Aqua Style로 표현해 보는 것입니다. 위의 이미지가 실제 제 스스로 만들어본 버튼에 대한 Aqua 스킨입니다. SparkSkin 클래스의 파생 중에서 버튼에 대한 스킨은 SparkButtonSkin입니다.

일반적으로 SparkSkin은 레이어라는 개념으로 스킨을 입히게 됩니다. 여기서 직접 만들어 볼 버튼의 Aqua Style은 다음과 같은 레이어로 구성되어져 있으며 위의 이미지에 대한 버튼이 바로 아래의 레이어로 구성되어져 있습니다.

border
aqua
labelDisplay
blaze

좀더 고급스러운 Aqua 스타일을 제공하기 위해서는 더 많은 레이어가 필요하겠지만.. 간단이 이 정도의 레이어만을 구성해 봄으로써 Aqua 스타일의 스킨을 버튼에 입혀 보겠습니다. 위의 레이어 중 labelDisplay는 반드시 존재해야 하는 id 명으로써 버튼의 텍스트 라벨이 적용될 것으로 실제 Label 컴포넌트로 구성됩니다. 또한 위의 4개의 레이어의 순서 역시 중요합니다. 즉 가장 밑에 border가 존재하고 그 위에 aqua가.. 그리고 labelDisplay가 위치하며 가장 위에 blaze가 나타납니다.

먼저 실제 border 에 대한 FXG 코드입니다. 플렉스는 스킨에 대해 FXG(Flash XML Graphic)를 이용해 그려줍니다.

위의 FXG 코드는 다음과 같은 결과를 그려냅니다.

사용자 삽입 이미지
다음은 aqua 에 대한 FXG입니다.

위의 FXG 코드에 대한 결과는 다음과 같습니다.

사용자 삽입 이미지
그리고 라벨 텍스트를 표현할 코드는 다음과 같습니다.

텍스트를 표현해기 위해 Label 컴포넌트를 사용했습니다. 결과는 다음과 같습니다.

사용자 삽입 이미지
끝으로 blaze 레이어에 대한 FXG 코드는 다음과 같습니다.

이 레이어 만을 하얀색 배경의 화면상에서 보면 보이지 않는데요. 이 레이어는 버튼 위에 광택 효과를 주는 것으로 Aqua 버튼의 최정 결과를 보시면 딱! 아실 겁니다. ^^

뭐… 글로 아무리 길게 장황하게 써도.. 해당 스킨에 대한 전체 코드를 다음 url을 통해 다운로드 받으실 수 있으니 실제 플렉스에서 적용해 보시기 바랍니다.

참고로.. SparkSkin을 통한 스킨 적용은 Flash Builder 4.0 이상에서만 적용된다는 점에 유의하시기 바랍니다. 최근 4.6까지 나왔지요? 저는 4.5 버전을 쓰고 있습니다만…. 여튼.. 위의 스킨을 실제 버튼에 적용하기 위한 방법은 3가지가 있는데.. 그 중에 한가지에 대한 코드는 다음과 같습니다.

스킨을 만드는 작업은.. 코드의 길이에 비해 상당히 많은 시간이 소요되는 작업이라고 생각합니다. 또한 제대로 스킨을 만들려면 디자인 감각까지 갖춰야 하는 매우 고난위도의 작업입니다. 하지만 일단 한번만 만들어 놓으면 지속적으로 활용할 수 있으니… 스킨 제작 작업은 시간과 비용이 소요되더라도 꼭 제대로 해두는 것이 최종 프로젝트 산출물의 가치를 배가 시킬 수 있을 거라 확신합니다.

2011-12-082017-01-27

[Flex] FXG(Flash XML Graphic Format)으로 이미지 그리기

플래시 빌더가 4.0으로 업그레이드 되면서 컴포넌트의 스킨을 SparkSkin 클래스를 통해 만들게 됩니다. 이때 컴포넌트의 모양을 그리기 위해 FXG(Flash XML Graphic Format)를 사용합니다. 컴포넌트의 모양 뿐만 아니라 채움이나 선 모양과 색상 등을 포함해 텍스트, 이미지 표현까지 모든 그리기에 대한 방법입니다.

좀더 체계적이고 정리된 프로젝트 진행을 위해 기존에 알고 있는 다소 돌아가는 방법이 아닌 표준화된 방법을 이용해 컴포넌트의 스킨을 세련되게 입히고자 하는 생각에서 FXG에 관심을 가지고 살펴보던 중에.. 실제 컴포넌트에 스킨으로 입힐 이미지를 FXG를 통해 표현하는 코드를 정리해 봅니다.

FXG에서 비트맵 이미지를 표현하기 위한 방법은 2가지입니다. 첫째는 BitmapImage를 이용해 이미지를 그대로 그리는 방법과 BitmapFill를 이용해 대상이 되는 도형에 비트맵을 채워 넣는 방법입니다. 아래의 코드가 바로 위의 2가지 방법에 대한 예제 코드입니다.

아래의 화면은 위의 코드를 통한 실제 결과 화면입니다. 사용자 삽입 이미지

2011-11-192017-01-27

[Java] 배열로부터 바로 ArrayList 객체 생성하기

자바의 순수한 배열이 있다고 할때.. 이 배열을 다른 객체에 넘기기 위해서 ArrayList 타입으로 변환할 필요가 있는 경우가 있습니다. 이때 배열을 바로 ArrayList 타입으로 변경하는 코드입니다.

String[] filenames = ...;

List filelist = Arrays.asList(filenames);
ArrayList array = new ArrayList(filelist);

잊어 먹지 말자는 의미에서 기록 남깁니다..

2011-11-032017-01-31

C#은 너무 친절해…

C#은 너무 친절해… 그래서 짜증나… 므니다.. 무슨 말씀인고 허니.. C#에서 URL을 통해 웹페이지를 호출하는 코드가 있습니다.. 예를 들어서..

String urlAddress = "http://www.geoservice.co.kr:7070/wms?a|b|c";
WebRequest request = WebRequest.Create(urlAddress);

...

뭐.. 대충 위와 같은 식으로 url을 날렸더니.. url을 구성하는 문자중 |을 자동으로 %7C로 인코딩 해주십니다.. 와우~ 너무 친절하시네.. 하지만 내가 원하는 것은 그냥 | 문자를 고대로 서버로 날려야 합니다. 해서 찾아보니.. url을 문자열 그대로 날리지 않고 Uri라는 클래스를 통해 날리는 방법이 있더군요. 그래서 다음처럼 코딩했습니다.

String urlAddress = "http://www.geoservice.co.kr:7070/wms?a|b|c";
Uri uri = new Uri(urlAddress, true);
WebRequest request = WebRequest.Create(uri);

...

새롭게 추가된 2번 코드가 바로 그 녀석입니다. Uri 클래스 객체를 생성자의 두번째 인자값을 true로 주면 자동으로 |를 %7C 따위로 인코딩해주지 않아.. 제가 원하는 방법입니다. 근데 이 방식이 Deprecated 된 방식이랍니다. ㅡOㅡ;; 그럼 이와 동일한 기능을 하면서 권장하는 방식이 무엇이냐? 라고 열심히 구글링을 해봤지만 모르겠네요.. 아시는 분 계시나요?

여튼.. C#은 내부적으로 자동으로 처리해 주는 것들이 제법 있습니다. C#은 너무 친절합니다.. 그래서.. 가끔씩 맘에 않듭니다..

2011-10-212017-01-27

마이크로소프트사의 딥줌 이미지(Deep Zoom Image)포맷

사용자 삽입 이미지
위의 툴은 딥줌 이미지 데이터를 만들어주는 마이크로소프트 사의 Deep Zoom Composer입니다. 여기서 말하는 Deep Zoom이란.. 매우 큰 크기의 이미지를 인터넷 상에서 빠르게 보여주도록 하는 형식입니다.

딥줌 형식으로 이미지를 구성해 놓으면 .NET을 이용해 인터넷에서 쉽게 방대한 크기의 이미지를 빠르게 서비스할 수 있기 때문에.. GIS 분야에서 지도 서비스에 응용해 볼만한 기술로 생각됩니다. 비록 지도 좌표계의 개념이 없고.. 방대한 크기라고는 하나.. 크기에 제약이 있는 것으로 판단되는 단점이 있기는 하지만 말입니다.

GIS에서는 이미 타일맵이라는 형식으로 이 딥줌의 기술을 대체해.. 아니 딥줌보다 그 이전부터 사용되어 왔습니다. 하지만.. 딥줌은 마이크로소프트에서 최적화된 뷰어 자체를 제공하며 SilverLight를 통해 인터넷으로 쉽게 서비스할 수 있다는 매우 큰 장점을 가지고 있다고 생각됩니다.

이 글은.. 위에서 보여드린 Deep Zoom Composer를 통해 딥줌 이미지들을 만드는 것이 아닌.. Deep Zoom Composer가 없을지라도 딥줌 이미지들을 만들어 내기 위해 딥줌 이미지들의 구조를 파악해 보는 글입니다. 딥줌 이미지의 구조이므로.. Deep Zoom Composer가 만들어 낸 결과 샘플을 가지고 설명해 보겠습니다.

사용자 삽입 이미지
결과로 만들어진 딥줌의 폴더 구조입니다. 폴더 2개와 4개의 파일이 만들어 집니다. 이 구조는 어떠한 입력 이미지에 대해서도 항상 동일합니다. 그럼 다시 2개의 폴더 내부를 살펴보겠습니다. 먼저 dzc_output_files 폴더 구조입니다.

사용자 삽입 이미지
dzc_output_files 폴더 내부의 서브 폴더입니다. 역시 어떠한 입력 이미지에 대해서도 항상 동일하게 9개의 폴더가 만들어 집니다. 9개에 대한 모든 폴더, 즉 0 폴더에서 8번 폴더 안에는 0_0.png(또는 jpg)라는 이름의 이미지 파일 하나만이 존재합니다. 옵션을 지정하지 않았다면 256×256 크기의 이미지로 0 펄더에는 입력 이미지를 1×1 픽셀 크기로 만들어 놓은 것이고 2폴더는 2×2 픽셀 크기의 이미지가 3번 폴더는 4×4, 그리고 4번 폴더는 8×8 크기의 이미지와 같은 식으로 존재합니다. 다음은 dzc_ouput_images입니다. 이 폴더의 내부 내용은 다음과 같습니다.

사용자 삽입 이미지
입력 이미지 파일명으로 조합된 폴더 하나의 xml 파일 하나입니다. 먼저 xml 파일의 내부를 살펴보면 다음과 같습니다.

사용자 삽입 이미지
매우 단순한 내용이지만 중요한 정보를 담고 있는데요. 타일이미지의 크기와 이미지 형식 그리고 입력 이미지의 전체 크기에 대한 정보 등을 담고 있습니다. 이제 폴더 내부(02726_purplemurmur_2560x1440_files)를 살펴보겠습니다.

사용자 삽입 이미지
이 폴더는 흔히 GIS에서의 타일 구조 형식입니다. 0 폴더 안에는 1×1 픽셀 크기의 이미지 하나가 존재하며 최종적으로 12폴더에서는 입력 이미지를 256×256 크기의 타일 이미지들로 구성해 놓고 있습니다. 타일 이미지의 이름은 Row_Column.png(또는 jpg)로써 예를 들어 아래와 같이 구성되어져 있습니다.

사용자 삽입 이미지
여기서 Row 인덱스 0의 기준은 입력 이미지의 좌상단입니다. 이상으로 간단히 마이크로소프트사에의 딥줌 이미지의 포맷에 대해 설명드렸습니다.