드디어 기다리던 비트 수료식을 마치게 되었습니다!(사실..시연회를 하고 수료식을 한지도 2주나 되었지만..);

밑은 우리조가 만든 MC Opner 시연 동영상입니다;
MC Opner에 관한 자세한 설명은 다음 포스팅에서 하겠습니다.


- 동영상 출처 : ehclub.net -

현재 저의 근황은 남은 한학기(4학년 2학기)를 다니구 있구요;
듣는 과목으로 종합설계 과목이있는데, 그 과목에서 우리조가 정한 프로젝트가
멀티터치를 활용한 테이블탑 컴퓨터를 만드는 것이기 때문에 이제부터 그것에 관한 포스팅을
많이 할 예정입니다;

Posted by 맨날맑음
,

정말 오랜만의 포스팅입니다. (이제부터 예의바른 블로거가 되기위해 존댓말로 포스팅하기로 했습니다)
핑계없는 무덤은 없다지만 핑계를 대자면,, 지금 진행하는 프로젝트에 쫒겨 시간이 없었다고,,라고 하고싶지만
게을러서 입니다. 게으른 블로거되서는 안되는데 큰일입니다;;

아무튼 이번 포스트에서는 FindName(); 메서드에 대해 알아보려 합니다.
여러분은 Silverlight App를 개발하면서 FindName()을 사용하십니까?
사실 일찌감치 FindName() 메서드의 존재와 역할을 알았지만 필요없는 메소드라 생각하여 잊어버렸습니다.
사용하지 않았죠...;

FindName();
System.Windows.Documents 네임스페이스의 Inline 클래스의 멤버매서드
역  할 : 개체의 x:Name 또는 Name 특성 값을 참조하여 Silverlight 개체를 가져온다.
인자값 : string
리턴형 : object


Page에 Rectangle이 있고 x:Name이 MyRect라고 할때  Page.xaml.cs에서는 MyRect라는 x:Name만으로도
Rectangle객체의 컨트롤이 가능합니다.
 예를들어 이런것이죠  >>   this.MyRect.Width = 100;
x:Name만 알아도 충분히 컨트롤이 가능한데 굳이 아래와 같이 복잡하게 객체를 알아올 필요성을 못느낀것이죠.
object o = this.FindName("MyRect");
Rectangle myrect = o as Rectangle;
if (myrect != null)
{
     // to do..
 }


그럼 FindName을 어떤때 써야될까요? 저는 이런 경우에 활용해 보았습니다.
를들어 보자면 로그인하는 시나리오가 적당하겠네요.

Page에서 로그인 버튼을 누르면 로그인 컨트롤(UserControl로 만들어진)이 새로 뜨고 사용자는 ID와 PW를 입력하여 로그인 하게 됩니다. 로그인 된다면 Page의 TextBlock에 사용자가 입력한 ID가 나타나게 한다고 합시다.

Page는 로그인 컨트롤을 알고 있지만(로그인 컨트롤의 Public한 속성에 접근할수 있지만) 로그인 컨트롤은
Page를 알지 못합니다. 물론 로그인컨트롤의 비하인드코드에서 this.parent를 이용하여 부모는 알수있을 겁니다.
하지만 (Page)this.parent;처럼 Page클래스로 캐스팅하면 컴파일 타임에 오류를 일으킵니다. 캐스팅 할수가 없죠.

저는 이걸 해결하기 위해 로그인 컨트롤의 생성자를 오버로딩하여 Page의 TextBlock 컨트롤을 인자로 넘겨주는 방법으로 코딩해왔습니다.

하지만 FindName을 이용하여 해결 할 수도 있습니다. this.parent를 찾아서 Panel로 캐스팅후
FindName() 메서드를 호출하여 TextBlock 개체를 찾으면 되는것이죠!
굳이 생성자에 넘기고 자시고 할 필요가 없습니다.

자.. 방법을 알았으니 간단한 스텁 프로그램을 작성해 보도록 하겠습니다.(앞에서 말한 로그인 예제로 하죠)

