블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

'프로그래밍'에 해당되는 글 156건

  1. 2008.11.03 [Silverlight] IsolatedStorage 클래스
  2. 2008.10.17 [Tip] TabContainer 스타일 지정 3
  3. 2008.10.07 [AJAX Control] SliderExtender 써보기~!



 IsolatedSterage는 무엇??

 Silverlight 애플리케이션을 만들다 보니깐 데이터를 임시적으로 저장할 필요를 느끼게 되었는데요. 알아 보니깐
IsolatedStorage 란것이 있다는 것을 알았어요. 일종의 가상공간(저장공간)이라고 생각하면 될 것 같아요.
그럼 IsolatedStorage를 어떻게 사용해야 하는지 알아 보도록 할게요. 혹시 전에 ASP.NET으로 파일을 생성하고 써보고 그랬더라면 더 쉽지 이해 할수 있지 않을까 생각이 듯네요. 전에는 FileInfo 클래스를 이용해서 파일을 생성했잖아요~!이것도 비슷합니다. 역시 열번의 말보다는 한번의 코드를 보는 것이 이해하는데 빠르겠지요^^
간단하게 Silverlight 예제 코드를 만들어 봤어요.


Page.xaml

<UserControl x:Class="IsolatedStorage_Test.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <!-- 테스트를 위한 버튼 생성 -->

        <!파일생성 버튼 -->

        <Button Height="21" HorizontalAlignment="Left" Margin="24,23,0,0" VerticalAlignment="Top" Width="200" Content="Isolated Storage 생성" x:Name="btnsetfileinfo"/>
        <!—정보확인 버튼 -->

        <Button Height="21" HorizontalAlignment="Left" Margin="24,48,0,0" VerticalAlignment="Top" Width="200" Content="Isolated Storage 정보확인" x:Name="btngetfileinfo"/>

         <!—메세지 표시 텍스트블럭-->
   
   
<TextBlock Margin="24,0,176,8" Text="TextBlock" TextWrapping="Wrap" x:Name="txbText" VerticalAlignment="Bottom" Height="120"/>

        <!파일삭제 버튼 -->
   
   
<Button Height="21" Margin="24,73,176,0" VerticalAlignment="Top" Content="Isolated Storage 파일삭제" x:Name="btnfiledelete"/>

    </Grid>

</UserControl>


위 코드는 간한하게 버튼 3개와 텍스트블럭 1개로 이루어진 XAML 코드예요. 이 거는 간한하게 블랜드를 이용해서 만들수 있어요. 그리고 이벤트만 정의해 주면되겠지요.그럼  아래 .cs 코드를 보면서 설명하도록 할게요.


Page.xaml.cs

// Linq To XML 사용

using System.Xml.Linq;

// IsolatedStorage 사용

using System.IO.IsolatedStorage;

using System.IO;

namespace IsolatedStorage_Test

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

 

// Button Event

      // 파일쓰기 이벤트

btnsetfileinfo.Click += new RoutedEventHandler(btnsetfileinfo_Click)
// 파일읽기 이벤트

btngetfileinfo.Click += new RoutedEventHandler(btngetfileinfo_Click);
// 파일삭제 이벤트

btnfiledelete.Click += new RoutedEventHandler(btnfiledelete_Click);

}

 

/// <summary>

/// 파일 삭제

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

void btnfiledelete_Click(object sender, RoutedEventArgs e)

{

using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())

{

// 파일있는지 확인

if (isf.FileExists("Test.xml"))

{

txbText.Text = "파일 있었으나 지금 삭제";

isf.DeleteFile("Test.xml");

}

else

txbText.Text = "파일없음";

}

}

 

    /// <summary>

    /// 파일 읽기

    /// </summary>

    /// <param name="sender"></param>

    /// <param name="e"></param>

void btngetfileinfo_Click(object sender, RoutedEventArgs e)

{

using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())

{

// 파일 있는지 확인

if (isf.FileExists("Test.xml"))

{

XDocument xdocu = XDocument.Load(isf.OpenFile("MyPolder.xml", FileMode.Open));

var query = from el in xdocu.Descendants("Root")

select new

{

t = el.Element("Test").Value

};

 

string str = string.Empty;

 

foreach (var qy in query)

{

str = qy.t;

}

 

txbText.Text = str;

}

else

{

txbText.Text = "파일없음";

}

}

}

 

/// <summary>

/// 파일 쓰기 (Linq To Xml 쓰기)

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

