'silverlight'에 해당되는 글 3건

  1. 2010.06.29 실버라이트에서 ICommand 사용하기
  2. 2010.06.29 View Model 간략 설명
  3. 2007.06.01 차세대 웹 기술 & RIA 컨퍼런스 후기 (1)
ICommad 구현하는 간단한 5가지 스텝.
출처 : http://johnpapa.net/silverlight/5-simple-steps-to-commanding-in-silverlight/

Step 1 – Implement ICommand

커멘드를 관리할 클래스를 하나 만들고 ICommand 인터페이스를 적용한다.
그러면 CanExecute,  Execute  함수와 CaneExecuteChanged event 가 만들어진다.

아래 코드를 카피해서 'AS-IS' 로 사용한다.

   1: public class DelegateCommand : ICommand
   2: {
   3:     Func<object, bool> canExecute;
   4:     Action<object> executeAction;
   5:     bool canExecuteCache;
   6:  
   7:     public DelegateCommand(Action<object> executeAction, Func<object, bool> canExecute)
   8:     {
   9:         this.executeAction = executeAction;
  10:         this.canExecute = canExecute;
  11:     }
  12:  
  13:     #region ICommand Members
  14:  
  15:     public bool CanExecute(object parameter)
  16:     {
  17:         bool temp = canExecute(parameter);
  18:  
  19:         if (canExecuteCache != temp)
  20:         {
  21:             canExecuteCache = temp;
  22:             if (CanExecuteChanged != null)
  23:             {
  24:                 CanExecuteChanged(this, new EventArgs());
  25:             }
  26:         }
  27:  
  28:         return canExecuteCache;
  29:     }
  30:  
  31:     public event EventHandler CanExecuteChanged;
  32:  
  33:     public void Execute(object parameter)
  34:     {
  35:         executeAction(parameter);
  36:     }
  37:  
  38:     #endregion
  39: }



Step 2 – Define the Command

ViewModel 클래스에 public ICommand 프로퍼티를 추가한다.

public ICommand LoadProductsCommand { get; set; }

Step 3 – Create the Command

ViewModel 생성자에 위에서 작성한 command 객체를 생성해서 프로퍼티에 셋하도록 작성한다.

LoadProductsCommand = new DelegateCommand(LoadProducts, CanLoadProducts);
여기서 LoadProducts, CanLoadProducts 메소드는 viewmodel 안에 정의된 메소드이다.

Step 4 – Create the VM
viewmodel 은 view 에서 접근가능해야 한다. 접근가능하게 하는 방법은 여러가지 이지만 간편한 방법으로 xaml 코드에 static resource 등록하는 방법이 있다. 아래코드에서 ProductViewModel 은 viewmodel 클래스다.

<UserControl.Resources>
    <local:ProductViewModel x:Key="vm"/>
</UserControl.Resources>


Step 5 – Bind the Command


<Button Content="Load" Width="120"
    Command="{Binding LoadProductsCommand}"
    CommandParameter="{Binding ElementName=FilterTextBox, Path=Text}" />


Command 프로퍼티에 ViewModel 에 정의한 command  속성을 반인딩한다.
command 에 파라미터를 전달하는 경우 위에서 처럼 CommandParameter 에 바인딩한다. 위의 예제에서는 텍스트박스의 입력값을 바인딩 햇다.

