myifu.com - Study

jQuery 기본

2010-06-01T15:18:19+09:00

위 사이트에서 최신의 jquery를 다운받습니다.

min파일을 script태그로 링크한 다음에 사용합니다.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("a").click(function(event){
   alert("test!!"); 
   event.preventDefault(); // 이벤트의 기본 액션을 막는다. 
  });
 });
</script>

phototype 등의 다른 라이브러리를 함께 사용할 때, $()가 겹치므로 문제가 된다.

이것을 해결하기 위해서, 특정 옵션을 주면, jQuery에서는 $()를 사용하지 못하도록 할 수 있다.

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

또는,

 jQuery.noConflict();
(function($) { 
 $(function() {
  // more code using $ as alias to jQuery
 });
})(jQuery);
// other code using $ as an alias to the other library

또는,

 jQuery.noConflict()(function(){
 // code using jQuery
}); 
// other code using $ as an alias to the other library

또는,

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

또는,

// Do something with the new jQuery
dom.query("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
// Do something with another version of jQuery
jQuery("div > p").hide();

이런 방법으로 사용할 수 있다.

VBA에서 오늘 날짜 & 시간 입력하기

2010-03-31T14:06:28+09:00

특정 포맷으로 오늘 날짜 입력하는 방법입니다.

Range("G24").Value = Format(Date, "yyyy-mm-dd")

시간은 Date 대신 Time을 씁니다.

 Range("G24").Value = Format(Time, "hh:nn:ss")

네트워크 - 로컬 커넥션

2010-02-08T23:51:01+09:00

Local Connection

1) 서로 다른 브라우저에서 실행되고 있는 실버라이트 애플리케이션의 통신에 사용.

2) 하나의 브라우저에서 실행되고 있는 실버라이트 애플리케이션의 통신에 사용.

LocalMessageSender와 LocalMessageReceiver의 두 가지 클래스를 제공합니다.

LocalMessageSender

보낼때 사용.

ReceiverDomain : 수신할 Receiver가 속한 도메인

ReceiverName : 수신할 Receiver의 고유 값

SendAsync() : 메시지를 전달하고자 할 경우 사용.

SendCompleted : 메시지가 전달된 경우 발생하는 이벤트

LocalMessageReceiver

받을때 사용.

NameScope : 같은 도메인상의 실버라이트에서 받을 것인지 다른 도메인상의 실버라이트에서 받을 것인지를 의미.

ReceiverName : LocalMessageReceiver의 이름

Listen() : 메시지 수신을 위해 사용하는 메서드.

MessageReceived : 메시지를 수신하면 발생하는 이벤트

전송 (LocalMessageSender)

MainPage.xaml

<Grid x:Name="LayoutRoot" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center">
 <Grid.RowDefinitions>
  <RowDefinition Height="30" />
  <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <TextBlock Grid.Row="0" Text="전달한 문장을 입력해 주세요" />
 <TextBox x:Name="MyTextBox" Grid.Row="1" />
</Grid>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Messaging;
namespace LocalMessageSenderTest
{
 public partial class MainPage : UserControl
 {
  private LocalMessageSender localMessageSender;
  public MainPage()
  {
   InitializeComponent();
   
   localMessageSender= new LocalMessageSender("MyLocalReceiver");
   MyTextBox.TextChanged += new TextChangedEventHandler(MyTextBox_TextChanged);
  }
  void MyTextBox_TextChanged(object sender, TextChangedEvnetArgs e)
  {
   localMessageSender.SendAsync(MyTextBox.Text);
  }
 }
}

수신 (LocalMessageReceiver)

해당 솔루션에서 새 프로젝트를 추가합니다.

MainPage.xaml

<Grid x:Name="LayoutRoot" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center">
 <Grid.RowDefinitions>
  <RowDefinition />
  <RowDefinition />
 </Grid.RowDefinitions>
 <TextBlock Grid.Row="0" Text="전달받은 문장은 다음과 같습니다" />
 <TextBlock x:Name="MyTextblock" Grid.Row="1" Foreground="Blue" FontSize="15" />