void btnsetfileinfo_Click(object sender, RoutedEventArgs e)

{

using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())

{

using (IsolatedStorageFileStream isfstream = new IsolatedStorageFileStream("Test.xml", FileMode.Create, isf))

{

using (StreamWriter sw = new StreamWriter(isfstream))

{

XElement element = new XElement("Root", new XElement("Test", "test..."));

sw.Write(element);

}

}

}

}

}

}


위 3개의 버튼이벤트는 각각 파일 생성, 읽기, 삭제 로 이루어 져있어요. 저는 XML파일을 만들어서 저장해 봤어요. XML파일로 저장해서 많이쓰지 않을까 해서...^^;; 이참에 Linq To XML도 써보려고요. 아무튼 IsolateStorageFile 클래스를 이용해서 파일을 생성합니다. IsolateStorageFile 클래스의 CreateFile 메소드를 이용해서 파일을 생성할수 있어요.FileInfo 클래스를 이용해서 파일을 생성할때와 비슷하다는 생각이 드네요^^. 이렇게 파일을 생성하고 StreamWriter 클래스를 이용해서 파일의 내용을 작성합니다. 그리고 파일을 읽을 때는 StreamReader 클래스를 이용해서 읽을수 있습니다. 여기서 저는 XML형태로 저장해서 Linq To XML를 이용해서 내용을 읽어 봤어요. 파일 삭제는 IsolateStorageFile클래스의 DeleteFile 메소드를 이용해서 삭제가 가능해요.
IsolateStorageFile 맴버 확인은 MSDN를 확인해 보시면 잘나와 있어요.

Posted by happydong
, |



전에 제가 올린 글 중에 [AJAX Control] TabContainer Control 써보기~!라는 강좌가 있었는데요. 이번에는 그 TabContainer ControlStyle을 넣어 보도록 하겠습니다.

 

먼저 CSS Class를 지정해 주기에 몇 가지 규칙을 알아야 해요. 아래 그림과 표를 보시면 이해가 빠르실 것 같네요.

 

사용자 삽입 이미지


CSS Class Names

설명

ajax__tab_header

Tab 영역 전체 스타일 지정.

ajax__tab_body

Content 영역 스타일 지정.

ajax__tab_active

현재 선택된 Tab의 스타일 지정.

ajax__tab_tab

Tab의 텍스트 관련 스타일 지정.

ajax__tab_inner

Tab의 왼쪽 영역 스타일 지정.

ajax__tab_outer

Tab의 오른쪽 모서리 영역 스타일 지정.

ajax__tab_hover

마우스 Over시 스타일 지정.

 

자 그럼 이제 아래 style을 지정한 코드를 보도록 하겠습니다.

 

CSS Code

<style type="text/css">

.ajax__myTab .ajax__tab_header

        {

            font-family: verdana, tahoma, helvetica;

            font-size: 11px;

            border-bottom: solid 1px #999999;

        }

        .ajax__myTab .ajax__tab_outer

        {

            padding-right: 4px;

            height: 21px;

            background-color: #C0C0C0;

            margin-right: 2px;

            border-right: solid 1px #666666;

            border-top: solid 1px #aaaaaa;

        }

        .ajax__myTab .ajax__tab_inner

        {

            padding-left: 3px;

            background-color: #C0C0C0;

        }

        .ajax__myTab .ajax__tab_tab

        {

            height: 13px;

            padding: 4px;

            margin: 0;

        }

        .ajax__myTab .ajax__tab_hover .ajax__tab_outer

        {

            background-color: #cccccc;

        }

        .ajax__myTab .ajax__tab_hover .ajax__tab_inner

        {

            background-color: #cccccc;

        }

       

        .ajax__myTab .ajax__tab_hover .ajax__tab_tab

        {

        }

        .ajax__myTab .ajax__tab_active .ajax__tab_outer

        {

            background-color: #fff;

            border-left: solid 1px #999999;

        }

       

        .ajax__myTab .ajax__tab_active .ajax__tab_inner

        {

            background-color: #fff;

        }

        .ajax__myTab .ajax__tab_active .ajax__tab_tab

        {

        }

        .ajax__myTab .ajax__tab_body

        {

            font-family: verdana, tahoma, helvetica;

            font-size: 10pt;

            border: 1px solid #999999;

            border-top: 0;

            padding: 8px;

            background-color: #ffffff;

        }

    </style>


위에 정리한 표와 함께 보시면 코드 이해하시는데 무난할 거라 생각이 드네요!  이제 Class Name을 지정해 주어야 지요. 역시 말보다는 코드로 보시는게 빠르실 듯 하네요.

