Nullable<T>

Posted 신선한바람 : 2008.01.22 11:44, Filed under: 개발

데이터베이스 프로그래밍을 할 때 어떤 필드가 null로 초기화 되어있을 경우, 가끔씩 Primitive type에 null값을 넣고 싶을 때가 있다. 예를 들면 이런 코드이다.

DataSet ds = GetDataSet();
object obj = ds.Tables[0].Rows[0]["NullField"];
int value = 0;

if(obj != null)
{
  value = (int)obj;
}

이럴 땐 Nullable타입을 사용하면 된다. 사용법은 간단하다.

DataSet ds = GetDataSet();
int? value = (int?)ds.Tables[0].Rows[0]["NullField"];

int?타입은 Nullable<T>를 상속받고 있다. 이런 형태의 Nullable타입은 bool이나 double과 같은 C#에서 사용 가능한 모든 타입들에 대해 구현되어 있다.

Nullable타입은 다음과 같은 프로퍼티와 메소드가 존재한다.

HasValue 값이 존재하는지 검사한다.
Value 값을 리턴한다. 만약 값이 없으면 Exception을 발생시킨다.
GetValueOrDefault(T defaultValue) 존재하는 값 또는 기본값을 리턴한다.

다음과 같이 쉽게 사용할 수 있다.

int? i = 10;
if (x.HasValue)
{
  Console.WriteLine(x.Value);
}
else
{
  Console.WriteLine("NullValue");
}

이렇게 매번 if나 GetValueOrDefault를 사용하면 코드가 복잡해 보일 수 있기 때문에, Nullable타입과 함께 추가된 ??연산자를 사용할 수도 있다.

int? i = null;
Console.WriteLine(i ?? 10);

??연산자는 C에서부터 계승되어 오던 ?연산자를 사용하는 (i == null) ? i : 0 형태를 축약한 것으로 보면 된다.

참고자료:
http://msdn2.microsoft.com/en-us/library/2cf62fcy.aspx

Posted by : 신선한바람

  1. # Favicon of http://celebblowsbar.net/czn/beautiful-women-in-black-stockings BlogIcon beautiful women in 2008.05.23 05:01 신고 Delete Reply

    나는 배웠다 매우…

Leave a comment

[두번째] Javascript를 사용한 rich Editor.

Posted onionmen : 2007.12.12 11:39, Filed under: 개발
2007/12/09 - [개발] - [첫번째] Javascript를 사용한 rich Editor.


이전에 우리는 아래와 같은 화면을 보여주는 코드를 작성한 적이 있습니다.
사용자 삽입 이미지


이제 여기에 좀 더 기능을 추가해 보도록 하겠습니다.

우선 가장 기본적으로, 굵게, 기울임체, 밑줄긋기 의 세 버튼을 추가해보겠습니다.

<input type="button" value="기울임" onClick="doCommand('italic');"/>
<input type="button" value="밑줄" onClick="doCommand('underline');"/>

위와 같은 코드를 추가해서 효과를 얻을 수 있습니다.

doCommand 메소드안에 인자값으로 italic 과 underline 을 주었습니다.
인자값의 자세한 내용은 다음 링크를 참조 하세요.


사용자 삽입 이미지


효과가 적용되는것을 확인할 수 있습니다.
이제 우리가 원하는 대로 조금씩 가까워 지고 있습니다.

이제 원하는 글씨체를 넣어볼 차례입니다.
웹 페이지를 제작하면서 글꼴은 화면을 보는 사람 입장에서 생각해야 합니다. 자신의 컴퓨터에 상용글꼴들이 설치되어 있다고 상용글꼴을 사용하면, 정작 그것을 읽는 사용자 입장에선 기본폰트로 보여지기 때문에 디자인에 영향을 줄 수 있습니다. 이는 지금 이 강좌에서도 동일하게 적용됩니다.

그렇기 때문에 우리는 윈도우 기본 글꼴을 사용해서 코드를 작성할 것 입니다. 기본글꼴의 수만해도 굉장히 많이 있지요. 우선은 간단하게 굴림체와 바탕체와 궁서체만 등록을 해 보겠습니다.

