마야울과 함께해요

Open API 중에서 네이버나 다음말고도 마이크로소프트에서도 LiveSearch라는 것을 지원을 합니다.
XML, JSON, SOAP방식을 지원하는 것으로 알고 있습니다.

XML방식은 네이버나 다음을 통해서 많이 사용을 해보았으니, .NET기술에서는 간단하게 사용이 가능 할 거라고 생각한 저는 SOAP 방식을 이용해서 개발을 해보았습니다.

우선 Silverlight와 접합을 시키기 위해서는 약간의 작업을 필요로 하는데, 저는 WCF라는 기술을 이용을 하여, WCF에서는 검색을 하고 검색결과를 리턴을 해주는 함수를 하나 만들었습니다. 이 함수를 Silverlight에서 요청을 하고 그 결과값을 이용을하여 출력을 하는 방식입니다.

우선 Silverlight프로젝트가 아닌 .NET 프로젝트에 Add Web Reference를 클릭을 하여 Reference를 추가를 해줍니다. URL은 http://soap.search.msn.com/webservices.asmx?wsdl 이 주소를 넣으시면 되시고 그다음에 Go를 클릭을 하시면 아래의 그림이 나올 겁니다.

그다음에 Web reference name을 정하시고 Add Reference를 클릭을 하시면 정상적으로 Web Reference가 추가가 됩니다.

여기까지는 수월 합니다. 그다음에 .Net 프로젝트에 WCF를 하나 추가를 해줍니다. Add->New Item을 가시면Silverlight-enabled WCF Service가 있습니다. 이것을 클릭하여 WCF 서비스를 하나 만들어 주세요~

