'.Net Project' 카테고리의 글 목록 (18 Page)

일	월	화	수	목	금	토
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	31

2009. 11. 25. 16:12 .Net Project/SilverLight 3.0

04장) 실버라이트 레이아웃_스택패널 (StackPanel)

- StackPanel
스택 패널은 스택은 "쌓다" "쌓아 올리다" 라는 뜻을 가지고 있으며,
스택 패널은 자신에게 속한 자식 컨트롤을 수평이나 수직 방향으로 올려서 배치하는 기능을 하는
레이아웃 컨트롤 입니다.
- 화면 표시

<UserControl x:Class="RiaStackPanel.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</StackPanel>

</StackPanel>

</Grid>

</UserControl>

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

06장) 실버라이트 WrapPanel 과 StackPanel 비교 (0)	2009.11.25
05장) 실버라이트 레이아웃_그리드 (Grid) (0)	2009.11.25
03장) 실버라이트 레이아웃_캔버스 (Canvas) (0)	2009.11.25
02장) 실버라이트 기본 구조 (HelloWorld) (0)	2009.11.25
01장 SilverLight 설치 환경 구성 3.0 (0)	2009.11.02

posted by Magic_kit

2009. 11. 25. 16:07 .Net Project/SilverLight 3.0

03장) 실버라이트 레이아웃_캔버스 (Canvas)

- Canvas
가장 기본적인 레이아웃 컨트롤
화가가 자유롭게 그림을 그리듯, 절대좌표를 이용해 컨트롤을 자유롭게 배치 할 수 있는 레이아웃 컨트롤

<UserControl x:Class="RiaCanvas.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<Canvas x:Name="redCanvas" Background="Red" Width="100" Height="100"

Canvas.Left="40" Canvas.Top="40" Canvas.ZIndex="50">

</Canvas>

<Canvas x:Name="yellowCanvas"
Background="Yellow" Width="100" Height="100"

Canvas.Left="20" Canvas.Top="20" Canvas.ZIndex="1">

</Canvas>

<Canvas x:Name="BlueCanvas"
Background="Blue" Width="100" Height="100"

Canvas.Left="60" Canvas.Top="60" Canvas.ZIndex="20">

</Canvas>

</UserControl>

비하이인트 코드 페이지에서 다음과 같은 속성을 입력 가능 하다

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 300; 다음과 같이 입력 하여 속성 지정 가능

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

06장) 실버라이트 WrapPanel 과 StackPanel 비교 (0)	2009.11.25
05장) 실버라이트 레이아웃_그리드 (Grid) (0)	2009.11.25
04장) 실버라이트 레이아웃_스택패널 (StackPanel) (0)	2009.11.25
02장) 실버라이트 기본 구조 (HelloWorld) (0)	2009.11.25
01장 SilverLight 설치 환경 구성 3.0 (0)	2009.11.02

posted by Magic_kit

2009. 11. 25. 15:50 .Net Project/SilverLight 3.0

02장) 실버라이트 기본 구조 (HelloWorld)

MainPage.xaml

"HelloWorld" 출력하기

1. 프로젝트 생성 [파일] -> [새 프로젝트]
2. <TextBlock> 컨트롤 사용하여 속성을 지정하여 F5 실행 -> [웹 사이트] 실행 완료

<UserControl x:Class="HelloWorld.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<TextBlock x:Name="txtName"

Text="HelloWorld"

FontSize="20"

FontFamily="Courier New"

FontStretch="ExtraCondensed"

FontStyle="Italic"></TextBlock>

</Grid>

</UserControl>

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

06장) 실버라이트 WrapPanel 과 StackPanel 비교 (0)	2009.11.25
05장) 실버라이트 레이아웃_그리드 (Grid) (0)	2009.11.25
04장) 실버라이트 레이아웃_스택패널 (StackPanel) (0)	2009.11.25
03장) 실버라이트 레이아웃_캔버스 (Canvas) (0)	2009.11.25
01장 SilverLight 설치 환경 구성 3.0 (0)	2009.11.02

posted by Magic_kit

2009. 11. 25. 14:14 .Net Project/Jquery 1.3.2

91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.htm )

Memo.htm

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

<head>

<title>jQuery를 사용한 한줄 메모장 /title>

//[1] Ajax를 사용하기 위한 기본 설정 값

$.ajaxSetup({

type: 'post',

dataType: 'json',

contentType: "application/json; charset=utf-8"

});

//[2] 페이지 로드 또는 이벤트 처리기 등록

