시작하세요.  Silverlight

#7-1 Layout

 이번 강좌에서는 Silverlight 에서 가장 기본이 되는 Layout 에 대해 알아 보도록 하겠습니다. Layout 은 위치를 를 잡아 주는 아주 중요한 컨트롤 입니다. 레이아웃 컨트롤의 종류는 기본적으로  Canvas , Grid ,StackPanel 등이 있고 Silverlight Toolkit 에 포함된 확장 컨트롤인 WrapPanel, DockPanel 등이 대표적인 레이아웃 컨트롤 이라 할 수 있습니다.

# Canvas Control
 레이아웃 컨트롤은 자식 컨트롤의 위치를 잡는 방법에서 큰 차이 점이 있습니다. 그중 Canvas 컨트롤에 대해 알아 보도록 하겠습니다.
 
 Silverlight 가 막 세상에 나왔을때는 지금과 같은 많은 컨트롤들이 지원 되지는 않았습니다. 그때는 레이아웃 컨트롤 역시 마찬가지로 Canvas 밖에 지원하지 않았습니다. 이처럼 가장 기본이 되었던 Canvas 컨트롤의 특징은 자식 UIElement 들의 위치를 잡을때 상단과 좌측을 기준으로 위치를 잡는것이 큰 특징 입니다.


사용자 삽입 이미지

Canvas 는 <Canvas/> 태그를 사용하고 자식 UIElement 의 위치는 Canvas.Top , Canvas.Left 속성을 이용합니다.
    <Canvas Background="LightGray">
        <Button Width="100" Height="30" Canvas.Left="100" Canvas.Top="50" Content="Click!!"/>
    </Canvas>

사용자 삽입 이미지

모든 XAML 들은 동적으로 생성이 가능한데 , Canvas 역시 동적으로 생성이 가능합니다. Canvas 컨트롤을 동적으로 생성에 기본 레이아웃 컨트롤인 LayoutRoot 컨트롤의 자식으로 추가해 보겠습니다.( 간혹 LayoutRoot 를 지워 버리시는 분이 있으신데.... 좋지 않은 행동입니다.)

Canvas can = new Canvas();
LayoutRoot.Children.Add(can);

레이아웃 컨트롤은 다수의 자식 UIElement 들을 포함시킬 수 있는 컨트롤 입니다. Canvas 컨트롤 역시 다수의 자식 컨트롤을 추가 할수 있는데 동적으로 자식의 컨트롤을 추가하는 방법은  다음과 같습니다.

Button btn = new Button();
btn.Width = 100;
btn.Height = 30;
btn.Content = "Click!!";

can.Children.Add(btn);

이렇게 레이아웃 컨트롤에 있는 Children 에 자식 UIElement  를 추가하면 됩니다. Canvas 에 자식이 추가되게 되면 기본적으로 자식은 (0,0) 좌표에 위치 하게 됩니다.

사용자 삽입 이미지
이때 자식 UIElement 의 위치를 잡기위해선 다음과 같은 동적 코딩으로 변경 할 수 있습니다.

Canvas.SetLeft(btn, 100);
Canvas.SetTop(btn, 50);


사용자 삽입 이미지

Canvas 에 추가된 자식 UIElement 들은 레어어와 같이 계층적으로 들어 가게 됩니다.  이 계층은 마지막에 추가된것이 가장 위로 가는 특징이 있는데 XAML 에서 다음과 같이 자식의 UIElement 추가 되었을 때는 마지막에 들어간 자식이 가장 화면 위에 나타 납니다. 이것은 Canvas 뿐만 아니라 자식을 갖는 모든 컨트롤이 공통 됩니다.

사용자 삽입 이미지
하지만 이 계층은 임위로 그 위치를 지정 할 수가 있는데요. Zindex 가 그 역할을 합니다. Zindex 의 값은 정수형 값이 들어 가면 이수의 크기가 클수록 가장위로 올라 갑니다.

<Canvas>
            <Rectangle Width="100" Height="100"
                       Fill="Red" Canvas.Left="150"
                       Canvas.Top="100" Canvas.ZIndex="1"></Rectangle>
            <Rectangle Width="100" Height="100"
                       Fill="Blue" Canvas.Left="190"
                       Canvas.Top="140" Canvas.ZIndex="2"></Rectangle>
            <Rectangle Width="100" Height="100"
                       Fill="Yellow" Canvas.Left="220"
                       Canvas.Top="170" Canvas.ZIndex="1"></Rectangle>
