'개발도 하냐?' 카테고리의 글 목록 (7 Page)

오랜만에 웹표준이란 태그로 북마크해둔것을 들어가서 정리했습니다.
웹사이트를 개발하기전에 한번씩 읽어본 후 해보시기 바랍니다.

0. DTD, Charset 공통 정의

1. 의미있는 구조적인 HTML 구성
-html 작성을 위한 가이드라인 : http://html.nhndesign.com/html_guideline
-자주발생되는 오류에 대한 가이드 : http://html.nhndesign.com/html_validation_guideline

2. Global, Layout CSS 제작
-CSS제작을 위한 가이드라인 : http://html.nhndesign.com/css_guideline

3. 접근성있는 Navigation 제작(키보드접근확인)

4. Section CSS 제작

5. 브라우저 호환성 테스트

6. 접근성 준수지침 검토

7.웹표준코딩의 장점 예
- TABLE VS DIV : http://www.thlife.net/34

8. table 에 th를 사용한 예제 : http://kukie.net/resources/design/using_th/using_th_table.html

9. css를 이용한 레이아웃의 사용 예 : http://naradesign.net/open_content/reference/layout/

10. 웹표준 준수를 통한 이익 : http://kukie.net/resources/benefits/index.htm

11. 드림위버에서 제목표기 단축키 : 제목표기하기 (단축키 ctrl+1 ~ ctrl+6)
- 아래의 CSS를 만들어서 테스트해보자 (ctrl+3)
- h3 {padding:8px 0 5px 35px; background:#EEE url(h3_ bullet.gif) no-repeat 5px center; border-bottom:1px solid #CCC }

12. 드림위버를 이용한 접근성 높은 테이블 제작 : http://naradesign.net/wp/2006/09/14/63/

13. 드림위버를 이용한 ‘Markup+CSS’ 브라우저 호환성 검사 : http://naradesign.net/wp/2006/09/28/75/

14. 특수문자 및 HTML Spacial Entities. : http://naradesign.net/wp/2006/10/30/86/

15. 웹접근성을 준수하는 사이트 제작 템플릿의 예 : http://db.garada.co.cc/html/form.htm

저작자표시

'개발도 하냐?' 카테고리의 다른 글

JAVA Application 한글깨짐 해결 (0)	2009.12.03
java 데몬형태 프로그램 작성시 서버소켓을 사용하는 shutdown 패턴 (0)	2009.12.02
Cross Domain Script 해결법 (0)	2009.12.01
HTML vs XHTML? (0)	2009.12.01
웹표준 가입폼 (0)	2009.11.30

익스플로러 5.5(?) 이후 부터는 스크립트로 server1.abc.com 과 live.abc.com 간의 상호 도메인이 다른 프레임이나 윈도우의 document에 관련된 작업을 시도하면 보안에러가 발생한다.

Cross-Frame Scripting 에 대한 MS의 말..
http://msdn2.microsoft.com/en-us/library/ms533028.aspx

넷스케이프 같은 경우에는 스크립트(Signed scripts)에서 브라우져자체에 포함(?)된 클래스(netscape.security.PrivilegeManager)를 호출하여 이를 해결할 수 있다고 한다.

Signed Scripts 에 대한 Mozilla의 말..
http://www.mozilla.org/projects/security/components/signed-scripts.html

그럼에도 불구하고 다른 도메인에 대한 opener 나 parent 접근이 필요할 경우에는 JavaScript 를 통해 document.domain 을 설정해 주면된다.
<script language="javascript">
document.domain = "공통도메인명";
</script>
상호 연결 시켜야 하는 웹 페이지에 자신들의 공통된 도메인을 지정해 주면 컨트롤이 가능해진다.

만약, server1.abc.com의 open.htm이 window.open 으로 live.abc.com을 호출하고 live.abe.com 의 child.htm이 opener 로 server1.abc.com 을 접근해야 한다면
다음 스크립트를 두 페이지에 정의해 주면 되고, 스크립트는 페이지 어디에 위치해 있든지 특별한 상관은 없다.

<script language="javascript">
document.domain = "abc.com";
</script>

※ 주의, 도메인 명을 잘못 입력한 경우에는 "잘못된 인수입니다." 라는 JavaScript 오류가 발생한다.

=========================================================================================
cross frame scripting 을 해결하는 다른 방법으로는 HTA가 있다.
html페이지가 아닌 hta(html application)페이지를 만들어야 한다.

http://msdn.microsoft.com/workshop/author/hta/hta_node_entry.asp

※ 다음은 HTA에서 javascript로 iframe의 document를 참조한 예

확장자를 hta로 저장하시고 브라우저로 실행.

<html>
<head>
<title>hta cross scripting</title>
<script>
function window.onload() {
alert(myframe.document);
}
</script>
</head>
<body scroll="no">
<iframe id=myframe src="http://kin.naver.com/"></iframe>
</body>
</html>

다음에, 예를 하나 들면..
kin.naver.com을 iframe에 넣고 검색어에 "스크립트"라는 단어를 넣은 후 검색버튼을 누르게 한 HTA소스이다.

<html>
<head>
<title>hta cross scripting</title>
<script>
function window.onload() {
myframe.document.search.query.value="스크립트";
myframe.check_query();
}
</script>
</head>
<body scroll="no">
<iframe id=myframe src="http://kin.naver.com/" width=100% height=100%></iframe>
</body>
</html>

저작자표시

'개발도 하냐?' 카테고리의 다른 글

java 데몬형태 프로그램 작성시 서버소켓을 사용하는 shutdown 패턴 (0)	2009.12.02
웹접근성을 보장하는 웹개발을 위한 고려사항 (0)	2009.12.02
HTML vs XHTML? (0)	2009.12.01
웹표준 가입폼 (0)	2009.11.30
javascript AJAX 페이지로딩 (0)	2009.11.28

출처 : http://naradesign.net/wp/2006/09/05/35/

XHTML 은 HTML 을 XML 문법에 맞게 변형하여 다시 한번 공식화 한 것 뿐입니다. 따라서 HTML과는 약간의 문법적 표기에 대한 차이만 갖는데 XHTML 문법은 좀더 엄격함을 요구하고 있습니다. XHTML 1.0 스펙을 보면 별도의 XHTML 요소(엘리먼트)에 대한 규격을 소개하고 있지 않은데 이는 XHTML에서 새롭게 추가된 요소가 존재하지 않고 HTML 을 XML 규격에 맞도록 단지 재 구성 하였기 때문 입니다.
드림위버를 사용하는 경우 DTD만 바르게 설정되어 있다면 설정된 DTD의 표준 문법에 맞게 바른 XHTML을 코딩해 주지만 HTML 과 XHTML의 문법적인 차이를 알고 있을 필요는 있습니다. 한마디로 정의하면 XHTML은 HTML의 W3C 최신 표준이며 보다 엄격하고(Well Formed) 확장가능한(extensible) 형태의 HTML 입니다. 아래는 HTML과 XHTML 의 문법적인 차이점 입니다.

#
문법적으로 엄격하게 구성되어 있어야 한다.

HTML 은 종료태그가 없는 것을 허용하였으나 XHTML은 반드시 종료태그를 갖는다. HTML 은 태그의 중첩이 잘못된 것을 허용하였으나 XHTML은 잘못된 중첩을 허용하지 않는다.
#
요소와 속성은 소문자로 표기되어야 한다.

HTML 은 대소문자를 함께 사용하는 것을 허용하였으나 XHTML의 마크업 ‘요소’와 ‘속성’들은 반드시 소문자로 표기한다. 단, 속성의 ‘값’에는 대소문자 혼합 표기가 가능하다. 하지만 대소문자를 명확하게 구분하기 때문에 대문자로 구성된 ‘값’과 소문자로 구성된 ‘값’은 동일하지 않고 확실히 구별된다.
#
모든 태그는 종료태그를 갖는다.

HTML 의 경우 <p>, <td> 등의 태그에서 종료태그를 생략하는 것을 허용하였지만 XHTML 의 경우 반드시 닫아야 한다.
#
속성 ‘값’들은 항상 따옴표로 감싸주어야 한다.

HTML 의 경우 속성 값들을 따옴표로 감싸지 않는 것을 허용하였지만 XHTML 에서는 반드시 속성 ‘값’은 따옴표 안에 있어야 한다.
#
속성과 값의 단축표기를 허용하지 않는다.

HTML 에서는 속성과 속성 값의 단축표기를 허용하였으나 XHTML 에서는 단축표기 하는 것을 허용하지 않는다. <input checked> 는 <input checked="checked"> 와 같이 표기되어야 한다.
#
비어있는 태그(종료태그가 없는 태그)도 종료 되어야 한다.

HTML 에서 <br>, <hr> 과 같이 표기되는(포함하는 내용이 없이 비어있는) 태그들은 <br />, <hr /> 과 같이 표기하여 시작태그에서 곧 종료됨을 표기해 주어야 한다.
#
a, applet, frame, iframe, img, map 에서 name 속성은 다음 버전부터 지원하지 않는다.

id 와 name 을 함께 사용하던 마크업의 name 속성은 id 속성으로 교체되어야 한다. name 속성은 공식적으로 폐기하였지만 여전히 XHTML 1.x 모드까지 지원하고 있다. 하지만 다음 버전에서는 분명히 폐기된다.

참조문서

XHTML 1.0 규격(한국어) http://trio.co.kr/webrefer/xhtml/overview.html
XHTML 1.0 규격(원문) http://www.w3.org/TR/xhtml1/
HTML 및 XHTML 요소 http://www.w3schools.com/tags/default.asp

저작자표시

'개발도 하냐?' 카테고리의 다른 글

웹접근성을 보장하는 웹개발을 위한 고려사항 (0)	2009.12.02
Cross Domain Script 해결법 (0)	2009.12.01
웹표준 가입폼 (0)	2009.11.30
javascript AJAX 페이지로딩 (0)	2009.11.28
FLEX AIR - 케이웨더 날씨 모듈 (0)	2009.11.18

접근성을 고려한 가입폼의 예제

1. 폼안의 내용그룹을 표시하는 fieldset
2. dl, dt, dd 를 이용한 의미있는 구성
3. float, clear 를 이용한 디자인변경

# fieldset
* 하나의 전송양식(FORM)을 의미 단위로 그룹핑하는 요소로서, 회원가입 페이지의 전송양식을 예로 든다면 ‘필수입력, 선택입력’ 등과 같이 의미구조에 따라 전송할 내용을 그룹핑(또는 분할)

# legend
* FIELDSET 요소에 대한 캡션(또는 제목)을 제공하여 양식의 이해를 도움
* legend는 CSS로 변경하는 것이 쉽지 않은 경우가 있어 제목 요소(H1~H6)를 대신 사용할 수 있음

# DTD에따른 표현법 차이
* HTML 4.01: FIELDSET 사용시 LEGEND 요소는 반드시 첫 번째 자식(first-child)으로 마크업 되어야함
* XHTML 1.0: FIELDSET 사용시 LEGEND 요소는 생략 가능

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css" title="">
    body {
        margin: 0;
        padding: 0;
        font-size: 75%;
        line-height: 1.5em;
        font-family: "NanumGothic", "Malgun Gothic", "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;
    }
    form {
        margin: 0;
        padding: 0;
    }
    hr {
        display: none;
    }
    p, div, th, td, select, input {
        color: #333;
    }
    a:link, a:visited {
        color: #666;
        text-decoration: none;
    }
    a:active, a:hover {
        color: #000;
        text-decoration: none;
    }
    img {
        border: 0 none;
    }
    form dt {
        float:left;
        clear:both;
        width:100px;
    }
</style>
</HEAD>

<BODY>
<form action="....." method=".....">
<fieldset>
    <legend>필수항목</legend>
    <dl>
        <dt><label for="mbname">이름:</label></dt>
        <dd><input type="text" id="mbname" name="mbname" /></dd>

        <dt><label for="email">이메일:</label></dt>
        <dd><input type="text" id="email" name="email" /></dd>
    </dl>
</fieldset>
<fieldset>
    <legend>선택항목</legend>
    <dl>
        <dt><label for="address">주소:</label></dt>
        <dd><input type="text" id="address" name="address" /></dd>
    </dl>
</fieldset>
<p><input type="submit" value="확인" /></p>
</form>
</BODY>
</HTML>

저작자표시

'개발도 하냐?' 카테고리의 다른 글

Cross Domain Script 해결법 (0)	2009.12.01
HTML vs XHTML? (0)	2009.12.01
javascript AJAX 페이지로딩 (0)	2009.11.28
FLEX AIR - 케이웨더 날씨 모듈 (0)	2009.11.18
FLEX AIR 시스템트레이에 프로그램 넣기 (0)	2009.11.18

ajax 테스트를 위한 코드(IE6 확인필요)

테스트 URL : http://db.garada.co.cc/ajaxtest.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

<BODY>
<div id="result"></div>
<input type='button' onclick='ajaxload("result", "http://db.garada.co.cc/rand.php")' value='Change Text'/>
</BODY>
</HTML>

XMLHTTPRequest 객체에 대한 더많은 설명을 보려면

http://www.w3.org/TR/XMLHttpRequest/
https://developer.mozilla.org/ko/XMLHttpRequest

참고.

저작자표시

'개발도 하냐?' 카테고리의 다른 글

HTML vs XHTML? (0)	2009.12.01
웹표준 가입폼 (0)	2009.11.30
FLEX AIR - 케이웨더 날씨 모듈 (0)	2009.11.18
FLEX AIR 시스템트레이에 프로그램 넣기 (0)	2009.11.18
The value for the useBean class attribute... (0)	2009.11.16

AIR로 만든 날씨위젯

고려사항
1) 실시간 데이터 갱신
2) 설정값유지
3) effect
4) 원격지 xml 데이터의 인코딩타입
5) 배포파일의 용량 최적화