$(document).ready(function () {

DisplayData(); //데이터 출력 함수 호출
$('#btnAdd').click(btnAdd_Click); // 버튼 클릭시

});

//[3] 데이터 로드

function DisplayData() {

$.ajax({

url: "MemoService.asmx/GetMemos",

cache: false,

data: "{}", // "{page:0}"

success: handleHtml,

error: ajaxFailed

});

}

//[3-1]
function handleHtml(data, status) {

$('#ctlMemoList').empty();

var table = "<table
border='1'><tr><td>번호</td><td>이름</td><td>한줄메모</td><td>작성일</td></tr>";

// Microsoft Ajax

$.each(data.d, function (index, entry) {

// 날짜 형식 변경
var today = new Date(DateDeserialize(entry["PostDate"]));

var month = (today.getMonth() + 1) < 10

? "0" + (today.getMonth() + 1) : (today.getMonth() + 1);
var day = today.getDate() < 10 ? "0" + today.getDate() : today.getDate();

table += '<tr>';

table += '<td>' + entry["Num"] + '</td>';

table += '<td>' + entry["Name"] + '</td>';

table += '<td>' + entry["Title"] + '</td>';

table += '<td>' + today.getFullYear() + "-" + month + "-" + day + '</td>';

table += '</tr>';

});

table += "</table>";

$('#ctlMemoList').append(table);

}

//[3-2] Ajax 로드 실패시 에러 표시

function ajaxFailed(xmlRequest) {

alert(

xmlRequest.status + '\r\n' + xmlRequest.statusText + '\r\n' + xmlRequest.responseText);

}

//[3-3] 날짜 변환 함수