</Canvas>


사용자 삽입 이미지

동적으로도 Canvas.SetZIndex(UIElement element , int value) 를 이용하면 변경 할수 있습니다.



2010/01/05 17:53 2010/01/05 17:53
inde 이 작성.

당신의 의견을 작성해 주세요.

Silverlight 예제 100선

# Binding + Open API + LINQ  를 이용한 이미지 검색


# 프로젝트 만들기

검색 Application 을 만들기 위해 새 프로젝트를 생성 합니다. 상단 메뉴에서 파일-> 새로만들기 -> 프로젝트 ->   Visual C# -> Silverlgiht 텝에서 Silverlight 응용프로그램 으로 프로젝트를 생성 합니다. 프로젝트 이름은 ImageSearch 라고 하겠습니다. ^^

사용자 삽입 이미지



# MainPage.xaml 수정 하기

이번에 만들 검색 App 의 화면은 간단합니다. 키워드가 들어간  TextBox 박스 한개와 , 리스트가 뿌려질 ListBox 1개 그리고 검색을 실행할 버튼 한개를 구성하여 App UI 만들도록 하겠습니다.

MainPage.xaml  페이지를 열어 아래와 같이 수정 합니다.
<UserControl x:Class="SearchApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="600" Height="400">
  <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBox Width="450" HorizontalAlignment="Left" Grid.Row="0" Height="30" Margin="20,0,0,0" x:Name="KeyWord"/>
        <Button Width="100" Height="30" HorizontalAlignment="Right" Margin="0,0,20,0" Content="Search" x:Name="SearchButton"/>
        <ListBox Grid.Row="1" Margin="20" x:Name="ImageListBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="50" Height="50" HorizontalAlignment="Left" Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
                        <HyperlinkButton Margin="60,0,20,0" Content="{Binding Title}" NavigateUri="{Binding LinkUrl}" VerticalAlignment="Center" TargetName="_Blank"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

사용자 삽입 이미지

# LINQ 참조 추가하기

LINQ 는 기본적으로 시스템에 참조 되어 있지만 XML LINQ는 시스템 참조에 추가되어 있지 않습니다. 그래서 Xml Linq 를 직접 추가 해야 됩니다.

사용자 삽입 이미지
솔루션 탐색기 에서 참조부분에 우클릭을 하신 후 참조 추가를 누릅니다.

사용자 삽입 이미지
System.Xml.Linq 를 선택하고 확인을 누릅니다.

사용자 삽입 이미지
참조 트리에 추가된 모습을 확인 할 수 있습니다.


# MainPage.xaml.cs 수정하기
 

자!! 이제 본격적으로 Silverlight Application 을 코딩하기 시작 하겠습니다. 우선은 검색 App 에서 필요한 네임스페이스를 참조 합니다.


using System.Collections.ObjectModel;
using System.Xml.Linq;
using System.Windows.Browser;


이제 바인딩에 필요한 데이타를 만들기 위해 데이타 모델을 선언 합나다. 바인딩이 될 멤버는 꼭 Property 로 선언 되어야 합니다.

    public class ImageData
    {
        public string ImageUrl { get; set; }
        public string LinkUrl { get; set; }
        public string Title { get; set; }
    }

03 ImageUrl : 검색결과의 이미지 경로
04 LinkUrl : 원본 이미지의 경로
05 Title : 제목  



    public partial class MainPage : UserControl
    {
        string apiKey = "API 키";
        ObservableCollection imageList = new ObservableCollection();
        public MainPage()
        {
            InitializeComponent();
            Loaded += (object sender, RoutedEventArgs e) =>
                {
                    ImageListBox.ItemsSource = imageList;
                };
            SearchButton.Click += (object sender, RoutedEventArgs e) =>
                {
                    Search();
                };
            KeyWord.KeyUp += (object sender, KeyEventArgs e) =>
                {
                    if (e.Key == Key.Enter)
                    {
                        Search();
                    }
                };
        }
        void Search()
        {
            if (KeyWord.Text.Length <= 0)
            {
                MessageBox.Show("검색어를 입력하세요.");
                KeyWord.Focus();
                return;
            }
            
            WebClient wc = new WebClient();
            
            wc.DownloadStringAsync(new Uri(string.Format("http://openapi.naver.com/search?key={0}&query={1}&target=image&start=1&display=100",apiKey,HttpUtility.UrlEncode(KeyWord.Text))));
            wc.DownloadStringCompleted += (object sender, DownloadStringCompletedEventArgs e) =>
            {
                XDocument doc = XDocument.Parse(e.Result);
                var xmlData = from data in doc.Descendants("item")
                              select new ImageData
                              {
                                  ImageUrl = (string)data.Element("thumbnail"),
                                  LinkUrl = (string)data.Element("link"),
                                  Title = (string)data.Element("title")
                              };

                imageList.Clear();
                foreach (ImageData data in xmlData)
                {
                    imageList.Add(data);
                }
            };
        }       
    }