HTML Code

<AjaxControl:TabContainer ID="TabContainer1" runat="server" Width="500" Height="170"

            ActiveTabIndex="0" CssClass="ajax__myTab">

            <%-- 연애 뉴스 --%>

            <AjaxControl:TabPanel ID="TabPanel01" runat="server" HeaderText="연애인">

                <ContentTemplate>

                    <div id="content01">

                        '뉴하트' 조재현, 순수하고 정의로운 의사 조금 거칠면 안되나요

                        <br />

                        ... 내용 생략 ...

                </ContentTemplate>

            </AjaxControl:TabPanel>
</AjaxControl:TabContainer>


위 코드에서 보시면 TabContainerCssClass 속성에 "ajax__myTab"이라고 지정해 준것을 보실수 있을 거예요. 정말 사용하기 간단하지요. 아래 그림은 제가 간단하게 만들어본 예제 예요. 소스도 같이 올려 놓을 게요.
사용자 삽입 이미지


Posted by happydong
, |



SliderExtender

Slider Control를 이용한 사용자 편의성을 제공해주는 사이트 종종 봤을 거예요. 제가 가끔 보는 사이트인 조선닷컷은 편의성을 위해 글자의 크기를 조절할 수 있도록 해놨더라고요. (아래 그림 참고)

사용자 삽입 이미지
※ 위 사이트는 조선닷컴 사이트 입니다.

위 에서 빨간색으로 표시된 부분을 보시면 알수 있듯이 Slider Control를 이용해서 글자의 크기를 조절 할수 있게 만들져 있네요. 눈이 별로 좋지 않은 사람,혹은 어른신들을 고려해서 만든 기능이 아닐까 하는 생각이 드는군요^^
저는 ASP.NET AJAX Controls 중에서 SliderExtender Control를 이용해서 위와 같은 형식의 기능을 제공하는 예제를 만들어 볼 것이며, 여러가지 예제를 추가적으로 더 만들어 볼게요.

먼저, SliderExtender Control의 속성이 무엇이 있는지 알아야 겠지요.

속성

설명

Minimum

최소값 설정.

Maximum

최대값 설정

Decimals

소수점 자리 설정.

Steps

지정 숫자의 값 만큼 슬라이더 범위 이동.

Value

현재 슬라이더 지정 위치 값.(TextBox,Label의 Value(Text)속성에서 지정.)

EnableHandleAnimation

슬라이더 움직임 Animation 사용설정.

RailCssClass

슬라이더 레일 CSS Class 설정.

HandleCssClass

슬라이더 손잡이 CSS Class 설정.

HandleImageURL

슬라이더 손잡이 이미지로 표시 URL지정.

Length

수평/수직 슬라이더 너비를 지정.

BoundControlID

슬라이더의 값을 표시 할 TextBox 또는 Label 컨트롤 ID 지정.

RaiseChangeOnlyOnMouseUp

슬라이더에 Change이벤트가 있을 때, MouseUp

이벤트 발생인지, Mousedong Slider때 이벤트발생인지 여부 설정.

TooltipText

마우스가 슬라이더 위에 올라왔을 때 슬라이더의 위치 값을 표시.(img태그 속성 중 alt과 비슷함.)

[사용예] TooltipText=”지정값은:{0}” {0}안에 값이 표시됨.


간단하게 속성을 정리해 봤어요.
이제 조선닷컴과 같은 기능을 하는 예제를 만들어 볼게요. 먼저 아래 그림을 보도록 해요.

사용자 삽입 이미지

어떤가요? 조선닷컴의 기능과 비슷한 것 같은가요? 일단 비슷하다고 치고 어떻게 만들어 졌는지 한번 코드를 보도록 하겠습니다. 아래는 .aspx페이지의 코드 내용입니다.

