블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
01.C#기초 (4)
02.C#고급 (13)
03.ASP.NET (28)
04.HTML&Script (17)
05.Silverlight (38)
06.C 언어 기초 (2)
07.iOS (14)
08.Java (5)
09.SQL (8)
10.컴퓨터보안 (10)
11.패턴이야기 (3)
12.유니티3D (1)
13.Ubuntu (7)
14.Node.js (6)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

'프로그래밍/05.Silverlight'에 해당되는 글 38건

  1. 2009.06.30 Silverlight Object 태그 알아 보기!! 2
  2. 2009.05.18 DTFE2009 훈스닷넷 4세션 PhotoLight 2
  3. 2009.04.14 [ Silverlight ] 매트로놈(MetroMon)



Silverlight Object 태그 알아 보기!!

 

 실버라이트 애플리케이션을 만들고, HTML페이지 또는 여러 기타(aspx, php,asp 기타…) 페이지들에 실버라이트 애플리케이션을 등록하기 위해서는 보통 Object태그를 많이 사용할 것 이다. 그래서 이 강좌를 통해서 실버라이트에서 사용 할 수 있는 여러 Object Element의 구성들에 대해서 알아 보고, 잊어 버리지 않도록 잘 정리 해 보려고 한다. 이는 실버라이트를 배포하는데 도움이 되지 않을까 생각이 든다.

 

 Object Element의 구성

 

 실버라이트 애플리케이션을 올리기 위한 Object는 크게 다음과 같은 구성 요소로 이루어진다.

 

Element

attribute

필수 여부

설명

object

필수

실버라이트 애플리케이션을 적재하는 HTML 구성 요소

 

data

필수, 고정

반드시 "data:application/x-silverlight-2," 으로 설정해야 함.

type

필수, 고정

반드시 "application/x-silverlight-2" 으로 설정해야 함.

width

선택

일반 HTML과 같은 크기 조정. “640”과 같은 pixel 단위 혹은 “100%”와 같은 비율로 조정 가능. , 비율일 경우 반드시 object 엘리먼트의 부모 엘리먼트가 크기를 가지고 있어야 함.

height

선택

param

일부 필수

실버라이트 애플리케이션에 전달할 파라미터를 표현하는 구성 요소. 반드시 object 엘리먼트의 자식 노드로 구성되어야 함.

 

name

필수

전달할 파라미터의 이름

value

필수

전달할 파라미터의 값

HTML elements

선택

실버라이트 플러그인이 설치되지 않았거나 실버라이트를 사용할 수 없는 브라우저에 표시할 대체 HTML 구성 요소.

일반적으로 실버라이트 설치를 유도할 수 있는 배너 및 링크가 포함됨.

 

Object에 필요한 Param

 

 실버라이트 애플리케이션을 올리기 위해서는 Object는 다음과 같은 Param 엘리먼트를 자식 노드로 포함할 수 있다.

 

 

l  source
실버라이트 애플리케이션 패키지인 XAP파일의 URL를 설정 한다.

l  minRuntiomeVersion
해당 실버라이트 애플리케이션의 동작이 가능한 최소한의 플러그인 버전 설정 한다
.
<param name=”minRuntimeVersion” value=”2.0.31005.0” />

l  autoUpgrade
설치된 실버라이트 플러그인의 버전이 minRuntimeVersion보다 낮을 경우 업그레이드 여부를 묻는 프롬프트를 띄우고 자동으로 최신버전으로 업그레이드 할지 여부 설정 한다.

l  splachScreenSource
XAP
파일을 다운로드 받는 동안 보여줄 디자인 표현한 XAML 파일의 URL 를 설정한다
.
(
, URL이 상대 경로일 경우 XAP파일의 위치를 기준으로 함
)
<param name=”splashScreenSource” value=”Splash.xaml” />