그럼 여기서부터 시작입니다. 이제 간단한 함수를 하나만 만들어 주시면 됩니다.
위의 소스는 준서아빠님 블로그(http://www.uxkorea.net)님의 게시물 중 하나인 http://www.uxkorea.net/blog_post_178.aspx의 소스를 보고 제가 나름 수정을 한 소스입니다.
잠깐의 설명을 드리면 offset은 검색 결과중 어디서 부터 출력을 할것인지 정하는거고 count는 한꺼번에 출력할 갯수라고 생각하시면 됩니다. msdn을 보니 최대 결과 검색의 수는 1000개 까지만 되니 offset과 count의 값을 합한것이 1000을 넘으면 안된다고 합니다.

여기까지 하시면 WCF서비스를 만드는것은 끝이 났습니다. 이제는 이 서비스를 이용을 하는 Silverlight 프로그램만 만들면 되는데요. 이것은 간단합니다.
Silverlight프로젝트에서 Add Service Reference를 클릭을 하시고 Discover만 누르시면 방금 만든 WCF서비스를 찾을 겁니다.
적당한 Namespace를 넣으신다음에 OK를 클릭을 하시면 됩니다.
이제 이서비스를 사용하기만 하면 됩니다. 저는 이 소스를 쓴 곳은 Main.xaml.cs라는 곳에 사용을 하였고.. 여러분은 아무곳에나 사용을 하면 됩니다. 더 자세한 설명을 안드려도 이 소스 잠깐 보시면 어떻게 사용할지를 아실거 같네요... 혹 질문이 있으면 댓글이나 방명록에 글을 남겨주세요..

비주얼 2008에서 코딩을 하면 WCF가 잘 돌아가던 것이 원격에 있는 IIS에 올리면은 에러가 나온다.! 그 에러의 내용은 아래와 같다~!


에러의 간략한 내용이
이런식으로 나온다면 한번 따라해 보는것을 추천한다.

Service1.svc와 Service1.svc.cs 파일이 2개가 있다고 가정하에 시작을 하겠습니다.

Service1.svc.cs파일을 아래의 소스를 추가 해줍니다.

    public class MyServiceHostFactory : ServiceHostFactory
    {
        protected override ServiceHost CreateServiceHost(Type serviceType, Uri[] baseAddresses)
        {
            // 특정한 WCF 웹서비스 주소를 넣으면 됩니다.
            Uri webServiceAddress = new Uri("http://www.xellos.pe.kr/LiveSearch/LiveSearchService.svc");
            MyServiceHost webServiceHost = new MyServiceHost(serviceType, webServiceAddress);
            return webServiceHost;
        }
    }
    public class MyServiceHost : ServiceHost
    {
        public MyServiceHost(Type serviceType, params Uri[] baseAddresses)
            : base(serviceType, baseAddresses)
        { }
        protected override void ApplyConfiguration()
        {
            base.ApplyConfiguration();
        }
    }

그리고 Service1.svc파일도 약간 수정을 해야합니다. 비주얼 2008에서는 아무리 열어보려고 해도 저는 Service1.svc.cs파일만 열려서 EditPlus로 따로 작업을 했습니다. 열어보시면 단 한줄의 소스만 있을 겁니다.

<%@ ServiceHost Language="C#" Debug="true" Service="Gossip.Web.LiveSearch.LiveSearchService" Factory="MyServiceHostFactory" CodeBehind="LiveSearchService.svc.cs" %>

다른건 그대로 두시고 Factory를 추가시켜 줍니다. 그러면 웹서비스의 에러가 사라지고 아래의 화면이 나올 겁니다.

CodePlex(http://www.codeplex.com)을 돌아다니다가 Silverlight Contrib 라는 컨트롤 라이브러릴를 알게 되었습니다.

여기서 가장 생소하고 좋다고 생각한 기능은 CoolMenu라고 하는거인데..

RocketDock이나 ObjectDock의 같은 비슷한 기능을 보여줍니다.

데모는 여기에 들어가시면 볼 수 있습니다.
http://silverlightcontrib.org/demo/

간단한 CoolMenu 사용방법은 기존의 라이브러리 사용하는 방법과는 크게 다르지는 않습니다.

이렇게 사용을 하시면 됩니다. 

Codeplex(http://www.codeplex.com)을 가보시면 Silverlight_Toolkit_December 버전이 나와있습니다. 제가 보던건 November버전이었는데 December버전이 새로 나왔더군요
그럼 11월 버전과 12월 버전의 차이점은 무엇일까? 하는 생각이 드는데요. 한번 차이점을 찾아 보겠습니다.
왼쪽이 11월 지원 컨트롤이고 오른쪽이 12월 지원 컨트롤 목록입니다. 아무래도 최신 버전을 사용하는 것 같아요

지원하는 Theming 목록들입니다. 이 목록은 파일을저장한곳\Silverlight_Toolkit_December_08\Binaries\Themes에서 확인을 할 수 있습니다.

11월 버전보다 3가지의 Theming이 추가 되었군요~~ㅋ^^
저는 이중에서 BureauBlack와 WhistlerBlue라는 것을 사용해 보겠습니다.
우선 Theming을 사용하기 위해서는 밑에 네모박스로 체크를 해둔것을 추가 하셔야 합니다.
Microsoft.Windows.Controls.Theming.BureauBlack 과 Microsoft.Windows.Controls.Theming.WhistlerBlue 같은 경우는 자신이 사용할 Theming만 추가 하셔도 됩니다.

References를 추가를 해주셨다면, 이제는 이 References를 사용해야겠죠?
UserContol에 정의를 해주세요. 저의 경우에는
이렇게 정의를 하였습니다. BureauBlack를 사용하고 싶다면 WhistlerBlue부분을 BureauBlack로만 바꿔주시면 됩니다.

이렇게 정의를 해주신 다음에 가장 최상위에 Theming를 정의를 하면 하위 컨트롤은 다 Theming이 정의가 됩니다. 하지만 한번 해보시면 TabControl과 DataGrid는 적용이 되지를 않습니다. 이를 해결하기 위해서는 간단한 코드를 다시 정의를 해야합니다.


이것이 바로 간단한 정의 입니다.
TabControl의 이름을 tcMain입니다. DataGrid도 똑같이 정의를 해주면 됩니다.


이렇게 테마를 적용하면 어떻게 변하는지 알고 싶으세요?
그러면 아래의 링크를 따라가 보세요.
http://www.codeplex.com/Silverlight/Wiki/View.aspx?title=Silverlight%20Toolkit%20Overview%20Part%203

Silverlight에서 LayoutRoot를 Canvas가 아닌 Grid로 설정을 하고 Column이나 Row를 설정을 할 때가 있는데..

여기서 *과 Auto로 설정하는 차이가 있습니다.

어제 프로그래밍을 하던 결과로는 다르더군요..

정확히 왜 다른지는 모르겠습니다. 하지만 이 2개가 같다고 생각하시면 안될것은 확실합니다.

우선

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
</Grid>

이런식으로 설정을 하였을 경우 0번째 Row에 Height속성값이 변하는 StoryBoard를 만들경우 생각하는 거하고는 다른 모습으로 StoryBoard가 작동을 할 것입니다. 또한 0번째 Row의 Height가 줄어들고 그 줄어든 공간을 1번째 Row에서 차지를 해야하는데 그렇게 나오지를 않습니다.

그다음에 1번째는 *로 설정을 한 이유는 Blaclight라는 라이브러리에서 DragDropPanel이라는 것을 사용을 하는데 이곳에서는 Auto로 값을 주면은 제대로 된 모습이 안나옵니다.

왜이렇게 *과 Auto로 설정을 주는것에 차이가 있는지는 아직은 모르지만, 어제 엄청난 삽질로 알아낸 사실은 분명히 다르다는 겁니다.


훈스닷넷(http://www.hoons.kr)에 문의 결과
 XAML에서 auto 속성은 C#코드로 구현할 경우 Double.NaN 필드를 사용하더군요.
* 은 측정된 전체크기에서 나머지부분을 할당하기때문에 그런 결과가 나오는 게 아닐까요??
두가지 예제코드 ^^
<Grid ShowGridLines="True" Height="400" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="Black" BorderThickness="2" />
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="2" />
</Grid>


<Grid ShowGridLines="True" Height="400" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="Black" BorderThickness="2" />
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="2" />
</Grid>

이렇게 결론이 나왔습니다.

현재 버전을 3개를 만들었으면 3개 모두 올렸습니다.

버전1 : http://mashup.xellos.pe.kr/v1.aspx

버전2 : http://mashup.xellos.pe.kr/v2.aspx

버전3 : http://mashup.xellos.pe.kr/v2_5.aspx

현재 버전1이 가장 좋은 평을 받았고..
이걸로 닌텐도를 받았으니...

버전2는 사람들이 어떻게 사용하는지 조차 잘 모르는...
하지만 유일하게 소스를 공개를 해놓은 버전

버전2_5는 버전2를 수정을 했지만...
그렇게 평이 좋지는 않습니다~!

어떤 모습인지는 아래의 사이트로 들어가셔서 확인 하시기 바랍니다.
http://www.hoons.kr/Board.aspx?Name=mysilverlight&Mode=2&BoardIdx=18508&Key=&Value=

또한 소스는 공개를 하겠습니다.

원하시는 분은 확인 해보세요..

소스를 가져가시는 분은 댓글은 필수^^ㅋ

버전1과 2의 스샷의 자료는 없지만..

하루내내 버전2로 수정을 했지만...

버전1이 났다는 사람이 워낙 많아서...

버전2를 다시 바꾸어 버렸다는...

간단한 스샷을 올리면

메인화면입니다. 너무나 심플합니다....ㅜㅜ

검색어 설정에서 실시간 검색어를 클릭을 하면은 실시간 검색어를 토대로 검색어를 추가를 할 수 있습니다. 이미 추가된 검색어는 추가가 되지 않으며, 추가된 검색어를 확인 할 수 있습니다.

검색 결과에서 이미지 검색을 클릭을 했을때  모습..
이렇게 만든것이 반응이 괜찮으면 기능을 더욱 추가할 예정~~

우선 블랙라이트라는 것이 무언인지를 궁금해 하실것 같아서 한마디 쓰고 들어가겠습니다.

블랙라이트는 WPF또는 실버라이트에서 사용이 가능한 라이브러리(?)같은 것입니다.

 

블랙라이트에 제공하는 컨트롤이 몇개 있는데 이번시간에 사용할 컨트롤은 DragDockPanel이라는 것입니다.

이것을 사용하는 방법은 간단합니다.

 

이렇게 사용을 하시면 됩니다.

MinimizedColumnWidth는 창이 최소화 될때의 가로 크기 MinimizedRowHeight는 창이 최소화 됐을때의 세로크기 입니다. MinimizedPosition는 창의 최소화 되고 하나만 최대화 됐을때 최소화 된 창들을 어디에 둘건지를 물어보는 겁니다. 저는 아래쪽으로 설정하는 Bottom값을 줬습니다.

DragDockPanelHost안에 DragDockPanel을 원하는 만큼 넣어 주시면 자리는 알아서 잡게 됩니다.

 

그리고 여기서 각각의 DragDockPanel이 크기가 수시로 커지고 줄어들고 합니다. 그래서 거기에 맞춰서 컨트롤의 크기를 조절 하기 위해서 저는 SizeChanged라는 이벤트를 사용하였습니다. 이 컨트롤은 Maximized나 Minimized같은 이벤트도 사용이 가능합니다. 다만, 이 컨트롤이 발생을 하였을때는 분명이 최대화가 된다음에 이벤트가 발생을 하는것이 아닌 최대화 버튼을 클릭을 했을때 이벤트가 발생을 하게 되고, 그때의 크기를 구할 수 밖에 없습니다. 그래서 전 SizeChanged라는 것을 이용하여 하였습니다.

 

SizeChanged라는 것을 사용하였기 때문에 이제는 이제는 크기가 변할때마다 이벤트가 발생을 하게 됩니다. 이 이벤트를 처리를하는 함수를 잠깐 보겠습니다.

여기서는 e.NewSize는 사이즈가 변화가 되면서 새로운 사이즈고 당연히 PreviousSize라고 해서 이전의 사이즈를 알 수도 있습니다. 이제 변화하는 사이즈를 알았으니 그에 맞게 사이즈를 조절을 하면 됩니다.

 

여기서는 또다른 함수를 호출을 하게 됩니다. 여기서부터는 사용하시는 분 마음대로 수정을 하여도 상관이 없습니다. 저의 경우를 보게 된다면 각각의 DragDockPanel에 들어가는 것은 제가 만든 사용자 컨트롤로써 news는 뉴스를 검색한것을 보여주는 컨트롤, images는 이미지 검색을 해서 보여주는 컨트롤 입니다. 각각의 사용자컨트롤에서 이 사이즈를 이용해서 컨트롤에 변화를 주는 부분을 보여드리겠습니다.

lbNaver는 네이버뉴스검색화면은 보여주는 ListBox입니다. Size 형식으로 받은 size의 값을 통해서 컨트롤의 크기를 지정해주고 있습니다. if (size.Height > 64 && size.Width > 21) 이부분은 제가 Margin값으로 컨트를을 줬기 때문에 그 여백만큼의 크기는 제외하고 값을 주기 위해서 입니다. 혹 이 if문을 안주게 되면 size.Height 값이 0이 넘어올때도 있는데 0에 -64를 하게 되면은 음수값이 되어서 에러를 발생합니다. Size는 구조체 형식으로 Height및 Width값을 가지고 있습니다. 앞에서 넘겨주는 형식이 Size형식이기 때문에 이 형식을 사용한 것 입니다.

이 그림은 전의 그림과는 크게 다를것이 없습니다. ImageTabControl은 TabControl의 가로 크기를 조절을 하는것입니다. if문은 왜 쓴것인지 아시겠죠??

 

그럼 여기서 마치겠습니다. 질문 사항이 있으시면 댓글로 남겨주세요