요즘 박스마일, 공도님, 이과장님과 함께 뭔가를 만들고 있는데,
실버라이트 어플리케이션을 Full Screen모드의 키오스크 스크린처럼
사용할 필요가 있어서 이런 저런 방법을 궁리하던 중...
(Need : 전체화면으로 작동하고, 리부트 시에도 자동으로 시작)
공도님이나 김대우과장님께서는,
브라우저컨트롤을 하나 품은 Full Screen Size 윈폼 어플리케이션을 제안하셨고...
저는 실버라이트가 명색이 크로스플랫폼을 지향하는데,
것보단 이런 방법을 간단히 써보자고 제안했어요.
(사실 이 프로젝트의 제한조건에는 크로스플랫폼은 고려할 필요가 없었습니다만 ^^;;;)
[샘플파일]
Tag : kiosk, Silverlight, 실버라이트, 키오스크, 통짜
1. Flickr Buddy Icon URL 규약
Flickr에 사진을 업로드한 사람의 Profile Image에 해당하는 Buddy Icon 규약은 다음과 같습니다.
Every flickr user has a 48x48 pixel buddyicon used to represent themselves.
You can construct the url of a buddyicon once you know the user's NSID, icon server and icon farm, as returned by many api methods.
If the icon server is greater than zero, the url takes the following format:
http://farm{icon-farm}.static.flickr.com/{icon-server}/buddyicons/{nsid}.jpg
else the following url should be used:
참고 : http://www.flickr.com/services/api/misc.buddyicons.html
참고 : http://www.flickr.com/services/api/flickr.people.getInfo.html<person nsid="12037949754@N01" isadmin="0" ispro="0" iconserver="122" iconfarm="1"> <username>bees</username> <realname>Cal Henderson</realname> <mbox_sha1sum>eea6cd28e3d0003ab51b0058a684d94980b727ac</mbox_sha1sum> <location>Vancouver, Canada</location> <photosurl>http://www.flickr.com/photos/bees/</photosurl> <profileurl>http://www.flickr.com/people/bees/</profileurl> <photos> <firstdate>1071510391</firstdate> <firstdatetaken>1900-09-02 09:11:24</firstdatetaken> <count>449</count> </photos> </person>
Tag : 4001 에러, API, flickr, FlickrNet, Silverlight, 실버라이트
1. Flickr API Key 발급받기
실버라이트에서 Flickr API를 이용하기 위한 첫 단계로 API Key를 발급 받는 과정을
정리해 보았습니다. (29일 세미나 자료로 활용도 해야해서... 꿩먹고 알먹고)
http://www.flickr.com/services/api/keys 에 방문하여 로그인을 합니다.
(yahoo 계정이 없으시면 계정을 먼저 만드시고 로그인 하시면 됩니다.)
자 이제 Key를 잘 가지고 있다가 Flickr 관련 어플리케이션을 만들 때 사용하면 됩니다.
Tag : API, Flickr Finder, RIA, Silverlight, 실버라이트, 웹
Tag : AddSilverlightLink, RIA, Silverlight, 실버라이트, 웹
구현해서 서버에 올려 놓은지는 벌써 2주가 되어갑니다만,
바빠서 포스팅을 못했습니다.
http://shiverlight.net/Demos/FlickrFinder
1. 검색어 자동완성 기능
Favorites 등 재미난 기능을 좀 넣어보려고 했는데,
다른 것 하느라고 시간이 영 안나네요.
Tag : Flickr Finder, Silverlight, 실버라이트, 웹서비스, 자동완성, 휴즈플로우
Tag : Silverlight, TextDragon, 방명록, 실버라이트, 휴즈플로우
사용자는 대체 어느 링크를 타고 우리 웹사이트에 방문하셨을까?
이걸 알려주는 HTTP Referer라는 것이 있죠?
근데 과연 실버라이트 객체에 HtmlPage.Navigate로 구현한 링크를
타고 들어온 사용자로 부터도 HTTP Referer 정보를 얻을 수 있을까요?
이번 실험은 이 궁금증을 해소해 보겠습니다.
일단 제 Linux 웹서버에 PHP로 HTTP Referer와 Browser 정보를
화면에 출력해 주는 페이지를 하나 작성했습니다.
http://twosomeplace.net/test/Referer.php
<style>
body, td { font-size:12px; }
.Info { border : 1px solid #E0E0E0;}
.Info td { padding:5px;border : 1px solid #E0E0E0;}
</style>
<table width="600" class="Info" cellspacing="0">
<tr>
<td>Referer</td>
<td><?=$_SERVER['HTTP_REFERER']?> </td>
</tr>
<tr>
<td>Browser</td>
<td><?=$_SERVER['HTTP_USER_AGENT']?></td>
</tr>
</table>
그리고 아래와 같은 실버라이트 페이지를 하나 만들어 보았습니다.
http://shiverlight.net/test/Referer/
Tag : HTTP Referer, Silverlight, 실버라이트, 웹
1. 샘플 프로젝트 만들기
일단 솔루션에 .Net Framework 3.5 기반의 Silverlight Project를 먼저 생성하시고,
이어서 Web프로젝트 형식의 'ASP.NET 웹서비스 응용 프로그램 템플릿 프로젝트를 추가합니다.
위 액션의 의도가 궁금하신 분은 공도님의 포스트
http://gongdo.tistory.com/97 중 '웹 프로젝트와 Silverlight 프로젝트를 함께 디버깅'
파트를 참고하십시오. 안 궁금하신 분은 패스!
솔루션 탐색기 트리에서 Service1.asmx 파일을 더블클릭하여
Service1.asmx.cs 파일을 아래와 같이 편집합니다.
[System.Web.Script.Services.ScriptService]에 적용되어 있던 주석 하나만 풀어주면,
바로 Silverlight의 비하인드 코드를 통해 직접 연동할 수 있는 웹서비스 클래스가 됩니다.
Service1.asmx 파일에 오른쪽 클릭하고 '브라우저로 보기'를 실행하여,
URL을 클립보드에 복사해 둡니다.
저의 경우에는 http://localhost:56997/Service1.asmx 였습니다.
자 그럼 그창을 닫습니다.
주의) 나중에 웹에 게시할 때는 웹서비스가 게시된 웹상의 URL로 웹참조를
변경해 주셔야 합니다.
3. 웹 참조 추가
Silverlight 프로젝트에 오른쪽 클릭을 하고 '웹 참조 추가'를 실행합니다.
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
// 웹 서비스의 HelloWorld 메서드를 실행하여 가져온 문자열을 화면에 표시
mySvc.Service1 svc = new mySvc.Service1();
_tbMessage.Text = svc.HelloWorld();
}
5. 테스트
자 이제 F5를 눌러 실행을 해봅니다.
Tag : .Net Framework 3.5, ajax, Silverlight, WebService연동, 실버라이트, 웹
길버트제 글은 실버라이트 1.1에 해당하는 내용입니다.
실버라이트2에서는 프로젝트 생성 시,
기본 옵션으로 웹어플리케이션 프로젝트를 동시에 생성할 수가 있구요.
이때 생긴 [프로젝트명]_Web란 이름의 웹어플리케이션 프로젝트 쪽의 파일 구성을 유심히 보시면,
js랑 테스트 페이지 대신에 [프로젝트명]TestPage.aspx파일과 [프로젝트명]TestPage.html 파일이 생깁니다.
둘 중 테스트 하고 싶으신 것을 '시작 페이지로 지정'하시고 실행하시면됩니다.
[프로젝트명]TestPage.aspx에서는 asp:Silverlight 컨트롤에 의해서 실버라이트가 호스팅 되고,
[프로젝트명]TestPage.html에서는 object 태그에 의해서 실버라이트가 호스팅 되고 있는 것을
확인하실 수 있습니다.
실버라이트 2에서는 TestPage.html.js 같은 것이 필요없게 되었습니다.
1. 서론 (준비사항)
.Net Framework 3.5 기반으로 생성한 WebService와 Silverlight 연동하기는
누워서 떡먹기인데, 웹호스팅 업체들이 .Net Framework 3.5를 지원하는
서비스를 아직 내놓지 않고 있죠? (비싼 돈 내고 서버 호스팅을 하는 수 밖에...)
그래서 현재 시점에서는 .Net Framework 2.0 기반의 WebService와 함께 하는 것이 손쉬운 길입니다.
.Net Frameworks 2.0 기반에서 Silverlight와 연동하기 위해서는 AJAX의 도움이 필요합니다.
일단 Visual Studio 2008은 설치되어있으시다고 가정하면, 다음과 같은 것들을 추가로 설치하셔야 합니다.
- ASP.NET 2.0 AJAX 1.0 Extensions 1.0
- Microsoft ASP.NET 2.0 AJAX Templates for Visual Studio 2008
설치 후 Visual Studio 2008을 구동시켜 새 프로젝트 만들기를 시도해 보면,
Web 프로젝트 형식의 .NET Framework 2.0 용 템플릿에 무엇인가 새로 추가되어 있는 것을
발견하실 수 있습니다.
위 액션의 의도가 궁금하신 분은 공도님의 포스트
http://gongdo.tistory.com/97 중 '웹 프로젝트와 Silverlight 프로젝트를 함께 디버깅'
파트를 참고하십시오. 안 궁금하신 분은 패스!
namespace WebSvc2_0
{
/// <summary>
/// WebService1의 요약 설명입니다.
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Merry Christmas!";
}
}
}
웹서비스 클래스에 [System.Web.Script.Services.ScriptService]가 선언이 되어있어야,
Silverlight의 비하인드 코드를 통해서 직접 연동할 수 있습니다.
WebService1.asmx 파일에 오른쪽 클릭하고 '브라우저로 보기'를 실행하여,
URL을 클립보드에 복사해 둡니다.
저의 경우에는 http://localhost:49573/WebService1.asmx 였습니다.
자 그럼 그창을 닫습니다.
주의) 나중에 웹에 게시할 때는 웹서비스가 게시된 웹상의 URL로 웹참조를
변경해 주셔야 합니다.
3. 웹 참조 추가
Silverlight 프로젝트에 오른쪽 클릭을 하고 '웹 참조 추가'를 실행합니다.
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
// 웹 서비스의 HelloWorld 메서드를 실행하여 가져온 문자열을 화면에 표시
mySvc.WebService1 svc = new mySvc.WebService1();
_tbMessage.Text = svc.HelloWorld();
}
5. 테스트
자 이제 F5를 눌러 실행을 해봅니다.
Tag : .Net Framework 2.0, ajax, Silverlight, WebService연동, 실버라이트, 웹
이번 실험은 이런 생각에서 출발합니다.
createSilverlight 함수의 isWindowless 파라미터를 "true"로 설정한 후,
실버라이트 Page의 Opacity값이나 Background 색상의 Alpha 값을 조정하면,
뒤에 놓인 HTML 엘리먼트들을 배경으로 보이면서 작동이 가능할 것인가?
(구체적으로는 HTML형태로 결과물을 보여주는 이런저런 매쉬업들을 활용하여,
실버라이트만 그 위에 살짜쿵 올려서, 뭔가를 만들 수 있지 않을까...? 하는 생각에서 출발했습니다.)
일단, Silverlight의 isWindowless 파라미터에 대해서는 공도님이 친절하게
정리해 놓은 포스트가 있으니 참고하시면 되겠습니다.
공도님이 정리한 포스트
Page.xaml은 Blend에서 아래와 같이 사이즈 400x300 짜리 디자인으로 준비하였습니다.
<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를 살짝 주석으로 막고 실행시켜 캡쳐하였습니다.
}
그럼 이렇게 됩니다.
<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로 설정하였습니다.
결과 보시죠!
실제 코드에 적용
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의 배경색이 없는 경우
flickr_finder_kiosk.cmd
이올린에 북마크하기
이올린에 추천하기
Silverlight_WebSvc3_5.zip
흠..
한창 채널 서비스 유행할떄... 4.0인가 부터 있던 기능인데.. ㅡㅡ;
| 2008/05/20 11:58 | PERMALINK | EDIT | REPLY |아, 그랬군요! 정말 오래된 전통을 가진 기능이네요. ^^
| 2008/05/21 09:06 | PERMALINK | EDIT | REPLY |