드뎌 다다음 주인 2월초에 태오의 ASP.NET 서적이 출간됩니다. ^^
너무 강조하면 책 광고하는 것 같으니깐 요만큼만 이야기할께요
히히히..... 축하해 주세요 ^^;

ASP.NET Table 관련 Controls

ASP.NET에서 제공되는 서버 컨트롤 중에는 테이블과 관계된 컨트롤들도 존재하고 있다. 이러한 컨트롤들은 서버상에서 테이블을 동적으로 꾸미고자 할 경우 사용하는 컨트롤이다. 주로 컨트롤 개발자들이 사용하는 컨트롤이며, 일반적인 웹 페이지 개발자라면 사용할 일이 적은 편이기는 하다.

처음에는 이 컨트롤들이 왜 필요할까라는 의구심이 생길 수도 있다. 테이블은 단지 웹 페이지내의 레이아웃을 위해 필요한 태그일 뿐이라는 생각이 지배적일 테니 말이다. 사실 그러하다. 사실 일반적인 경우라면 테이블 관련 서버 컨트롤들을 사용할만한 일은 없을 것이다. 하지만, 테이블이 동적으로 꾸며져야 하는 특별한 경우라면? 또한, 서버측에서 동적으로 컨트롤을 생성하여 테이블 내에 삽입해야 할 필요가 있다면? 그런 경우라면 서버에서 테이블 개체를 인식할 수 있는 방법이 필요할 것이며, 테이블을 서버 컨트롤로 구성하여 서버에서 테이블을 제어할 필요가 있다. 이번에는 가볍게 테이블 관련 서버 컨트롤에 대해서 알아보도록 하자. 그리고, 이 지식은 차후 여러분이 웹 디렉터리 네비게이터라는 간단하면서도, 재미있는 툴을 만들 경우 효과적으로 사용할 수 있을 것이다.

흥미를 유발하기 위해서 우리가 만들 Tables.aspx 페이지의 결과화면을 먼저 보여주도록 하겠다.

엇? 결과화면이 너무 썰렁하여 흥미가 유발되기는커녕 오히려 책을 닫아버리고 싶어지는가? 결과가 그다지 폼 나지 않는다고 느낄지도 모르겠다. 하지만, 소스를 보면 이야기가 달라질 수도 있다. 그러니 기대를 해 보도록 하자. 이제 프로젝트에 새로운 ASP.NET 페이지를 하나 추가하도록 한다. 이름하야 Tables.aspx 이다. 그리고, 다음 그림처럼 웹 폼 위에 하나의 Table 컨트롤을 올려놓도록 하자. 그리고, 테이블 컨트롤의 bgColor 속성의 값을 적절히 주도록 하자. 필자의 경우는 그 색상의 값을 #006699라고 주었다.

완성된 웹 폼 페이지의 HTML 소스는 다음과 같을 것이다.

이제 코드를 작성해 보자. Page_Load 이벤트에 다음과 같은 코드를 작성한다

컴파일하고 결과를 확인하면, 결과화면은 일전에 나왔던 대로의 모습을 하고 있을 것이다. 그리 만족스러운 모습은 아니리라 생각한다. 하지만, 지금은 시작하고 있는 단계이다. 이 지식이 빛을 발하는 것은 이 책의 중반에 들어서서 임을 기억하고 부디 착실히 이해해 주기를 바라는 바이다.

소스를 살펴보자. 소스의 시작은 TabelRow와 TableCell 개체로 사용할 변수를 각각 tr, td로 선언하는 부분으로 시작한다. TabelRow는 테이블의 하나의 행을 나타내는 개체이며, TableCell은 그 행에 포함되는 각각의 셀을 나타내는 개체이다.

그리고, 이어지는 소스에서는 tr = new TableRow(); 라는 코드를 통해 테이블 행 개체를 하나 만들고 있으며, 이어서, td = new TableCell(); 코드를 통해 빈 셀을 하나 만든 다음 tr.Cells.Add(td); 를 통해서 tr 이라는 테이블 행 개체에 하나의 테이블 셀 컨트롤을 추가하고 있다.