<input type="button" value="바탕" onClick="doCommand('fontname','바탕');"/>
<input type="button" value="굴림" onClick="doCommand('fontname','굴림');"/>
<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

위와 같은 코드를 넣음으로 해서 다음과 같은 결과를 얻을 수 있습니다.

사용자 삽입 이미지


글꼴이 추가되면 계속 버튼을 추가해서 넣어야 합니다. 글꼴을 20개 넣는다면, 너무 길어져서 디자인을 제대로 할 수 없습니다.

우리는 <select> 라는 태그를 사용해서 이것을 해결할 수 있습니다.

<select>
    <option>바탕</option>
    <option>굴림</option>
    <option>궁서</option>
</select>

다음과 같은 공간활용이 가능한 결과물을 얻었습니다.

사용자 삽입 이미지


이제 셀렉트 박스(SELECT BOX) 의 선택값으로 글자체를 바꾸는 코드를 넣어보도록 합시다.

<select onChange="doCommand('fontname',this.value);">
    <option value="'Batang'">바탕</option>
    <option value="'Gulim'">굴림</option>
    <option value="'Dotum'">돋움</option>
</select>

화 면은 동일하지만 내용물이 좀 바뀌었습니다. 버튼의 경우 클릭 이벤트를 받아야했기 때문에 onClick 이벤트를 사용했는데, 셀렉트박스의 경우 내용이 바뀌는 경우를 받아야 하기 때문에 onChange 이벤트를 사용했습니다. doCommand 의 경우 이번엔 인자값이 두개인데, 하나는 폰트를 바꾼다고 알려주는 것이고, 두번째는 어떤 폰트로 바꿀지 알려주는 것 입니다. this.value로 현재 선택된 value 값을 인자값으로 넘겨줄 수 있도록 합니다.

<select onChange="doCommand('fontname',this.value); this.selectedIndex=0;">
    <option>글자체</option>
    <option value="'Batang', 'Serif'">바탕</option>                                                 <option value="'BatangChe', ' Serif'">바탕체</option>                                   
    <option value="'Gulim', 'Sans-serif'">굴림</option>                                   
    <option value="'GulimChe', 'Sans-serif'">굴림체</option>                       
    <option value="'Dotum', 'Sans-serif'">돋움</option>                           
    <option value="'DotumChe', 'Sans-serif'">돋움체</option>               
</select>

코드를 넣고 각각의 option에 style="font-family: 'Batang';" 과 같은 스타일을 주어 직접 보여지는 보습의 폰트를 변경 할 수 도 있습니다.

사용자 삽입 이미지


동일한 방법으로 크기에 대한 코드를 넣습니다.

사용자 삽입 이미지


이제 얼추 기능이 추가된 것 같습니다.
좀 더 세심한 기능을 원하시는 분은 위 링크에 들어가셔서 기능을 연구해 보세요. Tistory의 편집창도 직접 만드실 수 있을 거예요.
Posted by : onionmen

  1. # Favicon of http://3-channel.tistory.com BlogIcon 신선한바람 2007.12.14 15:50 신고 Delete Reply

    우왕~굳~ㅋㅋ

  2. # Favicon of http://alkinade.tistory.com BlogIcon 파란솦 음침 2007.12.17 22:59 신고 Delete Reply

    님 좀 짱인듯

Leave a comment

[첫번째] Javascript를 사용한 rich Editor.

Posted onionmen : 2007.12.09 21:17, Filed under: 개발

4년~5 년 전만 해도, 게시판에 글을 쓸 때 폰트의 크기를 키우거나, 색상을 변경하고 싶으면, 사용자가 직접 HTML 태그를 사용해서 글을 작성해야 했습니다. 그나마도 게시판에서 HTML을 지원해 줘야 가능한 일이었습니다. 그러다가 점점 기술이 발전해 나가고, 사용자의 편의를 신경 쓰게 되니, ActiveX를 사용한 웹게시판이 포털사이트를 중심으로 등장했습니다. 귀여운 아이콘도 넣을 수 있도록 말이죠. 하지만 최근 반ActiveX 지향적인 바람이 불면서, MS IE에서만 동작하는 이러한 게시판에 대한 원성이 높아지고 있습니다. ActiveX를 도입했던 많은 곳에서 이제 ActiveX 를 제거하고, javascript를 사용한 에디터 게시판으로 전향했습니다. 별도의 프로그램을 설치하지 않아도 되는 rich 게시판은 사용자에게 유용하게 사용될 수 있습니다. 물론 이전에도 이런 기술은 존재 하였고, 몇몇 곳에서 이미 도입하여 사용하고 있었지만, 조명을 받기 시작한 건 얼마 되지 않았습니다.

