2008년 11월 19일 수요일

Flex Effect 샘플

요즘 한창 Flex / Air 를 보고 있습니다.

그래서 Flex의 장점 RIA를 활용할 수 있는

Flash Effect 를 샘플로 만들어 놓았습니다.

샘플로 만들어 놓으면 나중에 사횽하게 될때 쉽게 찾아서, 어떤 Effect 를 쓸지

쉽게 생각해 내고 적용 할수 있겠죠.

Flex 에 어떤 Effect 가 있는지 궁금하신 분들은 아래 샘플을 보시면 될듯 합니다.


[Flash] /flex/Flex Effect.swf



ps. 이미지 사진과 사운드 예제 파일이 저작권 혹은 삭제 요청시 다른것으로 교체 하겠습니다.

2008년 11월 13일 목요일

JQuery 를 이용한 html와 script 와 분리


요새 prototype.js 를 이용해, javascript 를 깔끔하게, 효율적으로

만드는 방안으로 생각 하고 있는 도중, JQuery 를 알게 되었다.

그런데 이게, JQuery 예제를 이용하던 도중 이것을 이용하면,

디자이너가 HTML를 넘기면 id 및 name 를 세팅하여, 넘겨주면,

스크립트 작업 후 개발을 할때, 디자인이 수정되어도, 가공된 페이지에 변경 없이 작업을 할수 가 있다고 생각이

들었다. Greate!!

물론 prototype 를 이용해 할수도 있는데 흠.. JQuery 를 이용하면 좀더 효율 적으로 할 수 있다.




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Untitled Document</title>

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

 $(document).ready(
  function (){
   $("#textcubeLink").click(
    function(){
     alert("empas image click");
    }
   ).css("cursor", "pointer");
   
   $("#blogLink").click(
    function(){
     location.href = "http://taesuz.net/tt/";
    }
   ).css("cursor", "pointer");
   
   

  }
 
 
 );

</script>

<style type="text/css">
    .links { cursor: pointer; }
 </style>

</head>

<body>

<a id="blogLink">taesuz.net 링크</a>
<br />
<br />
<img src="http://taesuz.net/tt/skin/ReinerSchwarzKoreanisch/images/textcube.jpg" id="textcubeLink" />

</body>
</html>


보시다 시피, 분리가 될수 있다. html 디자인은 그대로 있지만, 링크나, 스크립트 제어 부분이 완전히 분리되어있다.

좀더 공부 하면, 보다 깔금하게 효율적으로 분리가 되어 제어 가능하지 않을까?

이 얼마나 알흠다운가 ㅎㅎ

앞으로 효율적으로 활용해 봐야겠다.

2008년 11월 10일 월요일

팝업창에서 부모 창으로 포커스(Internet Explorer, FireFox)


A.jsp 페이지에서, C.jsp 를 팝업으로 띄워야 하는데,

문제는 팝업을 띄운후 부모창에 포커스를 줘야 한다..

근데 Internet Explorer 에서는 다음과 같이 해결 가능하다.


window.onload = function init(){
    var win = window.open("C.jsp", "c");

    self.focus();      

}



그러나 window.focus() 가 FireFox에서는 지원이 안된다..

구글링을 해봤지만 답 없음.. 그리하여.. 꽁수를 찾아 냈다.

window.blur() 옵션은 먹기에 window.blur()를 이용하였다.

우선 IE에서는 제대로 되는 위에 소스를 A에 박아주고,

B더미 페이지를 만들고, B에서 blur()를 쓴후 C로 이동하는 방법..

대략 3시간 헤맨듯.. ㅡㅡ;

저같은 상황에 도움이 되기를....




A.jsp


window.onload = function init(){
    var win = window.open("B.jsp", "b");

    self.focus();      

}





 

B.jsp

<body onLoad="self.blur(); location.href='C.jsp';">


 

2008년 10월 13일 월요일

HTTP 오류 405 - 이 페이지에 액세스하는 데 사용한 HTTP 동사가 거부되었습니다.


이 페이지를 표시할 수 없습니다.

액세스를 시도하는 데 잘못된 메서드(HTTP 동사)를 사용했기 때문에 찾으려는 페이지를 표시할 수 없습니다.

다음을 시도하십시오.

  • 이 요청이 허용되어야 하면 웹 사이트 관리자에게 문의하십시오.
  • 브라우저의 주소 표시줄에 표시된 웹 사이트 주소의 철자와 형식이 정확한지 확인하십시오.

HTTP 오류 405 - 이 페이지에 액세스하는 데 사용한 HTTP 동사가 거부되었습니다.
IIS(인터넷 정보 서비스)


기술 정보(지원 인력용)

  • Microsoft 고객기술지원부로 이동하여 HTTP와 405이라는 단어로 제목을 검색하십시오.
  • IIS 관리자(inetmgr)에서 액세스할 수 있는 IIS 도움말을 열어 응용 프로그램 매핑 설정, 웹 사이트 권한 설정을 통한 사이트 보안 및 사용자 지정 오류 메시지 항목을 검색하십시오.


위와 같은 오류시에.. IIS 6.0 기준,

