Transcript WPF (Windows Presentation Foundation) 와 ASP.NET 2.0 Atlas

WPF
(Windows Presentation Foundation)
와
ASP.NET 2.0 Atlas
김태영
Microsoft MVP Insider
.NETXPERT 책임 컨설턴트
아젠다
Windows Presentation Foundation
WPF 등장배경
WPF 란?
XAML 이란?
ASP.NET 2.0 ‘Atlas’ 기술
새로운 클라이언트 스크립팅 프로그래밍
선언적인 스크립팅
UpdatePanel을 통한 쉬운 비 동기 호출
오늘의 첫 번째 주제
UX와 그래픽의 질적 향상을 위한 새 기술
Windows Presentation Foundation
WPF의 등장배경
시대는 미래지향적인 애플리케이션을 요구
UX(User Experience)에 대한 높아지는 기대
더욱 뛰어난 그래픽 기술에 대한 요구
보다 효과적이고, 뛰어난 UI 작성 방안
디자이너와 프로그래머 사이의 효과적인
협업
UX 향상
http://www.artlebedev.com/
MSN Mail
Office Web
Access (OWA)
Office: Outlook
Windows 그래픽의 미래
현재 Windows 그래픽 플랫폼의 나이는 20살
질적 향상과 경험과 관련하여 기대와 요구는
더욱 커지고 있다
그래픽 하드웨어는 빠른 속도로 발전하고 있다
성능 대비 비용 비율은 끊임없이 향상되고 있다
진보는 주로 3D에 그 초점을 두고 있다
Richer.. Richer..
Cross-Platform, Browser Based
UX
Baseline
기능적..
Applications
MSN Photos
Richer
Richest
적은 호출.
더욱 뛰어난 상호작용
뛰어난 정보 디자인
뛰어난 성능
극도의 풍부함
완전한 플랫폼 통합
Photo Site with “Atlas”
Microsoft Max
Consumer
Applications
Northface Web
Content
Windows
Northface Web Richer
Northface Experience
Windows Presentation Foundation
여러분이 꿈꾸던 모든 것을
구현할 수 있습니다
다양한 WPF 데모
WPF
Microsoft Windows의 Graphical subsystem
어플리케이션 구축을 위한 일관된 프로그래밍 모델 제공
Windows 프로그램의 비주얼한 개발 및 보다 풍부한
컨트롤과 디자인을 가능하게 한다
풍부하고 화려한 어플리케이션을 제작할 수 있게 하는
관리 클래스의 집합 및 Display 엔진으로 구성
WPF 개체 모델을 선언적으로 처리하기 위해서 XML
기반의 모델을 사용하는 XAML(Extensible Application
Markup Language)을 이용
WPF
WPF의 핵심 구성요소
탐색, 윈도우, 대화상자에 대한 지원
UI 데이터 바인딩, 확장 레이아웃 및 풍부한 컨트롤 개체집합
2D와 3D 그래픽, Animation, Media, Document
Windows의 다음 버전인 Vista에 포함예정
Windows XP SP2와 Windows Server 2003 SP1에는 WinFX
런타임의 일부로 제공될 예정
Windows Presentation Foundation Everywhere
XAML과 Javascript에 기반을 둔 WPF의 mobile version
3D 기능은 제공되지 않음, 그러나, XPS, vector-based drawing,
hardware acceleration은 제공
XAML (Extensible Application Markup Language)
WPF를 위한 사용자 인터페이스 마크업 언어
비주얼한 사용자 인터페이스를 그래픽적으로 기술하는데
최적화된, 선언적인 XML 기반의 언어
사용자 상호작용, 특히 스크린 출력과 관계된 .NET
프레임워크의 클래스와 메서드를 지원하도록 설계
XAML 파일은 VS와 같은 디자인 툴을 통해 제작
결과 XML은 WPF 하위 시스템을 통해서 해석
XAML 요소는 내부적으로 개체와 매핑된다
개발자와 디자이너의 협업을 위한 최선의 방법
Developer / Designer 협업
Designer
Developer
Emotional Connection
Functional Capabilities
Look, behavior, data visualization, usability,
brand impact
Deployment, function, data connection and
integrity, IT process, security
Paper
JPG / TIFF
MOV / WMV
PSD
PPT
XAML
C++
C#
VB.NET
Development Workflow
XAML
Create
Controls
Layout
Content
Decorate
Styles
Templates
Integrate
Applications
Controls
Layout
Data
Development Workflow
http://www.microsoft.com/products/expression/en/interactive_designer/demos.mspx?v=id_design
WPF 구성
Document Services
User Interface Services
XPS Documents
Application Services
Controls
Databinding
Layout
Deployment Services
Packaging Services
Media Integration Layer
Imaging
Base Services
2D
Audio
XAML
Video
Accessibility
Text
Effects
3D
Animation
Composition Engine
Input & Eventing
Property System
ZAML로 UI 구성하기
(Interactive Designer, VS 2005)
오늘의 두 번째 주제
놀랍도록 쉽게 AJAX를 구현한다.
선언적인 클라이언트 스크립팅의 장을 열다
ASP.NET 2.0 “Atlas”!!
아틀라스!! 대단한 것 같아요!! 국내 초코바 중에선 이게 젤로 나은 듯..
– 지난 번 세미나에 안 오신 어떤 분 –
멋져요. 이걸 님이 만드셨다는 거죠? 이야~ 근데, 빵 하나 더 먹어도 되요?
– 아까 제가 음료수 사 드린 어떤 분 -
Ajax(에이잭스) 란?
Asynchronous Javascript and XML
웹 상에서의 XML을 이용한 비 동기 호출 기법
내부적으로 XMLHTTP 이용
Microsoft.XMLHTTP (IE 6.0 이하)
Window.XMLHttpRequest (IE 7 이상 및 다른 브라우저)
기존 비 동기 호출 기술의 재 정리
기대 효과
네트워크의 사용량 감소
서버의 CPU 사용량 감소
응용 프로그램 자원의 효과적인 사용
코드명 Atlas란?
AJAX 지원을 위한 MS의 개발 프레임워크
클라이언트 측 웹 어플리케이션 구축을 위한
컴포넌트 프레임워크
2006년 중반 릴리즈 예정
VS.NET 2005에 plug-in되는 VSI 파일 제공
GAC은 사용하지 않음
다양한 브라우저를 지원
Internet Explorer, Firefox, Safari
Altas의 핵심 목표
포괄적인 개발 플랫폼을 제공하기 위해서
서버 상의 ASP.NET 기능과 클라이언트
스크립트 기능을 통합하는 것
클라이언트 측을 위한 목표
서버 측을 위한 목표
Altas의 목표 : 클라이언트 측면
자바스크립트 기반 개발의 복잡성을 처리해주며,
다양한 개발 기능을 제공
개발을 위한 일관적인, 개체 지향적인 API 집합
자동 브라우저 호환성
별도의 코딩 없이 모든 브라우저에서 올바르게 동작
풍부한 UI 기능을 위한 클라이언트 스크립트 API와
컴포넌트.
드래그 앤 드롭 비헤이비어와 같은 기능을 코드를 거의 작성함
없이 HTML 컨트롤에 추가할 수 있다
클라이언트 개발을 위한 선언적인 모델
선언적인 ASP.NET 서버 컨트롤 구문과 유사
Altas의 목표 : 서버 측면
ASP.NET 서버 측 개발과 클라이언트 스크립팅을
통합하며, 다양한 서버 측 기능을 제공
Atlas 어플리케이션과의 통합에 유용한 웹 서비스
Atlas 어플리케이션에 필요한 모든 클라이언트
스크립트를 자동으로 생성하는 ASP.NET 웹 서버
컨트롤
자바스크립트 코드를 별도로 작성할 필요가 없다
클라이언트 측 개발을 위한 통합된 Visual Studio
개발도구
디버깅, 상태관리, 기타 생산성을 높이는 기능들을 제공
Atlas Client Library
모든 브라우저에서 동작하는 뛰어난 UI를 갖는
AJAX 어플리케이션의 구축 프로세스를 간소화
향상된 UI 구축을 위한 클래스 라이브러리
개체 지향적으로 구성
자바스크립트(.js) 파일 집합
또한, Atlas는 페이지에 클라이언트 기능을
추가하기 위한 선언적인 모델도 제공
Microsoft.Web.Atlas.dll 어셈블리 내부에
리소스로서 구성
Atlas Server Library
보다 인터랙티브한 웹 어플리케이션을 쉽게 만들
수 있도록 클라이언트 스크립팅을 사용하는
ASP.NET 웹 서버 컨트롤을 제공
TimerControl와 같은 새로운 컨트롤 제공
기존 웹 어플리케이션에 Atlas 기능을 선택적으로
추가할 수 있도록 UpdatePanel 컨트롤 및 컨트롤
Extender를 제공
Atlas Client Library의 구성
Atlas.js
Atlas 런타임을 비롯하여 전체 Atlas 기능집합을 제공
클라이언트 컴포넌트와 컨트롤, 데이터 바인딩을 지정하기 위한
선언적인 구문 집합 등을 제공
Atlas ScriptManager를 페이지에 추가할 경우 자동으로 포함되는
일반적인 라이브러리
AtlasRuntime.js
핵심 Atlas 스크립트 파일을 최소화한 런타임 파일
자바스크립트에서 웹 서비스를 호출하기 위해 사용
Atlas 클라이언트 컨트롤과 기능들은 제외
Atlas Client Library의 구성
(계속)
AtlasCompat.js
Atlas 기능을 위한 크로스 브라우저 호환성을 제공
AtlasCompat2.js
Atlas 기능을 위한 크로스 브라우저 호환성을 제공
AtlasFX.js
AtlasRuntime.js 코드를 제외한 Atlas.js와 동일한 내용을 포함
gadget과 함께 사용
AtlasUIDragDrop.js
드래그 앤 드롭 기능을 구현
AtlasUIGlitz.js
특별한 UI 효과를 구현
Atlas Client Library의 구성
(계속)
AtlasUIMap.js
virtual map 기능을 구현
AtlasWebParts.js
ASP.NET 웹 파트 컨트롤과 함께 사용하기 위한 Atlas 기능을 구현
GadgetRuntime.js
Microsoft와 MSN에서 사용되는 런타임 코드
Atlas 클라이언트 스크립팅
<html>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server" ID="ScriptManager1" />
<div id="panel">
나 Panel
</div>
<br />
<select id="colorSelect" class="itemselect">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="notset">NotSet</option>
</select>
</form>
<script type="text/javascript">
function pageLoad()
{
var g_panel = new Sys.UI.Control($('panel'));
g_panel.initialize();
g_panel.set_cssClass('normal');
var g_selColor = new Sys.UI.Select($('colorSelect'));
g_selColor.initialize();
g_selColor.selectionChanged.add(onSelectColor);
…
}
Atlas 클라이언트 스크립팅 (선언적)
<html>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server" ID="ScriptManager1" />
<div id="panel">나 Panel</div>
<br />
<select id="colorSelect" class="itemselect">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="notset">NotSet</option>
</select>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<control id="panel" cssClass="normal">
<bindings>
<binding id="setCss" dataContext="colorSelect"
dataPath="selectedValue" property="cssClass" />
</bindings>
</control>
<select id="colorSelect">
<selectionChanged>
<invokeMethod target="setCss" method="evaluateIn" />
</selectionChanged>
</select>
</components>
…
ASP.NET "Atlas" Server Control
ScriptManager Control
UpdatePanel Control
Control Extenders
AutoCompleteExtender
DragOverlayExtender
정말이지 놀라운 데모
(UpdatePanel, AutoCompleteExtender, DragOverlayExtender)
© 2003-2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.