</Grid>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Messaging;
namespace LocalMessageReceiverTest
{
 public partial class MainPage : UserControl
 {
  private LocalMessageReceiver localMessageReceiver;
  public MainPage()
  {
   InitializeComponent();
   localMessageReceiver = new LocalMessageReceiver("MyLocalReceiver");
   localMessageReceiver.MessageReceived += new EventHandler<MessageReceivedEventArgs>(localMessageReceiver_MessageReceived);
   localMessageReceiver.Listen();
  }
  void localMessageReceiver_MessageReceived(object sender, MessageReceivedEventArgs e)
  {
   MyTextBlock.Text=e.Message;
  }
 }
}

이제, 위 두 프로젝트를 동시에 실행시키기 위해 솔루션 설정을 변경해야 합니다.

솔루션에서 마우스 오른클릭을 하여 메뉴에서 속성을 클릭합니다.

LocalMessageReseiverTest와 LocalMessageSenderTest의 작업을

'시작'으로 변경하고 확인을 누릅니다.

http://myifu.com/_study/silverlight/template_network_sender/

http://myifu.com/_study/silverlight/template_network_receiver/

Sender 브라우저에서 입력한 문자열이 Receiver 브라우저에서 출력되는 것을 확인할 수 있다.

네트워크 - 소켓 통신

2010-02-08T23:12:47+09:00

실버라이트와 통신하는 소켓 통신 서버 규칙

943 포트를 통해 보아 정책 파일을 제공해야 한다.

4502~4534 사이의 포트를 이용해야 한다.

에코 서버 작성하기

에코 서버는 클라이언트로부터 문자열을 전송받아 다시 클라이언트에게 전송하는 역할을 합니다.

에코 서버는 실버라이트가 아닌 닷넷 기반의 콘솔 애플리케이션 위에서 작동하므로 먼저 C#콘솔 애플리케이션 프로젝트를 생성해야 합니다.

새 프로젝트 - C# / Windows / Console Application 선택합니다.

이름에 EchoServer를 입력하고 프로젝트가 저장될 Location은 임의로 저장합니다.

그다음 클래스를 생성하기 위해 위 프로젝트 에서 마우스 오른 클릭을 하여 추가-클래스 를 클릭합니다.

이름 입력 상자에 EchoServer.cs로 입력한 후 확인을 누릅니다.

EchoServer.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Net.Sockets;
using System.Net;
namespace EchoServer
{
 class EchoServer
 {
  public void StartServer()
  {
   Console.WriteLine("EchoServer를 시작합니다.");
   // SocketServer 생성
   // 포트 4530
   TcpListener listener = new TcpListener(IPAddress.Any, 4530);
   listener.Start();
   while (true)
   {
    byte[] buffer = new byte[512];
    // 클라이언트 접속 기다림
    Socket clientSocket = listener.AcceptSocket();
    Console.WriteLine("클라이언트가 접속했습니다.");
    while (true)
    {
     // 클라이언트로부터 문장 수신
     int receiveLength = 
      clientSocket.Receive(buffer, 512, SocketFlags.None);
     // 클라이언트로 다시 문장 전송
     if (receiveLength > 0)
      clientSocket.Send(buffer, 512, SocketFlags.None);
     else
     {
      clientSocket.Shutdown(SocketShutdown.Both);
      break;
     }
    }
   }
  }
 }
}

Program.cs

 using System;
using System.Collections.Generic;
using System.Text;
namespace EchoServer
{
    class Program
    {
        static void Main(string[] args)
        {
            EchoServer server = new EchoServer();
            server.StartServer();
        }
    }
}

보안 정책 서버 작성하기

실버라이트는 네트워크 통신을 하기 위해서 반드시 보안 정책 파일이 있어야 합니다.

특히 소켓을 이용하는 실버라이트 클라이언트는 이용하고자 하는 소켓 서버의 943 포트로 보안 정책 파일을 요청합니다. 943 포트를 이용해 보안 정채 서버를 작동시키기 위해 위 서버 프로젝트에 하나의 프로젝트를 더 추가하도록 하겠습니다.

새 프로젝트 - Windows - 콘솔 Application 선택

이름 입력상자에 PolicyServer라고 입력하고 Location을 임의로 지정합니다.

그리고 중요한 부분으로 Solution은 Add to Solution을 선택해 현재 솔루션에 프로젝트가 추가할 수 있도록 지정합니다.

다음으로 보안 파일을 생성합니다.