본 포스팅에서 크로스브라우징이 가능한 RICH Editor를 제작해보도록 하겠습니다.

보통 게시판을 제작할 때, 글 내용을 입력하는 부분은 <textarea> 라는 태그를 사용합니다. 하지만 <textarea>는 text 외에 어떤 html도 입력할 수 없고, 입력하더라도 단지 입력만 될 뿐 외관상 아무런 영향을 미치지 않습니다. 그래서 이 부분은 frame 의 designMode 라는 DOM을 사용하여 처리하게 됩니다. 그럼 코드를 작성해 보도록 하겠습니다.

<html>

    <head>

        <title>simple rich editor</title>

    </head>

    <body>

        <iframe id="richEditor"></iframe>

    </body>

</html>

Html 코딩이 끝났습니다. 추가한 것은 iframe 태그가 전부입니다. 이 상태로 화면을 확인해 봐도 아무것도 할 수 없으니 다음 코드를 작성해 보겠습니다.

<head>

    <title>simple rich editor</title>

    <script langauge="javascript">

    function load()

    {

        document.frames['richEditor'].document. designMode = "On";

        }

    </script>

</head>

<body onload="load();">

    <iframe id="richEditor"></iframe>

</body>

페이지가 열린 후 iframe 안에 내용을 편집 가능하게 하려면 designMode 가 on 이 되어야 합니다. 그러기 위해서 <body> 안에 onload 이벤트를 사용하여, 페이지가 로드 되면 자동으로 designmode를 on 시키는 코드를 넣었습니다.

이제 코드를 작성하고 Explorer 를 실행시켜 동작시켜보면 Iframe안에 글씨를 써넣을 수 있게 됩니다. 그런데 위 코드는 파이어폭스(FF)에서는 제대로 실행이 되지 않는다는 큰 문제가 있습니다. 애써서 자바스크립트로 새로 코딩하는데, FF에서 제대로 실행되지 않으면 ActiveX를 사용하는 것과 큰 차이점이 없겠지요?

크로스 브라우징을 위해 코드를 조금 개선시켜 보겠습니다.

function load()

{

    if (document.getElementById('richEditor').contentDocument)

    {

        return document.getElementById('richEditor').contentDocument.designMode = "On";

    }

    else

    {

        return document.frames['richEditor'].document.designMode = "On";

    }

}

나머지 부분은 그대로 놔두고, 자바스크립트 부분만 바꾼 모습입니다. 이러면 IE와 FF 모두 잘 동작하는 모습을 볼 수 있습니다. 코드가 지저분해 보이니 리펙토링을 조금 해보면.

function load()

{

    getIFrameID("richEditor").designMode = "On";

}

function getIFrameID(aID)

{

    if (document.getElementById(aID).contentDocument)

    {

        return document.getElementById(aID).contentDocument;

    }

    else

    {

        return document.frames[aID].document;

    }

}

이렇게 해서 조금은 깔끔한 코드가 완성되었습니다.

이제 글씨들의 스타일을 변경할 수 있는 버튼들을 만들어 넣을 차례입니다.

Html:

<input type="button" value="굵게" onClick="doCommand('bold');"/>

선택된 곳을 굵게 표시할 수 있는 버튼을 만들었습니다. onClick 이벤트로 클릭하면 doCommand 가 실행됩니다.

Javascipt:

function doCommand(command, args)

{

    getIFrameID('richEditor').execCommand(command,false,args);

    document.getElementById('richEditor').contentWindow.focus()

}

doCommand 메소드 입니다. 좀 전에 리펙토링 하면서 만들었던 getIFrameID 메소드와 execCommand 메소드를 사용합니다.