function DateDeserialize(dateStr) {

return eval('new' + dateStr.replace(/\//g, ' '));

}

//[4] 데이터 저장

function btnAdd_Click() {

//[a] 데이터 받기

var name = $('#txtName').val();

var email = $('#txtEmail').val();

var title = $('#txtTitle').val();

//[b] 유효성 검사 : 또 다른 플러그인 검색

if (name.length == 0) {

alert("이름을 입력하시오 "); return;

}

//[c] JSON 형태로 넘길 문자열 묶기

var postVal = "{name:\"" + name + "\", email:\"" + email + "\", title:\"" + title + "\"}";

//[d] Ajax 전송

$.ajax({

url: "MemoService.asmx/AddMemo",

data: postVal,

success: function (data) {

alert('저장완료');

$('#txtName').val('');

$('#txtEmail').val("");

$('#txtTitle').val('');

}

});

}

</script>

</head>

<body>

<h3>한줄메모장 </h3>

이름 : <input id="txtName" type="text" />

이메일: <input id="txtEmail" type="text" />

메모 : <input id="txtTitle" type="text" />

<hr />

<div id="ctlMemoList">여기에 메모리스트 출력</div>

</body>

</html>

MemoBasic.htm

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

<head>

<title>jQuery를 사용한 메모장 출력</title>

$.ajaxSetup({

type: 'post',

dataType: 'json',

contentType: "application/json; charset=utf-8"

});

$(document).ready(function () {

DisplayData(); });

function DisplayData() {

$.ajax({

url: "MemoService.asmx/GetMemos",

cache: false,

data: "{}", // "{page:0}"

success: handleHtml,

error: ajaxFailed

});

}

function handleHtml(data, status) {

$('#ctlMemoList').empty();

var table = "<table border='1'><tr><td>번호</td><td>이름</td><td>한줄메모
</td><td>작성일</td></tr>";

$.each(data.d, function (index, entry) {

// 날짜 형식 변경

var today = new Date(DateDeserialize(entry["PostDate"]));

var month = (today.getMonth() + 1) < 10

                    ? "0" + (today.getMonth() + 1) :
                     (today.getMonth() + 1);
               var day = today.getDate() < 10 ? "0" +
                         today.getDate() : today.getDate();

table += '<tr>';

table += '<td>' + entry["Num"] + '</td>';

table += '<td>' + entry["Name"] + '</td>';

table += '<td>' + entry["Title"] + '</td>';

table += '<td>' + today.getFullYear() + "-" + month + "-" + day + '</td>';

table += '</tr>';

});

table += "</table>";

$('#ctlMemoList').append(table);

}

function ajaxFailed(xmlRequest) {

alert(

xmlRequest.status + '\r\n' + xmlRequest.statusText + '\r\n' + xmlRequest.responseText);

}

function DateDeserialize(dateStr) {

return eval('new' + dateStr.replace(/\//g, ' '));

}

function btnAdd_Click() {

var name = $('#txtName').val();

var email = $('#txtEmail').val();

var title = $('#txtTitle').val();

if (name.length == 0) {

alert("이름을 입력하시오."); return;

}

var postVal = "{name:\"" + name + "\", email:\"" +
email + "\", title:\"" + title + "\"}";

//[d] 전송

$.ajax({

url: "MemoService.asmx/AddMemo",

data: postVal,

success: function (data) {

alert('저장완료');

$('#txtName').val('');

$('#txtEmail').val("");

$('#txtTitle').val('');

DisplayData(); // 재로드 }

});

}

</script>

</head>

<body>

<h3>한줄메모장</h3>

이름 : <input id="txtName" type="text" />

이메일 : <input id="txtEmail" type="text" />

메모 : <input id="txtTitle" type="text" />

<hr />

<div id="ctlMemoList">여기에 메모리스트 출력</div>

</body>

</html>

MemoPager.htm

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

<head>

<title>jQuery를 사용한 한줄 메모장 </title>

$.ajaxSetup({

type: 'post',

dataType: 'json',

contentType: "application/json; charset=utf-8"

});

$(document).ready(function () {

DisplayData();
$('#btnAdd').click(btnAdd_Click);

});

function DisplayData() {

$.ajax({

url: "MemoService.asmx/GetMemos",

cache: false,

data: "{}", // "{page:0}"

success: handleHtml,

error: ajaxFailed

});

}

function handleHtml(data, status) {

$('#ctlMemoList').empty();

var table =

"<table border='1'><thead><tr><th>번호</th><th>이름</th><th>작성일</th></tr></thead>";

$.each(data.d, function (index, entry) {

//날짜 형식 변경

var today = new Date(DateDeserialize(entry["PostDate"]));

var month = (today.getMonth() + 1) < 10

                    ? "0" + (today.getMonth() + 1) :
                      (today.getMonth() + 1);
                var day = today.getDate() < 10 ? "0" +
                       today.getDate() : today.getDate(); // 일I

table += '<tr class="search' + entry["Num"] + '">';

table += '<td>' + entry["Num"] + '</td>';

table += '<td>' + entry["Name"] + '</td>';

table += '<td>' + today.getFullYear()
+ "-" + month + "-" + day + '</td>';

table += '</tr>';

var tt = '<div id="tooltip-layer' + entry["Num"]

+ '" style="display:none;width:200px;height:100px;'

+ 'border:1px solid gray;background-color:white;">'

+ entry["Title"] + '</div>';

$('#ctlTooltip').append(tt); //

});

table += "</table>";

$('#ctlMemoList').append(table);

//[!] 페이징 처리의 기본은 ('').pageable();

$('table:eq(0)').pageable({

limit: 2, //

                pagelimit: 10,
                started: 1
            });

$.each(data.d, function (index, entry) {

// 툴팁을 띄어보자

$(".search" + entry["Num"]).mouseover(function (e) {

$(this).mousemove(function (e) {

$(this).css("cursor", "hand");

var t = e.clientY - 15; // 상단에 표시

var l = e.clientX + 20; //

$("#tooltip-layer" + entry["Num"])

.css({ "top": t, "left": l, "position":
"absolute", "opacity": "0.8" })

.show();

});

$(".search" + entry["Num"]).mouseout(function () {

$("#tooltip-layer" + entry["Num"]).hide();

});

}

function ajaxFailed(xmlRequest) {

alert(

xmlRequest.status + '\r\n' + xmlRequest.statusText + '\r\n' + xmlRequest.responseText);

}

function DateDeserialize(dateStr) {

return eval('new' + dateStr.replace(/\//g, ' '));

}

function btnAdd_Click() {

var name = $('#txtName').val();

var email = $('#txtEmail').val();

var title = $('#txtTitle').val();

if (name.length == 0) {

alert("이름을 입하시오."); return;

}

var postVal = "{name:\"" + name + "\",
email:\"" + email + "\", title:\"" + title + "\"}";

$.ajax({

url: "MemoService.asmx/AddMemo",

data: postVal,

success: function (data) {

alert('저장완료');

$('#txtName').val('');

$('#txtEmail').val("");

$('#txtTitle').val('');

DisplayData(); // 재c 로¤I드ìa

}

});

}

</script>

</head>

<body>

이름 : <input id="txtName" type="text" />

이메일 : <input id="txtEmail" type="text" />

메모 : <input id="txtTitle" type="text" />

<hr />

</body>

</html>

MemoTooltip.htm

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

<head>

<title>jQuery를 사용한 한줄 메모장 </title>

$.ajaxSetup({

type: 'post',

dataType: 'json',

contentType: "application/json; charset=utf-8"

});

$(document).ready(function () {

DisplayData();

$('#btnAdd').click(btnAdd_Click);
});

function DisplayData() {

$.ajax({

url: "MemoService.asmx/GetMemos",

cache: false,

data: "{}", // "{page:0}"

success: handleHtml,

error: ajaxFailed

});

}

function handleHtml(data, status) {

$('#ctlMemoList').empty();

var table = "<table border='1'><tr><td>번호</td><td>이름</td><td>작성일</td></tr>";

$.each(data.d, function (index, entry) {

var today = new Date(DateDeserialize(entry["PostDate"]));

var month = (today.getMonth() + 1) < 10

? "0" + (today.getMonth() + 1) : (today.getMonth() + 1); //

var day = today.getDate() < 10 ? "0" + today.getDate() : today.getDate();

table += '<tr class="search' + entry["Num"] + '">';

table += '<td>' + entry["Num"] + '</td>';

table += '<td>' + entry["Name"] + '</td>';

table += '<td>' + today.getFullYear() + "-" + month + "-" + day + '</td>';

table += '</tr>';

var tt = '<div id="tooltip-layer' + entry["Num"]

+ '" style="display:none;width:200px;height:100px;'

+ 'border:1px solid gray;background-color:white;">'

+ entry["Title"] + '</div>';
$('#ctlTooltip').append(tt); //

});

table += "</table>";

$('#ctlMemoList').append(table);

$.each(data.d, function (index, entry) {

$(".search" + entry["Num"]).mouseover(function (e) {

$(this).mousemove(function (e) {

$(this).css("cursor", "hand");

var t = e.clientY - 15; //

var l = e.clientX + 20; //

$("#tooltip-layer" + entry["Num"])

.css({ "top": t, "left": l,
"position": "absolute", "opacity": "0.8" })

.show();

});

$(".search" + entry["Num"]).mouseout(function () {

$("#tooltip-layer" + entry["Num"]).hide();

});

}

function ajaxFailed(xmlRequest) {

alert(

xmlRequest.status + '\r\n' + xmlRequest.statusText + '\r\n' + xmlRequest.responseText);

}

function DateDeserialize(dateStr) {

return eval('new' + dateStr.replace(/\//g, ' '));

}

function btnAdd_Click() {

var name = $('#txtName').val();

var email = $('#txtEmail').val();

var title = $('#txtTitle').val();

if (name.length == 0) {

alert("이름을 입력하시오."); return;

}

var postVal = "{name:\"" + name + "\",
email:\"" + email + "\", title:\"" + title + "\"}";

$.ajax({

url: "MemoService.asmx/AddMemo",

data: postVal,

success: function (data) {

alert('저장완료');

$('#txtName').val('');

$('#txtEmail').val("");

$('#txtTitle').val('');

DisplayData(); //재로드
}

});

}

</script>

</head>

<body>

이름 : <input id="txtName" type="text" />

이메일 : <input id="txtEmail" type="text" />

메모 : <input id="txtTitle" type="text" />

<hr />

</body>

</html>

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

90장 JQueryModel 파일 업로드 jQuery + Uploadify + ASP.NET (Uploadify.htm) (0)	2009.11.25
89장 JQueryModel 로테인터 플러그인 (Rotator.htm) (0)	2009.11.25
88장 JQueryModel 카루셀 플러그인 (Carrousel.htm) (0)	2009.11.25
87장 JQueryModel 텍스트박스 자동 완성 기능(AutoComplete.htm) (0)	2009.11.25
86장 JQuerySample 헤드 클릭시 해당 정렬 (TableSorting.htm) (0)	2009.11.25

posted by Magic_kit

.Net Project & 재태크 재무 관리

calendar

Notice

Tag

Category

Recent Post

Recent Comment

Archive

My Link

'.Net Project'에 해당되는 글 538건

04장) 실버라이트 레이아웃_스택패널 (StackPanel)

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

03장) 실버라이트 레이아웃_캔버스 (Canvas)

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

02장) 실버라이트 기본 구조 (HelloWorld)

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.htm )

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

티스토리툴바

.Net Project & 재태크 재무 관리

calendar

Notice

Tag

Search

Category

Recent Post

Recent Comment

Archive

My Link

'.Net Project'에 해당되는 글 538건

04장) 실버라이트 레이아웃_스택패널 (StackPanel)

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

03장) 실버라이트 레이아웃_캔버스 (Canvas)

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

02장) 실버라이트 기본 구조 (HelloWorld)

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.htm )

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

티스토리툴바