'개발/UI프로그램'에 해당되는 글 25건

  1. 2011/04/18 [메모]HTML 부분을 컨트롤화 by dalbong2
  2. 2011/04/18 [메모]Dynamically removing/ replacing an external JavaScript or CSS file by dalbong2
  3. 2011/01/19 Ajax & HTML UI 코딩 모델 by dalbong2
  4. 2009/12/29 [메모] Getting Started with Silverlight development by dalbong2
  5. 2009/06/13 WPF UserControl 베이스 클래스 만들기 by dalbong2
  6. 2009/04/23 [연재 03] .NET3.0관련 MIME 타입 by dalbong2
  7. 2009/04/23 [연재 02] XAML Browser Application 만들기 by dalbong2
  8. 2009/04/23 [연재 01] XAML Browser Application- 사설(辭說)하기 by dalbong2
  9. 2009/04/23 13 Where Are We? by dalbong2
  10. 2009/04/23 12 PageFunction by dalbong2
  11. 2009/04/23 11 WPF 리소스 by dalbong2
  12. 2009/04/23 10 Frame by dalbong2
  13. 2009/04/23 09 XAML Browser Applications by dalbong2
  14. 2009/04/23 08 NavigationService by dalbong2
  15. 2009/04/23 07 NavigationWindow by dalbong2
  16. 2009/04/23 06 Hyperlink by dalbong2
  17. 2009/04/23 05 Page by dalbong2
  18. 2009/04/23 04 Window by dalbong2
  19. 2009/04/23 03 애플리케이션 타입(Application Type) by dalbong2
  20. 2009/04/23 02 사용자 경험(User Experience) by dalbong2
  21. 2009/04/23 01 WPF로 사용자 경험(User Experience) 높이기 by dalbong2
  22. 2009/04/23 Orcas를 이용해서 오프라인 스마트클라이언트 App 작성하기 by dalbong2
  23. 2009/04/23 WPF 어플리케이션 데모 목록 by dalbong2
  24. 2009/04/23 WinForms와 WPF같이 사용하기 by dalbong2
  25. 2009/04/23 Loose XAML, XBAP, Silverlight by dalbong2


Ajax를 이용한 웹 애플리케이션을 제작하다 보면 ASP.NET의 사용자 컨트롤처럼 HTML 페이지의 전체를 부분을 컨트롤화 할 수 있는 방법이 필요한 경우가 있다. 이런 경우 부분을 로딩하기 위해서 ASP.NET의 HTTP 핸들러같은 모듈을 제작할 수도 있지만, jQuery 같은 라이브러리를 사용하는 경우는, jQuery의 load, get 같은 메소드를 이용해서 쉽게 해결할 수 있다.

    $('.left-nav a').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
   .load($link.attr('href') ) // --> 요 부분
   .dialog({
       autoOpen: false,
       title: $link.attr('title'),
       show: "blind",
       hide: "blind", // explode, slide
       close: BizBee.Main.PostMemberInfo,
       width: 500,
       height: 300    
       
   });

        $link.click(function(ev) {
            $dialog.dialog('open');

            $('.left-nav a.selected').removeClass('selected');
            $(this).addClass('selected');
            ev.preventDefault();

            return false;
        });
    });

저작자 표시
Posted by dalbong2
html 페이지의 부분을 컨트롤처럼( asp.net 사용자 컨트롤처럼) 독립적으로 개발할때 필요해서 메모해둔다.
메인 페이지에 이미 설정된 .css, .js 파일을 html의 부분을 별도록 디자이너가 개발할 수 있도록 할때 편리하다.

http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml 

function removejscssfile(filename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
 var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
 var allsuspects=document.getElementsByTagName(targetelement)
 for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
  if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
   allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
 }
}

removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page
저작자 표시
Posted by dalbong2

Ajax를 이용하는 웹 애플리케이션의 코딩 모델은 윈폼(Windows Form)또는 웹폼의 모델과 유사합니다.

해서, 잠깐 메모를 해 둡니다.


저작자 표시
Posted by dalbong2

Microsoft Silverlight 사이트

Get started building silverlight 3 applications

A blog by Tim Heuer

Getting started with silverlight development

Posted by dalbong2

Spring.NET의 컨테이너를 UI단에 적용하는 작업은 끝났다. 근데 정리할 시간이 없다. 7월부터 시작하는 UI단 프레임워크 개발 작업이 있다. 이것을 준비해야 하는 관계로 WPF를 좀 더 공부해야 한다. 그래서 정리 순서를 바꾸도록 했다. Spring.NET 컨테이너의 UI단 적용은 다음에 정리해야 할 것 같다.

 

흔히 기업용 애플리케이션을 제작할때는 윈폼 클래스 또는 사용자 정의 클래스들의 베이스 클래스를 만든다. 그래서 그곳에서 사용자 정보, 권한 정보들을 캐싱해 둔다. 현장의 개발자들은 그것을 상속해서 화면을 만든다.

달봉이도 이런 시나리오를 염두에 두고 WPF에서 제공하는 UserControl의 베이스를 하나 만들려고 했었다. 윈폼 시절의 UserControl을 생각해서 쉽게 될 줄 알았다. 근데, 이것 때문에 반나절을 고생했다.

다음은 WPF에서 UserControl의 상속이 지원이 안 되는  경우이다.

우선 Visual Studio의 솔루션 탐색기의 새 항목 추가 창을 통해서 UserControl 템플릿을 “Dalbong2ControlBase.xaml”이라는 이름으로 하나 추가한다.

그런 다음 동일한 방법으로 UserControl을 DerivedControl.xaml이라는 이름으로 추가한다.

그런 다음 DerivedControl.xaml의 코드 비하인드에서 DerivedControl 클래스의 베이스 클래스를 Dalbong2ControlBase로 수정한다.

빌드하면 에러가 발생한다.  구글링을 해 보고 수정을 반복하다 보면 만나게 되는 에러가 주로 다음 두 가지일 것이다.

이 에러 발생 원인을 설명하자면 XAML의 페이지 구조부터 컴파일 절차까지 설명해야 할 것 같다. 그러나 달봉이 시간이 없다. 지금 진행하고 있는 프로젝트가 WPF로 진행될 거라 빨리 프레임워크를 준비해야 한다.  이 에러의 원인만 정리한다.

WPF의 UserControl의 경우, UI가 있는 컨트롤 즉 XAML이 있는 UserControl은 자식 UserControl이 상속을 할 수 없다.

그러나 우리는 사용자 컨트롤의 베이스 클래스가 필요하다. 다음과 같은 방법을 사용할 수 있다.

사용자 컨트롤의 베이스 클래스로는 XAML이 없는 클래스를 사용하도록 한다.

다음 그림을 보자.

선택된 두 파일중에서 아래 것은 Visual Studio의 템플릿을 통해서 추가한 사용자 컨트롤이다. 이 녀석은 앞에서 얘기한 것처럼 베이스 클래스로 사용할 수 없다. UserControl의 베이스 클래스를 만들고 싶다면 순수한 C# 클래스 파일을 추가해서 다음처럼 UserControl을 상속받도록 해야 한다.

다음 코드를 보자.

    public class Dalbong2ControlBase : UserControl, IDalbong2Element

    {

    }

그런 다음 이 베이스 클래스 Dalbong2ControlBase는 다음처럼 사용할 수 있다.

먼저 코드 비하인드에서 베이스 클래스를 Dalbong2ControlBase로 수정한다.

 

    public partial class UserControl1 : Dalbong2.Win.Dalbong2ControlBase

    {

        public UserControl1()

        {

            InitializeComponent();

        }

    }

다음은 XAML 페이지로 간다.

붉은 색 부분을 추가해야 한다. Dalbon2.Win 네임스페이스에 있는 Dalbong2ControlBase를 사용자 컨트롤의 루트( 비쥬얼 컨테이너 )로 사용하겠다는 의미이다. 그리고 파란색 부분은 코드 비하인드의 현재 클래스를 나타낸다.

달봉이 고민

공통 정보는 베이스 클래스를 이렇게 작성해서 그곳에 넣어두면 된다지만,  UI 상속은 어떻게 해야 하는지 알 수 없다. 굳이 필요하다면 커스텀 컨트롤을 만들어서 사용할 수도 있겠다는 생각이지만,….그렇게까지 해야 하는 마음이 드는 것은 이전의 Windows Form 시절의 UserControl이 아쉽다는 생각이 들기 때문이다.

Posted by dalbong2

3. 웹 서버 설정하기

다음은 WPF 애플리케이션을 웹 서버를 이용해서 배포하는 경우, 웹 서버(IIS)에 필요한 설정을 알아본다. 우선 IIS 버전은 5.0 이상이어야 한다. 그리고 클라이언트 PC가 서버에서 내려오는 WPF 애플리케이션을 인식할 수 있기 위해서는 클라이언트에 .NET 3.0이 설치되어 있어야 할뿐만 아니라 웹 서버에 WPF관련의 MIME 타입들이 추가되어야 한다. MIME 타입에 대해서는 이전 포스트를 참고하기 바란다. 

3.1 파일 확장자와 MIME 타입

클라이언트의 브라우저에 적절한 핸들러를 구동시키기 위해서는 다음과 같은 확장자에 매핑된 MIME 타입을 등록해야 한다.

1113277086

이런 MIME 타입은 서버에 .NET3.0이 설치되면 자동 등록된다.

Posted by dalbong2

1.2 개발 환경 세팅하기

WPF 애플리케이션을 작성하기 위해서는 미리 설치되어야 하는 것들이 있다.

.NET 3.0 Runtime Components,
Windows SDK
Visual Studio 2005 Extensions
Microsoft Visual Studio Code Name “Orcas” Community Technology Preview - Development Tools for .NET Framework 3.0®

이 컴포넌트들은 여러 버전이 있다. 자신의 컴퓨터에 설치된 OS에 따라 어떤 버전을 설치해야 하는지는 다음 링크에서 정리해 놓고 있다. “Orcas” 개발툴에는 WPF 폼 디자이너(코드명 “Cider”)을 포함하고 있다. 아직 제한적이긴 하지만 .NET Framework 3.0 애플리케이션 개발을 편하게 할 수 있다.