TableRow 라는 테이블 행 개체는 Cells 라는 컬렉션을 가지고 있으며, 이 컬렉션은 Add, Remove, Clear 등의 메소드를 제공하고 있다. Cells 컬렉션은 .NET에서 TableCellCollection 이라는 클래스로 제공되고 있으니, 이 컬렉션에 대한 구체적인 정보를 알고 싶다면 [VS.NET 도움말] 에서 TableCellCollection으로 찾아보면 될 것이다.

이제, tr이라는 테이블 행 컨트롤은 하나의 빈 셀을 갖는 행이 되었다. 우리는 여러 개의 셀을 행에 더 추가할 것이기에 다음 코드와 같이 루프를 4번 반복하면서 새로이 셀을 만들고, 셀의 Text 로 각각 "Cell" 이라는 문자열과 현재루프의 숫자 값을 더해서 만들어 지정하고 있다. 그리고 난 뒤, 매번 셀을 테이블 행에 추가하고 있다.

    for(int i=1; i <=4; i++)
    {
        td = new TableCell();
        td.Text = "Cell" + i;
        tr.Cells.Add(td);
    }

이제 메모리 상에는 총 5개의 셀을 갖는 하나의 행이 완성되었다. 하지만, 아직은 이 행은 테이블에 포함되지 않고 별도로 메모리에서만 존재하고 있다. 이제 수행해야 하는 것은 이 행을 테이블 개체에 붙여주는 것이다. 다음 코드는 현재의 행의 색상을 연한 푸른 색으로 지정하고, Table1 이라는 테이블 서버 컨트롤의 Rows 컬렉션에 현재의 행 개체(tr)를 Add 하는 코드이다.

    tr.BackColor = Color.FromName("#ccccff");
    Table1.Rows.Add(tr);

이러한 흐름을 그림을 통해서 알아보면 다음과 같다고 볼 수 있다.

테이블에 행과 셀을 채우기 위해서는 위의 그림과 같이 따라야 하는 순서가 있다. 다시 한번, 그 순서를 정리해 보면 다음과 같다. 위의 그림과 비교하면서 보아주기 바란다.

1.  비어있는 행(TableRow)을 일단 하나 생성한다.
2.  행(TableRow)에 포함시킬 셀(TableCell)을 만든다.
3.  셀을 행에 추가(Add)한다. : TableRow.Cells.Add(셀 개체)
4.  2,3 단계를 반복하여, 여러 개의 셀을 행에 추가한다.
5.  완성된 하나의 행을 테이블 개체에 추가한다 : Table.Rows.Add(행 개체)

이로써 우리가 프로그래밍적으로 생성한 하나의 TableRow(tr)는 Table1에 실제적인 하나의 행으로써 자리를 잡게 되는 것이다. 고로, 현재까지의 코드로 여러분은 다음과 같은 모습을 가진 테이블 개체가 존재하고 있다고 예상할 수 있다.