1. 우선 실버라이트 응용프로그램을 생성하구요 (프로젝트명을 FindNameTesting으로 했습니다.)
2. Page.xaml블랜드에서 열어 디자인 합니다. 간단하게 TextBlock(x:Name = "txtUserID")
   버튼(x:Name = "btnLog")을 하나 넣었습니다.
   버튼은 Grid로 만들었구요.. Grid안에 Rectangle 객체와 TextBlock(x:Name = "txtLogMSG")를 넣었습니다.


2. Silverlight 사용자정의 컨트롤(UserControl)을 추가 합니다.(LogInControl이라 명명 했습니다.)
    LogInControl을 블랜드에서 열어 디자인해 줍니다. 저는 아래와 같이 했구요;

  그냥 간단하게 ID를 입력받는 TextBox(x:Name = "txtInputID") 와  PW를 입력받는 PasswordBox(x:Name = "txtInputPW")를 추가하고 버튼(x:Name = "btnLogIn")도 하나 놓습니다.

3. 이제 LogInControl의 비하인드 코드(LogInControl.xaml.cs)로 가서 이벤트 처리 메서드를 작성합니다.
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace FindNameTesting
{
    public partial class LogInControl : UserControl
    {
        public LogInControl()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(LogInControl_Loaded);
        }

        void LogInControl_Loaded(object sender, RoutedEventArgs e)
        {
            btnLogIn.MouseLeftButtonDown += new MouseButtonEventHandler(btnLogIn_MouseLeftButtonDown);
        }

        void btnLogIn_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (!CheckedIdAndPw())            
            {
                Storyboard1.Begin();
                return;
            }
            object o = ((Panel)this.Parent).FindName("txtUserID");
            TextBlock txtuserid = o as TextBlock;
            if (txtuserid != null)
            {
                txtuserid.Text = string.Format("{0}님 환영합니다^^",txtInputID.Text);
            }

            object o2 = ((Panel)this.Parent).FindName("txtLogMSG");
            TextBlock txtlogmsg = o2 as TextBlock;
            if (txtlogmsg != null)
            {
                txtlogmsg.Text = "LogOut";
            }
            ((Panel)this.Parent).Children.Remove(this);            
        }

        private bool CheckedIdAndPw()
        {
            if (txtInputID.Text != "맨날맑음" || txtInputPW.Password != "silverlight")
            {
                return false;
            }
            return true;
        }
    }
}

    로그인 버튼을 누르면 LoginControl의 부모인 Page에서 txtUserID개체를 찾아 입력받은 ID를 대입했구요
    같은방법으로 Page에 있는 로그버튼의 TextBlock을 찾아 LogIn이라는 글자도 LogOut으로 변경하였습니다.
    그후에 생성된 LoginControl을 Page에서 제거 하였습니다.

4. 마지막으로 Page.xaml.cs를 작성합니다.
using System.Windows.Controls;
using System.Windows.Input;

namespace FindNameTesting
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.btnLog.MouseLeftButtonDown += new MouseButtonEventHandler(btnLog_MouseLeftButtonDown);
        }

        void btnLog_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (txtLogMSG.Text == "LogIn")
            {
                this.LayoutRoot.Children.Add(new LogInControl());
            }
            else
            {
                txtLogMSG.Text = "LogIn";
                txtUserID.Text = "안녕하세요? 로그인하세요";
            }
        }
    }
}

매우 간단합니다. 버튼을 누르게 되면 로그인컨트롤(LogINControl)을 생성합니다자..이제 로그인하게되면
로그인한 화면이 Page의 TextBox를 갱신시킬까요?... 네~잘됩니다
아래는 지금 만든 예제를 조금 수정한 것입니다~(ID : 맨날맑음, PW : silverlight) 테스트 해보시면 잘되는걸 볼 수있습니다.