저작자표시

'개발도 하냐?' 카테고리의 다른 글

웹표준 가입폼 (0)	2009.11.30
javascript AJAX 페이지로딩 (0)	2009.11.28
FLEX AIR 시스템트레이에 프로그램 넣기 (0)	2009.11.18
The value for the useBean class attribute... (0)	2009.11.16
FLEX - 멀티파일업로드 (0)	2009.11.13

환경 : flex sdk 3.0 이상

데스크탑에서 사용하는 위젯을 만들었는데,
최소화 하면 상태표시줄에서 없애고 트레이에 아이콘을 삽입해서보여주고 트레이 아이콘을 누르면 화면같은 메뉴가 나오도록 구성.

        [Embed(source="/assets/icons/upa16.png")]
        [Bindable]
        private var Icon16:Class;

   /**
   * 마우스 오른쪽버튼 메뉴와 시스템트레이 메뉴생성
   *
   * @Author: chaeya@gmail.com
   */
        //마우스오른쪽버튼 메뉴생성, TrayMenu 생성
        private function CreateMenu():void {
            var bitmap16:Bitmap = new Icon16();

            NativeApplication.nativeApplication.icon.bitmaps =[bitmap16.bitmapData];
            var trayMenu:NativeMenu = new NativeMenu();
            var minimizeManu:NativeMenuItem = new NativeMenuItem("Minimize");
            var maximizeManu:NativeMenuItem = new NativeMenuItem("Maximize");
            var restoreMenu:NativeMenuItem = new NativeMenuItem("Restore");
            var closeMenu:NativeMenuItem = new NativeMenuItem("Close");

            minimizeManu.addEventListener(Event.SELECT, handleMenuClick);
            maximizeManu.addEventListener(Event.SELECT,handleMenuClick);
            restoreMenu.addEventListener(Event.SELECT,handleMenuClick);
            closeMenu.addEventListener(Event.SELECT,handleMenuClick);

            trayMenu.addItem(minimizeManu);
            trayMenu.addItem(restoreMenu);
            trayMenu.addItem(maximizeManu);
            trayMenu.addItem(closeMenu);

            if(NativeApplication.supportsSystemTrayIcon)
            {
                SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = trayMenu;
                SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "UPA Widget";
                SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock);
            }
            //마우스오른쪽클릭시 메뉴
            this.contextMenu = trayMenu;
        }

       public function undock(evt:Event):void {
          stage.nativeWindow.visible = true;
          stage.nativeWindow.orderToFront();
          NativeApplication.nativeApplication .icon.bitmaps = [];
       }

        private function handleMenuClick(e:Event):void
        {
            var menuItem:NativeMenuItem = e.target as NativeMenuItem;
            if(menuItem.label == "Minimize") {
                this.minimize();
                this.stage.nativeWindow.visible = false;
            }
            if(menuItem.label == "Maximize") this.maximize();
            if(menuItem.label == "Restore") {
                this.restore();
                this.stage.nativeWindow.visible = true;
            }
            if(menuItem.label == "Close") this.close();

        }