execCommand메소드는 두개의 인자를 갖습니다. 다음 페이지를 참고 하세요.

doCommand(command, args)의 인자 값 중 처음 command는 굵게 만들지, 이텔릭체로 만들지, 언더라인을 그을지 등을 결정합니다. 두번째 args는 첫번째 인자에 따라서 결정되는데, 굵게 만들기와 같은 작업엔 사용하지 않고, 폰트종류나 크기를 결정할 때 입력합니다.

Html :

<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

위 코드를 추가하고 테스트를 해보면, 어떤 의미인지 잘 알 수 있을 것 입니다.

완성된 코드 입니다.

<html>

<head>

    <title>simple rich editor</title>

    <script langauge="javascript">

    function load()

    {

        getIFrameID("richEditor").designMode = "On";

    }

    function getIFrameID(aID)

    {

        if (document.getElementById(aID).contentDocument)

        {

            return document.getElementById(aID).contentDocument;

        }

        else

        {

            return document.frames[aID].document;

        }

    }

    function doCommand(command, args)

    {

        getIFrameID('richEditor').execCommand(command,false,args);

        document.getElementById('richEditor').contentWindow.focus()

    }

</script>

</head>

<body onload="load();">

    <p>

        <input type="button" value="굵게" onClick="doCommand('bold');"/>

        <input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

    </p>

    <iframe id="richEditor"></iframe>

</body>

</html>

다음에는 위 코드에, 기능을 좀 더 추가하고, 페이지의 값을 넘겨 스크립트언어에서 받는 방법을 소개해보도록 하겠습니다.

Posted by : onionmen

  1. # Favicon of http://secreteroswish.net/cat/nude-italian-men BlogIcon nude italian men 2008.05.23 04:18 신고 Delete Reply

    좋은 영역! 걸출한 영역!

Leave a comment

Revu스타일의 슬라이딩 로그인 패널 만들기 (1)

Posted 신선한바람 : 2007.09.19 22:19, Filed under: 개발

요즘은 인터넷이 재밋습니다. 웹 2.0이다 뭐다 해서 수많은 재밋는 사이트들이 쏟아져 나오고 있기 때문입니다. 이런 서비스들 중에선 미투데이와 같은 SNS서비스 뿐만 아니라 펌핏과 같은 이슈플랫폼도 있습니다. 혹시 이런 웹 2.0사이트들 중에서 Revu라는 사이트에 대해 들어 보셨는지요. 짧게 요약하자면 '세상 모든 것에 대한 리뷰'를 모토로 사용자들간의 리뷰를 공유하는 웹 2.0 서비스 입니다.

이것도 직업병에 해당하는지는 모르겠지만, 저도 나름 html을 끄적이고 있는지라 이런 훌륭한 서비스들을 볼 때마다 '이 부분은 어떻게 처리했을까?', '이 효과는 어떻게 준걸까?' 하는 생각을 많이 합니다. 그래서 이따금씩 따라해보곤 합니다. 뜬금없이 왠 '헛소리'라고 생각하셔도 좋습니다. 이번 주제는 Revu의 로그인 패널 만들기 이니까요. ^^

대부분의 사용자들이 로그인 패널을 페이지 상단이나 우측 위쪽에서 찾기 때문에 대부분의 로그인 패널은 그 위치에 자리잡게 됩니다. 이와 마찬가지로Revu의 로그인 버튼도 페이지 상단에 자리잡고 있습니다. 하지만 다른 사이트들과는 약간 다르게, 해당 버튼을 클릭하게 되면 로그인 페이지로 이동되는 것이 아닌 로그인 패널이 Slide down되면서 나타납니다.

저는 이 이펙트가 상당히 신선하다고 느껴졌습니다.

사용자 삽입 이미지

Revu의 로그인 패널