.aspx페이지

 <body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <br />

    <%-- 데이터 표시를위한 TextBox --%>

    <asp:TextBox runat="server" ID="txtSlider_BoundControl" Visible="false"></asp:TextBox><br />

    <%-- Slider가 될 TextBox --%>

    <div id="divTop" style="width: 100%; height: 20px; background: #FF7E00;">

        <div style="float: right;">

            <asp:TextBox runat="server" ID="txtSlider" onchange="DivStyle();" />

        </div>

    </div>

    <div id="divContent01" style="width: 100%; font-size:10pt; height: 100%; background: #959695;

        padding-top: 0px;">

        -> 예비군 훈련 다녀왔습니다~

        <br />

        -> 두려움이 신속하게 몰려옵니다~ >_<

        <br />

        -> 안녕하세요 java 6개월 학원 수료후 신입으로 ...

        <br />

        -> SQL Server 2008 Business Co...

        <br />

        -> Wii 당첨.. 그러나

        <br />

        -> 저는 자바 개발자 입니다. 닷넷에 발을 들여 놓으...

        <br />

        -> AJAX 채팅을 만들어 봤습니다.

    </div>

    <%-- SliderControl --%>

    <cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtSlider"

        BoundControlID="txtSlider_BoundControl"

        Orientation="Horizontal"

        EnableHandleAnimation="true"

        RaiseChangeOnlyOnMouseUp="false"

        TooltipText="슬라이드값{0}"

        Minimum="9"

        Maximum="30"

        />

    </form>

</body>


위 코드에서 유심히 볼 코드는 SliderExtender 컨트롤과 2개의 TextBox 컨트롤 이라고 생각이 되는 군요. SliderExtender 속성 중에서 BoundControlID 속성을 제가 txtSlider_BoundControl(TextBox컨트롤ID)으로 지정해두고 정작 TextBox컨트롤 Visible속성을 false로 지정해서 이상하다 생각 하실수도 있을 텐데요, 그 이유는 코드를 집적 작성하시면서 나중에 true로 바꾸셔서 슬라이드 값이 변경되는 것을 확인하시라고 지정한 거예요! 물론, 값을 볼 필요가 없다고 하시면BoundControlID 속성 지정하지 않아도 되요. 그리고 제가 지정한 속성은 위에 정리한 표를 비교해서 보시면 이해하기가 더 편하실거예요.

그럼 이제 두번째 TextBox컨트롤에 onchange이벤트를 호출하는 스크립트함수를 만들어 볼게요. 두번째 TextBox컨틀롤이 UI에서 슬라이드컨트롤로 변경되니깐 이쪽에 onchange이벤트를 줘야 겠지요.참고로 처음 슬라이드핸들의 위치를 지정하시고 싶으시면 TextBox컨트롤의 Text속성에 지정해 주면되요.
아래 스크립트 함수는 맨아래에 작성해 주세요.(즉, </html> 다음에요)

 Script 함수

 <script type="text/javascript">

   

    function DivStyle()

    {

        var txt = $get('<%= txtSlider.ClientID %>');

document.getElementById("divContent01").style.fontSize = txt.value +"pt";

    }

   

</script>

 
스크립트를 아래쪽에 작성하는 이유는 사이트성능 향상을 위해서 좋고, head안에 넣으면 에러가 나기 때문이예요. 스크립트 안에 인라인수식으로 컨트롤 아이디를 지정하기 때문에 컨트롤이 생성되기 전에 스크립트가 먼저 실행되면 에러가 나겠지요.그래서 Body안 아니면,맨아래 부분에 넣어주는 것이 좋은데...저는 맨아래 부분에 작성해 보았어요.^^

이제 코드를 다 작성했네요. .cs페이지에는 따로 작성할 코드가 없어요.(필요에 따라 작성해서 만드세요) 여기까지 잘 따라서 하셨다면 잘 실행되리라 믿을게요~^^

이런식으로 해서 제가 몇가지 예제를 더 만들어 봤는데요. (아래 그림 참고)

사용자 삽입 이미지

위 예제는 아주 간단하게 만들수 있겠지요. 아까 위에서 스크립트코드에서 객체의 Style을 지정해 주었잖아요. fontSize에서 filter로만 변경해 주고 정확한 표현의 방식의 값이 들어가게 지정만 해주면 되요.



사용자 삽입 이미지


위 예제는 재미있겠지요. 빛의 3원색을 이용한 예제라고 할까요^^;; 빨강, 초록, 파랑 3색이 조합해서 색을 표현하는 예제지요. 이것도 스크립트로 작성해주는 부분이여서 그렇게 크게 어려울게 없을 거예요.

아래는 위 예제들을 합쳐 만든 예제입니다.

사용자 삽입 이미지

이렇게 만든사이트가 있으면 재미있지 않을까?^^
위 예제 소스들를 압축해서 올려 놓을 게요!!그리고 참고로 슬라이드 CSS 설정도 가능합니다. 즉, 슬라이드를 디자인 가능하다는 애기지요. 클릭  <- -여기 참고 하세요
Posted by happydong
, |