저작자표시

'개발도 하냐?' 카테고리의 다른 글

javascript AJAX 페이지로딩 (0)	2009.11.28
FLEX AIR - 케이웨더 날씨 모듈 (0)	2009.11.18
The value for the useBean class attribute... (0)	2009.11.16
FLEX - 멀티파일업로드 (0)	2009.11.13
FLEX - Grid 컴퍼넌트로 그린 달력. (0)	2009.11.11

Tomcat 5.5 에서 자바빈즈를 사용하는데 문제가 발생해서 해결하는데 3일이나 걸렸습니다. 문제의 원인은 server.xml 설정의 문제였는데요, Tomcat 4.1 까지는 정상적으로 동작한다는 것이 해결의 발목을 잡았습니다. Host 태그의 appBase 내용을 Context 태그의 docBase 로 옮기고 나니 정상적으로 동작하는 것을 확인하였습니다. server.xml 의 설정값을 어떻게 해야되는지 내용을 알기가 어렵더군요. 아무튼 이렇게 설정하고나니 모든 것이 잘 돌아가고 있습니다. server.xml 에 대해서 아주 쉽고 상냥하게 설명되어 있는 문서가 없을까요? ^^;

* 문제 발생시의 server.xml 내용



<Host name="test.com" debug="0" appBase="/opt/project/test.com/web" unpackWARs="true" autoDeploy="true">

 
<Logger className="org.apache.catalina.logger.FileLogger"
directory="logs" prefix="test.com_" suffix=".log"
timestamp="true"/>   

  <Context path="" docBase="" debug="0">

    <Resources className="org.apache.naming.resources.FileDirContext" allowLinking="true" />

  </Context>