Revu의 로그인 패널의 이펙트는 script.aculo.us라는 Prototype기반의 UI라이브러리를 사용했습니다. (어떤 이유에선지는 모르겠지만 특이하게도 Revu가 사용하는 UI라이브러리는 상당히 많습니다. script.aculo.us뿐만 아니라, rico, YUI도 사용하고 있습니다. 이렇게 비슷한 역할을 하는 프레임웍을 중첩시켜서 사용하면 전체 시스템 복잡도는 자연히 높아질 수 밖에 없습니다. 그렇기 때문에 개인적으로는 별로 좋아하지 않습니다. ) script.aculo.us에는 Slide Up/Down외에도 쓸만한 이펙트들이 많이 있습니다. 더 자세한 정보를 원하시면http://script.aculo.us/ 를 방문해 보시길 바랍니다. (클릭하시면 데모사이트로 이동합니다.)

사용자 삽입 이미지

script.aculo.us데모


Slide Animation을 구현하기 위한 방법은 크게 두 가지로 요약할 수 있습니다.

  1. 여러장의 레이어를 겹쳐서 구현합니다. (간단하게 요약하자면 바닥을 깔고 로그인 박스를 위에 둔 후에 그 윗부분을 다른레이어로 덮는 방식입니다. )
  2. CSS의 Clip 프로퍼티를 이용합니다.

첫번째 방법은 여러장의 레이어를 제어해야 하기 때문에 구현하기 복잡하고, 모든 상황에 적용하기 힘듭니다. 두 번째 방법은 Clip영역으로 잘라내기 때문에 해당 오브젝트의 실제 크기와 화면에 출력되는 크기가 다르다는 단점이 있습니다. 어떤 방식을 사용하던 정답은 없습니다. 하지만 Clip영역을 사용하는 것이 다른 방법보다 훨씬 개발하기 쉽고, 어떤 상황에서던 유연하게 동작하기 때문에 이 방법을 선택하도록 하겠습니다.

Clip 프로퍼티는 4각형의 박스를 지정한 수치만큼 잘라내는 프로퍼티 입니다. Clip되는 박스는 반드시 { position: absolute; } 로 지정되어 있어야 합니다. CSS로 Clip영역을 주는 방법은 다음과 같습니다.

{
position: absolute; // 반드시 absolute로 지정되어 있어야 합니다.
clip: rect(0px, 10px, 10px, 0px); // top right bottom left의 순서입니다.
}

해제하시려면 { clip: rect(auto); } 로 지정하시면 됩니다. CSS와 Clip Property의 사용법에 대한 설명은 이 강좌의 범위를 넘는 부분이기 때문에, 더 자세한 설명을 원하시면 http://www.cadvance.org/?leftmenu=doc/include/total_menu.asp&mainpage=doc/css/positioning/clip.asp 를 방문해 보시길 바랍니다.

우선 화면에 100x200의 작은 박스를 만들겠습니다. 배경색은 red로 주시고, 화면에 떠 있어야 하기 때문에 {position: absolute; }를 설정해 둡니다. 좌표는 (100px, 100px) 정도면 괜찮겟네요. 그리고 마지막으로 clip영역을 {clip: rect(0px,100px,200px,0px);} 정도로 설정합니다.

코드는 다음과 같습니다.

<head>
<title>Slide Animation</title>
<style type="text/css">
#box {
    position: absolute; // 반드시 absolute로 지정되어 있어야 합니다.
    clip: rect(0px, 100px, 200px, 0px); // top right bottom left의 순서입니다.
    top: 100px;
    left: 100px;
    width: 100px;
    height: 200px;
    background-color: red;
}
</style>
</head>
<body>
   
<div id="box">
       
box
    </div>
</body>
</html>

사용자 삽입 이미지

실행결과


테스트는 http://66.232.144.57/suda/slide.htm 에서 하실 수 있습니다.

다음엔 이 div를 제어하는 script를 만들어 보도록 하겠습니다.

ps: 이거 code는 어떻게 붙여넣죠?? 컴맹이라-.-;

Posted by : 신선한바람

Leave a comment

[Ajax.Net] JavaScript로 Animation 제어하기

Posted 신선한바람 : 2007.09.09 18:28, Filed under: 개발

시작하기

Ajax.net 에서 Animation을 제어 할 수 있는 방법은 두 가지가 있습니다. 첫 번째는 AnimationExtender를 사용하는 방법이고, 다른 한 방법은 JavaScript 로 직접 제어 하는 방법입니다.

 