03 OPEN API 필요한 키를 선언 합니다. dev.naver.com 에 가시면 쉽게 키를 얻을 수 있습니다.
04 바인딩 에 찰떡 궁합인 ObservableCollection 객체인 imageList 를 선언 하였습니다.
08 Silverlight Application 이 로드 되었을때 바인딩 을 연결 합니다.
12 검색 버튼을 클릭했을때 검색을 시작합니다.
16 키워드 입력 박스에서 엔터 키 이벤트가 발생 되었을때 검색을 시작 합니다.
26 키워드 입력 박스에 아무것도 입력 되어 있지 않다면 경고를 발생 합니다.
33 OPEN API 데이타를 가져 오기 위해서 Webclient 를 선언 합니다.
35 DownloadStringAsync 를 이용해서 OPEN API 데이타를 요청 합니다.
36 요청한 데이타의 결과값을 가져 옵니다.
38 결과값을 XML 형식의 XDocument 객체로 파싱합니다.
39 LINQ 를 이용해서 데이타를 매칭 시킵니다.
47 기존의 검색 결과를 비웁니다.
48 검색 결과를 바인딩한 imageList 에 넣습니다.




# Silverlight Application 실행

디버그 -> 디버깅 시작을 눌러 Silverlight 프로젝트를 빌드하고 Silverlight Application 을 실행 합니다.


사용자 삽입 이미지
미적 감각이라곤 전혀 찾아 볼 수 있는 화면이 나옵니다. 키워드박스에 검색어를 놓고 버튼을 누릅니다.


사용자 삽입 이미지

어때요 Binding + OPEN API + LINQ  를 이용한 Silverlight 활용법 찹 쉽죠잉~~~
2010/01/05 14:53 2010/01/05 14:53
inde 이 작성.

당신의 의견을 작성해 주세요.

저는 Python 라는 언어를 굉장히 좋아 합니다. 지금 까지 많은언어를 다뤄 왔지만 Python 만큼 lovely 한 언어또한 본적이 없습니다. 왜 Python 이 lovely 할까요?

1. 개발 코드가 간결하다. ( 개발언어만 보자면 지금까지 언어 중 가장 쉽습니다.)
2. 개발 속도가 빠르다. 실제 C/C++ 로 만들시간 보다 만드는 시간에 1/3 은 단축 되는것 같네요.
3. 무수히 많은 라이브러리가 존재한다. Python 라이브러리는 무수히 많이 있습니다. 우리는 그중에~ 골라서 쉽게 설치해서 쓰기만 하면 됩니다.
4. 모든플랫폼에서 사용가능하다. Python 은 윈도우 뿐만 아니라 모든 플래폼에서 사용이 가능합니다.
5. 폭넓은 확장성을 가지고 있다. Python 은 콘솔, 윈도우, 모바일, 웹 등등 어떤것이든 개발 가능합니다.
6. 높은 안정성 . Python 은 높은 안정성을 자랑 합니다.

뭐 이런것들은 쉽게 찾아 볼수 있는 것들이구요. 제가 느끼는 가장 큰 장점은.. 언제 어디서든지 내가 만들고 싶은 프로그램은 아주 쉽게 빠르게 만들수 있는 것입니다. 개발을 취미로 하는 사람들에겐 굉장히 좋은 언어 입니다. 바로 이점 때문에 많은 해커들도 Python 을 주로 사용 합니다.

자 그럼 이 Python 을 배우기위해 어떤 방법 들이 있을까요? 물론 요세는 검색만 잘하면 강좌들이 무수히 많습니다.  훌륭하신 분들 께서 강좌를 많이 만들어 주셨습니다.