</Host>

* 문제 해결후의 server.xml 내용



<Host name="test.com" debug="0" appBase="" unpackWARs="true" autoDeploy="true">

 
<Logger className="org.apache.catalina.logger.FileLogger"
directory="logs" prefix="test.com_" suffix=".log"
timestamp="true"/>   

  <Context path="" docBase="/opt/project/test.com/web" debug="0">

    <Resources className="org.apache.naming.resources.FileDirContext" allowLinking="true" />

  </Context>

</Host>

저작자표시

'개발도 하냐?' 카테고리의 다른 글

FLEX AIR - 케이웨더 날씨 모듈 (0)	2009.11.18
FLEX AIR 시스템트레이에 프로그램 넣기 (0)	2009.11.18
FLEX - 멀티파일업로드 (0)	2009.11.13
FLEX - Grid 컴퍼넌트로 그린 달력. (0)	2009.11.11
FLEX - XML의 내용을 배열에 넣는법 (0)	2009.11.08

Flex2 와 php 를 연동한 쓸만한 멀티 파일 업로드 예제가 있어서 소개한다.

원리는 매우 간단하다.
Flex2 는 업로드할 파일들의 선택과 업로딩 상태등의 UI 를 담당하고,
php 는 보내온 파일들을 서버로 저장한다.