이외에도 WPF에서는 FindName() 메서드로 개체를 불러와야만 개체의 컨트롤이 가능합니다~
이 방법을 사용하면 부모든 부모의 부모든 상관없이 type만 알고있다면 모든 컨트롤을 제어할수 있겠고,
public한 속성들도 제어할 수 있습니다!
다른 쓰임새가 많겠지만 아직 실력이 미천하여 이럴때 사용하고 있습니다;
다른곳에 활용하신분들은 피드백이나 댓글 부탁드립니다.
Posted by 맨날맑음
,
티스토리 블로그에 실버라이트 올리기!

실버라이트를 빌드하면  Debug 폴더나 ClientBin 폴더내에 xap 파일이 생성된다;
정확히는 모르겠으나 여기저기 웹서핑과 MSDN 참조 결과 xap 파일만 있으면 실버라이트 결과물을
HTML에 <Object> 태그로 집어 넣을 수 있겠다 싶어서 티스토리에 올릴려고 무진장 많이 노력했지만
계속 흰화면만 뜨는것이었다;
<object  data="data:application/x-silverlight-2," type="application/x-silverlight-2">
    <param name="source" value="xap 파일의 경로"/>
  
    <!-- Display installation image. -->
    <a href="
http://go.microsoft.com/fwlink/?LinkID=124807"
        style="text-decoration: none;">
        <img src="
http://go.microsoft.com/fwlink/?LinkId=108181"
            alt="Get Microsoft Silverlight"
            style="border-style: none"/>
    </a>
</object>  

주석아래 <a href>와 <img> 태그는 실버라이트 런타임이 설치되지 않았을때 나올 다운로드 이미지이다!
HTML의 <BODY> 태그내에 저 구문을 넣어주면 된다고 MSDN에는 나와있는데;;
이게 로컬에 xap 파일이 있는경우에는 잘되지만 다른곳에 있으면 잘안되서 고민한 끝에;

약간 편법으로 저 HTML 파일과 xap 파일을 웹서버에 함게 업로드하고
HTML 문법인 IFRAME을 사용하여 저 HTML을 띄우는 방법으로 했더니만 아주 잘됬다!!
<IFRAME  src="HTML의 경로">
</IFRAME>

성공(?)기념 !! Silverlight DeepZoom Sample!!(사실 LiveDK 블로그에 있는 딥줌이 부러워서'')
 마우스로 클릭하거나 휠을 돌려보세요


PS. 먼가 다른 방법을 아시는분은 댓글이나 피드백을... 부탁드려요'' 굽신굽신

Posted by 맨날맑음
,
실버라이트로 준비하고 있는 프로젝트가 막바지 인데 아직도 갈길이 멀다;;
옆자리 태욱이가 -_-; 물어본게 있었지만 실버라이트에선 안된다고 우긴게 부끄럽게도;
담배피고왔더니 "병재님" (특별히 님을 붙임!)의 도움으로 어떻게 하는지 알아버렸다


하고 싶었던 기능은 특정한 영역안에서만 표시되는 일종의 플래쉬의 '마스크' 같은 효과였는데
패널들의 Clip 기능을 사용하면 되는것이었다;;

우리조의 히어로 동규씨의 도움으로 블로그에 실버라이트를 넣는 방법을 배웠기때문에''
(이것에대해선 다음에 포스팅 할께요)
일단 구현하려는 예제부터 보도록 하겠다;

이렇게 하려고 하는데;  문제는 저 안쪽에 움직이고 있는 사각형이 영역 밖으로 삐져나오는;
이런결과 밖에 할수 없었다;; 적어도 Clip을 알기전엔..


이제 삐져나오지 않는법을 설명하자면
보이고싶은 영역(Grid)에 Clip을 설정하면 된다;
<Grid Margin="0,0,0,0" Width="100" Height="100" x:Name="MaskGrid">
            <Grid.Clip>
                <RectangleGeometry Rect="0,0,100,100"/>
            </Grid.Clip>
</Grid>

이렇게 <Grid.Clip>
                <
RectangleGeometry Rect
="0,0,100,100"/>
            </