http://blogs.msdn.com/tomarcher/archive/2006/07/17/668572.aspx

현재 달봉이의 노트북은 Windows Server 2003 SP1여서 September CTP 버전의 .NET 3.0 Runtime Componets와 Windows SDK를 설치하고 있다.

2. XAML Browser Application 만들기

2.1 애플리케이션 코딩하기

WPF 애플리케이션을 코딩하는 방식에는 두 가지가 있다.
▶  XAML과 코드 비하인드 파일 사용하기
- ASP.NET의 ASPX 방식과 유사하다. XAML을 사용하여 UI(User Interface)를 디자인하고 사용자의 이벤트를 핸들링하기 위해서 코드 비하인드 페이지에서 절차 코드를 사용한다.
▶  절차 코드만 사용하기
- 경우에 따라서는 절차 코드만을 사용해서 애플리케이션을 작성할 수도 있다. 사용자 정의의 컨트롤 라이브러리를 작성할 때 그런 경우가 있을 수 있다.
또한 부분적으로 XAML과 절차 코드를 혼합해서 사용할 수도 있다.
여기서는 Visual Studio 2005로 XML과 코드 비하인드 파일을 사용하는 방식으로 간단한 “Hello world” XBAP 애플리케이션을 만들겠다. 앞의 개발환경 세팅에서 “Orcas”까지 제대로 설치가 되어 있다면 다음 절차를 따라 할 수 있다.

2.1.1 프로젝트 생성하기

프로젝트를 우선 하나 생성하자. 다음 그림처럼 프로젝트 형식을 .NET Framework 3.0으로 선택하고, 템플릿에서 XAML Browser Application(WPF)를 선택한다. 그리고 “Demo”라는 이름으로 적당한 위치에 프로젝트를 하나 생성한다.
1213728542

2.1.2 WPF 폼에 컨트롤 올리기

다음은 프로젝트를 생성한 후, 기본적으로 추가된 Page1.xaml 페이지를 더블클릭한 모습이다.
1409779226

WPF 폼 디자이너에 Label 컨트롤을 하나 끌어다 놓자. 그리고 컨트롤에 “Hello World”문자열를 출력하자. 디자이너의 하단에서 직접 XAML 태그를 수정해도 되고 오른쪽의 속성창에서 편집을 해도 된다.
1143163038

간단한 애플리케이션이긴 하지만 이제 이 녀석을 빌드하자.

2.2 “XAML” 기반의 애플리케이션 빌드하기

XAML 기반의 페이지는 빌드를 하게 되면 XAML 파일은 partial 클래스로 파싱된다. 그리고 XAML파일의 UI 요소 태그 예를 들면 XAML파일의 Button 태그는 클래스의 멤버 변수로 컨버전된다.

.xbap 확장자를 갖는 파일은 .NET 2.0의 ClickOnce 배포에서 사용되었던 .application의 역할을 한다고 볼 수 있다. 애플리케이션과 배포 매너페스트 파일에 대해서는 지난 포스트를 참조하길 바란다.

애플리케이션을 빌드하는 방법은 2가지가 있다.
Visual Studio 2005 사용하기 : 아주 편리한 방법으로서 프로젝트 파일 셋업과 디버깅등에 편리하다.
MSBuild.exe 사용하기 : 마이크로소프트의 빌드 엔진(MsBuild)를 이용하는 방법으로서, 커맨드 라인으로 빌드하기 위해서 빌드 프로세스를 지정하는 프로젝트 파일을 생성해야 한다.

Visual Studio 2005가 생성한 프로젝트를 빌드하는 MSBuild를 사용하는 것도 가능하다. 두 방법 모두동일한 포맷의 프로젝트 파일을 사용하기 때문이다. Visual Studio 2005가 생성한 프로젝트 파일은 Visual Studio 2005 내부에서 사용하는 추가적인 요소가 있기는 하지만 MSBuild는 그것들을 무시한다. 수동으로 만든 프로젝트를 빌드하는데 Visual Studio 2005를 사용할 수도 있지만 대신에 확장자는 .csproj 또는 .vbproj여야 한다.

XBAP 애플리케이션을 빌드하게 되면 관련파일이 3개 생성된다.

exe 확장자 : 실행 파일
.exe.manifest : 애플리케이션 매너페스트 파일
.xbap : 배포 매너페이스 파일(<--  이전의 .application)

1356462408

2.3 게시하기

1292692586

게시 후의 IIS 모습을 보면 다음과 같다.

1085374650

2.3.1 브라우저로 애플리케이션 실행하기

브라우저를 이용해서 “Demo.xbap" 파일을 호출하면 다음과 같은 결과를 볼 수 있다.
1014348136

앞, 뒤 네비게이션 컨트롤은 자동으로 생성된다. 브라우저에 임베딩되긴 하지만 애플리케이션 파일은 NTD처럼 Assembly/down 폴더로 내려가는 것이아니다.
1063087605

대신에 클라이언트 머신의 ClickOnce Store로 내려간다.
1240606219

3. 결론

지금까지의 개발 절차를 보면 최종 애플리케이션이 브라우저를 이용해서 실행되긴 하지만 .NET2.0에서의 ClickOnce 애플리케이션을 개발할때와 동일하다는 것을 알 수 있다. 배포 방식도 NTD를 이용하지 않고 ClickOnce를 사용한다.

Posted by dalbong2

XAML Browser Application- 사설(辭說)하기

이전의 Windows Forms 애플리케이션은 주로 기본적으로 2가지의 형태의 애플리케이션을 제작하는데 사용했다.
▶설치 애플리케이션(Installed Application)
▶컨트롤 라이브러리(Control Library)

.NET3.0의 WPF(Windows Presentation Foundation)애플리케이션에는 여기에 하나의 타입이 더 추가된다.

▶XAML(‘재믈’) 브라우저 애플리케이션(XAML Browser Applications)

이 타입의 애플리케이션을 줄여서 XBAP('엑스밥')이라고 발음한다. 한때는(지금도) “WBA(‘우바’, Web Browser Application)”라고 한 적도 있었다. 이 XBAP 타입은 .NET2.0의 이하에서 브라우저 임베딩 방식의 SmartClient 애플리케이션이 발전한 방식이라고 보면 된다.
기존의 방식에서는 어셈블리 배포 방식으로 NTD(No-Touch Deployment)이라는 방식을 사용했다. 간단히 말하면 NTD 방식은 Windows Forms 컨트롤(UserControl 타입)을 만들어서 IIS에 올려 놓으면 웹 페이지의 링크에 의해 필요할 때 클라이언트 머신으로 다운되어 브라우저에 임베딩되어 실행되는 방식이다. NTD 방식에서는 이미 배포된 어셈블리들을 새로운 버전으로의 업데이트하려고 하면 IIS 설정과 밀접한 관계가 있어서 좀 독립적인 기술로서의 깔끔한 인상을 주지 못한다. 이 문제의 예를 지난 포스트에서 올린 바 있으니 참고하기 바란다.
XBAP타입에서는 브라우저에서 임베딩되어 보이는(view) 방식은 동일하지만 XBAP 타입에서는 그 구현 방식이 이전과는 판이하다. 아마 이것이 가장 큰 변화는 배포 방식으로 ClickOnce를 사용한다는 것이다. 이 방식에 대해서도 이미 포스트를 올린 바 있으니 참고하기 바란다.

'개발 > UI프로그램' 카테고리의 다른 글

[연재 03] .NET3.0관련 MIME 타입  (0) 2009/04/23
[연재 02] XAML Browser Application 만들기  (0) 2009/04/23
[연재 01] XAML Browser Application- 사설(辭說)하기  (0) 2009/04/23
13 Where Are We?  (0) 2009/04/23
12 PageFunction  (0) 2009/04/23
11 WPF 리소스  (0) 2009/04/23
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

WPF
애플리케이션 모델은 매우 유연하다. 기본적으로 독립형 애플리케이션과 브라우저 호스팅 애플리케이션을 만들수 있고 그리고 애플리케이션 모델은 메뉴 스타일과 하이퍼링크 스타일의 네비게이션을 지원하다. 또한 애플리케이션의 컨텐트는 애플리케이션 어셈블리나 또는 참조되는 어셈블리에 패키징될 수도 있고 또는 자유로운(loose) 파일로서 여러 곳에 위치할 수도 있다. 결론적으로 말하면, WPF 애플리케이션 모델이 만들어내는 사용자 경험은 풍부하다. 개발자의 선택에 의해서만 제한될 수 있다.

-----------------------------------------------------------------------
Michael Weinhardt

- programmer/writer at Microsoft, working on the Windows Client SDK.

저술 관련

-         "Wonders of Windows Forms" column at MSDN Online

-         Windows 기술 관련 서적 리뷰

-         Windows Forms 2.0 Programming (Addison-Wesley Professional, 2006).

-----------------------------------------------------------------------


From the October 2006 issue of MSDN Magazine.

'개발 > UI프로그램' 카테고리의 다른 글

[연재 02] XAML Browser Application 만들기  (0) 2009/04/23
[연재 01] XAML Browser Application- 사설(辭說)하기  (0) 2009/04/23
13 Where Are We?  (0) 2009/04/23
12 PageFunction  (0) 2009/04/23
11 WPF 리소스  (0) 2009/04/23
10 Frame  (0) 2009/04/23
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.


이처럼 컨텐트가 다양한 곳에서 올 수 있고, 하이퍼링크 기반의 애플리케이션에서는 다른 어떤 곳으로의 네비게이션을 허락하기 때문에 어떤 태스크를 완수하기가 어려워질 수 있다. 하이퍼링크 기반의 애플리케이션은 사용자들을 특정 페이지에 국한시키는 것이 쉬운 문제가 아니기 때문이다. 애플리케이션이 하이퍼링크를 제공하는가 여부에 상관없이 사용자들은 브라우저의 주소창을 이용해서 어떤 페이지로든지 이동할 수 있다. 결과적으로 사용자는 아직 태스크가 완료되지 않은 상태에서 태스크를 시작했던 페이지를 떠나버릴 수 있다. Web에서는 세션 상태 등을 이용해서 다이얼 로그 창 스타일을 만들어 낼 수 있는 많은 트릭이 있지만 불행히도 많은 부하가 걸리는 작업이다. 다이얼 로그 창이 문제를 해결할 수 있는 방법이긴 하지만 보안과 관련된 이유로 해서 XBAP과 같은 애플리케이션은 윈도우를 만들어 낼 수 없다. 이것은 기본적으로 Internet Zone의 부분 신뢰의 환경에서 구동된다.