업로드 역할을 맡은 서버측 스크립트는 php 뿐만 아니라 다른 언어도 가능할 듯 하다.
예제에서는 간편한 php 를 사용했다.

[upload.php]

<?php

$errors = array();
$data = "";
$success = "false";

function return_result($success,$errors,$data) {
echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
?>
<results>
<success><?=$success;?></success>
<?=$data;?>
<?=echo_errors($errors);?>
</results>
<?
}

function echo_errors($errors) {

for($i=0;$i<count($errors);$i++) {
?>
<error><?=$errors[$i];?></error>
<?
}

}

switch($_REQUEST['action']) {

case "upload":

$file_temp = $_FILES['file']['tmp_name'];
$file_name = $_FILES['file']['name'];

$file_path = $_SERVER['DOCUMENT_ROOT']."/myFileDir";

//checks for duplicate files
if(!file_exists($file_path."/".$file_name)) {

//complete upload
$filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);

   if(!$filestatus) {
   $success = "false";
   array_push($errors,"Upload failed. Please try again.");
   }

}
else {
$success = "false";
array_push($errors,"File already exists on server.");
}

break;

default:
$success = "false";
array_push($errors,"No action was requested.");

}

return_result($success,$errors,$data);

?>

mxml 소스 : 예제화면에서 마우스우클릭->view source