l  background
플러그인이 차지하는 영역의 배경 색상 설정 한다
.
(#AARRGGBB
형식의 8자리 문자열로 입력.)

l  maxFrameRate
실버라이트 런타임이 화면을 1초에 몇 번 렌더링하는지 결정하는 수치 설정 한다
.
기본값은 60이며 통상 36이상이면 무난한 품질로 렌더링 된다
.
<param name=”maxFrameRate” value=”36” />

l  initParams
실버라이트 애플리케이션에 넘겨줄 파라미터를 Key1=value1,Key2=value2 형식으로 설정한다. (주의 공백,특수문자를 포함하는 복잡한 문자열은 URL Encode를 하여 전달하는 것이 좋다
.)
<param name=”initParams”
value=”Source=http%3a%2f%2ffoo.com%2f %ed%91%b8.wmv” />

l  allowHtmlPopupWindow
퍼가기 시나리오에서 타 도메인에 올라간(크로스 도메인) 실버라이트 애플리케이션이 HTML의 팝업 윈도를 사용할 수 있는지 여부를 설정한다.

l  enableFramerateCounter
디버깅용 프레임 레이트 측정을 허용할지 여부를 설정한다.

l  enableHtmlAccess
크로스 도메인에서 동작하는 실버라이트 애플리케이션 코드가 HTML DOM에 접근하는 것을 허용할지 여부를 설정한다.

l  onError
실버라이트 애플리케이션에서 핸들링 되지 않은 예외 에러가 발생했을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onFullScreenChanged
실버라이트 애플리케이션이 전체화면으로 되거나 보통 화면으로 돌아왔을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onLoad
실버라이트 애플리케이션이 로드를 완료했을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onResize
실버라이트 애플리케이션을 포함하는 plug-in의 크기가 변했을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onSourceDownloadCompleted
source
에 설정한 XAP 파일의 다운로드가 완료되었을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onSourceDownloadProgress
source
에 설정한 XAP 파일의 다운로드 진행율이 변경되었을 때 호출할 자바스크립트 함수의 이름을 설정합니다.

l  windowless
실버라이트 플러그인을 렌더링할 때 윈도를 사용하지 않을지 여부를 설정합니다. Windowless 모드는 기본값이 false이며, 특별한 경우가 아니면 사용하지 않습니다.



실제 사용 코드는 아래와 같다.

Object 태그

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

 <param name="source" value="ClientBin/TestProject01.xap"/>

 <param name="onerror" value="onSilverlightError" />

 <param name="background" value="white" />

 <param name="minRuntimeVersion" value="2.0.31005.0" />

 <param name="autoUpgrade" value="true" />

 <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

 </a>

</object>

 ( 위 코드는 기본 생성 코드입니다.)

위 코드와 필요에 따라 위에서 알아봤던 엘리먼트를 추가하면 되는 것이다.

Posted by happydong
, |



DTFE2009 훈스닷넷 4세션 PhotoLight

 Dev&Tech Festival 2009 행사 일환으로 지난 16일 훈스닷넷에서 UX 세미나가 진행되었어요.
비도 많이 내리는 굳은 날씨에도 불고 하고, 정말 많은 사람들이 와줘서 발표를 맡은 저로써는 약간 부담도 됐지만, 이렇게 관심을 가져주기고 찾아와 주심에 감사하기도 했어요^^

 제가 진행한 세션은 PhotoLight라는 주제 였는데요. 디자이너인 김선구님과 PhotoLight가 무엇인지, 어떻게 기획을 했는지, 어떻게 구현했는지에 대해서 이야기했습니다.