다이빙 파이썬(최종)
http://coreapython.hosting.paran.com/dive/chap00.html
컴퓨터 과학자처럼 생각하는 법(최종)
http://coreapython.hosting.paran.com/thinkCSpy(2nd)/index.htm
귀도의 파이썬 자습서(2.5)
http://coreapython.hosting.paran.com/howto/tut/index.html
파이썬 프로그래밍 연습 -알란 굴드
http://coreapython.hosting.paran.com/tutor/index.htm
-- 파이썬마을 에서 --




하지만 저처럼 아날로그 감성을 지닌 사람은 ㅎㅎ 책을 옆에 끼고 공부하는것을 더 좋아 하지요. 그래서 준비 했습니다.

Python 파이썬

열혈강의 Python 

 이책이 나올 당시 볼만한 책은 이책 밖에 없었습니다. 선택의 폭이 너무나 좁았기 때문에.Python 에 관심 있는 많은 분들 깨서는 거의 대부분이 이책으로 공부 하셨을 겁니다. 저또한 회사, 집 에서 볼라고 두권이나 가지고 있는 책 이기도 하지요. 국내에 Python 의 정보가 많이 없을 무렵 상당히 도움이 되었던 책 입니다. 시리즈로 유명한 열혈 강의 중 하나구요. 인터넷 강의도 제공하고 있어 초심자에겐 굉장히 좋습니다.

http://www.yes24.com/24/goods/1783933?scode=032&srank=2


빠르게 활용하는 Python 파이썬 3 프로그래밍

 

빠르게 활용하는 Python 파이썬 3 프로그래밍

열혈강의 책 밖에 없었던 시절.. 책을 골라보는 재미는 전혀 없었습니다. 아니 Python 이 국내에 많이 퍼지지는 않았기 때문에 책또한 많이 나오지 못한게 사실 이었죠. 열혈강의가 가끔 찾아 보기 좋은 책이라면 이책은 개념잡기 좋은 책 입니다. 특히 Python 3.0 을 중점으로 다루고 있기 때문에 더욱 더 좋은것 같습니다. 서평도 거의 만점일 정도로 아주 좋습니다. python 을 새롭게 시작 하신다면 100% 강추 입니다.

http://www.yes24.com/24/goods/3432490?scode=032&srank=3




쉽고 빠른 웹 개발 Django 장고

 
쉽고 빠른 웹 개발 Django 장고

Java 스프링, 스트럭쳐 , Ruby  레일즈 , Php Cake  이들의 공통점을 뭘까요~ 내 자타가 공인하는 최고의 웹 프레임웍 입니다. Python 도 역시 최고의 웹 프레임웍이 존재 하는데요 바로 Django 라는 놈입니다.  프레임웍에 가장큰 특징중에 하나가 생산성 입니다. Python 의 장점을 살린 이 Django 는 실제 실무에서도 빠른 개발 속도와 안전성을 자랑 하는데요. 이책은 MVC 를 기본으로 Django 에 대한 내용이~ 실려 있습니다.

http://www.yes24.com/24/goods/3348853?scode=032&srank=1


실제 3권은 제가 상당히 잼있게 Python 을 배우고 즐겼던 책입니다. 지금도 옆에 끼고 심심할때마다 뒤적뒤적 거리는데요. 띄엄띄엄 보는 인터넷 강좌 보다는 한권의 책이 지식의 양과 깊이는 더 큰것 같습니다. 이글을 보시는분들 어서~~ 서점으로 달려가서 Python  책 한권 사보세요~

"내 아이에게 프로그래밍을 가르친다면 당연 Python 이다."
2009/12/31 09:49 2009/12/31 09:49
inde 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://indreams.co.kr/blog/rss/comment/46
  2. 패러다임 2010/01/07 08:34  편집/삭제  댓글 작성  댓글 주소

    소개감사드립니다 세미나에서 잠시 보기는 했는데요 저도 짬을내서 공부해봐야 겠네요 ^^

  3. 준형 2010/01/29 12:54  편집/삭제  댓글 작성  댓글 주소

    우와 인디님 3권이나 독파하셨군요.
    대단하세요 ;ㅁ;

    추천해주신 책 중에
    어떤 책부터 읽으면 좋을까요 ^^

[로그인][오픈아이디란?]
사용자 삽입 이미지
 