예제 : http://weblog.cahlan.com/files/file_uploads/FileUpload.html
출처 : http://weblog.cahlan.com

저작자표시

'개발도 하냐?' 카테고리의 다른 글

FLEX AIR 시스템트레이에 프로그램 넣기 (0)	2009.11.18
The value for the useBean class attribute... (0)	2009.11.16
FLEX - Grid 컴퍼넌트로 그린 달력. (0)	2009.11.11
FLEX - XML의 내용을 배열에 넣는법 (0)	2009.11.08
웹로직 DB 접속설정 (0)	2009.11.04

FLEX 위젯을 만드는데
사이즈가 너무커서 임으로 달력을 그려서 넣을 일이 생겨서 하나 만들었다.
그리드 로우 추가부분이 이상해서 검토필요.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="130" initialize="init()">
<mx:Script>
    <![CDATA[
        import mx.states.SetStyle;
            [Bindable]
            private var _txtYearMonth:String=null;        //달력에 보이는 year-month 설정

            private var _calDate:Date = new Date();        //현재 달력의 날짜 (년, 월) 참조 가능
            private var _startDay:uint;                    //1일이 시작하는 날짜의 요일 (0:일, 1:월 ... 6:토)
            private var _endDate:uint;                    //해당 달의 마지막 날짜

            private const PREV:String = "move.previous"; //달력 진행 방향
            private const NEXT:String = "move.next";
            private const CELL_WIDTH:uint = 30;        //요일 셀 설정
            private const CELL_HEIGHT:uint = 14;

            private const CELLTYPE_MASK:uint            = 0x1111;    //요일 타입 설정 & | 연산자를 통해 마스킹 처리
            private const CELLTYPE_BLANK:uint            = 0x0000;    //0
            private const CELLTYPE_SAT:uint                = 0x0100;    //256
            private const CELLTYPE_SUN:uint                = 0x1000;    //4096

            private function init():void{
                drawCalendar(_calDate);
            }
            /**
            * 달력을 이동한다
            * @param direction 이동방향 (PREV, NEXT)
            * */
            private function moveMonth(direction:String):void{

                switch(direction){
                    case PREV:
                        _calDate.setMonth(_calDate.getMonth()-1);
                    break;
                    case NEXT:
                        _calDate.setMonth(_calDate.getMonth()+1);
                    break;
                }
                //월을 받아서 달력그리기
                drawCalendar(_calDate);
            }
            /**
            * 달력 년월을 설정한다.
            * @txtYearMonth txtYearMonth 날짜 ex) 2009.03
            * */
            public function set txtYearMonth(txtYearMonth:String):void{
                this._txtYearMonth = txtYearMonth;
            }

            /**
            * 그리드 내부 값 삭제하기
            * */
            private function initGrid():void
            {
                while(true)
                {
                    //첫번째 자식은 요일표시 제목이기때문에 삭제 안함
                    if(viewGrid.numChildren > 1)
                    {
                        viewGrid.removeChildAt(viewGrid.numChildren-1);
                    }
                    else break;
                }

                //타이틀 변경 : 변경된 년월을 그려준다.
                drawTitle();
            }
            /**
            * 변경된 년월을 그려준다.
            * */
            private function drawTitle():void{
                _txtYearMonth = _calDate.fullYear + "." + (_calDate.month+1) ;
            }
            /**
            * GridRow 생성 : 1주일 - GridRow 스타일 설정
            * */
            private function getGridRow():GridRow
            {
                var item:GridRow = new GridRow();

                item.percentWidth = 100;
                item.height = 14;

                return item;
            }
            /**
            * GridItem 생성 : 1일 - GridItem 내부 Label 스타일 설정
            * @param row 행 0부터 시작함.
            * @param col 열 0부터 시작함.
            * */
            private function getGridItem(row:uint, col:uint):GridItem
            {
                var itemType:uint ;                    //아이템 타입
                var startCnt:uint = _startDay;
                var inputCnt:uint = row + (col*7);

                var calYear:uint = _calDate.fullYear;
                var calMonth:uint = _calDate.month;
                var calDate:uint = inputCnt - startCnt + 1;
                var calDay:uint = _calDate.day;

                //입력 범위 밖에 있는 값들 ...
                if(startCnt > inputCnt || inputCnt > (_startDay+_endDate-1) ) {
                    itemType = CELLTYPE_BLANK;
                    calDate = 0;    // 범위 밖(오류) : 날짜를 0으로 강제 셋팅 해준다.
                }
                else{
                    itemType = getCellType(new Date(calYear,calMonth,calDate));    //row는 요일과 동일
                }

//                trace("itemType : "+itemType);

                //itemType 에 따른 Grid
                var gridItem:GridItem = drawGridItem(itemType,calDate);
                return gridItem;
            }
            /**
            * 요일에 대하여 셀의 타입을 반환한다.
            * @date 확인하고자 하는 날짜
            * */
            private function getCellType(date:Date):uint
            {
                var yy:uint = date.fullYear;
                var mm:uint = date.month+1;    //월은 0 부터 시작하므로 +1 처리
                var dd:uint = date.date;
                var day:uint = date.day;    //0 : sun, 1 : mon ... , 6 : sat

                var cellType:uint = CELLTYPE_BLANK;
                if(day==0) cellType+= CELLTYPE_SUN;        //요일 정보 추가하기
                if(day==6) cellType+= CELLTYPE_SAT;

                return cellType;
            }
                                /**
            * 그리드 아이템 내부에 들어가는 내용을 그려준다.
            * @param type 그리드 타입
            * @param date 날짜 (0 : 범위 밖 날짜)
            * */
            private function drawGridItem(type:uint, date:uint):GridItem{
                var gridItem:GridItem = new GridItem();
                gridItem.width = CELL_WIDTH;
                gridItem.height = CELL_HEIGHT;
                gridItem.percentHeight = 100;
                gridItem.percentWidth = 100;
                gridItem.setStyle("textAlign","center");
                gridItem.setStyle("fontWeight","bold");


                //레이블 설정
                var lbDate:Label = new Label();
                if(date==0) lbDate.text = "";
                else lbDate.text = String(date);

                if((type & CELLTYPE_SAT)== CELLTYPE_SAT){                //날짜 - 토요일
                    //lbDate.SetStyle("color", "blue");
                }
                if((type & CELLTYPE_SUN)== CELLTYPE_SUN){                //날짜 - 일요일
                    //lbDate.SetStyle("color", "red");
                }

                //그리드안에 LAbel 삽입
                gridItem.addChild(lbDate);

                return gridItem;
            }
            /**
            * 달력을 그려준다.
            * @param date 달력을 그리고자 하는 년월
            * */
            private function drawCalendar(date:Date):void{
                var tmpDate1:Date = new Date(date.fullYear,date.month,1);
                var tmpDate2:Date = new Date(date.fullYear,date.month+1,1);
                tmpDate2.setDate(tmpDate2.getDate()-1);

                _startDay = tmpDate1.getDay();    //1일이 시작하는 날짜의 요일 (0:일, 1:월 ... 6:토)
                _endDate = tmpDate2.getDate();    //해당 달의 마지막 날짜

                //그리드 초기화 : 그리드 내부에 존재하는 모든 아이템을 제거한다.
                initGrid();

                //내부 값 삽입
                for(var i:uint=0;i<6;i++){    //6주를 그려 줄 수 있도록 구성한다. ex) (4)x7 + (1)x1 + (1)x2 = 6주
                    var tmpGridRow:GridRow = getGridRow();
                    for(var j:uint=0;j<7;j++){    //1주일은 7일 임
                        var tmpGridItem:GridItem = getGridItem(j,i);
                        tmpGridRow.addChild(tmpGridItem);
                    }
                    viewGrid.addChild(tmpGridRow);
                }

            }
    ]]>