PsolicyServer 프로젝트위에서 마우스 오른쪽 버튼을 클릭해서 추가-새 항목 추가를 클릭합니다.

나타나는 대화창에서 XML File을 선택하고, 이름을 clientaccesspolicy.xml로 입력합니다.

clientaccesspolicy.xml

<?xml version="1.0" encoding="utf-8"?>
<access-policy>
  <cross-domain-access>
 <policy>
   <allow-from>
  <domain uri="*" />
   </allow-from>
   <grant-to>
  <socket-resource port="4530" protocol="tcp" />
   </grant-to>
 </policy>
  </cross-domain-access>
</access-policy>

* 다수의 포트를 사용할 때에는 4530-4532와 같이 범위로 입력할 수 있습니다.

다음으로 PolicyServer 클래스를 생성합니다.

(추가-클래스 - 이름을 PolicyServer로 입력)

PolicyServer.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Net.Sockets;
using System.Net;
using System.IO;
namespace PolicyServer
{
 class PolicyServer
 {
  private string policyRequestString = "<policy-file-request/>";
  private string policyFilePath = @"..\..\clientaccesspolicy.xml";
  private byte[] policy;
  public void StartServer()
  {
   Console.WriteLine("PolicyServer를 시작합니다.");
   // Policy 파일의 내용을 읽습니다.
   FileStream policyStream = new FileStream(policyFilePath, FileMode.Open);
   policy = new byte[policyStream.Length];
   policyStream.Read(policy, 0, policy.Length);
   policyStream.Close();
   // SocketServer 생성
   // 포트 943
   TcpListener listener = new TcpListener(IPAddress.Any, 943);
   listener.Start();
   while (true)
   {
    byte[] buffer = new byte[512];
    // 클라이언트 접속 기다림
    Socket clientSocket = listener.AcceptSocket();
    Console.WriteLine("클라이언트가 접속했습니다.");
    // 클라이언트로부터 문장 수신
    int receiveLength = clientSocket.Receive(buffer, 512, SocketFlags.None);
    if (receiveLength > 0)
    {
     string receiveString = System.Text.Encoding.UTF8.GetString(buffer, 0, receiveLength);
     // 클라이언트로부터 받은 문장이
     // <policy-file-request/>라면
     // 클라이언트에게 보안 정책 파일 전송
     if (receiveString.Equals(policyRequestString)) clientSocket.Send(policy, 0, policy.Length, SocketFlags.None);
    }
    // 클라이언트와 연결 종료
    clientSocket.Close();
   }
  }
 }
}

마지막으로 PolicyServer를 작동하기 위해 Program.cs를 열어 아래와 같이 입력합니다.

Program.cs

using System;
using System.Collections.Generic;
using System.Text;
namespace PolicyServer
{
 class Program
 {
  static void Main(string[] args)
  {
   PolicyServer server = new PolicyServer();
   server.StartServer();
  }
 }
}

마지막으로 EchoServer와 PolicyServer를 동시에 시작하게 하기 위해서,

솔루션에서 오른클릭하여 Properties를 클릭합니다.

대화창에서 EchoServer와 PolicyServer의 Action을 Start 로 변경합니다.

에코 클라이언트 작성하기

Echoclient라는 이름의 실버라이트 프로젝트를 생성하고, 다음과 같이 코드를 입력합니다.
Main.xaml

<Grid x:Name="LayoutRoot">
 <Grid.RowDefinitions>
  <RowDefinition/>
  <RowDefinition/>
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition/>
 </Grid.ColumnDefinitions>
 <TextBox x:Name="tbSendString" Grid.Row="0" Grid.Column="0"/>
 <Button x:Name="btSend" Content="전송" Grid.Row="1" Grid.Column="0"/>
 <TextBlock x:Name="tbReceiveString" Grid.Row="0" Grid.Column="1"/>