매쉬업으로 만드는 새로운 웹을 기치로 내건 2010 대한민국 매쉬업 경진대회의 공식 시작을 알립니다.  올해 행사는 ▲NHN(주), (주)다음커뮤니케이션이 공동주최하고, ▲(주)이베이옥션, ETRI (한국전자통신연구원)의 협찬, 그리고 ▲방송통신위원회, 한국인터넷진흥원의 후원으로 2010년 2월 6일 까지 약 2개월간 진행됩니다.



저도 실버라이트로 만든 Application 을 출품하려 합니다. ^^ 뭐 운이 좋으면 붙을까~ 하고 시도는 해보는데.... 안되겠죠? ㅎㅎ

저는 Silverlight 4 를 이용해 트위터 위젯을 선보일려고 하는데요. 제가 세미나때 선보인 Twicle 를 가지고 출품합니다.

사용자 삽입 이미지


매시업 경진 대회에 신청을 하면 웹호스팅을 제공 받을지 여부를 묻는대요 신청을 하면 cafe24 에서 무료 계정을 나누어 주네요.


사용자 삽입 이미지

2009/12/29 21:33 2009/12/29 21:33
inde 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]
Silverlight 4 OOB Trusted Applications Local File System  사용하기

Silverlight 4 BETA OOB Trusted Applications 그 두번째 시간 입니다. 이번 강좌는 Silverlight 4에서 추가된 Local File System  사용에 대해 알아 보도록 하겠습니다.

RIA Application 의 특징상 보안에 아주 엄격할 수 밖에 없습니다. 예를 들자면 Silverlight 나 Flash 의 크로스 도메인 정책을 허용 한다면 Dos 공격으로 남아 나는 사이트가 없을 것입니다. 또한 이번에 다룰 Local System 도 별다른 제약 없이 쓸수 있다면 우리의 PC 는 악성코드와 바이러스로 가득차 있을 것입니다. 생각만 해도 아주 끔찍한 결과죠.
하지만 이러한 제약으로 불편한점도 있습니다. 일단 덩치가 큰 Application의 경우 리소스 크기에 대한 제약이 심해집니다.  물론 Silverlight 는 SandBox 의 기능이 있기는 하지만 사용방법도 까다롭고, 기본적으로 제공하는 사이즈도 기본 1 MB/ OOB 25MB 라 충분치 않구요. 물론 용량을 늘리기 위해 사용자의 동의를 받으면 되지만 세상은 저같이 부정적인 사람도~ 많아서 쉽지는 않을 것입니다. ^^;;

제가 Remix 09 행사때 이런 질문을 받은적이 있습니다.  "왜 Silverlight  에서는 Local File System을 사용할 수 없는냐!!" 프로젝트 진행에 있어 상당히 제약이 된다는 불만을 토로 했습니다. 저는 ' Silverlight 의 보안의 특성상 Local File System 으로의 접근은 현재도 앞으로도 추가 되지 않을듯 합니다." 라고 답했습니다. 하지만 이번 Silverlight 4 에서는 이러한 생각이 틀렸다는 것을 알았습니다. ( 많은 사람들이 Local System 으로 접근을 허용하는 것음 의외 라고 생각 하셨을 겁니다.. 아니면 말구요 ^^;;)

Silverlight 4 에서는 한정적으로 Local File System 접근이 가능해졌습니다. 여기서 말하는 한정적이라는 말은아래와 같습니다.

1. 신뢰할수 있는 Application 이라는 것에 대해 사용자의 확인이 필요 합니다.
2. 접근이 가능한 폴더가 제한적 입니다. ( 내문서, 내비디오 , 내사진과 같은 맥의 경우 이와 유사한 폴더를 사용합니다.)


위와 같은 조건들을 갖추기만 하면 우리는 Silverlight 만으로도 훌륭한 Desktop Application 을 만들 수 있게 된 것이지요 !!

Silverlight 4 는 기존의 Silverlight API  와는 달리 File System 에 대한 권한을 모두 허용해 주었는데요.(물론  Trusted OOB 에서만 가능) 이는  Silverlight 3 와 4의 System.IO.File 네임 스페이스만 살펴봐도 쉽게 알 수가 있습니다.


사용자 삽입 이미지
Silverlight 4 는 인텔리 센스에 반응 하군요~ (착한것!! 요즘 Visual Studio 가 제 일의 70%는 대신 해주는것 같네요... 쩝 월급줘야 하나)


# 사용 가능한 폴더 얻기