아래에는 viewmodel 코드들이다.

 

   1: public class ProductViewModel : ViewModelBase
   2: {
   3:     public ProductViewModel()
   4:     {
   5:         this.Products = new ObservableCollection<Product>();
   6:  
   7:         // Warning: DEMO CODE AHEAD
   8:         // Your ViewModel should not define your data for your Model :-)
   9:         // Instead, it could make a call to a service to get the data for the Model.
  10:         this.AllProducts = new ObservableCollection<Product>();
  11:         this.AllProducts.Add(new Product { ProductId = 1, ProductName = "Apple" });
  12:         this.AllProducts.Add(new Product { ProductId = 2, ProductName = "Orange" });
  13:         this.AllProducts.Add(new Product { ProductId = 3, ProductName = "Banana" });
  14:         this.AllProducts.Add(new Product { ProductId = 4, ProductName = "Pear" });
  15:         this.AllProducts.Add(new Product { ProductId = 5, ProductName = "Grape" });
  16:         this.AllProducts.Add(new Product { ProductId = 6, ProductName = "Grapefruit" });
  17:         this.AllProducts.Add(new Product { ProductId = 7, ProductName = "Strawberry" });
  18:         this.AllProducts.Add(new Product { ProductId = 8, ProductName = "Melon" });
  19:         this.AllProducts.Add(new Product { ProductId = 9, ProductName = "Guava" });
  20:         this.AllProducts.Add(new Product { ProductId = 10, ProductName = "Kiwi" });
  21:         this.AllProducts.Add(new Product { ProductId = 11, ProductName = "Pineapple" });
  22:         this.AllProducts.Add(new Product { ProductId = 12, ProductName = "Mango" });
  23:  
  24:         LoadProductsCommand = new DelegateCommand(LoadProducts, CanLoadProducts);
  25:     }
  26:  
  27:     private void LoadProducts(object param)
  28:     {
  29:         string filter = param as string ?? string.Empty;
  30:         this.Products.Clear();
  31:         var query = from p in this.AllProducts
  32:                     where p.ProductName.ToLower().StartsWith(filter.ToLower())
  33:                     select p;
  34:         foreach (var item in query)
  35:         {
  36:             this.Products.Add(item);
  37:         }
  38:     }
  39:  
  40:     private bool CanLoadProducts(object param)
  41:     {
  42:         return true;
  43:     }
  44:  
  45:     public ICommand LoadProductsCommand { get; set; }
  46:  
  47:     public ObservableCollection<Product> AllProducts { get; set; }
  48:  
  49:     private ObservableCollection<Product> products;
  50:     public ObservableCollection<Product> Products
  51:     {
  52:         get
  53:         {
  54:             return products;
  55:         }
  56:         set
  57:         {
  58:             products = value;
  59:             this.FirePropertyChanged("Product");
  60:         }
  61:     }
  62: }
  63:  



   1: public abstract class ViewModelBase : INotifyPropertyChanged
   2: {
   3:     public ViewModelBase()
   4:     {
   5:     }
   6:  
   7:     public event PropertyChangedEventHandler PropertyChanged;
   8:  
   9:     protected void FirePropertyChanged(string propertyname)
  10:     {
  11:         var handler = PropertyChanged;
  12:         if (handler != null)
  13:             handler(this, new PropertyChangedEventArgs(propertyname));
  14:     }
  15:  
  16: }

신고

'DotNet > silverlight' 카테고리의 다른 글

실버라이트에서 ICommand 사용하기  (0) 2010.06.29
View Model 간략 설명  (0) 2010.06.29

댓글을 달아 주세요

출처: http://openlightgroup.net/Blog/tabid/58/EntryId/89/Silverlight-View-Model-Style-An-Overly-Simplified-Explanation.aspx





왜 뷰모델을 사용하는가?

가장 큰 이유는 디자이너와 개발자간 협업시, 개발자는 ui 와 상관없이 개발을 할 수 있고, 디자이너는 개발자의 도움 없이 (개발 코드 없이, xaml 만으로..) ui 전체를 디자인 할 수 있다는 장점때문이다.

뮤모델의 장점들은 아래와 같다.
1. ui 개발을 직접 눈으로 보면서 개발할 수 있게 해줘서 ui 개발에 용이하다.(컴파일 해야 실행되는 ,코드 도움없이..)
2. 디자이너나 기획자 같은 비개발자들이 직접 ui를 만들어 낼 수 있어 보다 나은 ui 를 만들 수 있게 해준다.
3. 필요하다면 ui 만 먼저 쭉 만들고 테스트 해볼 수 있게 해준다.(개발 진행 없이..)
4. 개발자의 도움없이 ui 만 수정하는 것이 가능해진다.(코드와 ui 분리)