</Grid>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Net.Sockets;
namespace EchoClient
{
 public partial class MainPage : UserControl
 {
  Socket socket;
  public MainPage()
  {
   InitializeComponent();
   Loaded += new RoutedEventHandler(MainPage_Loaded);
   btSend.Click += new RoutedEventHandler(btSend_Click);
  }
  void btSend_Click(object sender, RoutedEventArgs e)
  {
   SocketAsyncEventArgs args = new SocketAsyncEventArgs();
   args.Completed += new EventHandler<SocketAsyncEventArgs>(SocketCompleted);
   byte[] response = System.Text.Encoding.UTF8.GetBytes(tbSendString.Text);
   args.SetBuffer(response, 0, response.Length);
   socket.SendAsync(args);
  }
  void MainPage_Loaded(object sender, RoutedEventArgs e)
  {
   DnsEndPoint endPoint = new DnsEndPoint("127.0.0.1", 4530);
   socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
   SocketAsyncEventArgs args = new SocketAsyncEventArgs();
   args.RemoteEndPoint = endPoint;
   args.Completed += new EventHandler<SocketAsyncEventArgs>(SocketCompleted);
   socket.ConnectAsync(args);
  }
  void SocketCompleted(object sender, SocketAsyncEventArgs e)
  {
   // 서버에 접속한 경우
   if (e.LastOperation == SocketAsyncOperation.Connect)
   {
    if (e.SocketError != SocketError.Success)
    {
     Dispatcher.BeginInvoke(() => MessageBox.Show("서버에 접속할 수 없습니다."));
     return;
    }
   }
   else if (e.LastOperation == SocketAsyncOperation.Send)
   {
    SocketAsyncEventArgs args = new SocketAsyncEventArgs();
    args.Completed += new EventHandler<SocketAsyncEventArgs>(SocketCompleted);
    byte[] response = new byte[512];
    args.SetBuffer(response, 0, response.Length);
    socket.ReceiveAsync(args);
   }
   else if (e.LastOperation == SocketAsyncOperation.Receive)
   {
    string receiveString = System.Text.Encoding.UTF8.GetString(e.Buffer, 0, e.Buffer.Length);
    Dispatcher.BeginInvoke(() => tbReceiveString.Text = receiveString);
   }
  }
 }
}

네트워크 - HTTP / WCF 서비스

2010-02-08T22:23:57+09:00

WCF (Windows Communication Foundation)

WCF는 SOA (Service Oriented Architecture)를 구축할 수 있는 닷넷 프레임워크의 중요한 요소입니다.

서버와 클라이언트 간의 통신을 매우 쉽게 할 수 있습니다.

서버에서는 WCF를 이용해 서비스를 제공하고, 클라이언트에서는 프록시(Proxy, 대리인)코드를 이용해 서버에서 제공하는 서비스를 이용하는 아키텍쳐를 가지고 있습니다.

* 프록시코드

WCF는 서버와 클라이언트간의 통신을 위해 SOAP(Simple Object Access Protocol, XML기반)을 이용합니다. 그러면 프로그래머는 서버의 서비스를 이용하기 위해 XML을 파싱하는 귀찮은 작업을 해야 합니다.

이러한 작업을 피하기 위해 비주얼 스튜디오에서는 프로그래머 대신 XML을 파싱하는 코드(클래스)를 자동으로 생성하는 기능을 가지고 있습니다.

어떤 객체의 메서드를 호출 한다고 했을 때, 프록시가 그 객체인 것처럼 그 호출을 받으므로, 필요한 전처리를 실행할 수도 있고, 실제 메서드를 호출하거나 호출하지 않고도 결과를 반환할 수도 있습니다.

WCF 서비스 구축하기

프로젝트의 Web부분에서 추가-새 항목 - 웹서비스를 클릭하여 선택 한 후,

이름에 Test.asmx를 입력합니다.

Test.asmx

<%@ WebService Language="C#" CodeBehind="Test.asmx.cs" Class="WCFTest.Web.Test" %>

Test.asmx.cs

namespace WCFTest.Web
{
 [WebService(Namespace = "http://tempuri.org/")]
 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [System.ComponentModel.ToolboxItem(false)]
 public class Test : System.Web.Services.WebService
 {
  [WebMethod]
  public string HelloWorld()
  {
   return "Hello World";
  }
  [WebMethod]
  public int Add(int num1, int num2)
  {
   return num1 + num2;
  }
 }
}

프록시 코드 생성하기

실버라이트 프로젝트에서 마우스 오른클릭해서 서비스 참조 추가 클릭합니다.

http://localhost:포트/Test.asmx 입력 / 혹은
검색을 클릭하면 현재 등록된 웹서비스의 주소를 자동으로 입력합니다.

