호응에 힘입어 벌써 4번째 세미나를 개최하게 되었습니다.
UI 디자인을 쉽고 효율적으로 할 수 있는 방법을 알려드릴 예정이오니 많은 참석 부탁드립니다.

일시 : 2011년 8월 17일 (수) 19시 00분 ~ 21시 00분
장소 : 강남 토즈2호점


코디네이터 (쉽고 빠른 UI 디자인 툴)

http://codinator.co.kr

코디네이터는 고품질의 UI 디자인을 아주 쉽고 빠르게 제작할 수 있는 디자인솔루션입니다.
개발자, 디자이너 누구나 몇번의 클릭만으로 나만의 UI 디자인과 테마를 아주 높은 퀄리티로
제작할 수 있는 방법이 바로 여기에 있습니다.
(최근 1.1로 버전 업데이트가 되면서 퍼포먼스가 향상되었습니다.)

 ※ 제품의 버전이 1.1로 업데이트 되면서 '무료'로 결정되었습니다.
세미나 당일날 크로스플랫폼 버전과 관련한 '무료'정책의 배경을 설명해 드립니다. 

 1. 누가 들으면 좋은가?
- 홀로 앱을 개발하는 개발자
- 윈도우즈폰 앱을 남과 다른 느낌으로 디자인하고 싶은 디자이너
- UI 디자인을 효율적인 방법으로 제작하고 싶은 개발자와 디자이너

 2. 코디네이터는 무엇이 좋은가?
 - 마우스 클릭 몇번으로 UI 디자인이 완성됩니다.
- 포토샵 수준의 수준 높은 디자인을 쉽게 제작할 수 있습니다.
- 다양한 색감의 테마를 쉽게 만들 수 있습니다.

 3. 코디네이터만의 특장점
- 자신만의 디자인 프리셋을 저장하고 언제든지 재사용할 수 있습니다.
- 컬러휠 기능으로 전체적인 분위기를 빠르게 변환할 수 있습니다.
- 데스크탑, 모바일, 웹 개발환경에 동일한 디자인을 적용하고 교환할 수
   있기 때문에 N스크린 개발환경에 적합합니다.

Codinator 소개 동영상 : http://www.youtube.com/watch?v=hpy2yhDJksU





저작자 표시 비영리 변경 금지
신고

안녕하세요 김대욱입니다! 그동안 wit studio에서 준비해왔던 Codinator의 첫 정식 버전이 이번 주를 기준으로 정식 릴리즈가 되었습니다. 지난 12월 실시되었던 베타테스트 서비스를 끝으로 약 5개월간의 피드백 반영 기간을 거쳐 출시된 이번 정식버전에서는 보다 쉽고 빠르게 UI디자인을 할 수 있도록 다양한 기능들이 추가되었습니다.

Codinator의 간단한 소개를 드리자면 수준 높은 GUI Design을 쉽고 빠르게 제작할 수 있는 GUI 디자인 툴(컴포넌트)로서 간단한 마우스 조작만으로 다양한 형태의 Application을 디자인 하고 구현 할 수 있는 제품입니다. 현재 Codinator는 Microsoft의 Expression Blend에 Add-in으로 동작하고 있으며 WPF, Silverlight 그리고 WindowsPhone7의 개발환경을 지원하고 있습니다.