위에서 File System 에 접근할 수 있는 폴더는 제한적이라고 설명을 하였는데요. 바로 접근 가능한 폴더정해져 있기 때문입니다. 접근 가능한 폴더는 Environment.GetFolderPath 메소드와 Environment.SpecialFolder 열거형 객체로 알 수 가 있습니다.

사용자 삽입 이미지
내 PC  의 내문서는 어디에  위치하고 있을까?

  var path = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
  MessageBox.Show(path);

이렇게 간단하게 내문서의 위치를 알 수 있습니다.




#예제 File Browser 만들기

자! 이제 본격적으로 Local File System 을 사용해보도록 하겠습니다. 다음 예제는 내문서의 디렉토리와 파일들의 목록을 출력 하고 텍스트 파일을 생성해 보는 예제 입니다.


1. 프로젝트 만들기

Silverlight Application 을 만들기 위해 VisualStudio 2010 을 실행 합니다. VisualStudio 가 없다면  http://www.indreams.co.kr/blog/24 을 참고 하시면 됩니다.  실행이 되었다면 File-> New -> Project 를 선택 Silverlight  프로젝트를 생성합니다.

사용자 삽입 이미지


2. OOB 설정 하기

Local File System 을 사용하기 위해선  Trusted Applications 모드로 실행 해야 됩니다. 이를 위해 OOB 를 설정을 하겠습니다.

사용자 삽입 이미지

사용자 삽입 이미지

① OOB 를 사용하기위해 Enable running application OOB 를 체크 합니다.
② Trusted Applications 모드로 실행 하기 위해 OOB Settings 버튼  을 클릭 합니다.

사용자 삽입 이미지
Trusted Applications 모드로 실행 하기위해  Require elevated trust when running outside the browser 를 체크 합니다.  



3. XAML
MainPage.xaml 파일을 열어 아래의 코드를 작성 합니다.

<UserControl x:Class="FileBrowser.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="300" Width="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <!-- 파일 목록 -->
        <ListBox Width="200" HorizontalAlignment="Left" x:Name="FileListBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Icon}"/>
                        <TextBlock Text="{Binding Name}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <!-- 파일 정보 및 텍스트파일 입력폼  -->
        <StackPanel Margin="220,10,0,0" x:Name="FileInfoBox">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="파일(폴더)명: "/>
                <TextBlock Text="{Binding Name}" TextWrapping="Wrap"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="경로: "/>
                <TextBlock Text="{Binding Path}" TextWrapping="Wrap" Height="50" Width="140"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="생성: "/>
                <TextBlock Text="{Binding CreatTime}" TextWrapping="Wrap"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="수정: "/>
                <TextBlock Text="{Binding LastWriteTime}" TextWrapping="Wrap"/>
            </StackPanel>
            <StackPanel>
                <TextBlock Text="파일이름" Margin="15,20,0,0"/>
                <TextBox Width="150" Height="25" x:Name="InputFileName"/>
                <TextBlock Text="파일내용" Margin="15,20,0,0"/>
                <TextBox Width="150" Height="50" TextWrapping="Wrap" x:Name="InputFileContent"/>
                <Button Width="150" Height="30" Margin="0,10,0,0" Content="TXT 파일 만들기" x:Name="CreateButton"/>
            </StackPanel>
        </StackPanel>
        <!-- OOB 설치 버튼 -->
        <Button Content="Silverlight Application Install" x:Name="InstallButton" Visibility="Collapsed"/>
    </Grid>
</UserControl>


4. CS

MainPage.xaml.cs 파일을 열어 아래의 코드를 작성합니다.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Collections.ObjectModel;
namespace FileBrowser
{
    public class FileData
    {
        public string Name { get; set; }
        public string Path { get; set; }
        public DateTime CreatTime { get; set; }
        public DateTime LastWriteTime { get; set; }
        public string Icon { get; set; }
    }
    public partial class MainPage : UserControl
    {
        ObservableCollection fileList = new ObservableCollection();
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
            this.InstallButton.Click += new RoutedEventHandler(InstallButton_Click);
            this.FileListBox.SelectionChanged += new SelectionChangedEventHandler(FileListBox_SelectionChanged);
            this.CreateButton.Click += new RoutedEventHandler(CreateButton_Click);
        }
        void CreateButton_Click(object sender, RoutedEventArgs e)
        {
            if (InputFileName.Text.Length <= 0)
            {
                MessageBox.Show("파일명을 입력하세요.");
                InputFileName.Focus();
            }
            else if (InputFileContent.Text.Length <= 0)
            {
                MessageBox.Show("내용을 입력하세요.");
                InputFileContent.Focus();
            }
            else
            {
                try
                {
                    // 내문서의 위치 가져오기
                    var path = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
                    // 텍스트 파일 스트림 얻기
                    System.IO.StreamWriter writer = System.IO.File.CreateText(string.Format(@"{0}\{1}{2}", path, InputFileName.Text, ".txt"));
                    // 입력 받은 테스트 스트림에 쓰기
                    writer.WriteLine(InputFileContent.Text);
                    writer.Close();
                    MessageBox.Show("메세지를 입력 하였습니다.");
                    fileList.Clear();
                    // 파일 목록 재갱신
                    LoadMyDocumentFiles();
                }
                catch (Exception ex)
                {
                    MessageBox.Show(ex.Message);
                }
            }

        }