그리고 확인 버튼을 클릭하면 프록시 코드 생성을 시작합니다.

완료되면 ServiceReference1이 추가됩니다.

실버라이트에서 웹 서비스 이용하기

MainPage.xaml

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
 <TextBox x:Name="tbNum1" FontSize="20"/>
 <TextBlock Text=" + " FontSize="20"/>
 <TextBox x:Name="tbNum2" FontSize="20"/>
 <TextBlock Text=" = " FontSize="20"/>
 <TextBlock x:Name="tbResult" FontSize="20"/>
 <Button x:Name="btCalculate" Content="계산하기" Margin="20, 0, 0, 0" Height="23"/>
</StackPanel>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using WCFTest.ServiceReference1;
namespace WCFTest
{
 public partial class MainPage : UserControl
 {
  public MainPage()
  {
   InitializeComponent();
   // Client 이벤트 핸들러 설치
   btCalculate.Click += 
    new RoutedEventHandler(Calculate);
  }
  void Calculate(object sender, RoutedEventArgs e)
  {
   // 계산할 수를 가져옴
   int num1 = Convert.ToInt32(tbNum1.Text);
   int num2 = Convert.ToInt32(tbNum2.Text);
   // 웹서비스 호출을 위한 Client 생성
   // 프록시 코드에서 자동 생성된 클래스
   TestSoapClient client = new TestSoapClient();
   // ASync로 작동하기 때문에 AddCompleted 이벤트 핸들러 설치
   client.AddCompleted += new EventHandler<AddCompletedEventArgs>(AddCompleted);
   // Add 서비스 호출
   client.AddAsync(num1, num2);
  }
  void AddCompleted(object sender, AddCompletedEventArgs e)
  {
   // Add 결과 받음
   int result = e.Result;
   // 화면에 반영
   tbResult.Text = result.ToString();
  }
 }
}

웹서비스에서의 보안정책

WebClient와 동일하게 보안 정책 파일이 필요

네트워크 - HTTP / WebClient

2010-02-08T21:17:15+09:00

WebClient

WebClient 는 HTTP를 이용해서 외부 리소스나 문자열을 다운로드/업로드 할 때 사용하는 클래스입니다.

HttpWebRequest / HttpWebResponse에 비해 단순한 기능만 제공하므로, 쉽습니다.

Async : asynchronous communication, 비동기통신

WebClient에서 제공되는 메서드

DownloadStringAsync / Get / 문자열 타입 / 문자열을 다운로드

UploadStringAsync / Post / 문자열 타입 / 문자열을 업로드

OpenReadAsync / Get / 리소스 타입 / 리소스를 다운로드

OpenWriteAsync / Post / 리소스 타입 / 리소스를 업로드

CancelAsync / 업로드나 다운로드를 취소합니다.

* 문자열 타입은 일반 Text나 HTML, XML등을 의미하고,

리소스 타입은 이미지나 동영상을 등을 의미합니다.

WebCliend에서 제공되는 이벤트

DownloadStringCompleted / 문자열 다운로드가 완료 혹은 실패한 경우
DownloadProgressChanged / 문자열 다운로드 양이 변화된 경우
UploadStringCompleted / 문자열 업로드가 완료 혹은 실패한 경우
UploadProgressChanged / 문자열 업로드 양이 변화된 경우

OpenReadCompleted / 리소스를 다운받기 위한 스트림이 열린 경우

OpenWriteCompleted / 리소스를 업로드 하기 위한 스트림이 열린 경우

WriteStreamClosed / 리소스를 업로드 하기 위한 스트림이 닫힌 경우

WebClient 이용해서 문자열 다운로드 하기

MainPage.xaml

<Grid x:Name="LayoutRoot" >
 <Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
 </Grid.ColumnDefinitions>
 <TextBlock Text="다운로드 결과"/>
 <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1">
  <TextBlock x:Name="tbResult" Width="400" Height="300" />
 </Border>
 <Button x:Name="btRequest" Width="Auto" Height="Auto" Content="다운로드" Grid.Row="2" />
</Grid>

MainPage.xaml.cs