</mx:Script>
    <mx:HBox x="0" y="0" width="100%" horizontalAlign="center" height="20">
        <mx:Button label="<" click="moveMonth(PREV)" width="22" height="20" icon="@Embed(source='../assets/button/LEFT_ARROW.png')" buttonMode="true" id="PrevBtn"
            toolTip="Prev Month"/>
        <mx:Text text="{_txtYearMonth}" fontSize="12" textAlign="center" id="YearMonth" height="20"/>
        <mx:Button label=">" click="moveMonth(NEXT)" width="22" height="20" icon="@Embed(source='../assets/button/RIGHT_ARROW.png')" buttonMode="true" id="NextBtn"
            toolTip="Next Month"/>
    </mx:HBox>
    <mx:Canvas x="0" y="20" width="100%" height="109" fontFamily="Arial" fontSize="10" fontWeight="normal">
        <mx:Grid width="150" height="109" horizontalGap="1" horizontalAlign="right" verticalGap="1" verticalAlign="middle" id="viewGrid" verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:GridRow width="100%" height="100%">
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="S" color="#FF0713" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="M" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="T" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="W" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="T" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="F" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="S" color="#0118F8" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>
    </mx:Canvas>


</mx:Canvas>

저작자표시

'개발도 하냐?' 카테고리의 다른 글

The value for the useBean class attribute... (0)	2009.11.16
FLEX - 멀티파일업로드 (0)	2009.11.13
FLEX - XML의 내용을 배열에 넣는법 (0)	2009.11.08
웹로직 DB 접속설정 (0)	2009.11.04
자동화 빌드도구 ANT (0)	2009.11.04

오픈비 : 삽질은없다