IIS 관리에 서버 속성에서  ->  홈 디렉터리  ->  구성  ->  추가 
-> 실행파일 경로는 asp 처리기나 html 처리기로 그리고 확장자는 .xml


기본으로 되어있지 않은 듯? 웹으로 직접 접근은 가능하지만,

플래시에서 접근하면 이러한 오류가 발생시 위와 같이 조치 하면 됩니다. :)


2008년 10월 8일 수요일

2008년 9월 24일 수요일

Adobe Flash CS4 Professinol.. 간단한 사용 소감..

오늘 부로 Adobe CS4 가 출시 되었습니다.

어둠의 경로로 구하여..

한 10분정도 둘러 보았습니다.

저는 액션 스크립터도 아니며, 플래셔도 아닙니다.

그러나, 약간의 스크립트를 다룰줄 알고, 업무에 많이 쓰이므로..

새로운 Adobe CS4에 관심이 많았습니다.

사용자 삽입 이미지


우선 잠깐 사용해본 소감이..


3D를 쉽게 잡을 수 있습니다..

회사에 디자이너나 모션을 하시는 분들이 보시고 감탄을 남발하시더군요..

저도 혼자 해봤지만 3D모션으로 움직임 정도는 간단하게 구현이 되는군요..

다만 AS 3.0으로 구현만 가능합니다..



사용자 삽입 이미지











그리고 위 스크린샷과 같이 전체적으로 모습이 깔끔해졌습니다.



3D가 이렇게 손쉽게 구현 되는걸 보니.. 이 업계에 큰 파장이 오지 않을까..

조심스레 기대 해보면서, 간단한 3D로 구현한 샘플 소스 올립니다.

Flash Player 10 에서 동작 합니다.

Flash Player 10 Download
http://labs.adobe.com/downloads/flashplayer10.html


[Flash] /tt/attachment/1092875689.swf


2008년 8월 12일 화요일

JSP, AJAX, Prototype, JSON, XML을 이용한 로그인 처리..


JSP, AJAX, Prototype, JSON을 이용한 로그인 처리.. 라고 타이틀은 지었지만,

이름 만큼 대단한 예제는 아니다.. 다만, 위의 언어들을 이용해서 만든 Refresh 없는 로그인 처리이다.

방식은 로그인 체크가 필요한 버튼이나 어떠한 행위가 이루어 질때, checkLogin() 을 호출.

loginCheck.jsp 를 불러온다. loginCheck.jsp 에는 JSON 타입으로, 세션체크를 하여, 로그인 여부를 판별한다.

checkLogin() -> loginCheck.jsp (세션 체크 후 JSON 생성) -> resultProc() 에서 처리

위와 같은 방식이 가능한 것은 브라우져의 세션은 현재 띄우고 있는 브라우져의 부모나 자식창에 세션이 상속되기

때문에 기존에 iFrame 으로 작업을 했으나, 새로고침을 해야 하는 번거로움이 있었다. 그러나 이방식은

새로고침이 필요없다.

우선, 로그인 처리를 할 페이지를 만들어 준다.

로그인 체크를 위핸 javascript 메소드를 만들어 준다. 이때, prototype.js 가 include 되어있어야 한다.


main.html
    [code]
    function checkLogin()
    {
    var url = './loginCheck.jsp?timeStamp=' + new Date().getTime();

     var myAjax = new Ajax.Request(
         url,
        {
           onComplete: resultProc,
           onException: onException
        });
     }

    function resultProc(req) {

        //JSON 방식
        var result = eval("(" + req.responseText + ")");
      
        if( result.data.result == 1 ){
            alert("로그인 되어있음");
           
        } else {
            goLogin();
       
        }
}
[/code]


loginCheck.jsp (JSON)
[code]
<%@ page contentType="text/plain; charset=euc-kr" %>
<%
String MEMBER_ID = "";
String result = "2";

if( session.getAttribute("MEMBER_ID")!=null ){
    MEMBER_ID = session.getAttribute("MEMBER_ID").toString();
    result = "1";
}

%>

{
   data: {
        result: '<%=result %>',
        memberid: '<%=MEMBER_ID %>'
       
    }
}
[/code]





위 방식을 xml 을 로드해서 처리 하려면 아래와 같이 바꾸면 된다.




main.html
[code]
    function resultProc(req) {
        var xmlDoc = req.responseXML;
        var result = xmlDoc.getElementsByTagName("result")[0].firstChild.nodeValue;
        console( result );
    }
[/code]


loginCheck.jsp (XML)
[code]
<?xml version="1.0" encoding="utf-8" ?>
<%@ page contentType="text/xml; charset=utf-8" %>
<%
String MEMBER_ID = "";
String result = "2";

if( session.getAttribute("MEMBER_ID")!=null ){
    MEMBER_ID = session.getAttribute("MEMBER_ID").toString();
    result = "1";
}

%>

<node>
    <result><%=result %></result>
</node>
[/code]


JSP로 XML를 파싱할떄 주의!! 꼭 위의 빨간 색 부분의 contentType 를 지정해 주어야 제대로 인식한다..

이것때문에 30분간 뻘짓.. -_-;