사용자 삽입 이미지


 간단하게 요약하자면, PhotoLight란 이미지 뷰어라고 생각하시면 될것 같아요. 사용자들에게 사진을 보면서 좀더 편하고, 즐겁게 볼 수 있는 이미지 뷰어지요.
 어떻게 기획을 했고, 어떻게 디자이너와 협업을 했냐면요, 일단 기존은 사이트들의 포토갤러리들을 하나하나 들어가 보고 사용해 보고 대략적으로...개인적으로 불편했던 점..또 한 편했던 점들을 나름 정의하고 PhotoLight에서는 이런 기능들을 꼭 들어가야 겠다 정의 했죠. 그리고 디자이너와의 협업은 정말 저도 많이 고민했습니다. 김선구님과 제가 같은 회사에서 일하는것도 아니고 각자 회사일에 바빠서 별로 이야기 할 시간이 없었기때문이지요. 그래서 전 선구님과 협을 좀더 수월하게 하기위해 MVVM + Command Pattern를 이용하기로 했어요. 실제로 이런 패턴으로 작업을 하니 정말 디자이너와 협업이 수월하더라고요. 개발자가 디자인 없이 기능만 다 구현하고, 디자이너가 디자인을 입히는데...10분 안걸렸어요. 물론, 디자이너인 김선구님이 대략적으로 바인딩 걸려있는 것이 어떤건지 미리 알고 작업해 주셔서 더욱 수월했던 것 같아요^^
 PhotoLight의 구현은 일단 FileUpload와 Viewer로 나눨수 있는데요.

 - FileUpload를 이미 많은 자료들이 있으니, 저는 간단하게 PhotoLight에서 다중 파일 처리에 대해 애기할게요.
FileUpload를 WCF를 이용해서 Stream를 나눠서 파일을 보냈고요, 다중 파일을 선택해서 보내다보니, WCF서비스에서는 올라오는 이미지 파일들이 어떤 그룹인지 알수가 없어 하나의 이미지파일을 보낼때 마다 그룹 키를 함께 보내서 지금 올라오는 이미지들이 키를 중심으로 하나의 그룹이라는 것을 정의해 줬어요. 이 부분은 소스를 보면 알수 있을 거예요. 이렇게 올라온 이미지 파일을 DeepZoom파일로 변환해서 저장하기도 해요.

 - Viewer에서는 WCF를 이용해서 해당 키를 호출해 주면요. 해당 WCF서비스에서는 DBServe에게 해당 데이터를 요청하고, 받은 데이터를 토대로 DataClass를 생성해서 PhotoLight에서 넘겨주게 되는 구조이죠.
이렇게해서 PhotoLight에서는 해당 데이터를 토대로 하나하나 이미지를 호출하게 됩니다. 기능들을 간단하게 슬라이드와 한장씩 보기, 딥줌보기가 있고요. 퍼가기 기능도 지원합니다. ^^ 세미나날 퍼가기 기능을 테스트 한다가 안되서 약간 당황스러웠습니다^^;;집에와서 확인해 보니 제가 마지막에 소스를 고치면서 퍼가기 부분은 예전소스 그대로 놨더라고요. 이런이런...저도 인간인지라...^^;;;

이상 간단하게 PhotoLight에 대해서 이야기 했고요. 제 발표 자료는 아래 링크를 통해 받아 보실수 있을 거예요.

 - 전체 소스 : 다운로드
 - PPT 자료 : 다운로드
 - 실행 모습 : http://temp.happydong214.com
(집에서 개인서버로 돌리고 있는 중이라, 나중에는 닫힐수도 있습니다.)

부족함이 많은 세션이었지만, 함께 세미나에 동참했던 분들과 웃으면서 보내서, 정말 즐거웠던 시간이 아니었나 싶어요.

Posted by happydong
, |



실버라이트를 메트로놈을 만들어 놨습니다.
내부적인 코드설명은 차후에 차근차근 알아 보도록 하겠습니다.
지금은 이렇게 잘 작동이되는지 확인 해보세요~^^
혹시 미리 소스를 보고 싶으신 분들은 미리 다운로드 가능합니다.

?ㅻ쾭?쇱씠???ㅼ슫濡쒕뱶

Posted by happydong
, |