public partial class MainPage : UserControl 
{
 public MainPage()
 {
  InitializeComponent();
  btRequest.Click += new RoutedEventHandler(btRequest_Click);
 }
 void btRequest_Click(object sender, RoutedEventArgs e)
 {
  WebClient client = new WebClient();
  client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
  client.DownloadStringAsync(
   new Uri("http://antasis9.woweb.net/silverlight/hello.txt", UriKind.Absolute)
  );
 }
 void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
 {
  tbResult.Text = e.Result.ToString();
 }
}

WebClient 이용해서 리소스 다운로드 하기

MainPage.xaml

<Grid x:Name="LayoutRoot">
 <Grid.RowDefinitions>
  <RowDefinition Height="100"/>
  <RowDefinition Height="30"/>
 </Grid.RowDefinitions>
 <StackPanel Grid.Row="0" 
    VerticalAlignment="Center" HorizontalAlignment="Center" 
    Orientation="Horizontal">
  <TextBlock Text="다운로드양: " FontSize="20" FontWeight="Bold"/>
  <TextBlock x:Name="tbDownloadPercent" Text="0" FontSize="20" FontWeight="Bold"/>
  <TextBlock Text="%" FontSize="20" FontWeight="Bold"/>
 </StackPanel>
 <Button x:Name="btRequest"
    Width="100" Height="30" Content="다운로드" Grid.Row="1"/>
</Grid>

MainPage.xaml.cs

public partial class MainPage : UserControl
{
 public MainPage()
 {
  InitializeComponent();
  btRequest.Click += new RoutedEventHandler(btRequest_Click);
 }
 void btRequest_Click(object sender, RoutedEventArgs e)
 {
  WebClient client = new WebClient();
  // 다운로드 양이 변경되면 호출되는 이벤트의 핸들러
  client.DownloadProgressChanged +=
   new DownloadProgressChangedEventHandler(DownloadProgressChanged);
  // 다운로드 준비가 되면 호출되는 이벤트의 핸들러
  client.OpenReadCompleted += 
   new OpenReadCompletedEventHandler(OpenReadCompleted);
  // 다운로드 시작
  client.OpenReadAsync
   (new Uri("http://antasis9.woweb.net/silverlight/SilverlightApplication3.xap", 
    UriKind.Absolute));
 }
 void DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)
 {
  // 다운로드 양이 변경되면 화면에 출력
  tbDownloadPercent.Text = e.ProgressPercentage.ToString();
 }
 void OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
 {
  byte[] buffer = new byte[1024];
  // 격리된 저장 공간에 파일 생성
  IsolatedStorageFile store = 
   IsolatedStorageFile.GetUserStoreForApplication();
  StreamWriter sw = 
   new StreamWriter(store.OpenFile("test.zip", FileMode.Create));
  // 네트워크에서 1024 바이트씩 읽어옴
  while (e.Result.Read(buffer, 0, 1024) != 0)
  {
   // 파일에 기록
   sw.Write(buffer);
  }  
  sw.Close();
 }
}

* Silverlight는 다른 하위 도메인, 다른 프로토콜, 다른 호스트, 다른 포트에 대해 보안 에러를 발생시킵니다.

오직 같은 도메인, 같은 프로토콜, 같은 포트에 대해서만 접근이 가능합니다.

이것을 해결하기 위해서는 외부 서버에서 미리 허가를 받아야 합니다.

접속하고자 하는 서버의 관리자는 실버라이트에서 쓰이는 특정 보안 정책 파일을 해당 도메인에 넣어 줍니다.

그러면 실버라이트 애플리케이션은 미리 약속된 도메인임을 알아채고 보안 문제에 걸리지 않고 서비스를 계속해서 수핼 할 수 있게 됩니다.

1) 실버라이트 도메인 정책 파일 (clientaccesspolicy.xml)

<?xml version="1.0" encoding="utf-8" ?>
<access-policy>
 <cross-domain-access>
  <policy>
   <allow-from http-request-headers="*">
    <domain uri="*" />
   <allow-from>
   <grant-to>
    <resource path="/" include-subpaths="true" />
   </grant-to>
  </policy>
 </cross-domain-access>
</access-policy>

2) 플래시 도메인 정책 파일

<?xml version="1.0" ?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml.dtds/cross-domain-policy.dtd">
<cross-domain-policy>
 <allow-access-from domain="*" headers="*" secure="true" />
</cross-domain-policy>

Animation - 4*) ObjectAnimationUsingKeyFrames