이어지는 코드는 새롭게 행을 여러 개 추가하는 루프와 그 루프 안에서 방금 생성된 행에 여러 개의 셀을 채우는 루프를 가진 코드로 구성되어 있다. 먼저 행을 만드는 루프부터 살펴보도록 하자. 루프는 1부터 4까지 4번을 반복하도록 작성되어 있다. (즉, 4개의 행을 만든다는 의미가 된다)

    for(int i=1; i <= 4; i++)
    {
        tr = new TableRow();

        td = new TableCell();
        // 제일 첫 셀에 이미지를 로드한다.
        System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
        img.ImageUrl = "images/asp.gif";
        td.Controls.Add(img);
        tr.Cells.Add(td);

루프 안에서는 일단 하나의 TableRow 개체를 만든 다음, 이어서 새로운 셀(TableCell)도 하나 만들고 있다. 그리고, System.Web.UI.WebControls.Image 클래스의 인스턴스 개체를 하나 만들고 있는데, 이 부분은 이미지 개체를 생성하기 위한 것으로, 반드시 이렇게 전체 네임 스페이스를 사용해서 지정해 주어야 한다. 이 시점에서 여러분은 왜 코드를 다음과 같이 작성하지 않고 네임스페이스를 모두 포함하여 복잡하게 작성하는지 궁금할 것이다.

    Image img = new Image();

그 이유는 .NET 클래스 라이브러리 내에는 여러 개의 Image 클래스가 존재하기 때문이다. System.Drawing 네임스페이스 안에도 Image 클래스가 있으며, System.Web.UI.WebControls 안에도 Image 라는 클래스가 있다. 우리는 웹 컨트롤로써의 Image 클래스를 사용하려 하는데, 그냥 Image 라고만 사용하면, 컴파일러가 혼란할 여지가 있으므로, 개체의 인스턴스 생성 시 네임 스페이스를 포함하는 전체 경로를 코딩 해 준 것이다.

이와 같이, 이미지 개체를 하나 만든 뒤, 코드는 개체의 ImageUrl 속성의 값을 "images/asp.gif" 라고 지정하고 있다. 이 코드가 제대로 동작하여 결과 화면에서 이미지를 보기 위해서는 현재 경로의 하위 폴더인 images 라는 폴더에 asp.gif 라는 이름의 이미지를 가지고 있어야 할 것이다. 이 이미지는 책의 소스(태오 사이트에서 다운로드 가능하다)에서 구할 수 있을 것이다. 여러분의 프로젝트에 images 라는 폴더를 하나 만들고(만일, 그런 폴더가 아직 없다면), 그 안에 asp.gif 라는 파일을 복사하도록 하자.

이미지 개체를 만들고, ImageUrl을 지정하였다면, 이 이미지 개체를 첫번째 셀에 추가할 필요가 있다. td 라는 TableCell 개체는 일종의 컨테이너 역할을 하는 개체이다. 다른 개체를 자신의 내부에 담을 수 있는 능력을 가진 개체들을 컨테이너라고 이야기하는데, TabelCell, TableRow, Table 모두 일종의 컨테이너이다. Table 안에는 TableRow가 포함될 수 있으며, TableRow 안에는 TableCell이, TableCell 안에는 여러 다른 컨트롤들이 포함될 수 있으니 말이다. TableCell 과 같은 컨테이너 개체들은 Controls 라고 하는 컬렉션을 가지고 있는데, 이 컬렉션을 통해서 우리는 개체 안에 다른 개체들을 추가할 수 있다. 해서 소스에서는 빈 TableCell 안에 td.Controls.Add(img); 와 같은 코드를 통해서 이미지 개체를 추가하고 있는 것이다. 그리고, tr.Cells.Add(td); 라는 코드를 통해서 이렇게 구성된 td를 TableRow인 tr에 또한 추가하고 있다.

그리고 이어지는 코드는 4번 반복하는 루프를 돌면서 각각의 셀을 만들어 주고 있으며, Cell의 Text를 "td"라는 문자열에 반복횟수를 더한 문자열로 지정한 다음, TableRow에 삽입하고 있다. 그리고, 이러한 전체 루프를 총 4번 반복한다. 다음은 소스에서 사용된 개체들을 결과 그림에 표기해서 여러분의 이해를 돕는 그림이다. 참고해 보기 바란다.

부가적으로 설명하면, 소스 중에서 생성한 Image 개체는 서버 상에서 이미지 링크를 만들어 주는 개체이다. 즉, 다음 코드는 이미 여러분이 알고 있듯이 이미지 링크 개체를 만들어서, 그 이미지의 경로를 지정하고 Cell에 추가하는 코드이다.

    System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
    img.ImageUrl = "images/asp.gif";
    td.Controls.Add(img);

이 코드는 HTML로 렌더링 시 TD 라는 셀 안에 다음과 같은 이미지 태그를 만들어내게 된다. (이미지 경로 앞에 자동으로 현재 웹 어플리케이션의 이름이 붙어 나온다는 점을 기억해 두자)

    <img src="/TaeyoAspNet/images/asp.gif" border="0" />

그렇다면, 다음과 같은 생각도 여러분은 할 수 있다. 단순히 이러한 태그를 만들어 내기 위해서 반드시 Image 개체를 사용해야만 하는가? 단순히 위와 같은 태그를 수동으로 추가할 수 있는 방법은 없을까?

그렇다. 태그에 익숙한 여러분은 서버가 만들어내는 태그에 불만이 생길 수도 있고, 조금은 복잡한 태그를 직접 삽입하고 싶을 수도 있을 것이다. 그러한 것을 돕기 위해 제공되는 서버 컨트롤이 하나 더 있는데, 그 개체는 Literal 이다.

Literal 개체는 웹 페이지에 정적 텍스트를 렌더링하기 위해서 사용할 수 있는 컨트롤인데, 기능적으로 보았을 경우는 Label 컨트롤과 비슷하다고 볼 수도 있지만, Label은 이라는 HTML 요소로 생성되는 반면, Literal은 그 어떠한 HTML 요소도 추가적으로 생성해 내지 않는다. 또한, 프로그래밍 코드 내에서만 사용할 수 있는 개체이기도 하다. 잘 이해가 안 간다면, 예제를 해 보는 것이 가장 좋다. Tables.aspx 페이지에서 이미지 개체를 생성하고, 그 이미지 개체를 Cell에 추가한 총 3줄의 코드를 다음과 같이 주석처리하고, Literal 개체를 사용하는 코드를 대신 사용해보자.

    // 아래의 부분은 주석처리 한다.
    //System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
    //img.ImageUrl = "images/asp.gif";
    //td.Controls.Add(img);

    Literal l = new Literal();
    l.Text = "<img src='images/asp.gif'>";
    td.Controls.Add(l);

그리고, 페이지를 컴파일하고 다시금 결과 화면을 보도록 하자. 결과는 이전과 일치할 것이다. 소스는 l 이라는 이름으로 하나의 Literal 개체를 만든 뒤, 그 개체의 Text 속성에 여러분이 출력하고자 하는 태그 문자열을 작성하는 것이 전부이다. 이런 방식으로 특정 HTML 태그를 직접 작성하여, Cell에 추가할 수도 있는 것이다. Literal에 의해 생성된 클라이언트 측의 HTML을 살펴보면(브라우저에서 [소스보기]를 통해서) 결과가 다음과 같이 나오는 것을 볼 수 있을 것이다.

    <img src='images/asp.gif'>

Literal 개체의 Text 속성에 지정한 태그 문자열 이외에는 어떠한 군더더기 문자들도 붙어있지 않다. 개체의 역할이나 기능에 특별히 어려운 것은 없다. Literal 컨트롤은 상당히 쉽고, 유용하게 사용할 수 있는 개체이니 기억해 두기 바란다.

테이블 서버 컨트롤은 그리 다루기 어려운 개체는 아니었으며, 테이블 개체를 구성하는 TableRow, TableCell도 그리 이해하기 어려운 개체들은 아니었다. 이미 테이블이라는 개체의 구조적인 특징을 잘 알고 있는 여러분들은 누가 누구를 포함하는 컨테이너의 역할을 하는지 쉽게 이해할 수 있을 것이며, 이러한 테이블 관련 서버 컨트롤을 사용하는 방법도 그리 어렵지 않다는 것을 알게 되었을 것이다. 좋다. 이처럼 ASP.NET 서버 컨트롤들은 사용하기가 어렵지 않은 편이다. 여러분은 곧 이러한 컨트롤들을 모두 적절히 섞어서 종합적인 멋진 UI를 만들어 낼 수 있을 것이다. 하지만, 아직은 배운 컨트롤보다는 배워야 할 컨트롤이 더 많다. 그러니 계속해서 자주 사용되는 컨트롤들에 대해서 알아 보도록 하자. 컨트롤들은 사귀어두는 것은 든든한 친구들을 사귀는 것과 같다. 그리고, 이러한 사귐은 재미있기까지 하다. 그렇다. 정말로 재미있지 않은가? 가급적 재미있어야 한다. -_-+