        void FileListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            FileInfoBox.DataContext = fileList[FileListBox.SelectedIndex];
            
        }
        void InstallButton_Click(object sender, RoutedEventArgs e)
        {
            App.Current.Install();
        }
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            // OOB가 설치 되어 있는지 검사
            if (App.Current.InstallState == InstallState.NotInstalled)
            {
                this.InstallButton.Visibility = Visibility.Visible;
            }ㄴ
            else
            {
                // 현재 OOB 로 실행 중인지 검사
                if (!App.Current.IsRunningOutOfBrowser)
                {
                    this.LayoutRoot.Children.Clear();
                    TextBlock txt = new TextBlock();
                    txt.VerticalAlignment = VerticalAlignment.Center;
                    txt.HorizontalAlignment = HorizontalAlignment.Center;
                    txt.Text = "OOB에서만 실행하세요 ^^";
                    this.LayoutRoot.Children.Add(txt);
                }
                else
                {
                    FileListBox.ItemsSource = fileList;
                    LoadMyDocumentFiles();
                }
            }
        }
        void LoadMyDocumentFiles()
        {
            // 내문서 위치 얻기
            var path = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
            //디렉토리 목록 가져오기
            foreach(string data in System.IO.Directory.EnumerateDirectories(path))
            {
                FileData file = new FileData();
                System.IO.DirectoryInfo dirInfo = new System.IO.DirectoryInfo(data);
                file.Name = dirInfo.Name;
                
                file.Path = data;
                file.CreatTime = dirInfo.CreationTime;
                file.LastWriteTime = dirInfo.LastWriteTime;
                file.Icon = "/Image/dir.png";
                this.fileList.Add(file);
            }
            //파일목록 가져오기
            foreach (string data in System.IO.Directory.EnumerateFiles(path))
            {
                FileData file = new FileData();
                System.IO.FileInfo fileInfo = new System.IO.FileInfo(data);
                file.Name = fileInfo.Name;
                file.Path = data;
                file.CreatTime = fileInfo.CreationTime;
                file.LastWriteTime = fileInfo.LastWriteTime;
                file.Icon = "/Image/file.png";
                this.fileList.Add(file);
            }

        }

    }
}




# File Browser 실행 하기

1. OOB 설치 하기

프로젝트를 빌드 하게 되면 OOB 설치 버튼이 나오는데. 이는 현재의 PC  에 Silverlight Application 이 OOB로 설치되어 있지 않기 때문입니다. "안했으면 하면 될것을!!" 가감하게 버튼을 클릭해줍니다.

사용자 삽입 이미지

설치 버튼을 누르게 되면 아래와 같은 화면이 나오게 되는데 현재의 Silverlight Application 이 사용자의 컴퓨터를 접근할수 있다는 경고를 3초간 보여주게 됩니다. 3초가 지난후 에는 Install 버튼이 활성화 되는데 이때 Install 버튼을 쿨하게 눌러줍니다 !!

사용자 삽입 이미지

설치가 끝나면 우리 그토록 갈망하던 내문서의 파일들이 출력 되는것을 확인 할수 있습니다.

사용자 삽입 이미지

파일 목록을 선택하면 파일의 경로와 파일의 생성 날짜, 수정 날짜를 확인 할수 있습니다.


사용자 삽입 이미지

내문서의 TXT 파일을 생성해 봅니다. 생성할 파일명과 파일 내용을 작성하고 파일 만들기 버튼을 클릭 합니다.
 

사용자 삽입 이미지

만들어진 파일은 오른쪽의 파일 목록에서 확인 할 수 있습니다.