Grid.Clip
>
을 지정해주면 100 * 100 사이즈의 Rect 영역 안에서만 그리드의 자식 객체들이 보이게 된다!!!
Rect 뿐 아니라 Ellipse, Line, Path 등도 가능하니 응용하면 멋진 효과를 낼수 있을 듯 하다!
Posted by 맨날맑음
,

실버라이트에는 각 컨트롤에 Style을 적용시켜 사용할수 있다''

스타일은 HTML의 CSS의 개념과 흡사한 개념이며;
실버라이트에서는 스타일과 더불어 템플릿이라는 개념을 제공하여 사용자가 컨트롤을 쉽게
만들수 있게 하였다;

스타일은 쉽게 말해 컨트롤들의 속성을 미리 정의해 놓고 나중에 불러서 쓰는것이고
템플릿은 컨트롤내의 모양, 형태, 이벤트발생시 처리로직이라던지 그런것을 바꿔줄수 있는것이다;

이번 포스트의 목적인 스타일을 알아보자면
스타일의 사용하는 이유는 재사용성이라는 측면이 가장 큰것 같고, 속성의 변경시 쉽게 정의 부분만
변경하게되면 그 스타일을 적용받는 모든 컨트롤의 속성이 변경되기 때문에 간단하게 유지보수 할수 있게 된다;
그리고 마지막 장점이라면 코드가 간결해진다 이정도로 생각해 볼수 있지 않을까;;


그럼 스타일을 어떻게 정의하고 어떻게 적용시키는지 알아보겠다;

>> 실버라이트 응용프로그램 프로젝트를 생성하여 page.xaml에 아래와 같이
    버튼 9개를 넣어 보았다;



<Button  Content="버튼1" Grid.Row="0" Grid.Column="0"/>
<Button  Content="버튼2" Grid.Row="0" Grid.Column="1"/>
<Button  Content="버튼3" Grid.Row="0" Grid.Column="3"/>
<Button  Content="버튼4" Grid.Row="1" Grid.Column="0"/>
<Button  Content="버튼5" Grid.Row="1" Grid.Column="1"/>
<ButtoContent="버튼6" Grid.Row="1" Grid.Column="2"/>
<Button  Content="버튼7" Grid.Row="2" Grid.Column="0"/>
<Button  Content="버튼8" Grid.Row="2" Grid.Column="1"/>
<Button  Content="버튼9" Grid.Row="2" Grid.Column="2"/>


>> 스타일을 정의 하기 위해 app.xaml 코드로 가서

     <Application.Resources> 태그속에 스타일을 적용한다!
 <Style TargetType="Button" x:Key="MyButtonStyle">
       <Setter Property="FontFamily" Value="Gungsuh"/>
       <Setter Property="FontSize" Value="20"/>
       <Setter Property="Foreground" Value="#FFFF0000"/>           
</Style>
       TargetType은 변경할 컨트롤의 타입명 x:Key는 나중에 불러다 쓸 스타일의 이름이다;
         Setter 어트리뷰트 값으로 Property
에는 변경하고 싶은 속성을  Value에는  값을 입력하면 된다;
         간단하게 나는 폰트를 궁서체로 글씨 크기는 20 폰트 색상을 빨강으로 입력해 보았다;  쉽다;


>>이제 page.xaml에 있는 버튼들에 속성을 줘보자;

<
Button  Content="버튼1" Grid.Row="0" Grid.Column="0"
Style="{StaticResource MyButtonStyle}"/>


Style
="{StaticResource MyButtonStyle} 간단하게 이 구문만 추가하면 버튼에 스타일이 입혀지게 된다!
여기서 StaticResource 옆에 자신이 정의한 스타일의 Key를 넣으면 된다;
버튼이 궁서체 20pt 빨간색으로 바뀐것을 볼수있다



버튼 색상을 파란색으로 바꾸어야할때..

스타일을 쓰지 않은 코드에서는 9개에 속성값을 일일이 변경해야하는 번거로움이 있겠지만
스타일을 사용한 코드는 app.xaml에있는 스타일의 정의만 살짝 변경해주면 쉽게 컨트롤의
속성을 변경 할 수있다



Posted by 맨날맑음
,