2010-02-03T22:36:10+09:00

<Canvas x:Name="LayoutRoot">
 <Canvas.Resources>
  <Storyboard x:Name="MyStoryboard">
   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="Collapsed" />
    <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="Visible" />
    <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="Collapsed" />
   </ObjectAnimationUsingKeyFrames>
  </Storyboard>
 </Canvas.Resources>
 <Rectangle x:Name="rect" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
  <Rectangle.Fill>
   <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
 </Rectangle>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_13_objectanimation/

Animation - 4-d) Discrete{Type}KeyFrame

2010-02-03T21:23:57+09:00

<Canvas x:Name="LayoutRoot">
 <Canvas.Resources>
  <Storyboard x:Name="MyStoryboard">
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="00:00:01" Value="200" />
    <DiscreteDoubleKeyFrame KeyTime="00:00:02" Value="300" />
    <DiscreteDoubleKeyFrame KeyTime="00:00:03" Value="400" />
   </DoubleAnimationUsingKeyFrames>
  </Storyboard>
 </Canvas.Resources>
 <Rectangle x:Name="rect" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
  <Rectangle.Fill>
   <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
 </Rectangle>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_12_usingkeyframe04/

Animation - 4-c) Easing{Type}KeyFrame

2010-02-03T21:23:16+09:00

<Canvas x:Name="LayoutRoot">
 <Canvas.Resources>
  <Storyboard x:Name="MyStoryboard">
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Width">
    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="200">
     <EasingDoubleKeyFrame.EasingFunction>
      <SineEase />
     </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    <EasingDoubleKeyFrame KeyTime="00:00:05" Value="300">
     <EasingDoubleKeyFrame.EasingFunction>
      <ElasticEase />
     </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
   </DoubleAnimationUsingKeyFrames>
  </Storyboard>
 </Canvas.Resources>
 <Rectangle x:Name="rect" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
  <Rectangle.Fill>
   <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
 </Rectangle>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_12_usingkeyframe03/

Animation - 4-b) Spline{Type}KeyFrame

2010-02-03T21:22:20+09:00

<Canvas x:Name="LayoutRoot">
 <Canvas.Resources>
  <Storyboard x:Name="MyStoryboard">
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Width">
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="200" KeySpline="1.0,0.0,1.0,1.0" />
    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="300" KeySpline="0.0,1.0,1.0,1.0" />
   </DoubleAnimationUsingKeyFrames>
  </Storyboard>
 </Canvas.Resources>
 <Rectangle x:Name="rect" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
  <Rectangle.Fill>
   <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
 </Rectangle>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_12_usingkeyframe02/

Animation - 4-a) Linear{Type}KeyFrame

2010-02-03T21:21:44+09:00

<Canvas x:Name="LayoutRoot">
 <Canvas.Resources>
  <Storyboard x:Name="MyStoryboard">
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Width">
    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="200" />
    <LinearDoubleKeyFrame KeyTime="00:00:05" Value="300" />
   </DoubleAnimationUsingKeyFrames>
  </Storyboard>
 </Canvas.Resources>
 <Rectangle x:Name="rect" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
  <Rectangle.Fill>
   <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
 </Rectangle>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_12_usingkeyframe01/

Animation - 4) Key Frame Animation

2010-02-03T17:59:54+09:00

첫 프레임(From)과 마지막 프레임(To) 뿐만 아니라 중간에도 프레임을 상세하게 제어하기 위해 사용.

종류 : {변화시키는 Type}AnimationUsingKeyFrames

DoubleAnimationUsingKeyFrames

PointAnimationUsingKeyFrames

ColorAnimationUsingKeyFrames

ObjectAnimationUsingKeyFrames

보간법 : 각 KeyFrames에 저장될수 있는 키 프레임은 다음과 같다.

DoubleAnimationUsingKeyFrames

- DiscreteDoubleKeyFrame

- LinearDoubleKeyFrame

- SplineDoubleKeyFrame

- EasingDoubleKeyFrame

PointAnimationUsingKeyFrames

- DiscretePointKeyFrame

- LinearPointKeyFrame

- SplinePointKeyFrame

- EasingPointKeyFrame

ColorAnimationUsingKeyFrames

- DiscreteColorKeyFrame

- LinearColorKeyFrame