다행히 WPF는 페이지 펑크션(page function)으로 모달창 스타일의 일 처리를 대체할 수 있다. 이것은 제너릭 타입 PageFuntion으로 구현되는데, Page에서 직접 상속을 받는다. 결과적으로 PageFunction Page처럼 보이고 다음과 같은 방식으로 쉽게 만들 수 있다.

<!--OrderABoxPageFunction.xaml (markup) -->

<PageFunction

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:local="clr-namespace:BoxApplicationXBAP"

  x:Class="BoxApplicationXBAP.OrderABoxPageFunction"

  x:TypeArguments="local:Order"

  WindowTitle="Box Application - Order a Box" >

  ...

  <!--Content-->   

  ...

<PageFunction>

// OrderABoxPageFunction.cs (code-behind)

public partial class OrderABoxPageFunction:

  PageFunction<Order> { ... }

이 페이지 펑크션의 예제는 Order로 구현된 주문 정보를 모으는 일을 한다. 태스크는 주로 이렇게 데이터를 대상으로 해서 수행되므로 PageFunction은 태스크가 수행될 데이터의 특정 타입을 x:TypeArguments 어트리뷰트를 이용해서 선언하도록 하고 있다. 만약 x:TypeArguments값이 제너릭 타입 PageFunction의 인자와 일치하지 않으면 컴파일 에러가 발생한다

PageFunciton을 호출하려면 호출 페이지는 PageFunction을 인스턴스화시켜서 그것으로 네비게이트해야 한다.

// HomePage.cs (codebehind)

public partial class HomePage : Page

{

  void orderHyperlink_Click(object sender, RoutedEventArgs e)

  {

  OrderABoxPageFunction pageFunction = new OrderABoxPageFunction();

  pageFunction.Return += new ReturnEventHandler<Order>(

     OrderABoxPageFunction_Returned);

  this.NavigationService.Navigate(pageFunction);

  }

  ...

}

그런 다음 PageFunction에서는 호출 페이지로 결과를 리턴하기 전에 페이지를 완수하도록 해야 한다.

// OrderABoxPageFunction.cs (codebehind)

public partial class OrderABoxPageFunction:

  PageFunction<Order>

{

  void orderHyperlink_Click(object sender, RoutedEventArgs e)

  {

  // Return order

  this.OnReturn(new ReturnEventArgs<Order>(this.order));

  }

  void cancelHyperlink_Click(object sender, RoutedEventArgs e)

  {

  // Cancel order

  this.OnReturn(null);

  }

  ...

}

PageFunction에서 리턴하려면 PageFunction.OnReturn를 호출하면 된다. 이때 제너릭 타입의 인자ReturnEventArgs 인스턴스를 넘긴다. 만약 태스크가 수락된다면, PageFunction이 대상으로 작업했던 타입(Order)의 인스턴스를 포함하고 있을 것이다. 그렇지 않으면 null을 가지고 있을 것이다. PageFunction이 리턴되는 때를 확인하고 ReturnEventArgs와 그것의 데이터를 얻으려면 호출 페이지에서는 다음처럼 PageFunction.Returned 이벤트를 이용한다. 반환된 데이터는 Returned 핸들러의 ReturnEventArgs의 속성 Result에서 구할 수 있다.

// HomePage.cs (code-behind)

public partial class HomePage : Page

{

  // Launch the page function

  void orderHyperlink_Click(object sender, RoutedEventArgs e)

  {

  OrderABoxPageFunction pageFunction = new OrderABoxPageFunction();

  pageFunction.Return += new ReturnEventHandler<Order>(

       OrderABoxPageFunction_Returned);

  this.NavigationService.Navigate(pageFunction);

  }

  // Handle page function return

  void OrderABoxPageFunction_Returned(

  object sender, ReturnEventArgs<Order> e)

  {

  if (e != null) this.orders.Add(e.Result);

  }

  ...

}

태스크가 완료되면 PageFuntion이 네비게이션 히스토리에서 제거되기를 원할 수도 있다. 그런 경우는단순히 다음 설정만 해주면 된다.

<!--OrderABoxPageFunction.xaml (markup) -->

     <PageFunction RemoveFromJournal="True" ...="" >

       ...

       <!--Content-->

       ...

       <PageFunction>

페이지 펑크션을 네비게이션 히스토리에서 제거함으로써 사용자가 뒤로 네비게이트해서 다시 페이지 펑크션으로 들어가는 것을 막을 수 있다. 그렇지 않다면 사용자는 이미 완료된 태스트의 데이터를 수정함으로써 데이터의 정합성에 문제를 일으킬 수 있는 가능성이 되는 것이다.

주의할 것은 태스크는 하나 이상의 페이지로 이루어질 수 있다. 이것은 위저드 스타일의 사용자 경험에는 흔한 일이다. 이런 경우에도 PageFunction은 적합하다. PageFunction은 하나의 페이지 펑크션을 대상으로 하는 동일한 기술을 여러 페이지에서도 적용할 수 있기 때문이다.

'개발 > UI프로그램' 카테고리의 다른 글

[연재 01] XAML Browser Application- 사설(辭說)하기  (0) 2009/04/23
13 Where Are We?  (0) 2009/04/23
12 PageFunction  (0) 2009/04/23
11 WPF 리소스  (0) 2009/04/23
10 Frame  (0) 2009/04/23
09 XAML Browser Applications  (0) 2009/04/23
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

지금까지 애플리케이션 어셈블리에 임베딩되는 페이지드에 대해서 이야기했다. 그러나 컨텐트는 다양한곳으로부터 로딩될 수 있다. 소스 코드가 있는 어셈블리에 같이 포함(embedding)되어 있을 수도 있지만 참조되는 어셈블리에 있을 수도 있고, 또는 어셈블리에 포함되어 있지 않은 다른 자유로운 파일(loose file)들로 되어 있을 수도 있다. 그런 자유로운 파일들은 로컬 디스크, 파일 공유 서버, 또는 웹 사이트에 있을 수 있다. 그리고 컨텐트가 어셈블리에 포함되어 있든 자유로운 파일로 존재하든간에 그것이 꼭 페이지(Page)일 필요는 없다. 컨텐트는 이미지, 비디오, 오디오 같은 다양한 미디어를 가질 수 있다. 그리고 컨텐트는 반드시 특별한 애플리케이션에 소속될 필요도 없다. 다른 웹 애플리케이션에 포함된 HTML 페이지도 컨텐트가 될 수 있는 것이다.

이런 유연함은 개발자가 실세계를 좀 더 쉽게 다룰 수 있도록 해준다. 때로는 컨텐트가 어떤 애플리케이션에서만 사용될 수도 있다. 그런 경우는 컨텐트를 애플리케이션 어셈블리에 바로 임베딩시켜서 배포하는 것이 합리적일 것이다. 그러나 때로 어떤 애플리케이션들은 규칙적으로 변경되는 컨텐트를 가질 수 있다. 그렇다고 계속해서 다시 빌드를 한 후 재배포를 한다는 것은 불합리하다. 또 어떤 경우는 여러 애플리케이션에서 컨텐트를 공유하는 경우도 있을 것이다. XBAP 애플리케이션은 필요없는 다른 어셈블리를 다운받지 않고도 이런 자유로운 컨텐트를 사용할 수 있다.

이런 유연성을 활성화시키기 위해서 WPF는 리소스를 고유하게 결정(identify)할 수 있는 새로운 메커니즘을 포함하고 있다. 컨텐트가 어디에 있는지 그것이 임베딩형인지 아니면 자유로운 형태인지는 상관없다. 이런 모든 경우를 대처할 수 있는 Pack URI 스킴을 구현하고 있다. 이것을 사용하면 애플리케이션의 자원에 고유한 URI를 부여할 수 있게 된다. WPF Pack URI 스킴을 사용해서 몇가지 다른 그러나 흔히 있을 수 있는 컨텐트 로딩에 대한 시나리오를 지원한다

이 문서의 샘플 코드에서 윈도우와 페이지를 결정하는데 Application.StartupUri 또는 Hyperlink.NavigateUri를 사용한다.

<!--App.xaml (markup)-->

<Application ...="" StartupUri="HomePage.xaml" />

이 예제의 URI값은 사실 Pack URI의 상대적 버전이다. 우리가 익숙한 방식대로 이렇게 간단한 형태로 쓸 수 있지만 이것의 절대 버전은 다음과 같은 형태를 취한다.

pack://application:,,,/HomePage.xaml

