이번에는 지난 시간에 마무리 못했던 부분을 다시 정리하겠습니다.
일단 남은 문제는 다음과 같았죠.
=========================================
* 몇가지 문제
- 사진이 있는지 없는지 그리드상에 표현이 안되는 문제
- 사진 Resize가 안되는 문제
- 처음 바인딩되면서 사진이 다 바인딩되는 문제
=========================================
첫 번째는 체크박스를 그리드에 추가해서 확인하도록 하고
두 번째는 ImageViewer의 사진 크기 조정 기능을 사용하겠습니다.
세 번째는 좀 애매하긴 한데 사진을 가져오는 시점을 실제 항목을 클릭할때 처리하도록 하겠습니다.
그리고 설리외의 모든 f(x) 멤버의 데이터를 볼 수 있도록 약간의 수정을 하겠습니다.
(셜리가 아니라 설리였군요. ㅠㅠ)
* 그리드에 체크박스 추가하기
디자인뷰에서 그리드를 더블클릭하면 Grid Contents Editor가 나옵니다.
아마 본문, 댓글, 미투 3개의 항목이 보일겁니다.
여기에 컬럼 하나를 추가할겁니다.
컬럼을 추가하는 방법은 2가지입니다.
하나는 그리드의 빈 공간을 클릭하는 겁니다.
이때는 컬럼을 추가할 수 있습니다(마지막 컬럼 다음에 추가됩니다).
컬럼 뿐 아니라 로우도 추가할 수 있습니다.
이렇게 하게되면 무조건 가장 뒷쪽에 컬럼이 추가되기 때문에 원하는 곳에 위치시킬 수가 없습니다.
예를 들어 첫 번째 열에 컬럼을 추가하고자 한다면 다른 방법을 사용합니다.
먼저 추가시키고자 하는 위치의 다음 컬럼을 선택하고 컨텍스트 메뉴를 확인합니다.
Add, Insert, Delete 메뉴가 보이죠. Add는 이전과 같이 뒷쪽에 컬럼을 추가하는 것이고 Insert는 선택한 컬럼 앞에
새로운 컬럼을 추가하게 됩니다. 컬럼뿐 아니라 로우도 마찬가지입니다.
예제에서는 그냥 마지막에 컬럼을 추가했습니다.
그리고나서 body 영역을 선택하고 해당 컬럼의 속성을 정의해줍니다.
displaytype은 checkbox로 변경하고
text 바인딩 부분에 정규표현식을 추가해서 해당 값이 있는지 없는지 확인할 수 있게 합니다.
앞에서 사진이 있는 경우에만 media 컬럼에 데이터가 담기도록 했기 때문에 아래와 같이 처리해주면 됩니다.
bind:media!=null?true:false
이제 첫 번째 문제는 이렇게 해결이 되었습니다.
* 사진 크기 조정하기
ImageViewer에는 stretch 라는 속성이 있습니다.
이 속성은 다음과 같이 정의할 수 있습니다.
none : 기본 값으로 원본 그대로 보여주는 겁니다.
fit : 해당 컴포넌트 크기에 맞게 보여줍니다. 강제로 크기를 줄여주는데 컴포넌트 크기에 꽉 차게 보여주기 때문에
이미지가 찌그러들 수 있습니다.
fixaspectratio : 단어가 복잡하지만 결론은 원본 이미지의 비율을 유지해줍니다. 우리가 원하는 해답인것 같군요.
이제 ImageViewer에서 stretch 속성을 'fixaspectratio'로 설정해줍니다.
* 그리드에서 데이터 지정하기
일단 앞에서 설정했던 ImageViewer에 대한 바인딩 설정을 지워버리고
그리드를 선택했을때 선택된 컬럼의 데이터를 넘겨주는 방식으로 변경하겠습니다.
그리드에서 해당 셀을 선택하는 이벤트는 oncellclick 입니다.
해당 이벤트는 Grid와 GridClickEventInfo 라는 두가지 값을 던져줍니다.
우리가 필요한 것은 GridClickEventInfo에서 선택된 로우에 대한 정보를 가져오는 것입니다.
그리도 Dataset에서 해당 로우의 media 값을 찾아 ImageViewer에 던져줍니다.
그럼 해당 이벤트를 처리하는 코드는 다음과 같이 만들어집니다.
ImageViewer00.image = Dataset00.getColumn(e.row, "media");
* 다른 멤버 글도 살펴보기
이제는 멤버가 늘어났으니 버튼만 가지고 컨트롤 하기는 힘들어졌네요.
그래서 ListBox를 사용하기로 했습니다.
해당 하는 컴포넌트를 배치하고 데이터는 외부에서 받아올 수도 있지만
이번에는 지정된 멤버이기 때문에 innerdataset을 설정하겠습니다.
속성중에서 innerdataset을 클릭하고 Contents Editor에서 해당 멤버의 아이디와 이름을 추가합니다.
그리고 해당 멤버를 선택할때마다 데이터를 가져올 수 있도록
ListBox에서 onitemclick 이벤트를 사용합니다.
기존 버튼 이벤트를 약간 수정해서 이벤트에서 넘어온 멤버의 값을 받아 XML을 처리하게 수정합니다.
var fx_member_me2day_id = e.itemvalue;
var dom:DomDocument = new DomDocument();
Dataset00.deleteAll();
dom.url = "http://me2day.net/api/get_posts/"+fx_member_me2day_id+".xml";
이제 f(x) 멤버를 모두 가져올(?) 준비가 되었습니다.
폼의 titletext 도 수정하고 아이콘도 수정해보죠.
아이콘은 코드에서 수정할 수는 없고 테마를 직접 수정해야 합니다.
(코드에서 할 수 있을지도..^^)
테마(css)에서는 TitlebarForm에서 icon 항목을 수정해주면 됩니다.
자 그럼 이제 나온 결과는 다음과 같습니다.
그래도 설리가 대세..ㅎㅎ
소스참고