사용자 삽입 이미지

자 그럼 진짜 내문서에 파일이 생성 되었는지 확인해 보도록 하겠습니다.  

사용자 삽입 이미지





지금까지 Silverlight 4 를 이용해 Local File System 을 사용해 보았습니다. 참 쉽죠잉??


[샘플 페이지]
[샘플 소스 다운로드]

[Silverlight 4  Developer Runtime]

2009/11/21 11:29 2009/11/21 11:29

2009/12/28 20:21 2009/12/28 20:21
inde 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]
2009. 11 . 26 Silverlight Korea Seminar 를... 아주 안습으로 끝냈습니다. 역시 세미나 하면서 느낌점은. 약물로도 소용이 없구나~~ 라고 느꼈네요 이날 제가 발표한 세미나 주제는 Silverlight Mashup Guide 입니다.

Silverlight Mashup Application 을 만들기 위해 어떤것들이 필요 한지와,  PDC 에서 발표한 Silverlight 4를 가지고 Mashup Application을 만들어 보는 시간을 가져 보았습니다. 발표는... 100점 만점에.. 60점 주고 싶네요. 그래도 준비해온 데모들이 반응이 좋아 다행이 었습니다. 데모는 Silverlight 4 를 이용한 WebCam 그리고 Twitter Client 를 시연해 보았습니다.

사진을 보니 그날의 떨림이~ 흑 ㅠㅠ

사용자 삽입 이미지
1 Session 의 Speaker 이신 이과장님의 늠름한 모습 니에요. 이날 Silverlight 4에 대한 내용을 주로 발표 하셨습니다. 저는 2 Session 준비로 보지 못했지만 좋은 내용이었다고 하더군요.

사용자 삽입 이미지
2 Session 발표중인 저 인디 입니다. ㅠㅠ 화면에는... 온전하게 있지만 손은 덜덜덜;;;; 제가 발표한 내용은 Silverlgiht 4 Mashup Guide 였습니다..


비록 준비한거에 비해 만족할만한 발표는 아니었지만 저에게는 좋은 경험 이었습니다 . 이날 100명 가량이 참여를 하였는데요. 사람이 많아서 더 떨었던거 같네요 ^^;;
2009/12/22 21:06 2009/12/22 21:06
inde 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]
사용자 삽입 이미지

치열한 게임 끝에 위 6분 께서 경품을 받아 가셨습니다. 축하 드려요

2009/12/22 20:55 2009/12/22 20:55
inde 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]

제1회 Silverlight 캠프 진행하면서 여러가지 일이 있었지만 정말 재미난 시간들이었던것 같습니다. 아래 사진은 단체 사진편 입니다 ^^



사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지


2009/12/22 20:53 2009/12/22 20:53
inde 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]

매년초 Microsoft 는 라스가베스에서 Mix 행상를 엽니다. 이것을 자국으로 가져가 Remix라는 행사를 각국가마다 진행하는데요. 올해의 Remix 는 전년보다 좀늦고 규모도 많이 줄은듯 합니다. 저희 Silverlight Korea 에서도 행사장에 작은 부스를 만들어서 운영하였는데요. Silverlight 에 대해 알리고 인맺도 쌓는 좋은 경험이 되었네요 ^^

사용자 삽입 이미지

사용자 삽입 이미지

그때 참가한 단체사진 모습입니다. ^^






루현님 http://ruhyun.tistory.com/?page=36 블로그
2009/12/22 20:45 2009/12/22 20:45
inde 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]

2009.09.05 다나와

드디어 제가 기획한 카페 티셔츠가 나왔네요. 카페를 알릴수 있는 로고들은 루현님 께서 디자인하셨습니다.

이날 운영진 모임은 저희 회사에서 진행 되었습니다. ^^

사용자 삽입 이미지

티셔츠의 앞 모습니다. 전체적으로 Silverlight  를 상징하는 파란색 티셔츠구요~



사용자 삽입 이미지
요거는 뒷모습 입니다. 동그란 모양의 로고가 인상 적이네요.

사용자 삽입 이미지

이날은 패러다임님이 자비를 털어 손수 제작하신 스티커 까지~ 볼수가 있었습니다.



사진은 루현님의 블로그에서 퍼왔습니다. http://ruhyun.tistory.com/?page=57
2009/12/22 20:32 2009/12/22 20:32
inde 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]
« Prev : 1 : 2 : 3 : 4 : Next »