실버라이트 3.0 개발 환경 구축

     

  1. http://silverlight.net/GetStarted/에서 아래 7 이상의 프로그램을 다운로드 받아 설치
    • Visual Studio 2008 설치
    • Visual Studio 2008 서비스 1 설치
    • Silverlight Tools for Visual Studio 2008 설치
    • Expression Blend 3.0 설치
    • Deep Zoom Composer 설치
    • Silverlight Toolkit 설치

     

  2. Visual Studio 2010
    • 가장 이상적인 Silverlight 3 개발 환경



'.NET프로그래밍 > Silverlight 3.0' 카테고리의 다른 글

실버라이트 1.0 개발  (0) 2009.11.24
수작업으로 실버라이트 배포 (RiaDeploy)  (0) 2009.11.24
Application 클래스  (0) 2009.11.24
RiaHelloWorld  (0) 2009.11.23
Silverlight란?  (0) 2009.11.20
Posted by holland14
:



 Silverlight? 

  1. 실버라이트는 웹브라우저에서 RIA 구현하기 위한 런타임 엔진이다.
    • RIA(Rich Internet Application)
    • RIA(Rich Interactive Application)

     

  2. 화려한 그래픽, 동영상 등을 웹브라우저에 표현하기 위한 모든 기술의 집합체

 

 

 

 
Silverlight 특징

     

  1. 빠르고 쉬운 설치
  2. 크로스 플랫폼
  3. DeepZoom 제공
  4. 고품질 미디어
  5. Perspective 3D
  6. WCF / Web Service 사용
  7. Out Of Browser




 

Silverlight 관련 즐겨찾기

     

  1. 공식 사이트
  2.  

  3. 마이크로소프트 사이트
  4.  

  5. 스콧 구슬리
  6.  

  7. 기타
  8.  




'.NET프로그래밍 > Silverlight 3.0' 카테고리의 다른 글

실버라이트 1.0 개발  (0) 2009.11.24
수작업으로 실버라이트 배포 (RiaDeploy)  (0) 2009.11.24
Application 클래스  (0) 2009.11.24
RiaHelloWorld  (0) 2009.11.23
실버라이트 3.0 개발 환경 구축  (0) 2009.11.23
Posted by holland14
:


 

    활용예제 : jQuery 사용한 한줄메모장

     

  1. jQuery 응용 프로그램
    • jQuery Ajax 사용해서 데이터 입출력 처리
    • Tooltip 사용하여 내용 표시
    • 기본적인 데이터 입력 출력

     

  2. 프로그램 제작 환경
    • Visual Studio 2010
    • SQL Server 2008 Express
    • ASP.NET 4.0 + Jquery 1.3.2

     

  3. 응용 프로그램 제작시 고려해야할 사항
    • 모든 것을 jQuery 만들려 하지 말자.
      • 기존 서버측 기능을 개선하는 차원에서 jQuery 사용




 

Posted by holland14
:

 

[Uploadify.htm]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>파일업로드 : jQuery + Uploadify + ASP.NET</title>

    <link href="uploadify.css" rel="stylesheet" type="text/css" />

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.uploadify.v2.1.0.js" type="text/javascript"></script>

    <script src="swfobject.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

        // Uploadify 파일 업로드 컨트롤 : Flash가 설치가 되어있어야 함

            $('#fileInput').uploadify({

                'uploader' : 'uploadify.swf', // Uploadify 컨트롤 지정

                'script' : 'Uploadify.ashx', // 서버측 스크립트, ASP.NET, ASP, PHP, JSP

                'cancelImg': 'cancel.png', // 취소 이미지

                'auto' : false, // true면 파일선택시 바로 자동으로 업로드됨

                'folder': '/Uploads', // 업로드할 폴더 : 가상디렉터리 + 업로드폴더

                // 업로드 완료시 처리 :

                //      주요 속성은 http://www.uploadify.com/documentation/ 참고

                'onComplete': function (event, queueID, fileObj, response, data) {

                    $('#lblFile').append('<a href=/WebJQuery' + fileObj.filePath + '>'

                    + fileObj.name + '</a><br>');

                }

            });

            // 버튼 클릭시 업로드

            $('#btn').click(function () { $('#fileInput').uploadifyUpload(); });

        });

    </script>

</head>

<body>

    <input id="fileInput" name="fileInput" type="file" />

    <input type="button" id="btn" value="업로드" />

    <div id="lblFile"></div>

</body>

</html>

 




-------------------------------------------------------------------------------------


 

[Uploadify.ashx]