Ajax가 대중적으로 확산됨과 함께 Ajax.Net도 덩달아 많은 관심을 받고 있습니다. 이에 따라 AnimationExtender와 같은 ControlToolkit의 자료 또한 많이 공개되어 있습니다. 그래서 저는 JavaScript Animation을 직접 제어하는 방법을 설명하겠습니다.

 

Ajax.Net을 사용하기 위해선 다음과 같은 프로그램들이 설치되어 있어야 합니다.

 

1.     VisualStudio 2005 혹은 Visual WebDeveloper Express 2005 이상의 버전이 설치되어 있어야 합니다. (에서 무료로 다운로드 받을 수 있습니다.)

2.     ASP.NET Extension v1.0 이상의 버전이 설치되어 있어야 합니다. (에서 무료로 다운로드 받을 수 있습니다.).

3.     ASP.NET AJAX Control Toolkit이 설치되어 있어야 합니다. (에서 무료로 다운로드 받을 수 있습니다.)


Animation Hierarchy

Ajax.Net Animation은 다음과 같은 계층으로 구성되어 있습니다.

 

Animation --- Parent Animation   --- Parallel Animation      --- Move Animation
                                                                              --- Resize Animation

                                             --- Sequence Animation  --- Pulse Animation
                                            
--- Selection Animation   --- Condition Animation
                                                                              --- Case Animation

              --- Fade Animation      --- FadeIn Animation

                                             --- FadeOut Animation

              --- Property Animation --- Discrete Animation

                                             --- Interpolated Animation

              --- Color Animation   
             
--- Length Animation 
             
--- Scale Animation
              --- Action                 --- Enable Action

                                            --- Hide Action

                                            --- Style Action

                                            --- Opacity Action

                                            --- Script Action

 

 크게 3가지로 분리할 수 있는데, SequenceAnimation이나 parallelAnimation과 같이 Animation들의 순서를 제어할 수 있는 Container클래스와, Fade In/Out 과 같은 실질적으로 화면을 구성하는 클래스, 그리고 시간을 기준으로 동작하는 Animation과는 달리 실행한 그 시점. 단 한번만 효력을 발휘하는 Action이 있습니다.

 

다음 URL에서 각각의 Animation을 테스트 해 보십시오.

http://66.232.144.57/suda/animation.aspx

 

사용자 삽입 이미지

Animation Example

 
사용자 삽입 이미지

FadeIn, FadeOut, Color 실행결과













Hello Ajax

간단한 Hello Ajax라는 글씨를 FadeIn하는 Animation을 작성해 보도록 하겠습니다.

 

1.     새 웹 사이트 생성합니다.

2.     폼에 TookitScriptManager를 등록합니다. 혹시 ToolkitScriptManager가 없다면, 도구상자에서 우클릭 -> 항목선택 -> 다운받은 ControlToolkit 디렉토리안의 /SampleWebsite /Bin /AjaxControlToolkit.dll 을 선택하여 추가하십시오.

3.     폼에 아무런 ControlToolkitExtender가 없으면 Animation관련 자바스크립트가 로드되지 않기 때문에 임의로 아무 Extender나 폼에 올려둡니다.

<!-- AjaxControlToolkit 라이브러리를 사용하기 위해 아무 extender나 폼에 올려 두어야 함 -->

         <asp:Panel ID="Panel1" runat="server" Width="1px" Height="1px" Visible="false" />

        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">

            <Animations>

                <OnHoverOver>

                    <FadeIn MinimumOpacity="0.1"/>

                </OnHoverOver>

            </Animations>

        </cc1:AnimationExtender>

4.     FadeIn시킬 Div를 추가하고 Text를 설정합니다.

<div id="fadein" style="opacity:0;">

<h2>Hello Ajax</h2>

</div>

5.     <head></head>태그 사이에 다음과 같은 자바 스크립트를 추가합니다.


<script language="javascript">

function FadeIn()

{

// Animation을 재생합니다.

    AjaxControlToolkit.Animation.FadeInAnimation.play($get('fadein'), 1, 25);}

 

function Initialize()

{

    $addHandler($get('fadein'),"click",FadeIn);

}

</script>

6.     Initialize를 호출하기 위해 body태그에 onload이벤트를 설정합니다.