※ 정식 버전 Codinator는 Codinator 홈페이지(http://codinator.net/)에서 무료로 다운로드 받아 사용해보실 수 있습니다.


이제막 출시된것이다 보니 제품의 장점들을 검증하기 위해 여러 레퍼런스 케이스가 필요한 상황인데요. 기회가 된다면 저희 제품이 적용될 수 있는 곳에 테스트(or 프로젝트)를 진행해보고자 하는데 주변에 새로운 GUI의 필요성을 느끼고 있는 곳이나 관련 기술을 사용하는 곳이 있다면 소개좀 부탁드리겠습니다. :D


오랜 시간동안 개발한 저희 wit studio의 첫 제품이라 애정이 깊고 긴장되는데요, 아무쪼록 많은 관심 가져 주시고 도와주시면 감사드리겠습니다. 코디네이터에 대한 자세한 설명과 활용방법은 조만간 다시 포스팅하도록 하겠습니다 감사합니다.

신고

기나긴 베타 기간을 마치고 여러 피드백을 수렴한 결과 드디어 정식 버전을 내놓게 되었습니다.
조만간 트라이얼 버전을 배포할 예정이며, 이미 코디네이터를 활용한 사업제휴가 2건이나! 들어갔습니다.

트라이얼 버전 배포가 시작되는대로 코디네이터에 대해 더 자세한 안내를 해드릴 예정인데요,
한글 텍스트 버전 영상으로 먼저 소개해드립니다.




저작자 표시 비영리 변경 금지
신고
안녕하세요.
이번 포스팅에서는 사용자 지정 Attached Property에 대해 이해와, 예제를 다룹니다.

1. 다른건 다 기본 내용을 쓰고싶은데, 이거 하나만 추가하고싶어,,

예를 들어서, ListBox에서 여러개를 선택가능하게 하되, 최대갯수를 제한하고 싶은 경우를 봅시다.
기본의 ListBox에서는 MultiSelect를 할수있게/없게 하는 기능은 있어도, 최대 갯수를 지정할 수는 없습니다.
이를 구현하는데 쉽게 생각할 수 있는 방법은 상속입니다. 부모의 기능은 그대로 사용하고 싶은데, 내것 하나만 추가됬으면 하는 경우 니까요


상속을 이용한 MultiSelectionCount 구현

하지만, 이렇게 구현하게되면 하나의 프로퍼티 때매, 전체를상속 받아야 하며,  새로 구현한 아이만을 사용해서 구현하여야 합니다.
좀 더 효과적으로 구현할 수 있는 방법이 있까요?!
이번 포스팅에서 설명하고하 하는 사용자 지정 Attached property를 사용하면 됩니다.

우선
사용자 지정 Attached property를 설명하기 앞써, 사용자 지정을 뺀 Attached property에 대해 이야기 해봅시다.

2.  Attached property란?
    Attacted Property란 어떤 객체에서든지 설정할 수 있는 global한 속성입니다. 
    보통의 경우 부모요소에 포함된 값을 부모가 직접 지정할 수는 없고,  자식요소가 지정해야할 경우에 사용할 수 있도록 해줍니다.
    그러기 위해서  global하게 구현이 되어 있고요.   
    먼가 말로 표현하니 어렵게 느껴지는데요, 평소에 많이 사용하던 Property로 예제를 보면 무릎을 탁 치시게 될꺼에요.


평소에도 많이 사용하는 Attatced Property.  (DockPanel.Dock)
  
즉, 여기서 DockPanel.Dock속성은 부모인 DockPanel에서 정할 수 있는 것이 아니라,
DockPanel안에 포함되는 자식 요소에서 설정되어야 하기 때문에, DockPanel 클래스 안에서는 DockProeperty를 static Dependency Property로 만든 다음 GetDock과 SetDock Metheod를 public으로 제공합니다.



바로 이게 정의는 내가하나, 남들이 정의해서 써야할때-_-!! 사용하는 것이 Attached Property입니다. 
평소에도 사용하시면서 보셨거죠?
 
자 , 그럼 본론으로 들어가 봅시다.

3.  사용자 지정 Attacted Property란?

 위에서 구현하고자 했었던 ListBox에서 여러개를 선택가능하게 하되, 최대갯수를 제한하려고 해 봅시다.
 바로 이 Attacted Property를 이용해서 말이지요. 

 다음과 같이 구현하면 됩니다.


사용자 정의 Atteched Property를 사용할 경우

* 10원 팁 : 아래와 같이 propa를 치게되면 인텔리센스가 적당히 atteched Property를 생성하는것을 도와줍니다.




4. 사용을 해보자.

xaml에서 그럼 실제로 구현한 내용을 적용해 봅시다.


사용자 정의 Attacted Property를 사용할 경우 vs ListBox를 상속받아 구현할 경우 사용

* 별첨


C#코드에서 사용자 정의 Property를 사용하는 방법

어찌보면 extention method 와 비슷하다고 보실 수 있네요.

전체 예제는 아래에 첨부합니다.




저작자 표시
신고

Introduction

ERP 관련 Application을 제작할때 자주 사용되는 컨트롤 중의 하나가 ListView입니다. 많은 양의 데이터를 손쉽게 출력하기에는 용이하지만 컨트롤 자체적으로 데이터의 정렬이나 필터링등의 기능을 제공하고 있지 않기 때문에 이부분을 직접 구현하거나 상용 컴포넌트를 구입해서 사용해야 합니다. 이번시간에는 ListView의 Column을 클릭해 데이터를 정렬하거나 필터링 하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게 될 내용의 데모 동영상입니다.

이번 예제의 경우 한번의 포스팅에서 다루기 힘든 양의 소스코드이기 때문에 이번시간에는 기본적인 부분만 설명하고 나머지 부분은 추후 다시 포스팅을 하거나 소스코드를 보시고 이해가 안되신다고 하시는 부분을 위주로 먼저 설명 드리겠습니다.

ListView Sorting

ListView의 데이터를 정렬하기 위해서는 CollectionView의 SortDescriptions을 이용합니다. ListBox나 ListView와 같이 ItemsPresenter를 사용하는 컨트롤의 경우 화면에 출력될때 CollectionView를 이용해 출력될 데이터를 구성하는데 이때 SortDescription을 지정해주면 간단하게 데이터를 정렬 할 수 있습니다. 아래는 정렬 기준 속성이름과 정렬방향 그리고 ItemsSource를 통해 화면에 출력될 데이터를 정렬하는 방법입니다.

ListView Filtering

데이터 필터링도 마찬가지로 CollectionView를 이용해 간단히 구현 할 수 있습니다. CollectionView에는 Predicate<object>형식의 대리자를 통해 해당 요소가 화면에 출력될 때 필터링 되야 하는지 여부를 결정하는데 하나의 Predicate<object>에서 여러개의 필터링 규칙을 지정하는 것은 효율적이지 않기 때문에 아래와 같은 PredicateList<T>를 생성해 여러 상황의 Filtering 기준을 지정 할 수 있습니다.


아래는 이번시간에 사용된 전체 소스코드입니다.

※ 이번 시간 이후로 등록되는 포스팅의 소스코드를 열기 위해서는 VisualStudio2010버전이 필요합니다.

신고