<%@ WebHandler Language="C#" Class="Uploadify" %>

 

using System;

using System.Web;

 

public class Uploadify : IHttpHandler {

   

    public void ProcessRequest (HttpContext context) {

        // Filedata로 넘겨온 파일 값 받기

        HttpPostedFile file = context.Request.Files["Filedata"];

        // 저장할 폴더

        string targetDirectory = System.IO.Path.Combine(

        context.Request.PhysicalApplicationPath,

        context.Request["folder"].Replace("/", ""));

        // 저장할 폴더 + 파일명

        string targetFilePath = System.IO.Path.Combine(

            targetDirectory, file.FileName);

        // 파일 저장(업로드)

        file.SaveAs(targetFilePath);

 

        context.Response.Write("RedPlus");

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

 

}




-------------------------------------------------------------------------------------




[실행결과]







































Posted by holland14
:



[AutoComplete.htm]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>텍스트박스 자동 완성 기능</title>

    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.autocomplete.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var data = "ASP JSP PHP Ajax Silverlight JAVA CSS".split(' ');

            $('#search').autocomplete(data);

        });

    </script>

</head>

<body>

   

상품검색 : <input type="text" id="search" />

   

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]









Posted by holland14
:

 

[Rotator.htm]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>로테이터 플러그인</title>

    <style type="text/css">

        .divHeight { height:130px; }

    </style>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.rotator.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('#rotator1').rotator({ms:3000});

        });

    </script>

</head>

<body>

    <div id="rotator1" style="height: 130px; width: 100px; overflow: hidden; border:1px solid red;">

        <div class="divHeight">

            <img src="../../ProductImages/thumbs/BOOK-01.jpg" /><br />

            좋은 책

        </div>

        <div>

            <img src="../../ProductImages/thumbs/COM-01.jpg" /><br />

            좋은 컴퓨터

        </div>

    </div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]













Posted by holland14
:

 

[Carrousel.htm]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>카루셀 플러그인</title>

    <link href="jquery.infinite-carousel.css" rel="stylesheet" type="text/css" />

    <link href="periscope-theme-switcher.css" rel="stylesheet" type="text/css" />

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.infinite-carousel.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('#slider-stage').carousel('#previous', '#next');

        });

    </script>   

</head>

<body>

    <div id="sliderBloc">

        <a id="previous">이전</a>

        <div style="" id="slider-stage">

            <div style="width: 512px;" id="slider-list">

                <a class="theme">

                    <img src="../../ProductImages/thumbs/BOOK-01.jpg" alt="좋은책" height="120" width="120" />

                    <span class="nameVignette">좋은책</span>

                    <span class="changeTheme">조은책</span>

                </a>

                <a class="theme">

                    <img src="../../ProductImages/thumbs/COM-01.jpg" alt="좋은컴퓨터" height="120" width="120" />

                    <span class="nameVignette">좋은컴퓨터</span>

                    <span class="changeTheme">조은컴퓨터</span>

                </a>

            </div>

        </div>

        <a id="next">다음</a>

    </div>

</body>

</html>

 




-------------------------------------------------------------------------------------

 


[실행결과]












Posted by holland14
:



[TableSorting.htm]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>테이블의 헤더 클릭시 해당 열 정렬</title>

    <style type="text/css">

        .odd { background-color:Silver; }

        .even { background-color: Aqua; }

    </style>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        //[!] 배경색 변경을 jQuery 플러그인으로 업그레이드하자.

        $.fn.alternateRowColors = function() {

            $('tbody tr:odd', this).removeClass('even').addClass('odd');

            $('tbody tr:even', this).removeClass('odd').addClass('even');

            return this;

        };

 

        $(document).ready(function() {

            $('table.tbl').each(function() {

                var $table = $(this);

                // 플러그인 호출

                $table.alternateRowColors();

 

                // 테이블 헤더 정렬

                $('th', $table).each(function(column) {

                    // 헤더의 CSS 클래스가 sort-alpha로 설정되어있다면, ABC순으로 정렬

                    if ($(this).is('.sort-alpha')) {

                        // 클릭시 정렬 실행

                        var direction = -1;

                        $(this).click(function() {

                            direction = -direction;

                            var rows = $table.find('tbody > tr').get(); // 현재 선택된 헤더관련 행 가져오기

                            // 자바스크립트의 sort 함수를 사용해서 오름차순 정렬

                            rows.sort(function(a, b) {

                                var keyA = $(a).children('td').eq(column).text().toUpperCase();

                                var keyB = $(b).children('td').eq(column).text().toUpperCase();

 

                                if (keyA < keyB) return -direction;

                                if (keyA > keyB) return direction;

                                return 0;

                            });

                            //정렬된 행을 테이블에 추가

                            $.each(rows, function(index, row) { $table.children('tbody').append(row) });

                            $table.alternateRowColors(); // 재정렬

                        });

                    }

                }); // end table sort

            }); // end each()

        });   // end ready()

    </script>