<body onload="Initialize();">


코드설명

AjaxControlToolkit.Animation.FadeInAnimation.play()  

FadeInAnimation을 재생하는 메소드 입니다. Play외에도 Stop Pause와 같은 제어 메소드들과, onStart, onStep, onEnd와 같은 이벤트리스너들도 등록할 수 있습니다. API Reference는 다음 사이트를 참고하시길 바랍니다.

http://asp.net/AJAX/Control-Toolkit/Live/Walkthrough/AnimationReference.aspx

 

$get(‘fadein’)

 Sys.UI.DomElement.getElementById() 메소드의 축약 형태입니다. $get() 외에도 다른 축약형을 알고 싶으시면 다음 사이트를 참고하시길 바랍니다.

http://asp.net/AJAX/Documentation/Live/ClientReference/default.aspx

 

.play($get(‘fadein’), 1, 25)

 두 번째 인자인 1 duration입니다. Duration은 해당 Animation이 몇 초간 진행될 것인지를 결정하는 단위 입니다. 세 번째 인자인 25 fps입니다.

 

$addHandler($get(‘fadein’),”click”,FadeIn)

 $addHandler Sys.UI.DomEvent.addHandler()메소드의 축약형 입니다. 인자로 3개를 받는데, 첫 번째 인자는 이벤트를 핸들링할 DomObject입니다. 두 번째 인자는 이벤트의 이름입니다. 세 번째 인자는 이벤트가 발생할 시 호출할 함수 이름입니다.

 

 

결론

이것으로 대략적인 Javascript Animation을 제어하는 방법에 대해 알아 보았습니다. 혹시 제가 잘못 알고 있는 내용이나, 추가할 점이 있으시면 댓글 혹은 트랙백으로 남겨 주십시오.

ps: 워드 2007에서 바로 포스팅 하니까 다 깨지는군요-_-;;


첨부

Posted by : 신선한바람

Leave a comment

ExtremeSwank OpenID Consumer For ASP.Net 2.0

Posted 신선한바람 : 2007.09.03 00:01, Filed under: 개발

.Net으로 OpenID Library를 구현하시거나 찾아보신 분들은 생각보다 구현체가 없다는 사실에 놀랐을 것입니다.

 

이 글을 쓰는 시점으로 가장 많이 사용되는 라이브러리는 JanRain사에서 구현한 JanRain OpenID 라이브러리입니다. 현재 이미 RubyPython과 같은 언어에서 성공적으로 사용 된 바 있고, 6개 이상의 언어로 포팅되어 있으며 Cross Platform을 지원합니다.

 

물론 .Net용 구현체도 있습니다. 다만 개발 초기부터 Cross Platform 지원이 필수였기 때문에 .Net용 구현체는 다른 ASPControl과는 다음과 같은 차이가 있습니다.


1.       Boo 라는 언어로 구현되어 있습니다.

2.       Mono Framework을 사용합니다.

3.       Mono.security라는 Mono 전용 namespace가 사용되었습니다.

 

현재 OpenID스팩은 아직 완벽히 정립된 상태가 아니며 현재도 끊임없이 변경되고 있습니다. 이런 상황에서 순수 .Net이 아닌 Mono로 빌드되어 있고, Boo라는 독특한 언어로 구현되어 있다는 점은 유지보수성에서 마이너스 요소가 될 수 밖에 없습니다. 이런 문제점은 Toy-project처럼 간단한 테스트 프로젝트라면 상관없지만 실제 상용 프로젝트에 바로 적용시키기엔 무리가 있습니다.

 

제가 오늘 소개드릴 라이브러리는 ExtremeSwankOpenID Consumer입니다.

( http://extremeswank.com/aspnet_openid.html 에서 다운로드 하실 수 있습니다.

 

특징으로는 다음과 같습니다.

 

1.       C#ASP.Net으로 구현된 모든 소스가 공개되어 있습니다.

2.       OpenID 1.1 2.0Stateful Stateless 모드를 완벽히 지원합니다.

3.       구현체가 Stateless 만을 위한 Simple ConsumerFull Consumer 두 가지로 나뉘어 있습니다. 이는 실제 동작되는 서버의 성능상의 이점을 가져다 줍니다.

4.       사용하기 쉽도록 UserControl이 구현되어 있습니다.

5.       거의 유일하게 API Documentation이 만들어 져 있습니다. (!!!!!)

 

그럼 간단한 예제를 만들어 보겠습니다.

 

먼저 Visual StudioOpenID라는 이름의 웹 사이트를 생성합니다.
만약 Visual Studio가 없으면 다음 링크에서 WebDeveloper Express버전을 다운받으십시오.  
http://msdn2.microsoft.com/ko-kr/express/aa975050.aspx

 

1.       솔류션 익스플로러에서 우클릭 -> ASP.Net 폴더 추가 -> Bin 을 선택하여 참조 디렉터리를 생성합니다.

2.       Bin디렉토리에서 우클릭 -> 참조추가 -> 찾아보기 를 통해 다운받은 ExtremeSwank.Authentication.OpenID.dll을 추가합니다.

3.       작업중인 웹 디렉토리에 OpenIDControl.ascxOpenIDControl.ascx.cs 파일을 복사합니다.

4.       Default페이지에 추가한 컨트롤을 올려 놓습니다.

 

결과 화면은 다음과 같습니다.


사진을 클릭하시면 원본이미지로 좀 더 자세히 보실 수 있습니다.

사용자 삽입 이미지

Visual Studio 에서 오픈아이디 로그인폼을 만드는 모습

 

실행하면 다음과 같습니다.


사용자 삽입 이미지

웹브라우져에서 확인하는 로그인창

 
사용자 삽입 이미지

myid.net을 통한 로그인 시도

사용자 삽입 이미지

myid.net의 비밀번호 입력 페이지

사용자 삽입 이미지

정상적으로 로그인 된 모습

ExtremeSwank의 라이브러리는 모든 소스가 공개되어 있고 API문서 또한 잘 정리되어 있기 때문에 사용하시는데 크게 어렵지 않을것이라 생각됩니다.

Posted by : 신선한바람

  1. # 2007.10.16 19:33 Delete Reply

    비밀댓글입니다

  2. # Favicon of http://chocolatecoedcouple.net/hot/a-2-leather-jacket BlogIcon a 2 leather jacket 2008.05.23 04:57 신고 Delete Reply

    친구는 너의 현재 위치의 팬이 되었다!

  3. # Favicon of http://yourweirdtaboo.net/dir/t-girls-do-girls BlogIcon t girls do girls 2008.05.23 05:25 신고 Delete Reply

    여기 이것은 뉴스 있다!

Leave a comment


Notice

  1. 팀블로그 시작합니다.

Recent Posts

  1. ㅅㄷㄴㅅ
  2. Nullable<T>
  3. [두번째] Javascript를 사용한 rich E..
  4. [첫번째] Javascript를 사용한 rich E..
  5. Webware가 선택한 사이트 #3 - Friend..

Recent Comments

  1. Here a wealth of information here... lora 2013
  2. There’s a lot of information here... ruscopybook.com/history/10_class 2013
  3. 사람은 본질적으로 제가 언급 것이라.. jual jaket online 2012
  4. 내가 아주이 블로그에 대한 즐길입니.. notebook murah 2012
  5. 많은 흥미로운 것들이 내 배우자 그리.. Lawyer Marketing 2011

Recent Trackbacks

  1. contactos con mujeres contactos con mujeres 2012
  2. 소프트뱅크벤처스 포트폴리오 쇼케이.. Blog Marketing bible* 2007
  3. 단순함의 미투데이와 백화점식의 SKT.. 전설의에로팬더 2007
  4. 미투(혹은 플톡) vs. 토씨 가상 시나.. 민노씨.네 2007
  5. Tossi, 클로즈 베타테스트 시작 소식.. TechCabin 2007

Calendar

«   2018/11   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Bookmarks

  1. 신선한바람
  2. onionmen
  3. onionmen 미투데이
  4. 신선한바람 미투데이
  5. 횸피그
  6. 횸피그 미투데이

Site Stats

TOTAL 53,143 HIT
TODAY 2 HIT
YESTERDAY 24 HIT