종합하자면, 뷰모델을 사용함으로써 ui 개발에서 c# 코드의 작성없이 xaml 로만 ui 개발이 가능하고 binding 과 command 를 통해 어플리케이션과 통신이 가능하다.


 Silverlight File Manager 같은 어플리케이션을 작성하는 경우,
개발자는 모델과 뷰모델만 작성하면 된다. view(ui) 는 디자이너는 몫이다. 개발자가 신경쓰지 않아도 된다.
디자이너의 경우 개발코드(c# 같은) 작성없이 ui 만 집중해서 만들면 된다. 이 ui 가 개발자에 의해 달라질 것을 걱정할 필요없다.작성하는 xaml 이 그대로 ui 로 쓰인다.

위의 언급한 어플리케이션은 아래와 같은 기능이 있다.
1. 폴더 리스트가 트리로 나온다.
2. 폴러를 선택하면 폴더의 내용을 볼 수 있다.
3. 선택한 파일을 다운로드 할 수 있다.


뷰모델 스타일을 사용해서 개발 과정을 살펴보자.

모델




모델은 어플리케이션에서 사용할 데이타가 전달되는 곳이다. 모델은 아래와 같은 것으로 구성될 수 있다.

1. web services : 서버와 통신을 통해 데이타를 가져오는 경우
2. Rest Services
3. Generic Collections : 로컬에서 정의한 데이타들

silverlight file manager 에서는 웹서비스를 사용하기로 한다.




뷰모델

뷰모델은 아래와 같은 것으로 구성된다.

1. 프로퍼티 : INotifyPropertyChanged 를 구현해서 다른 엘리먼트에 binding 되었다면, 그 값이 변경될때 만다 자동으로 알수있다.
2. collections : ObservableCollection 으로 다른 엘리먼트에 바인딩된 경우 그 값이 변경될때 마다 자동으로 알수있다.
3. Commands : 발생시킬 수 있는 일종의 이벤트. 또한 object 타잎의 파라미터 하나를 전달할 수 있다. 이 것은 ICommand 인터페이스를 구현하고 있다.

http://steelleg.tistory.com/entry/실버라이트에서-ICommand-사용하기 참고.




TreeView SelectedItemChanged  을 보면 폴더를 나열하는 트리뷰가 있고, 이 트리를 클릭하면 텍스트박스에 클릭한 폴더의 이름을 보여주는 예제가 있다.


이 예제에 나오는 ViewModel 을 고려해 보면,(화면의 데이타 모델을 그려본다.)
1. properties - 선택된 폴더의 이름을 갖고있을 string 이 하나 필요하다.
2. collections - 폴더의 컬렉션이 하나 필요하다.
3. commands - 커멘드는 파라미터로 폴더를 전달받고, 폴더 프로퍼티를 셋팅하는데 사용한다.


블렌드에서 View 의 DataContext > new 클릭! ViewModel 을 DataContext 에 셋팅한다.



  • PropertiesViewModelProperty (the selected folder)
  • CollectionsSilverlightFolders (the folders)
  • CommandsSetProductsCommand (that will be raised by the SelectedItemChanged event in the TreeView)



  • View


    뷰에서는 그냥 DataContext 창을 열고 드레그해서 페이지에 떨구면 이에 맞는 뷰컨트롤이 만들어진다.

    http://www.codeproject.com/KB/silverlight/RIATasks.aspx 하단부를 참고하길 바란다.


    An Outline

    • Model
    • ViewModel
      • Consists of:
        • Properties – One of something. This could be a String or an Object. Implements INotifyPropertyChanged, so that any element bound to it, is automatically notified whenever it changes.
        • Collections – A collection of something. This is of type ObservableCollection, so that any element bound to it, is automatically notified whenever it changes.
        • Commands – An event that can be raised. Also, one parameter of type Object can be passed. This implements ICommand. 
          • Implemented using Behaviors. Mostly the InvokeCommandAction Behavior  
    • View
      • Properties
        • Bind to a text box, radio button, toggle button, MediaElement, trigger an animation or ViewState change
      • Collections
        • Bind to List box, TreeMenu
      • Commands
        • Implemented using InvokeCommandAction behavior
          • Bind to a ICommand in the ViewModel
          • Indicate the ICommand that you want to raise
          • Drop on an element
            • Loaded
              • Used to “register” an element with the ViewModel. The ViewModel can attach event handlers, or store a reference to the element if needed.
            • Any other event
              • To simply trigger the behavior and raise the ICommand when needed, such as Click or mouseover
          • Pass a parameter
            • The parameter is type Object so it can be any UIElement

    신고

    'DotNet > silverlight' 카테고리의 다른 글

    실버라이트에서 ICommand 사용하기  (0) 2010.06.29
    View Model 간략 설명  (0) 2010.06.29

    댓글을 달아 주세요

    차세대 웹 기술 & RIA 컨퍼런스 유료 세미나를 2일간 다녀왔다.

    매우 즐거운 세션도 있었고 그동안 잘 몰랐던 것들에 대해 궁금증도 해소 되었지만
    사사의 사이트나 제품을 선전하는 데 시간을 많이 할애하는 발표자도 있어서 좀 짜증이 났다.

    과연 RIA 의 시대가 올것인가...
    내 경험에 비추어 보면 RIA 를 지향할 만한 물리적인 조건은 갖춰진 듯 하다.
    하지만 생각보다 보수적인 네티즌 들이 새로운 것에 대한 학습을 받아들일 것인지 궁금해진다.
    아마도 그 수고를 감수할 만한 킬러 어플리케이션이 나와준다면 그렇게 되겠지만
    그게 어디 쉬운 일인가...

    암튼 사내 발표를 위해 자료를 정리중이다. 블로그에 올릴지는 아직...

    그런데
    IT 논평을 허용하지 못하는 기업 문화를 지적하며 

    이런 일이 있었나보다

    참..거시기 하다..

    류한석님의 세션을 아주 흥미롭게 들었던 사람으로서 실버라이트를 칭찬했던 기억(기억이라기 보다는 느낌에 가깝다)이 있긴 한데, 그것을 기억하는 이유는 류한석님의 첫번째 발표후 이어지는 순서들이 대부분 어도브 관련 세션이엿기 때문이다. 그래서 속으로 '어? 첨에 실버라이트 칭찬을 해버리면 뒷 세션들은 좀 난처하겠는데?' 라고 생각햇기 때문이다.

    어느 대목에서 인지는 기억이 안난다...ㅎㅎㅎ

    하지만 류한석님이 편파적이였다고 생각되는 발표는 아니였다.
    중요한 것은 설령 편파적이였다고 해도 어도브가 항의할 일은 아니였다고 생각한다.
    누구나 주관적인 의견이 있는 것이고 그걸 표현할 자유는 있는 것이니까..
    오히려 세미나 세션중 어도비 관련 내용이 더 많았었고 실버라이트는 딱 한 세션만 있었다.
    사실 실버라이트에 대한 정보를 얻고자 했었는데...ㅜㅜ

    하여간 RIA 에서의 실버라이트 vs Flex 의 경쟁이 볼만할 거 같다.
    신고

    '개발하면서' 카테고리의 다른 글

    AJAX.NET vs YUI  (3) 2007.06.22
    근의 공식  (5) 2007.06.21
    VOD2.0 홍보 사이트  (3) 2007.06.18
    Robots.txt 사용법  (3) 2007.06.08
    웹은 좀 더 재미있어야 한다.  (1) 2007.06.07
    차세대 웹 기술 & RIA 컨퍼런스 후기  (1) 2007.06.01

    댓글을 달아 주세요

    1. Favicon of http://www.drebeatsoutletus.com BlogIcon Monster Beats Outlet 2011.11.28 16:56 신고 Address Modify/Delete Reply

      아이구, 괜 찮 아요 네, 고맙습니다 는 나 눠 갖 는 다.