- SplineColorKeyFrame

- EasingColorKeyFrame

ObjectAnimationUsingKeyFrames

- DiscreteObjectKeyFrame

위에서 각 Frame은 다음의 4그룹으로 나누어진다.

a) 선형 보간법 Linear interplation

b) 스플라인 보간법 Spline Interplation

c) 불연속 보간법 Discrete Interplation

d) EasingFunction을 이용한 보간법

Animation - EasingFunction

2010-02-03T17:54:47+09:00

EasingFunction

애니메이션에 다양한 효과를 주기 위해 사용하는 프로퍼티. 아래 11가지 종류가 있다.

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

PowerEase

QuadraticEase

QuarticEase

QuinticEase

ShinEase

EasingMode

EaseOut : 기본 그래프, default value

Easeln : EaseOut을 반대로 바꾼 그래프

EaselnOut : 위 두가지를 혼합한 그래프

EasingMode = EaseOut

<UserControl.Resources>
 <Storyboard x:Name="MyStoryboard">
  <DoubleAnimation BeginTime="00:00:00" Duration="00:00:05" To="270" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
   <DoubleAnimation.EasingFunction>
    <BounceEase Bounces="6" />
   </DoubleAnimation.EasingFunction>
  </DoubleAnimation>
 </Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot">
 <Ellipse x:Name="ellipse" Height="100" VerticalAlignment="Top" Width="100" Canvas.Left="150" Canvas.Top="30" RenderTransformOrigin="0.5,0.5">
  <Ellipse.RenderTransform>
   <TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform />
    <TranslateTransform/>
   </TransformGroup>
  </Ellipse.RenderTransform>
  <Ellipse.Fill>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF0100FF" Offset="0"/>
    <GradientStop Color="#FF908FFF" Offset="1"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_11_easingfunction01/

EasingMode = EaseIn

<UserControl.Resources>
 <Storyboard x:Name="MyStoryboard">
  <DoubleAnimation BeginTime="00:00:00" Duration="00:00:05" To="270" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
   <DoubleAnimation.EasingFunction>
    <BounceEase Bounces="6" EasingMode="EaseIn" />
   </DoubleAnimation.EasingFunction>
  </DoubleAnimation>
 </Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot">
 <Ellipse x:Name="ellipse" Height="100" VerticalAlignment="Top" Width="100" Canvas.Left="150" Canvas.Top="30" RenderTransformOrigin="0.5,0.5">
  <Ellipse.RenderTransform>
   <TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform />
    <TranslateTransform/>
   </TransformGroup>
  </Ellipse.RenderTransform>
  <Ellipse.Fill>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF0100FF" Offset="0"/>
    <GradientStop Color="#FF908FFF" Offset="1"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_11_easingfunction02/

Animation - 3) ColorAnimation

2010-02-03T17:53:14+09:00

Color type의 프로퍼티를 변경하기 위한 애니메이션

<Canvas x:Name="LayoutRoot">
 <Canvas.Resources>
  <Storyboard x:Name="pathAnimation">
   <ColorAnimation Duration="00:00:01" Storyboard.TargetName="myPath" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="Pink" />
  </Storyboard>
 </Canvas.Resources>
 <Path Fill="Beige" Margin="0,0,200,200" x:Name="myPath">
  <Path.Data>
   <EllipseGeometry x:Name="myEllipseGeometry" Center="200,110" RadiusX="50" RadiusY="50" />
  </Path.Data>
 </Path>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_10_coloranimation01/

Animation - 2) PointAnimation

2010-02-03T17:52:02+09:00

Point type의 프로퍼티를 변경하기 위한 애니메이션

<Canvas x:Name="LayoutRoot">
 <Canvas.Resources>
  <Storyboard x:Name="pathAnimation">
   <PointAnimation Storyboard.TargetName="myEllipseGeometry" Storyboard.TargetProperty="Center" Duration="00:00:01" To="200,290" />
  </Storyboard>
 </Canvas.Resources>
 <Path Fill="Beige" Margin="0,0,200,200" x:Name="myPath">
  <Path.Data>
   <EllipseGeometry x:Name="myEllipseGeometry" Center="200,110" RadiusX="50" RadiusY="50" />
  </Path.Data>
 </Path>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_09_pointanimation01/