절대 Pack URI 3개의 주요 부분으로 구성된다: 스킴(pack://), authority ( application: ) 그리고 경로(,/HomePage.xaml). authority는 리소스를 가지고 있는 컨테이너의 타입을 말한다. 반면에 경로는 그 컨테이너에 상대적인 리소스 위치를 말한다. application:컨테이너는 사실은 어셈블리가 된다. 그리고 그 경로는 어셈블리의 루트에 대한 상대적인 리소스 위치이다.

Pack URI가 절대적이든 상대적이든 간에 그것이 가리키는 컨텐트는 어셈블리에 임베딩될 수도 있고 자유로운 XAML 파일로서 애플리케이션 실행파일로부터의 상대적인 위치에 있을 수도 있다. Whether an absolute or relative Pack URI is used, the content that it refers to can either be embedded within an assembly or exist as a loose XAML file that is stored in a location relative to the application executable. 애플리케이션 실행파일고 같은 폴더에 있는 자유로운 XAML 페이지의 경우 그 Pack URI는 다음과 같다.

pack://application:,,,/HomePage.xaml

흥미로운 것은 자유로운 XAML 파일에 대한 Pack URI는 같은 이름의 임베딩 파일의 Pack URI와 같은값을 갖는다. 이 두가지를 구분하기위해서 WPF는 먼저 임베딩된 리소스를 찾기 위해서 어셈블리 내부를 먼저 검색하고 다음으로 자유로운 리소스를 찾는 간단한 방법을 사용한다

Pack URI는 참조되는 어셈블리에 임베딩되어 있는 리소스에 접근하기 위해서도 사용될 수 있다. 그러나 그 모양은 약간 다르다.

pack://application:,,,/BoxApplicationLibrary;component/HomePage.xaml

이것의 상대 버전의 Pack URI는 다음과 같다.

/BoxApplicationLibrary;component/HomePage.xaml

Pack URI는 애플리케이션의 원래 사이트 즉 애플리케이션이 구동된 곳에서 리소스를 찾고 로딩하는데도 사용할 수 있다. 웹 서버로부터 구동된 XBAP 애플리케이션의 경우는 애플리케이션을 게시한 위치에 새로운 컨텐트를 복사해 넣는 것만으로도 애플리케이션의 컨텐트를 최신 상태로 유지시켜 줄 수 있다. 원래 사이트에 있는 리소스에 접근하기 위해서는 다른 형태의 Pack URI를 사용한다. 이때는 항상 절대적 버전만을 사용할 수 있다.

pack://siteoforigin:,,,/HomePage.xaml

임베딩 페이지든 아니면 자유로운 페이지든간에, 마치 HTML 페이지 네비게이션에서처럼 페이지의 부분으로 네비게이션할 수 있다. 페이지에는 다음처럼 XAML 요소에 Name이라는 어트리뷰트를 설정해서 이동할 부분을 정의한다.

<Page ...="" >

  <TextBlock Name="Paragraph1" TextWrapping="Wrap">

  ...

  </TextBlock>

</Page>

그리고 페이지의 정의된 이 부분으로 네비게이트하기 위해서는 페이지 URI"#XAMLElementName"형태의 값을 첨부하는 방식을 사용한다

HelpPage3.xaml#Paragraph1

'개발 > UI프로그램' 카테고리의 다른 글

13 Where Are We?  (0) 2009/04/23
12 PageFunction  (0) 2009/04/23
11 WPF 리소스  (0) 2009/04/23
10 Frame  (0) 2009/04/23
09 XAML Browser Applications  (0) 2009/04/23
08 NavigationService  (0) 2009/04/23
Posted by dalbong2

10 Frame

개발/UI프로그램 2009/04/23 17:09

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

Frame
은 다른 스타일의 네비게이터(독립형 또는 브라우저 기반, 메뉴 기반 또는 하이퍼링크 기반) 가 호스팅하는 컨텐트에 브라우저 스타일의 사용자 경험을 포함시킬 수 있다. 그것의 유연성을 고려해서 개발자는 Frame을 사용하는 방법을 결정할때는 의도된 사용자 경험에 맞도록 잘 결정해야 한다.

독립형, 메뉴 기반의 애플리케이션은 도움말 파일 같은 문서 스타일의 컨텐트로 네비게이팅하는 적절한 모델이 되지 못한다. 대신에 그림 10처럼 하이퍼링크 방식이 좀더 적절할 것이고 쉽게 독립형 애플리케이션의 윈도우(Window)에 임베딩될 수 있을 것이다.

1037187849
그림 10 독립형 윈도우에서의 브라우징 가능한 컨텐트

이것은 다음과 같은 마크업으로 가능하다.

<!--HelpDialog.xaml (markup)-->

     <Window ...="" >

       <DockPanel>

         <TextBlock

           Padding="20,20,20,20"

           DockPanel.Dock="Top"

           TextWrapping="Wrap"

           FontSize="15"

           FontWeight="Bold" >

           Box Application Help

         </TextBlock>

         <Frame Padding="20,0,20,0"           Source="HelpPageContents.xaml" />

       </DockPanel>

     </Window>

Frame을 사용하는 다른 방법으로는 그림 11처럼, WPF 페이지(Page)의 컨텐트내에 호스팅시킴으로써 HTML IFrame처럼 사용할 수 있다. 마크업 코드는 다음과 같을 것이다.

<!--HelpPage.xaml (markup)-->

     <Page ...="" >

       <DockPanel>

         <TextBlock

           Padding="20,20,20,20"

           DockPanel.Dock="Top"

           TextWrapping="Wrap"

           FontSize="15"

           FontWeight="Bold" >

           Box Application Help

         </TextBlock>

         <Frame ...="" Source="HelpPageContents.xaml" />

       </DockPanel>

     </Page>

다른 네비게이터에 직간접으로 호스팅되는 컨텐트에 프레임이 호스팅될때는 기본적으로 부모 네비게이터가 관리하는 네비게이션 서비스를 사용한다. 이것이 의미하는 바는 프레임의 네비게이션 히스토리는 부모 네비게이터 자신의 히스토리와 함께 부모 네비게이터의 네비게이션 저장 히스토리로 저장된다는 것이다. 따라서 부모 네비게이터의 네비게이션 히스토리를 앞 뒤로 이동하기위해서는 반드시 프레임의 네비게이션 히스토리를 이동해야만 한다. 만약 부모 네비게이터가 몇 개의 페이지에서 공유되는 컨텐트를 호스팅하는 경우라면 이런 사실이 그리 나뿐 것만은 아니다. 이것은 ASP.NET master/child 컨텐트와 다소 비슷한 개념이다.

1053675072
그림 11 컨텐트 내에 호스팅된 Frame

반면에 하나의 프레임에서 여러 페이지들이 모여서 단일 논리적 컨텐트 집합을 구성한다면 그런 경우의 네비게이션은 다소 힘들어지게 될 것이다. 예를 들어 도움말을 구성하는 페이지가 여러 개 모여서 프레임에 호스팅되는 경우가 있을 수 있다. 사용자는 자신이 원하는 페이지를 찾아서 프레임 내부의 페이지를 네비게이트할 것이다. 그런 후 다시 부모 페이지로 네비게이트하려면 그동안 브라우징했던 모든 페이지를 다시 되돌아가야 한다. 그러나 사용자는 바로 이전의 부모 페이지로 네비게이트하기를 원할 것이다. 이런 경우 JournalOwnership 속성을 다음과 같이 설정해서 프레임의 히스토리는 프레임 자신이 사용하도록 할 수 있다.

<Page ...="" >

       ...

       <Frame ...="" JournalOwnership="OwnsJournal" />

       ...

     </Page>

JournalOwnership은 프레임이 어떤 저널(journal)을 사용할 것인지를 설정할 수 있는 속성이다. 저널(journal) WPF에서 네비게이션 히스토리를 내부적으로 캡슐화하는 유형이다. 저널 타입을 사용하면 프레임의 네비게이션 히스토리와 프레임의 부모의 네비게이션 히스토리를 함께 관리할 것인지 분리해서 관리할 것인지를 설정할 수 있는 것이다. 다음 JournalOwnership 열거형 값중의 하나가 된다. 

enum JournalOwnership

{

  Automatic,        // Frame이나 NavigationWindow 호스팅을 하면 "UsesParentJournal"

                    // 그렇지 않다면 “OwnsJournal”

                   // (default)

  OwnsJournal,      // Frame 네비게이션 히스토리를 관리한다.

  UsesParentJournal // Frame 호스트가 네비게이션 히스토리를 관리한다.

}

프레임이 자신만의 네비게이션 히스토리를 갖는다면 그림 12처럼 부모의 네비게이션과 비주얼적으로도 구분할 수 있도록 해준다.

1026805729
그림 12 자신의 네비게이션 히스토리를 갖는 프레임

'개발 > UI프로그램' 카테고리의 다른 글

12 PageFunction  (0) 2009/04/23
11 WPF 리소스  (0) 2009/04/23
10 Frame  (0) 2009/04/23
09 XAML Browser Applications  (0) 2009/04/23
08 NavigationService  (0) 2009/04/23
07 NavigationWindow  (0) 2009/04/23
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

NavigationWindow, Page,
그리고 Hyperlink는 독립형 애플리케이션에서 브라우저 스타일의 사용자 경험을 제공해 줄 수 있는 좋은 방법이다. 비록  즐겨찾기, 브라우징 탭과 같은 장식용 기능들을 가지고 있지는 않지만 NavigationWindow는 어떤 의미에서는 하나의 브라우저이다. 많은 사용자들이 브라우저에 익숙해져 있기 때문에 브라우저와 같은 기능들 또는 브라우저와 통합될 수 있는 애플리케이션에 좀 더 편안함을 느끼게 될 것이다. 만약 애플리케이션이 브라우저의 호스팅을 받고 하이퍼링크가 기반이 되는 환경을 제공받을 수 있다면 그곳이 바로 WPF XAML 애플리케이션(XBAP)이 가야 할 방향일 것이다.

예제 애플리케이션의 XBAP 버전을 만들기 위해서는 Visual Studio 2005에서 새로운 타입의 .NET Framework 3.0 웹 브라우저 애플리케이션 프로젝트를 생성해야 한다. 그리고는 NavigationWindow 버전의 애플리케이션에 있는 파일들을 복사한다. 애플리케이션 정의의 파일(App.xaml)은 제외한다. 이렇게 만들어진 애플리케이션은 그림에서처럼 IE에서 구동된다.

1200722673
그림 9 IE에서 호스팅되는 App

XBAP 애플리케이션은 웹 서버로 바로 게시되어서 인터넷 또는 인트라넷에서 바로 구동될 수 있다. 이것은 .NET Framework 3.0에 포함된 ClickOnce 배포 방식을 통해서 가능하게 되었다. ClickOnce를 이용하기 위해서, MSBuild는 사용자가 최종적으로 구동시킬 수 있는 EXE 실행 파일뿐만 아니라 두개의 추가적인 매너페스트 파일도 만들어낸다. 이 두 파일은 ClickOnce EXE 실행파일을 다운하고 구동시키는데 필요한 내용을 담고 있다. 이 중의 하나는 애플리케이션 매너페스트로 알려져 있고 .xbap 확장자를 갖는다. 이 파일은 사용자가 XBAP 애플리케이션을 구동하려고 할 때 실제로 호출해야 하는 파일이다. 구동 프로세스는 사용자 경험(user experience)에서 전혀 새롭지 않다-XBAP 애플리케이션을 브라우징하는 사용자 경험은 기존에 브라우저를 통해서 웹 애플리케이션을 브라우징하는 것과 유사하다.

XBAP 애플리케이션이 Internet으로 부터 구동되면 보안이 중요한 문제가 된다. 이런 이유로 해서 XBAP 애플리케이션은 클라이언트 PC에 인스톨되지 않는다. 그리고 XBAP 애플리케이션은 악의적인 코드로 부터 클라이언트 머신을 보호하기 위해서 애플리케이션의 보안 샌드 박스(security sand box)를 통해서 .NET 프레임워크의 Code Access Security( CAS)를 적용한다- XBAP 애플리케이션은 Internet Zone에 허락된 일만을 할 수 있다. 만약 XBAP Internet Zone 권한 밖의 일을 하려고 하면 예외가 발생하고 애플리케이션은 실행을 멈추게 된다.

Internet zone의 권한은 WPF의 능력에 상당한 제한을 가하게 된다. 예를 들어 SaveFileDialog 창을 이용한다든가 또는 레지스트리 접근 그리고 스크립트를 통한 HTML DOM(Document Object Model) 접근들을 할 수 없게 된다. XBAP 애플리케이션의 보안에 대한 이점을 얻기 위해서는 이렇게 많은 것들을 희생해야 하지만 여전히 WPF cool한 특징들을 즐길 수 있다(역주. 만약 애플리케이션을 신뢰할 수 있다면 완전한 WPF의 이점을 모두 이용할 수 있도록 설정할 수 있다)

'개발 > UI프로그램' 카테고리의 다른 글

11 WPF 리소스  (0) 2009/04/23
10 Frame  (0) 2009/04/23
09 XAML Browser Applications  (0) 2009/04/23
08 NavigationService  (0) 2009/04/23
07 NavigationWindow  (0) 2009/04/23
06 Hyperlink  (0) 2009/04/23
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

WPF
에서 NavigationService를 이용하면 앞에서와 같은 페이지와 페이지 호스트간의 서로 독립적인 관계를 이룰 수 있다. NavigationService는 네비게이션, 네비게이션 히스토리, 네비게이션 생명주기(lifetime)등을 포함한 네비게이션 엔진의 기본적인 기능들을 구현하고 있다. 다음은 NavigationService타입의 주요 멤버들을 보여주고 있다.

sealed class NavigationService : IContentContainer

{

  // Navigation

  public bool Navigate(Uri source); // Navigate to URI

  public void Refresh(); // Re-navigate to current content

  public void StopLoading(); // Stop current navigation

  // Navigation History

  public bool CanGoBack { get; } // Content in back nav. history?

  public bool CanGoForward { get; } // Content in forward nav. history?

  public void GoBack(); // Go to previous content in nav. history

  public void GoForward();  // Go to next content in nav. history

  // Navigation Lifetime

  // Navigation requested

  public event NavigatingCancelEventHandler Navigating;

  // Navigated to content

  public event NavigatedEventHandler Navigated;

  // Content loaded

  public event LoadCompletedEventHandler LoadCompleted;

  // Navigation error

  public event NavigationFailedEventHandler NavigationFailed;

  // Bytes downloaded

  public event NavigationProgressEventHandler NavigationProgress;

  // Navigation stopped

  public event NavigationStoppedEventHandler NavigationStopped;

  // Content

  public object Content { get; set; } // The currently loaded content

  public Uri CurrentSource { get; }  // The URI for the current content

  public Uri Source { get; set; }   // The URI for the current content

  // or, if navigating, the URI for the

  // content being navigated to

  // Find a navigation service

  public static NavigationService GetNavigationService(

     DependencyObject dependencyObject);

}

NavigationWindow은 자기의 네비게이션 엔진을 구현하지 않는다. 대신에 NavigationService 인스턴스를 사용한다. Page는 실제로 자신을 호스팅하는 NavigationWindow NavigationService 참조를 GetNavigationService라는 메소드를 이용해서 얻을 수 있다.

// HomePage.xaml.cs (codebehind)

public partial class HomePage : Page

{

  void viewHyperlink_Click(object sender, RoutedEventArgs e)

  {

  // View Order

  ViewOrderPage page = new ViewOrderPage(GetSelectedOrder());

  NavigationService ns =

     NavigationService.GetNavigationService(this);

  ns.Navigate(page);

  }

  Order GetSelectedOrder() { ... }

  ...

}

이로써 Page가 그것의 호스트를 구체적으로 알지 못해도 네비게이션을 독립적으로 수행할 수 있도록 해 준다. 이런 요구 사항은 흔히 있을 수 있는 일이므로 Page NavigationService라는 헬퍼 속성을 가지고 있는데 동일한 역할을 한다.

// HomePage.xaml.cs (code-behind)

public partial class HomePage : Page

{

  void viewHyperlink_Click(object sender, RoutedEventArgs e)

  {

  // View Order

  ViewOrderPage page = new ViewOrderPage(GetSelectedOrder());

  this.NavigationService.Navigate(page);

  }

 

  Order GetSelectedOrder () { ... }

  ...

}

그림 7NavigationWindow, NavigationService, 그리고 Page간의 관계를 나타낸다. 보는 것 처럼, NavigationWindow NavigationServiceConten속성을 다시 구현하고 있다. NavigationWindow은 이런식으로 NavigationService 멤버 대부분을 재 구현하고 거기에 몇가지를 더 추가하고 있다. 예를 들어 NavigationWindow NavigationService를 각각 이용해서 네비게이션 히스토리상의 전, 후로 이동할 수 있다.

1339054825
그림 7 관계

WPF에서는 네비게이터(navigatior)라고 해서 3종류의 호스트가 있다 : NavigationWindow, Frame, 브라우저(WPF1.0에서는 IE 6.0이상). 앞의 코드에서처럼 페이지가 자신의 NavigationService 속성을 사용하도록만 코딩된다면 그림에서처럼 아무 변경 없이도 페이지를 이 3개의 네이게이터에서 호스팅될 수 있다.

1019442981
그림 8 네비게이션 코드

이런 관계를 알았다면, 이제 독립현 애플리케이션에서 호스팅된 페이지를 IE를 사용해서도 어떤 곳에서든지 호출해 볼 수 있다는 것이 가장 흥미로울 것이다.

'개발 > UI프로그램' 카테고리의 다른 글

10 Frame  (0) 2009/04/23
09 XAML Browser Applications  (0) 2009/04/23
08 NavigationService  (0) 2009/04/23
07 NavigationWindow  (0) 2009/04/23
06 Hyperlink  (0) 2009/04/23
05 Page  (0) 2009/04/23
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

지금쯤이면 몇가지 의문 사항들이 있을 수 있을 것이다. Page가 윈도우는 아니라고 했다. 그렇다면 그것을 호스팅하는 윈도우는 어디서 왔는가? 하이퍼링크를 클릭하면 그 네비게이션을 실제로 처리하는 것은 무엇인가? 그리고 어떻게 해서 HTML 웹 페이지가 WPF 애플리케이션에서 출력될 수 있게 되는가? 이 모든 것을 담당하는 것은 NavigationWindow이다. 

Application.StartupUri 속성이 XAML 또는 HTML 페이로 설정되면 Application(이 페이지들은 자신들을 호스팅할 윈도우가 없다는 것을 알고 있다)은 그것들을 호스팅할 NavigationWindow 인스턴스를 생성한다.  NavigationWindow Window를 상속하는 클래스로서, 여기에 그림 6처럼 앞 뒤로 네비게이션이 가능한 브라우저와 조금 닮은 비주얼한 모양을 추가한다.

1273080631
그림 6 NavigationWindow에의해 생성된 윈도우.

사용자가 XAML 페이지에 있는 하이퍼링크를 클릭하면 Hyperlink NavigationWindow에 지정된 URI로 네비게이트할 것을 요청한다. NavigationWindow URI에 있는 페이지를 로딩해서 호스팅하게 된다. 페이지가 로딩된 URI 위치는 NavigationWindow.Source 속성에 저장되고, 로딩된 페이지의 컨텐트는 NavigationWindow.Content 속성을 통해서 접근할 수 있다.

컨텐트가 변경되면, 네비게이션이 완료된 것으로 간주되어서 이전의 컨텐트는 네비게이션 히스토리에 저장된다. 이것도 또한 NavigationWindow가 관리한다. NaviationWindow의 네비게이션용 UI는 두개의 버튼과 드롭다운 리스트를 제공한다. 개발자는 이렇게 기본적으로 제공되는 NavigationWindow의 스타일을 변경하여 새로운 네비게이션 UI를 쉽게 만들어 낼 수 있다.

지금까지는 하이퍼링크로 이동할 URI를 마크업을 이용해서 설정하는 방법을 보았다. 그러나 때로는 네비게이션을 이렇게 선언적으로 결정할 수 없는 경우도 있다. 예를 들어 주문 내용을 보기를 원한다면 Page 객체를 생성해서 그것을 사용자가 보기 원하는 주문을 건네줘야 할 필요가 있다. 이것은 선언적으로 될 수 없다. 대신에 다음처럼 코드를 사용할 수 있다.

HomePage.xaml (markup)

<Page ... >

  ...

  <Hyperlink Click="viewHyperlink_Click">

  View

  </Hyperlink>

  ...

</Page>

HomePage.xaml.cs (codebehind)

public partial class HomePage : Page

{

  void viewHyperlink_Click(object sender, RoutedEventArgs e)

  {

  // View Order

  ViewOrderPage page = new ViewOrderPage(GetSelectedOrder());

  NavigationWindow window =

     (NavigationWindow)this.Parent; // Don’t do this!

  window.Navigate(page);

  }

  Order GetSelectedOrder()

  {

  return (Order)this.ordersListBox.SelectedItem;

  }

  ...

}

하이퍼링크가 클릭되면, 그것의 클릭 이벤트 핸들러는 현재 선택된 주문을 얻어서 ViewOrderPage를 생성할 때 인자로 건네준다. 그리고 그것의 호스트 NavigationWindow Navigate 메소드를 호출하면 된다. 그럼, URI 대신에 객체를 사용해서 페이지로 이동할 수 있게 된다.

호스트 NavigationWindow에 대한 참조를 얻는 방법이 아마도 이상할지도 모르겠다. 이것은 Page가 그것을 호스팅하는 것에 대해서 명시적으로 알지 못하기 때문에 필요한 작업이다. 페이지는 Parent 속성을 통해서 자신의 호스트를 결정하지만 그러나 Parent 속성은 특정 호스트 타입에 대한 strongly-typed 참조 대신에 DependencyObject 타입의 참조를 리턴한다. 따라서 Parent를 특정 호스트 타입으로 캐스팅하게 되는데, 이것은 Page가 자신을 호스팅하는 것에 대한 타입을 알고 있다는 것을 의미한다. 그러나 알게 되겠지만 NavigationWindow만이 Page를 호스팅하는 것은 아니다. 따라서 페이지가 여러 타입의 호스트에서 호스팅될 수 있기를 바란다면 호스트 독립적인 방법으로 네비게이션을 수행할 필요가 있다.

'개발 > UI프로그램' 카테고리의 다른 글

09 XAML Browser Applications  (0) 2009/04/23
08 NavigationService  (0) 2009/04/23
07 NavigationWindow  (0) 2009/04/23
06 Hyperlink  (0) 2009/04/23
05 Page  (0) 2009/04/23
04 Window  (0) 2009/04/23
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다. 문서의 모든 차례를 보려면 SmartClient3.0 카테고리를 참조하기 바란다.

하이퍼링크 기반의 애플리케이션은 하나 이상의 XAML 페이지를 갖게 될 것이고 사용자들에게 이런 페이지들간에 네비게이트할 수 있는 방법을 제공할 필요가 있을 것이다. 해서 WPF Hyperlink 클래스를 제공하고 있다.

<!--HomePage.xaml (markup)-->

<Page ... >

  ...

     <Hyperlink NavigateUri=          "OrderingGuidelinesPage.xaml">

  Ordering Guidelines

  </Hyperlink>

  ...

</Page>

Hyperlink HTML HREF와 동일한 프로그래밍 모델을 사용하여 다른 XAML 페이지로 네비게이트할 수 있다. 개발자는 이동할 대상 페이지의 URI(이 경우는 OrderingGuidelinesPage.xaml)와 그리고 사용자들이 보고 클릭할 수 있는 텍스트(이 경우는 "Ordering Guidelines")를 지정할 수 있다.

만약 대상 페이지가 HTML기반의 웹 페이지인 경우도, WPF Hperlink는 자연스럽게 웹 기반의 페이지 내용도 출력해준다. 예를 들어 주문시 도움말을 보여주는 페이지가 이미 웹 사이트에 만들어져 있다면 애플리케이션에서 XAML 페이지로 그것을 다시 제작하는 것보다는 간단히 도움말 웹 페이지에 대한 URL 주소를 NavigateUri 속성에 할당하면 된다.

<!--HomePage.xaml (markup)-->

<Page ... >

  ...

  <Hyperlink NavigateUri="OrderingGuidelinesPage.html">

  Ordering Guidelines

  </Hyperlink>

  ...

</Page>

'개발 > UI프로그램' 카테고리의 다른 글

08 NavigationService  (0) 2009/04/23
07 NavigationWindow  (0) 2009/04/23
06 Hyperlink  (0) 2009/04/23
05 Page  (0) 2009/04/23
04 Window  (0) 2009/04/23
03 애플리케이션 타입(Application Type)  (0) 2009/04/23
Posted by dalbong2

05 Page

개발/UI프로그램 2009/04/23 17:07

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

Page
는 웹을 대중화시키는데 일조를 한 HTML웹 페이지에 대응되는 WPF 버전이다. 이전에 언급한 것처럼 하이퍼링크 기반의 네비게이션은 독립형과 브라우저형 애플리케이션 모두에서 지원된다. WPF에서 하이퍼링크 네비게이션 경험의 기본이 되는 컨텐트가 바로 Page이다. Visual Studio 2005의 프로젝트에서 Project | Add New File | Page(WPF)를 선택하면 마크업과 코드 비하인드로 된 Page를 프로젝트에 추가할 수 있다. 이때 다음과 비슷한 코드가 생성된다.

<!--HomePage.xaml (markup)-->

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="BoxApplicationNavigationWindow.HomePage" ... >

  ...

  <!--Order Content-->

  ...

</Page>

// HomePage.xaml.cs (codebehind)

using System.Windows.Controls; // Page

public partial class HomePage : Page { ... }

Page 마크업 파일은 Page 빌드 항목으로 설정된다. 따라서 Window의 경우에서처럼, Page URI로 로딩될 수 있고 이것은 애플리케이션이 시작할 때 Application.StartupUri에 설정된 페이지를 자동으로 로딩할 수도 있다는 것이다.

<!--App.xaml (markup)-->

<Application ... StartupUri="HomePage.xaml" />

Page 클래스는 윈도우가 아니다. Window에서 상속된 것이 아니다. Page 자체적으로 스스로를 호스팅할 수는 없도록 되어 있다. 다행히 Application 클래스는 Page 객체가 StartupUri로 설정되면 페이지를 호스팅할 수 있는 윈도우를 자동으로 하나 생성해서 호스팅에 사용한다.

'개발 > UI프로그램' 카테고리의 다른 글

07 NavigationWindow  (0) 2009/04/23
06 Hyperlink  (0) 2009/04/23
05 Page  (0) 2009/04/23
04 Window  (0) 2009/04/23
03 애플리케이션 타입(Application Type)  (0) 2009/04/23
02 사용자 경험(User Experience)  (0) 2009/04/23
Posted by dalbong2

04 Window

개발/UI프로그램 2009/04/23 17:06

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다. 문서의 모든 차례를 보려면 SmartClient3.0 카테고리를 참조하기 바란다.

WPF
에서 윈도우는 Window로 구현된다. Window는 항상 독립형 애플리케이션에서는 컨텐트를 호스팅하는 기본적인 단위가 되어 왔다.

Visual Studio 2005에서 Project | Add New Item | Window(WPF) 를 선택하면 Window가 하나 프로젝트에 추가된다.

<!--MainWindow.xaml (markup)-->

<Window

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="BoxApplication.MainWindow"

</Window>

// MainWindow.xaml.cs (codebehind)

using System.Windows;

public partial class MainWindow : Window { ... }

Window가 하나 프로젝트에 추가되면 Visual Studio 2005는 그 빌드 타입을 자동으로 Page로 설정한다.

1398971973
그림 4 Window의 빌드 타입

빌드가 되면 마크업은 Window별 고유한 URI(Uniform Resource Identifier)로 인식할 수 있는 리소스로 된다. 결국 WPF에서는 URI를 이용해서 선언적인 방법으로 Window를 로딩할 수 있게 되고 다음 같은 정의를 이용해서 애플리케이션이 시작할 때 자동으로 오픈될 Window를 지정해 줄 수 있게 된다.

<!--App.xaml (markup)-->

<Application ... StartupUri="MainWindow.xaml"  />

이 마크업은 그림 5와 같은 윈도우를 보여준다. 모든 윈도우처럼, WPF윈도우도 클라이언트 영역(WPF 컨텐트와 컨트롤을 가지는 영역이다)와 비 클라언트 영역(보더, 타이틀바와 이것과 관련된 여러 요소들)으로 구성된다.

1354309477
그림 5 Window와 그 부분들

Application.StartupUri로 로딩되는 윈도우는 모달리스(modeless) 성격이다. 즉 모달리스 창을 사용하면서 사용자가 애플리케이션의 다른 윈도우를 사용할 수도 있다. 애플리케이션이 시작되면서 처음으로 생성한 윈도우이기 때문에 별 흥미로운 사실은 못된다. 만약 사용자가 애플리케이션에서 다른 모달리스 윈도우를 보여줄 필요가 있다면 Window.Show 메소드를 호출하면 된다.

// MainWindow.xaml.cs (codebehind)

public partial class MainWindow : Window

{

  void helpContentsMenuItem_Click(object sender, RoutedEventArgs e)

  {

  HelpWindow window = new HelpWindow();

  window.Owner = this; // Ensure window always appears above us

  window.Show();

  }

  ...

}

WPF는 윈도우를 모달로 보여줄 수도 있다. 즉 모달로 된 윈도우를 사용하면서 사용자가 애플리케이션의 다른 윈도우를 사용할 수 없도록 할 수 있다. 모달 창은 주로(항상 그런 것은 아니지만) 새로운 주문을 생성해야 하는 경우처럼 끝까지 완료할 필요가 있는 업무의 처리 과정에서 필요한 데이터를 수집하는데 사용된다. WPF에서 윈도우를 모달로 보여주기 위해서는 Window.ShowDialog 메소드를 호출하면 된다.

// MainWindow.xaml.cs (codebehind)

public partial class MainWindow : Window

{

  void CreateOrder()

  {

  // Place order

  OrderABoxDialog dlg = new OrderABoxDialog();

  dlg.Owner = this; // Ensure dialog box always appears above us

  bool? dialogResult = dlg.ShowDialog();

  // If order details are fine, add order to orders list

  if (dialogResult == true)

  {

     this.orders.Add(dlg.Order);

  }

  }

  ...

}

Window 클래스는 다이얼로그창의 일반적인 거동을 지원해서, 사용자가 다이얼로그 내용을 받아들이거나 취소할 수도 있고 그리고 창을 호출한 코드로 결과를 리턴해서 그 결과에 따라 적절한 처리를 할 수 있도록 해 줄 수도 있다. 메시지 박스는 다이얼로그 창의 특별한 형태로서, 사용자에게 정보를 출력하거나 질문을 던지기 위해 사용한다. WPF에서는 MessageBox 클래스로 메시지 박스를 지원한다.

// MainWindow.xaml.cs (codebehind)

public partial class MainWindow : Window

{

  void aboutMenuItem_Click(object sender, RoutedEventArgs e)

  {

  MessageBox.Show("Box Application, Version 1.0");

  }

  ...

}

메시지 박스, 다이얼로그창, 윈도우 그리고 애플리케이션은 독립형, 메뉴 기반의 애플리케이션 모델의 핵심을 이룬다. 이런 요소들은 오랫동안 이전의 프리젠테이션 기술이 지원해 오고 있다. 여기에 WPF 기술은 하이퍼링크 기반의 네비게이션을 지원하도록 확장했으며, 네비게이션 컨텐트의 기본 단위는 페이지가 된다.

'개발 > UI프로그램' 카테고리의 다른 글

06 Hyperlink  (0) 2009/04/23
05 Page  (0) 2009/04/23
04 Window  (0) 2009/04/23
03 애플리케이션 타입(Application Type)  (0) 2009/04/23
02 사용자 경험(User Experience)  (0) 2009/04/23
01 WPF로 사용자 경험(User Experience) 높이기  (0) 2009/04/23
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

그림 1과 같은 간단한 예제 박스 애플리케이션을 생각해보자. 독립형의 메뉴 기반 애플리케이션으로서 사용자들은 필요한 박스들의 목록을 보고 주문하고 주문을 삭제할 수도 있다. 이런 사용자 경험을 제공하기 위해서, 애플리케이션 제작의 가장 기본적인 것부터 시작할 필요가 있다 : 애플리케이션 생성.

1006434244
그림 1 박스 애플리케이션


윈도우 기반의 애플리케이션은 몇가지 표준적인 기반 구조를 가지고 있다 : 엔트리 포인트와 메시지 루프. 그리고 다음과 같은 공통적인 애플리케이션 서비스가 필요할 수도 있다.

l        커맨드 라인 파라미터 처리

l        종료 코드(exit code) 반환

l        애플리케이션 영역의 상태

l        처리하지 않은 예외 처리

l        애플리케이션 생명주기(lifetime)관리

WPF 애플리케이션은 이런 기반 요소와 서비스들을 네임스페이스 System.Windows.Application에 모두 포함하고 있다. 개발자들은 이것들을 XAML, 코드(C#) 또는 둘을 조합해서 이런 애플리케이션 기본 인프라를 사용할 수 있다. 이런 애플리케이션 개념은 매우 유용한 개념으로 알려져 있고, Visual Studio 2005는 이런 애플리케이션 개념을 이용할 수 있도록 .NET 3.0 윈도우 애플리케이션 프로젝트를 생성할때마다 Application 인스턴스를 하나씩 추가한다.

<!--App.xaml (markup)-->

<Application x:Class="BoxApplicationWindow.App"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 

  ShutdownMode="OnMainWindowClose"

  StartupUri="MainWindow.xaml"

       >

</Application>

// App.xaml.cs (codebehind)

public partial class App : Application { ... }

1014322453
그림 2. VS2005 프로젝트


만약 이전 방식의 윈도우 기반 기술 Windows Forms, Win32
®의 프로그래밍 경험이 있다면, 조금 놀라지도 모르겠다. 얼른 보기에는 윈도우 기반의 애플리케이션 기반 구조를 마련해주기 위해 사용되는 엔트리 포인트가 없어 보인다. 이것은 Visual Studio 2005가 우리 대신에 애플리케이션 기반 구조를 자동으로 생성해주기 때문이다. Visual Studio 2005는 그림 3처럼 build action 속성을 ApplicationDefinition으로 설정한 Application 마크업 파일(App.xaml)을 이용한다. Visual Studio 2005ApplicationDefinition 값을 갖는 xaml 파일에 설정된 내용을 근거로 해서 애플리케이션 엔트리 포인트 및 기반 구조를 준비한다.

1061668314
그림 3. Application XAML 파일 설정


이런 설정은 다음 코드와 동등하다고 보면 된다.

// App.cs

using System;

public partial class App : Application

{

  [STAThread]

  public static void Main()

  {

  // Initialize and run the application

  App application = new App();

  application.Run();

  }

}

그러나 정확히 뭐가 생성되는지는 중요하지 않다. 개발자는 그 코드를 작성할 일도 그리고 그것의 복잡함을 꼭 이해할 필요도 없다. 마이크로소프트의 윈도우 프리젠테이션 기술이 시대에 따라 어떻게 추상화되는지는 개발자가 알 필요는 없다. 개발자는 다만 단 한줄의 마크업으로 실행될 수 있는 애플리케이션을 생성할 수 있고 그리고 Application의 기반 구조와 서비스를 이용할 수 있기만 하면 되는 것이다. 독립형 애플리케이션의 서비스에는 애플리케이션이 실행되기 시작하면서 하나의 윈도우를 보여주는 것도 포함한다.
Posted by dalbong2

이 포스트는 MSDN 메거진에 실린 아티클을 번역한 글의 일부이다.

UX(
사용자 경험)은 애플리케이션의 컨텐트와 그것을 호스팅하는 방법이다. WPF에서는 일반 컨트롤,2D, 3D 그래픽 그리고 애니메이션, 데이터바인딩, 레이아웃, 템플릿등을 사용해서 컨텐트를 출력한다. 그러나 사용자가 그 컨텐트를 보고 그것과 상호 작용을 할 수 있도록 호스팅이 되기 전까지는 거의 쓸모가 없다. 윈도우 애플리케이션에서는 바로 애플리케이션이 컨텐트를 패키징하고 윈도우를 통해서 그것을 출력한다. 이곳이 바로
애플리케이션 모델 개념이 등장하게 되는 문맥이다. 즉 컨텐트 패키징과 출력 방법에 따라 애플리케이션 모델이 구분될 수 있다는 것이다.

WPF 애플리케이션은 두 가지 타입으로 구분될 수 있다. : 독립형(standalone)과 브라우저형(browser, XBAP). 독립형 애플리케이션의 경우는 컨텐트를 자신의 윈도우, 다이얼로그박스, 메시지 박스를 통해서 출력하는 반면, 브라우저 애플리케이션은 브라우저에 호스팅되는 페이지로 컨텐트를 출력한다.

비슷하게, WPF의 컨텐트간의 네비게이션 방법에 있어서도 그 스타일이 구분된다:메뉴 방식과 하이퍼링크방식.  메뉴 기반의 방식은 컨텐트와 기능을 이동하기 위해서 전통적인 데스크탑 애플리케이션에서처럼 메뉴바, 툴바, 윈도우창 그리고 다이얼 로그창을 사용한다. 하이퍼 링크 방식은 웹 애플리케이션과 유사한 네비게이션 경험을 제공한다.

독립형 애플리케이션은 메뉴 기반의 네비게이션 방식이 자연스럽고, 브라우저 애플리케이션은 하이퍼링크 방식의 네비게이션이 어울리겠지만 그렇지만 WPF 애플리케이션은 혼합된 모델도 당연히 가능하다. 많은 경우 독립형 애플리케이션에 하이퍼링크 이동 방식을 부분적으로 추가한다. 물론 모든 이동 방식을 하이퍼링크를 이용할 수 있다. 이동 방식의 조합은 애플리케이션의 가장 편리하다고 느낄 수 있는 타입의 사용자 경험을 기반으로 결정되어야 한다. 애플리케이션이 전달하고자 하는 사용자 경험이 결정된다면 이제 WPF 애플리케이션 모델을 사용할 수 있게 된다.

Posted by dalbong2

Build A Great User Experience With Windows Presentation Foundation

이번 포스트는 MSDN 매거진 10월에 실린 아티클을 번역(번역은 달봉이한테 무리이고 그냥 나름대로 해석한 것이다.)한 내용을 올려 볼려고 한다. Smart Client 애플리케이션은 역시나 WPF(Windows Presentation Foundation)을 알아야 한다. 

SmartClient 기술이 나오고 웹 브라우저도에서도 Windows Form 기술의 컨트롤들을 호스팅하고 그리고 Windows Forms WebControl에서는 웹 페이지를 불러와 보여주고 하는 것이 지금의 상황이다. 즉  동일한 컨텐트인데 그것을 호스팅하는 컨테이너만 Windows Form으로 하느냐 아니면 웹 브라우저로 하느냐 인데 이런 상황을 지켜보고 있으면 언젠가는 애플리케이션 모델이 통합될 것이 아닌가 하는 예상을 해 본적이 있다.

이 문서에서는 그 통합의 가능성을 현실화시켜주는 WFP에 대한 이야기를 볼 수 있다. 그러나 AJAX 기술이 열렬한 환경을 받으며 등장하는 것과 함께 여러가지 생각을 해 보면, 데스크탑 애플리케이션과 웹 애플리케이션등 모든 애플리케이션 타입이 하나로 통합되는 것은 현실적으로 불가능할 것같다는 생각도 든다.

그러나 이제 WPF 애플리케이션 모델을 보게 된다면 기존의 Windows Forms 애플리케이션에서 만큼은 데스크톱형식과 브라우저 기반의 타입들이 통합되어지고 있다는 것을 이해할 수 있게 될 것이다.

이 문서를 읽으려고 했다면 반드시 끝까지 읽어보길 바란다. 그래서 Window, Page, Hyperlink, NavigationWindow, NavigationService, Frame, WPF 리소스, PageFunction의 새로운 개념들을 이해할 수 있기를 바란다. WPF 애플리케이션 모델을 구성하는 중요한 개념들로서, 여러분들이 개발하려는 WPF 애플리케이션을 사용자 경험(user experience) 측면에서 좀 더 적절한 구조로 만들어 줄 수 있을 것이라 본다.

또 한가지 더 짚어본다면, 이 문서 서두에 사용자 경험(User Experience)라는 것을 애플리케이션의 모델과 설계의 중요한 근거로 사용하고 있음을 언급하고 있다. 이 말은 Windows Vista WPF가 나오면서 자주 듣게 되는 말인데, 3D니 벡터 방식이니 해서 일반 애플리케이션에서도 UI(User Interface) 출력 방식의 새로운 경험을 제공할 수 있게 되어서일 것이다.

그러나 또 한편으로는 앞에서 말한 것처럼 독립형 데스크톱 애플리케이션과 브라우저 임베딩 타입의 애플리케이션개발 모델이 통합되었기 때문에 지금까지의 사용자 경험을 계속 유지하려는 노력도 더욱 더 필요해지게 되었기 때문이기도 하다. 무슨 말인가 하면 독립형 애플리케이션을 만들었는데 페이지간의 네비게이션을 하이퍼링크 방식으로 구현한다면 사용자는 왠지 편치 못한 경험을 겪게 될 것이다. 메뉴 스타일의 네비게이션과 하이퍼링크 스타일의 네비게이션이 하나의 애플리케이션에서 모두 가능하게 되면서 그 사용에 대한 가이드 라인이 필요하게 되었을 것이고 그 기준으로서 지금까지의 사용자 경험이 중요하게 되었을 것이라고 보인다. 컨테이너 안에 들어가는 페이지는 통일된 모델을 갖지만 그러나 지금까지의 사용자 경험을 근거로 해서 애플리케이션 모델을 별도로 구분하게 된다는 것이다.

따라서 이 문서에서는 WPF에서 지원하는 애플리케이션 타입들을 다루면서 앞에서 언급한 모델들의 구요 구성 객체들을 설명하고 있다. 이에 대한 이해는 앞으로의 WPF에 대한 이해에 많은 도움이 될 것으로 기대한다.

이 아티클에 대한 주요 사항을 요약하면 다음과 같다.

아티클 주소

-         http://msdn.microsoft.com/msdnmag/issues/06/10/AppFundamentals/default.aspx

사용하는 기술

-         .NET Framework 3.0, Visual Studio 2005, XAML, C#

다루는 주제

-         UX의 요소

-         WPF 리소스 모델

-         WPF 애플리케이션 모델

-         XBAP 애플리케이션 설계

소스 코드 다운로드

http://msdn.microsoft.com/msdnmag/code06.aspx
Posted by dalbong2

Orcas( Vista 용 개발환경인 Visual Studio 2007 코드 네임)를 이용해서 오프라인(가끔씩 네트워크에 연결되는 ) 애플리케이션을 작성하는 글 발견.

Orcas enables easy offline client apps( http://blogs.msdn.com/brada/archive/2007/03/24/orcas-enables-easy-offline-client-apps.aspx)

Orcas CTP 버전 다운받는곳.
Microsoft Pre-release Software Visual Studio Code Name "Orcas" - January 2007 Community Technology Preview (CTP)

Posted by dalbong2
다음 링크 페이지에서 WPF 어플리케이션을 실행시켜 볼 수 있다.
많은 어플리케이션들이 ClikOnce로 배포되거나 XBAP 애플리케이션이서 쉽게 실행시켜 볼 수 있다.
Nice list of demo-able WPF applications
Posted by dalbong2
TAG wpf, 데모
한 화면에서 WinForms과 WPF 컨트롤을 함께 사용할 수 있다는 군요.

TechEd: Getting the most out of Windows Forms and Windows Presentation Foundation (WPF)
Posted by dalbong2

Can XAML be used instead of HTML?
In recent months I have become somewhat of a XAML junkie. But also working with web applications, I like many would love to be able to use XAML instead of HTML. Is it possible? Not yet....

HTML History
I have been on the Internet long before the web existed. My first Internet access was around 1988 and from about 1991 on I had Internet from my home computer. Things were very different in the pre web and early web days. HTML 3.x was fairly basic. But for what it was, it was quite good. Then came HTML 4. Unfortunately HTML 4 has become quite a mess both of history and in my personal opinion committee. HTML 4 tried to do too much at once and while it did somethings well it just created big ugly messes in other places.

Enter XAML
Some have described XAML as what HTML would be if it could be. But to think of XAML in HTML terms you would have to first assume all backwards compatibility is off the table, and even then it might be something like HTML 9.0 in terms of capabilities. XAML is also in my opinion much better refined and does not have the ugly messes that HTML 4 does. Because of these factors many people have proposed to build websites in XAML instead of HTML. There are some obvious drawbacks as well, including the obvious one that it is Windows only (for now).

HTML Successor Requirements
For anything to supersede HTML it must do the following:

Unique URL's - Each and every page has it's own unique URL
Searchable - Be indexable and searchable by current search engines (i.e. text based)
Hyperlinks - Allow hyper linking to other documents
External resources - Allow references to resources by URL (images, video, etc)
Data posting - Allow user input and posting of data back to a server
Self sufficient pages - Each page must be self sufficient and not require other pages to display itself unless they are included resources. That is I can access Page1 with or without Page2 existing on the server, even if Page1 links to Page2 via hyperlink.
Script language - Some sort of scripting must be supported to assist with page display, user input, etc.
Cross platform - Must be supported on Windows, Macintosh, Unix, Linux, and be portable to others.
Can XAML do this?
Unfortunately no. XAML has several options:

Loose XAML - Raw XAML files containing only markup
XBAP applications - XAML applications that run in the browser and to the end user appear to have a page based interface
WPF/E - Cross platform subset of XAML
XPS - XAML Paper Specification. XPS is sort of a XAML PDF and not suitable at all for replacing HTML.
If we were able to combine features of the first three, XAML could meet the requirements. Unfortunately there seems almost to be a weird conspiracy that no one of them could do it all. Lets me examine them one by one.

Loose XAML
Loose XAML is the most obvious candidate for replacing HTML. Anyone who has played with XAML can see the obvious benefits and many people have tried to do test websites solely in loose XAML. So where does it fail?

Data posting - Loose XAML has no provision for the FORM element as in HTML. There is no way to accept a user filled in form and send the data back to the server as is commonly used in user registration, feedback pages, order forms, etc. Two way data binding could be used to do perform some of this functionality, but two way data binding requires a code file which is no available in loose XAML.
Script language - While XAML can be hosted in an HTML IFrame, the host's Javascript has no access to the XAML document or its DOM. In addition XAML can contain C# code directly in the XAML in CDATA sections. However this is supported by compiling the XAML and is only available when included in a .NET application. That is, code in CDATA sections is not supported in loose XAML. This is a major disappointment because .NET 3.0 is already required for display of loose XAML and .NET includes a C# compiler. C# in XAML is exceptionally useful and suited for even simple things as animations, basic calucations, posting to a server (item 1), and so forth. Much can be accomplished with XAML triggers, but even designers often resort to code.
Cross platform - XAML fails here, for now. But for many users on Intranets, extranets, and even the Internet Windows only is acceptable. Many sites are IE only and have been for years. That being said look at what Microsoft as done with the Office XML formats. If XAML were submitted to ECMA it would be possible for Mozilla, Mono and others to support XAML on other platforms. Even without ECMA, I expect that we will see third parties start to build XAML support.
In the end, #2 is the real show stopper. I really hope in the future versions of XAML this will be addressed. Full code with downloadable assemblies etc is not needed, although a sandbox model with cached logic assemblies would be nice. Even if code was just available for scripting purposes on the XAML page itself it would be very useful.

XBAP Applications
XBAP applications are collections of XAML pages compiled together with code and deployed into the browser. They do support forward and backward page navigation, thus to the end user it acts very much like a web site does.

Where XBAP fails:

Unique URL's - Each XBAP has its own URL. Moving between pages in the XBAP application does not change the URL in the browser and the user can only bookmark the entry point to the application. Because of security, the application cannot dynamically change the URL in the browser. Deploying one XBAP per page solves this problem, but is not practical because each XBAP must be compiled and when deployed consists of a minimum of three files.
Searchable - The XAML in XBAP's is compiled into executable code in binary format (BAML) and is not accessible to search engines.
Self sufficient pages - To access any page in an XBAP application, the whole application must be downloaded. Imagine browsing to the Microsoft website and needing to download the whole website first.
Cross platform - Requires .NET 3.0 and Vista, XP, or 2003.
WPF/E
WPF/E is a cross platform version that is a subset of XAML. One might think of WPF/E as a XAML competitor to Flash. WPF/E is cross platform, and it exposes its DOM to Javascript. It even in future builds will support a mini CLR engine for C# execution. So WPF/E appears really promising right? Well to compete against flash and beef up existing HTML it sure does. But to replace HTML, it does not and here is why:

Unique URL's - WPF/E must be hosted in an HTML page. So it sneaks by on this requirement, but HTML is still in the picture here.
Data posting - Again through interaction with HTML. Although potentially something might be done using Javascript to go directly from WPF/E to the server.
Self sufficient pages - Same problem as Unique URL's, all WPF/E content is contained in an HTML host.
So WPF/E squeaks by right? Sure it has to be hosted in an HTML container but that could could be minimized and fairly generic. But there are two additional areas that WPF/E fails in and one is a show stopper:

WPF/E is not released - It is in CTP/Beta. It is however scheduled for release mid 2007.
Lack of user input controls - WPF/E's subset of XAML does not include user input controls. WPF/E has support for animitions, vector graphics, images, video, etc. If you want to have say a listbox or an textbox, you have to use HTML. But if you need a text box in your WPF/E part, you need to construct it from primitives and code.
What I would like to see
In a way it is frustrating to be so close yet so far. It really is just that last inch that is missing. XBAP is a great implementation for applications, but it was not designed to replace pages and thus will continue to be a poor candidate for such. It is a tough call between WPF/E and loose XAML for pages.  WPF/E is cross platform, but loose XAML is fully featured.

I would like to see loose XAML with:

Ability to post data to a server. Maybe something similar to XForms, or even basic abilities similar to HTTP post in HTML where fields are bound to output and posted to an HTTP URL. It would of course be even better if such could be bound also to a webservice method input. XAML can already bind to webservice output.
Ability to have C# code in CDATA sections for purpose of scripting tasks in the UI and augmenting where XAML triggers and animations cannot suffice.
Simple calculations and expressions inline XAML - Currently you can use binding for example to bind the height of an image to a slider controls value. But what if you need the height to be the value times 2? In some cases you can use a transform to make this effect such as this one, but in many cases transforms cannot be used. Simple calculations and expressions would go a long way to both simplifying some existing XAML, but also enabling new features that currently require code.
With these basic additions, XAML would start to become prevalent in Windows environments as a replacement for HTML. Going one step further though it would be nice to have the ability to use code behind instead of only in CDATA sections and ability to reference other assemblies. The code would execute in the same sandbox model as XBAP and assemblies could be cached. The difference is that whole applications would not need to be compiled on the server, the XAML would remain in text format, and pages would be self sufficient. Finally, pages would be downloaded one at a time on demand instead of as part of a larger application.

Can XAML be hacked now to work?
We've done it for years with HTML, but a key factor there was scripting support. There are a variety of approaches such as mixing HTML + XAML, or XBAP + XAML, as well as other variations. But all have their limitations and none properly meet all of the goals outlined.

Posted by dalbong2