</head>

<body>

    <table class="tbl" border="1">

        <thead>

            <tr>

                <th>&nbsp;</th>

                <th class="sort-alpha">제목</th>

                <th class="sort-alpha">저자</th>

                <th class="sort-alpha">출간일</th>

                <th class="sort-alpha">가격</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td><img src="../../ProductImages/thumbs/BOOK-01.jpg" /></td>

                <td>쉽게 배우는 ASP.NET 2.0</td>

                <td>박용준</td>

                <td>2008</td>

                <td>20000</td>

            </tr>

            <tr>

                <td><img src="../../ProductImages/thumbs/COM-01.jpg" /></td>

                <td>.NET Bible</td>

                <td>박용준</td>

                <td>2003</td>

                <td>25000</td>

            </tr>

            <tr>

                <td><img src="../../ProductImages/thumbs/HARDWARE-01.jpg" /></td>

                <td>정보처리기능사</td>

                <td>박용준</td>

                <td>2000</td>

                <td>18000</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

 




-------------------------------------------------------------------------------------

 


[실행결과]



















 


 

Posted by holland14
:

 

[TablePlugIn.htm]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>짝수행과 홀수행의 배경색 변경 플러그인</title>

    <style type="text/css">

        .odd { background-color:Silver; }

        .Even { background-color: Aqua; }

    </style>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        //[!] 배경색 변경을 jQuery 플러그인으로 업그레이드하자.

        $.fn.alternateRowColors = function() {

            $('tbody tr:odd', this).removeClass('even').addClass('odd');

            $('tbody tr:even', this).removeClass('odd').addClass('even');

            return this;

        };

 

        $(document).ready(function() {

            $('table.tbl').each(function() {

                var $table = $(this);

                // 플러그인 호출

                $table.alternateRowColors();

            });

        });

    </script>

</head>

<body>

    <table class="tbl" border="1">

        <thead>

            <tr>

                <th>&nbsp;</th>

                <th>제목</th>

                <th>저자</th>

                <th>출간일</th>

                <th>가격</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td><img src="../../ProductImages/thumbs/BOOK-01.jpg" /></td>

                <td>쉽게 배우는 ASP.NET 2.0</td>

                <td>박용준</td>

                <td>2008</td>

                <td>20000</td>

            </tr>

            <tr>

                <td><img src="../../ProductImages/thumbs/COM-01.jpg" /></td>

                <td>.NET Bible</td>

                <td>박용준</td>

                <td>2003</td>

                <td>25000</td>

            </tr>

            <tr>

                <td><img src="../../ProductImages/thumbs/HARDWARE-01.jpg" /></td>

                <td>정보처리기능사</td>

                <td>박용준</td>

                <td>2000</td>

                <td>18000</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

 



-------------------------------------------------------------------------------------

 

[실행결과]








Posted by holland14
:



[TableEvenOdd.htm]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>짝수행과 홀수행의 배경색 변경</title>

    <style type="text/css">

        .odd { background-color:Silver; }

        .Even { background-color : Aqua; }

    </style>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('table.tbl tbody tr:odd').addClass('odd');

            $('table.tbl tbody tr:even').addClass('Even');

        });

    </script>

</head>

<body>

    <table class="tbl" border="1">

        <thead>

            <tr>

                <th>&nbsp;</th>

                <th>제목</th>

                <th>저자</th>

                <th>출간일</th>

                <th>가격</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td><img src="../../ProductImages/thumbs/BOOK-01.jpg" /></td>

                <td>쉽게 배우는 ASP.NET 2.0</td>

                <td>박용준</td>

                <td>2008</td>

                <td>20000</td>

            </tr>

            <tr>

                <td><img src="../../ProductImages/thumbs/COM-01.jpg" /></td>

                <td>.NET Bible</td>

                <td>박용준</td>

                <td>2003</td>

                <td>25000</td>

            </tr>

            <tr>

                <td><img src="../../ProductImages/thumbs/HARDWARE-01.jpg" /></td>

                <td>정보처리기능사</td>

                <td>박용준</td>

                <td>2000</td>

                <td>18000</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

 



-------------------------------------------------------------------------------------


 

[실행결과]




 


 

Posted by holland14
: