'RIA'에 해당되는 글 29건
- 2008/09/12 11회 훈스닷넷 정기 세미나 후기
- 2008/01/23 [Flickr Finder] Flickr API Key 발급받기
- 2008/01/23 Add Silverlight Link 사용 시의 팁. (1)
- 2007/12/20 [엉뚱한실험5] Silverlight객체와 Html엘리먼트 Overlap (4)
- 2007/12/18 [엉뚱한실험4] Transform이 적용된 객체에서 MouseEventArgs GetPosition 결과값 비교
- 2007/12/18 [엉뚱한실험3] TextBlock에서 "A", "B"의 ActualWidth 합과 "AB"의 ActualWidth는 같을까요?
- 2007/12/18 Microsoft MVP에 Silverlight 분야도 생겼다고 합니다.
- 2007/12/14 InkPresenter 방명록 만들기 - 6. Stroke Size Controler User Control 만들기 (4)
- 2007/12/14 Blend를 통해 User Control 추가하기 (1)
- 2007/12/05 [실버라이트] Flickr Finder 페이지 네비게이션 용 Slider 장착
- 2007/12/04 ComboBox 역할하는 UserControl 소스
- 2007/12/04 Flickr Finder 검색 옵션, 정렬 옵션 추가하였습니다. (2)
- 2007/11/23 리아코리아에도 강좌 시작합니다. (2)
- 2007/11/23 실버라이트 MultiLine TextBox UserControl (2)
- 2007/11/22 MyHeritage.com, Morphing(모핑) 충격이네요! (9)
- 2007/11/21 실버라이트 한 줄 TextBox 유저 컨트롤
- 2007/11/14 실버라이트로 만드는 Flickr Finder [진행중...]
- 2007/11/13 WebDing 폰트
- 2007/11/10 Visual Studio를 위한 Popfly Explorer
- 2007/11/08 .NET Framework 3.5 WebService와 Silverlight 연동 - Flickr 이미지 검색 데모 (1)
열기
9월 12일 금요일, 포스코 빌딩 5층, 한국 마이크로소프트 젤 큰방에서
훈스닷넷 정기 세미나가 열렸습니다. 주제는 실버라이트였고요.
참가자 등록 때부터 300분이나 되는 분들이 등록을 해주셔서
많은 분들이 실버라이트에 관심을 가지시기 시작했구나 생각했는데,
예상대로 어제 정말 많은 분들이 참석하여서 세미나 열기가 대단했습니다.
<참석하신 분들의 모습을 파노라마로 연결하여 DeepView Lite로 보여드립니다.>
세션1. 엔터프라이즈 시장을 향한 실버라이트 - 박경훈
경훈씨가 오프닝을 열었구요.
"실버라이트 세미나 처음 오신 분 손!" 이란 말에 많은 분들이 손을 들어주셨습니다.
굳센테크놀로지의 팀장님이 나오셔서 엔터프라이즈 시장에서의 실버라이트 가능성에 대해
살짝 엿볼 수 있는 좋은 예제로 [실버라이트] KORAIL 열차표 예매 시스템 데모를 보여주셨습니다.
RIA의 특성을 살려, 페이지의 전환없이, 그리고 직관적으로 표를 예매할 수 있도록 한 좋은 작품이었습니다.
세션2. 실버라이트 컨트롤 모델과 협업
혹시 이 사진 기억하시나요?
휴즈플로우의 공인석 개발팀장과 최형준 수석 디자이너가 함께 준비한 세션이었습니다.
공도씨가 이론적인 토대를 한자락 설명하고 나면,
형준씨가 이어받아...
Microsoft Expression Blend를 이용한 데모를 보여주는 식으로 진행되었습니다.
자칫 개발적인 내용으로만 치우칠 수 있는 세미나를 디자인 요소를 가미해서 균형있고 부드럽게
잘 진행할 수 있었다는 점에서 좋은 시도였다고 생각합니다.
이렇게 만들어진 템플릿을 입은 귀여운 햇님 체크박스를 직접 만져보고 싶으신 분들은
여기를 방문하세요.
이렇게 많은 분들이 와주셨는데다가 첫 세미나 출전임에도 불구하고 형준씨가 떨지 않고 잘 해 주었습니다.
앞으로도 왕성한 활동을 기대합니다. (게다가 또 곧 생일이라지요~!)
세션3. 실버라이트 데이터바인딩 완전정복
시간이 지체된 이유로 예정되어 있던 15분의 휴식시간을 12분으로(엥? 겨우 3분! 어쨌거나) 줄이는
경훈씨의 용단이 있었고, 휴식시간이 끝난 후 ONESTONE(오일석) 님의 세션이 시작되었습니다.
무척 많았다고 하는 후문이 들립니다.
차분한 목소리로... 하지만 마치 쪽집게 과외 선생님처럼 엑기스만 뽑은 내용을 가지고...
실버라이트가 엔터프라이즈 시장에서 활약하기 위해서 꼭 필요한 파트인
데이터바인딩에 대해서 너무나도 잘 정리해 주셨습니다.
경훈씨도 열심히 듣고 있었지요. 그렇지요.
묻고 답하기
세미나 시간이 약간 지체되어 장소를 비워줘야하는 문제로 약 5분 간의
매우 짧은 '묻고 답하기' 시간이 있었습니다.
하지만, 장소를 벗어나 꽤 오랜 시간 다양한 분야에서 일하고 계신 많은 분들과 질문/답변을
공유하는 시간을 가졌습니다.
경품
공지되었던 바와 같이 명함 추첨을 통해 (중고가 아니냐는 논란이 있었습니다만... ^^;)
경훈씨 협찬의 웹 사이트 최적화 기법 1권, Microsoft 노트북 전용 무선 마우스 1개,
지선씨 협찬의 WPF UNLEASHED 1권이
경품으로 지급되었습니다.
웹사이트 최적화 기법을 경품으로 받으시는 모습은 제가 그만 정신줄 놓고 있다가 사진을 못찍었습니다.
죄송합니다. 그리고 축하드립니다.
WPF UNLEASHED 당첨되신 분 축하드립니다.
Microsoft 노트북 전용 무선 마우스 받으신 분 축하드립니다.
발표자료
이올린에 북마크하기
이올린에 추천하기
Trackback : http://gilverlight.net/trackback/2942
[Flickr Finder] Flickr API Key 발급받기
1. Flickr API Key 발급받기
실버라이트에서 Flickr API를 이용하기 위한 첫 단계로 API Key를 발급 받는 과정을
정리해 보았습니다. (29일 세미나 자료로 활용도 해야해서... 꿩먹고 알먹고)
http://www.flickr.com/services/api/keys 에 방문하여 로그인을 합니다.
(yahoo 계정이 없으시면 계정을 먼저 만드시고 로그인 하시면 됩니다.)
Apply for your key online now 링크를 클릭하여 신청 페이지로 이동합니다.
이어서 나오는 양식을 대략 채우고 SAVE CHANGES 버튼을 눌러 저장을 합니다.
자 이제 Key를 잘 가지고 있다가 Flickr 관련 어플리케이션을 만들 때 사용하면 됩니다.
Trackback : http://gilverlight.net/trackback/2700
ASP.NET 웹 응용프로그램, ASP.NET 웹 서비스 응용프로그램, AJAX 1.0 - Enabled ASP.NET 2.0 웹 응용프로그램 등의
Web 템플릿 프로젝트를 새로 추가하고 [Add Silverlight Link]하여 사용하게 됩니다.
이때, 실버라이트 프로젝트 중,
Silverlight.js, TestPage.html, TestPage.html.js 파일은 수동으로 복사해주곤 하죠?
또, 세 파일 중 어떤 파일이 수정되면 그 파일을 또 다시 복사 해줘야 적용이 되곤했죠?
Silverlight 프로젝트에서 Silverlight.js, TestPage.html, TestPage.html.js 세 파일에 대해 속성의 [빌드 작업] 항목을 내용(Content)으로 설정하시면 편해 집니다.
Build 할 때마다 Silverlight 프로젝트의 세 파일이 Web 프로젝트에 업데이트 될 뿐만 아니라,
'게시'를 할 경우에도 문제없이 함께 게시됩니다. (= 수동으로 복사를 해줄 필요가 없어집니다.)
이미 많은 분들이 알고 계시겠지만, 아직 모르셨던 분들께 도움이 되었으면 좋겠습니다.
Trackback : http://gilverlight.net/trackback/2702
[엉뚱한실험5] Silverlight객체와 Html엘리먼트 Overlap
이번 실험은 이런 생각에서 출발합니다.
createSilverlight 함수의 isWindowless 파라미터를 "true"로 설정한 후,
실버라이트 Page의 Opacity값이나 Background 색상의 Alpha 값을 조정하면,
뒤에 놓인 HTML 엘리먼트들을 배경으로 보이면서 작동이 가능할 것인가?
(구체적으로는 HTML형태로 결과물을 보여주는 이런저런 매쉬업들을 활용하여,
실버라이트만 그 위에 살짜쿵 올려서, 뭔가를 만들 수 있지 않을까...? 하는 생각에서 출발했습니다.)
일단, Silverlight의 isWindowless 파라미터에 대해서는 공도님이 친절하게
정리해 놓은 포스트가 있으니 참고하시면 되겠습니다.
공도님이 정리한 포스트
Page.xaml은 Blend에서 아래와 같이 사이즈 400x300 짜리 디자인으로 준비하였습니다.
Page.xaml.cs에 myButton에 대해 아래 역할을 하는 이벤트를 추가해 주었습니다.
MouseEnter 이벤트에서 Page Canvas의 Opacity를 0으로 변경.
MouseLeave 이벤트에서 Page Canvas의 Opacity를 1로 복원.
TestPage.html은 아래와 같이 준비하였습니다.
Body에는 배경을 깔았습니다. z-index를 통해 div객체를 겹쳐보기 위해서
Hugeflow Logo를 2개 준비하였습니다.
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
<title>Trying to overlap Divs using CSS (when isWindowless is true)</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="TestPage.html.js"></script>
<style type="text/css">
img { border:1px solid #000000;}
body { margin:10px 10px 10px 10px; background-image:url(bg_main.png);}
.silverlightHost { width:400px;height:300px;}
#Logo1 { position:absolute;left:15px;top:15px;z-index:1;}
#Logo2 { position:absolute;left:150px;top:15px;z-index:3;}
</style>
</head>
<body>
<div id="Logo1">
<a href="http://hugeflow.com"><img src="HFLogo_snow.jpg" border="0" /></a>
</div>
<div id="Logo2">
<a href="http://hugeflow.com"><img src="HFLogo_snow.jpg" border="0" /></a>
</div>
<div id="SilverlightControlHost" class="silverlightHost" >
<script type="text/javascript">
//createSilverlight(); // 살짝 주석처리
</script>
</div>
</body>
</html>
일단 이해를 돕는 그림을 만들기 위해 createSilverlight를 살짝 주석으로 막고 실행시켜 캡쳐하였습니다.
z-index가 효험을 보여 Huge Flow 로고가 2개 겹쳐있는 것을 확인하실 수 있습니다.
여기서 createSilverlight의 주석봉인을 풀어주면 다음과 같이 됩니다.
그럼 이제 TestPage.html.js (실버라이트를 호스트하는 html페이지의 비하인드 코드)에서
isWindowless: "true"를 추가해 줍니다.
function createSilverlight()
{
Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.1",
isWindowless: "true",
enableHtmlAccess: "true"
},
events: {}
});
// Give the keyboard focus to the Silverlight control by default
document.body.onload = function() {
var silverlightControl = document.getElementById('SilverlightControl');
if (silverlightControl)
silverlightControl.focus();
}
}
그럼 이렇게 됩니다.
여기서 Silverlight 객체를 호스트 하기 위한 Div의 z-index를 2로 주면,
Silverlight 객체가 과연 Hugeflow의 로고 두 개 사이 계층에 껴서,
하나의 로고(z-index = 1)는 Silverlight 객체 아래로 가서 안보이게되고,
다른 하나(z-index = 3)의 Silverlight 객체 위에 그대로 보이게 될까요?
여러분 궁금하지 않으십니까?
그래서 일단 CSS를 수정하였습니다.
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
<title>Trying to overlap Divs using CSS (when isWindowless is true)</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="TestPage.html.js"></script>
<style type="text/css">
img { border:1px solid #000000;}
body { margin:10px 10px 10px 10px; background-image:url(bg_main.png);}
.silverlightHost { width:400px;height:300px;position:absolute;z-index:2;}
#Logo1 { position:absolute;left:15px;top:15px;z-index:1;}
#Logo2 { position:absolute;left:150px;top:15px;z-index:3;}
</style>
</head>
<body>
<div id="Logo1">
<a href="http://hugeflow.com"><img src="HFLogo_snow.jpg" border="0" /></a>
</div>
<div id="Logo2">
<a href="http://hugeflow.com"><img src="HFLogo_snow.jpg" border="0" /></a>
</div>
<div id="SilverlightControlHost" class="silverlightHost" >
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
겹치게 하기 위해서 position은 absolute로 설정하고, z-index를 2로 설정하였습니다.
결과 보시죠!
무리없이 잘됩니다. ^^;;
그럼 오늘 시험의 하이라이트 Silverlight Page의 Opacity나 Background의 Alpha값을
조정해서 Silverlight 객체 뒤로 숨어버린 Logo 이미지나, 배경을 볼 수 있을까요?
자, 아까부터 출연해서 기다리고 있던 저 크고 검은 버튼에 손을 대보겠습니다.
이런 실망하셨죠?
혹시나 해서 Page.xaml에 가서 Background 물을 빼보고 다시 해보았습니다만,
마찬가지 결과를 보여줍니다.
그럼 방법이 전혀 없느냐?
boxmile이 Silverlight 공식포럼에서 발견하고 저에게 알려준 방법이 있습니다.
포럼원문 : http://silverlight.net/forums/t/6267.aspx
TestPage.html.js의 createSilverlight 함수에 다음 파라미터를 추가하라.
isWindowless : "true"
background : "#00FFFFFF"
(각 파라미터 끝에 , 빼먹지 않도록 조심하세요.)
실제 코드에 적용
function createSilverlight()
{
Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.1",
isWindowless: "true",
background: "#00FFFFFF",
enableHtmlAccess: "true"
},
events: {}
});
// Give the keyboard focus to the Silverlight control by default
document.body.onload = function() {
var silverlightControl = document.getElementById('SilverlightControl');
if (silverlightControl)
silverlightControl.focus();
}
}
이런 처방을 한 이후에 Page의 배경색이나 Opacity를 조정해보면,
원하는 대로 동작하는 것을 확인해 보실 수 있습니다.
첫번째로, Page의 배경색이 없는 경우
로고 사이에 찡긴 버튼을 확인하실 수 있습니다.
(좀더 극적인 효과를 위하여, 버튼의 모양/크기/위치를 조정하였습니다.)
두번째로, 배경색을 주고 Alpha 값을 반 정도(128) 감소시킨 경우,
반투명으로 잘 보이는 것을 확인할 수 있었습니다.
부록 1. 한편 Flash에는?
Flash에 보면 유사한 개념으로 wmode 파라미터가 있습니다.
- opaque : 불투명
- transparent : 투명
opaque로 설정 시 HTML 객체가 Flash 위에 올라올 수 없습니다. 한편, transparent로
설정 시에는 HTML 객체가 Flash 위에 올라오게 할 수도 있고, 배경이 없는 경우 아래에 있는 HTML 객체를 그대로 투과하여 보여 줄 수 있습니다.
공신닷컴 메인페이지를 작업하면서 적용해보니 FireFox 2.x에서 제대로 작동을 안하는 등,
아직 Cross Browsing 문제가 남아있는 것을 확인하였습니다.
긴 실험결과 봐 주셔서 감사합니다.
Trackback : http://gilverlight.net/trackback/2679
[엉뚱한실험4] Transform이 적용된 객체에서 MouseEventArgs GetPosition 결과값 비교
'아마도 이럴 것이다...'하는 것도 한번 실험해 보고 지나갈 필요가 있다고 생각합니다.
MouseMove 이벤트를 이용하여 실험했습니다.
Transform된 상태에 따라 얻는 GetPosition값이 약간의 차이가 있습니다.
결론은 객체 기준으로 GetPosition을 하면,
어떤 Transform이 일어나던지 객체 자신의 내부에서의 상대적인 값을 반환합니다.
Trackback : http://gilverlight.net/trackback/2678
-
Subject RenderTransform에 따른 GetPosition의 값 테스트2
2007/12/20 00:00
길버트님의 "[엉뚱한실험4] Transform이 적용된 객체에서 MouseEventArgs GetPosition 결과값 비교"를 보다가 문득 더 궁금해진 것이 있어서 추가로 테스트 해봤어요. 테스트 결과는 RenderTransform이 적용된 개체의 GetPosition(자기자신)의 위치는 어떤 변형이 있더라도 원래 자신의 위치에 대한 상대적인 값이 나온다...였는데요, 그렇다면 GetPosition(부모) 또는 실버라이트 영역 전체에 대한 위치를..
[엉뚱한실험3] TextBlock에서 "A", "B"의 ActualWidth 합과 "AB"의 ActualWidth는 같을까요?
결과는 정확하게 일치한다입니다.
이런 거 왜 해보나 싶으신 분들도 많으실 걸로 압니다만,
저는 일단 눈으로 봐야 믿는 성격이라, 죄송합니다.
말그대로 엉뚱한 실험실이었습니다!
Trackback : http://gilverlight.net/trackback/2677
원문은 [여기]입니다.
1월 15일까지 신청이라고 하구요.
4월 1일 선발한다고 합니다.
하필 Fool's day(만우절)에 선발을 하는군요!
슬몃 욕심나네요. ^^;
MVP가 되려면 갖춰야 할 덕목이 한 두가지가 아니네요.
A. 기술 커뮤니티 사이트 내에서의 회원들과의 Q&A 활동
B. TIP, 백서 등 글을 올림(Posting)으로써 자신이 알고 있는 노하우 공개 및 공유 활동 (글, 웹 캐스트 모두 포함)
2. 커뮤니티 내에서의 우수한 활동으로 인한 수상 경력
3. 수상 경력은 없어도 커뮤니티 내에서 잘 알려진 인물
4. IT 현상에 대하여 자신의 주장(오피니언)을 글로써 표현한 활동
5. 온/오프 라인 강사 활동
6. 온/오프 라인 세미나, 스터디 주관 등 모임을 주체적으로 진행했던 활동
7. 서적 출간 활동(번역, 공저, 저작 모두 포함, ISBN 번호 기재)
8. 커뮤니티 운영에 도움을 주었거나 주도적으로 진행했던 활동
9. 이 외의 마이크로소프트 제품 및 기술 전파를 위한 모든 활동
개발에 몸 담은 이상 죽기 전엔 한 번 해봐야 하는 거 아니겠습니까!
Trackback : http://gilverlight.net/trackback/2676
InkPresenter 방명록 만들기 - 6. Stroke Size Controler User Control 만들기
2. InkPresenter를 사용한 간단한 샘플 만들어보기 (작동완구)
3. Undo & Redo 구현하기
4. InkPresenter User Control 만들기
5. Color Palette User Control 만들기
6. Stroke Size Controler User Control 만들기
7. HTTP Request와 Response를 이용하여 정보 교환하기 (Get, Post 전송)
8. Page Navigation User Control 만들기
InkPresenterSample6.zip5주만에 강좌를 재계합니다. 정말 바빴습니다. 믿어주십시오!
그 사이 Silverlight Demo 사이트 쉬버라이트닷넷을 약간 단장하였구요.
저희 회사 휴즈플로우의 웹사이트도 간단하게 만들어서 오픈을 하였습니다.
0. Sample Project
체험장 : http://shiverlight.net/InkPresenterSample/InkPresentationSample_StrokeSize
1. Stroke Size Controler User Control 디자인 (UCStrokeSize.xaml)
진행하기에 앞서 다음 포스트를 읽어보실 것을 권장합니다.
Blend를 통해 User Control 추가하기