'프로그래밍'에 해당되는 글 61건

  1. 2008/06/18 만만치않은 UI 프로그래밍 (4)
  2. 2008/06/18 [액션스크립트 + UI] 다이얼로그 설계
  3. 2008/06/09 [프로그래밍] 변수이름만 잘지어도 50%는 먹고 들어간다 (3)
  4. 2008/05/26 [Flex] Application 에 스크롤바 생기게하기
  5. 2008/05/22 ActionScript2.0 컴포넌트 제작
  6. 2008/05/22 [metaWeblog] metaWeblog.newPost 사용법
  7. 2008/05/15 [jQuery] 초간단하게 만드는 multi select
  8. 2008/05/06 [Flex] sort()의 option 사용하기
  9. 2008/05/06 [Flex] measuredWidth, measuredHeight 에 대한 이해
  10. 2008/05/02 [box2d] ApplyForce와 ApplyImpulse 의 차이점
2008/06/18 12:20

만만치않은 UI 프로그래밍

 
사용자 삽입 이미지

PMP에 들어갈 모듈중 하나인 "파일브라우저" 하나를 구현하는데 벌써 클래스만 20개가 다되간다.
앞으로 구현해야할 모듈이 6개는 더되는데...
그래도 일단 파일브라우저 하나는 어느정도 끝이보이는지라... 중간 작업물을 올려본다.
그리고.. 몇가지 골치아팠던 부분...

1. Native c/c++ 와 통신을 하는지라 동기화를 철저히 해야했다.
    Native c/c++ 에서 던져주는 데이타들이 이벤트 기반이기때문에(block방식이 아님) 동기화에 상당히 많은 신경을 써야했다. 객체의 라이프사이클을 철저하게 관리해서 이 난제를 극복했다. 즉, 객체의 초기화와 그 이후의 행동에 대해서 철저하게 분리하여 프로그래밍 하는것이다. 또한 각 기능별로 매니저 클래스를 둠으로써 코드들을 깔끔하게 분리할 수 있었다. CDialogMgr, CFbMgr이 매니저 클래스이다.
매니저 클래스에서는 주로 Native 함수를 호출하고, 데이타를 전달받아 스크립트단 버퍼에 채워넣는 일을 한다.
만약 이러한 코드들이 매니저클래스없이 한클래스안에 묶여져있었다면 코드가 난잡해져서 가독성이 현저하게
떨어졌을 것이다.

2. 스크롤바.
    파일브라우저에서 리스들은 페이지단위로 스크롤 되어야하기떄문에 스크롤바또한 이것에 맞춰져야했다.
"스냅"(딱딱 달라붙는 듯한효과)방식으로 스크롤바를 만들었다.리스트가 갱신될때마다 총 페이지수를 구한후
스크롤바의 reInit(numPages) 함수를 호출하여 스크롤바또한 리프레쉬를 시켜준다.
리스트의 총페이지 수만큼 스크롤바의 스냅 포지션의 수가 정해진다. 이 스냅포지션은 arrPos라는 배열에 할당되며 사용자가 스크롤할때마다 arrPos의 포지션값중 가장 가까운 값을 찾아 그 위치로 스냅하게된다.
스크롤이벤트가 발생되면 스크롤바는 이벤트를 발생시켜 파일브라우저 리스트에 타겟 페이지넘버를 넘겨준다.
파일브라우저는 넘겨받은 타겟 페이지넘버를 가지고 보여져야할 파일객체의 시작인덱스를 계산하여
스크립트단 버퍼에 접근하여 파일객체들을 배열형태로 가지고온후에 리스트화면에 렌더링한다.


이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 4
2008/06/18 11:15

[액션스크립트 + UI] 다이얼로그 설계

다이얼로그 라는것은 현재 보고있는 VIEW 위에 새로운 레이어(윈도우)가 추가되는 것이다.

다이얼로그가 생성되면 아래있는 VIEW및 컨트롤들은 커맨드불능 상태로 만들어야한다

이 구현을 위해 전역변수를 사용했다.(액션스크립트에서 _global 키워드는 전역변수 스코프를 의미한다)

_global.isFadeOut = true; //다이얼로그가 떴을때.

_global.isFadeOut=false //다이얼로그를 닫았을때.

다이얼로그 하위 레이어의 컨트롤들에는 다음과같은 코드를 추가해야 한다.

if(_global.isFadeOut == true){

     return false;

}else{

// 커맨드 코드

}

이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 0
2008/06/09 00:36

[프로그래밍] 변수이름만 잘지어도 50%는 먹고 들어간다

플밍 입문자 들이 하는 최대의 실수중 하나가

변수명을

aa

bb

이런식으로 짓는것이다.


변수명에는 항상 의미를 부여해야 된다.

변수명에 의미를 부여하면 코드가 읽기 쉬워지므로 개발속도 향상뿐만 아니라 리팩터링 에도 큰 이점이 생긴다.

1. 변수명에는 자료형을 나타내라.

int age;  -> int numAge;
int total; -> double numTotal;
String name -> strName
String name[] -> arrName;

어떠한가? 오른쪽이 더 직관적이지 않은가?

2. 전역변수는 항상 대문자로, 지역변수 앞에는 언더바를.

class Person{
    public static String NUM_TOTAL; // 전역변수("클래스변수"가 정확하지만, 일단은 "전역변수"라고 해두자.)
    public String strName; // 일반 변수(멤버변수)
    public String setName(String _strName){ //지역변수(함수 지역변수)
         this.strName = _strName;
    }
}
이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 3
2008/05/26 02:08

[Flex] Application 에 스크롤바 생기게하기

<mx:Application  width="1280" height="1000" >

이런식으로 명시적으로 높이와 너비를 지정해버리면 스크롤바가 생기지않는다

버그인가... 아니면 Application 의 라이프사이클중에서 높이와 너비가 지정되버리면 return 되어버리는 함수가 있는것인가

어쨌든간에 Application 에 스크롤바가 생기게하려면

<mx:Application verticalScrollPolicy = "on" >


이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 0
2008/05/22 17:57

ActionScript2.0 컴포넌트 제작

PMP 유저인터페이스를 ActionScript2.0 으로 개발하는중에 많은 도움이 되었던 문서이다.
as2.0 에는 이벤트 제어가 상당히 제한되어있는데, 이문서를 보고 한층 발전된 이벤트 디스패칭 방법에 대해서 알게되었다.
http://www.person13.com/articles/components/creatingcomponents.html
이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 0
2008/05/22 14:01

[metaWeblog] metaWeblog.newPost 사용법

MXL-RPC 기반의 metaWeblog는 대부분의 블로그 서비스 업체에서 지원하는 기능중 하나이다.
이것을 활용하면 굳이 자신의 블로그 관리자 화면을 열지 않고도 글을 쓰고, 삭제하는 에디터를 만들 수가있다.

서버에 다음과같은 xml 을 http post로 넘기면된다.
이것은 "글쓰기" 예제이다.

<methodCall>
  <methodName>metaWeblog.newPost</methodName>
    <params>
      <param>
        <value>0101679</value>
      </param>
      <param>
        <value>me</value>
      </param>
      <param>
        <value>gObBlEdYgOoK</value>
      </param>

     
<param>
        <value>
          <struct>
            <member>
              <name>description</name>
              <value>..top secret report...</value>
            </member>
          </struct>
        </value>
      </param>

    </params>
</methodCall>

예제 XML 출처 : http://www.intertwingly.net/stories/2003/01/26/evolve.html
이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 0
2008/05/15 10:50

[jQuery] 초간단하게 만드는 multi select

<html>
 <script src="jquery.js"></script>
 <script>
  $(document).ready(function(){
   $("#add").click(function(){
    $("#s1 option:selected").each(function(){
     $(this).appendTo("#s2");
    });
   });
   
   $("#del").click(function(){
    $("#s2 option:selected").each(function(){
     $(this).appendTo("#s1");
    });
   });
  });
 </script>
 <body>
  <select multiple id="s1">
   <option>aaa</option>
   <option>bbb</option>
   <option>ccc</option>
   <option>ddd</option>
  </select>
  <input type="button" value="추가" id="add" />
  <input type="button" value="삭제" id="del" />
  <select multiple id="s2">
  </select>
 </body>
</html>

append와 appendTo의 차이점:

$(obj).append(some);

하면 some 객체를 obj 의 가장 마지막 자식객체로 등록한다는 말이고

$(obj).appendTo(some);

하면 obj 객체를 some 객체의 가장 마지막 자식객체로 등록한다는 말이다.

그리고 위에보면 each 라고 있는데 이것은 jQuery 객체에 내장된 함수다

피라미터로 function을 넘겨야하는데 function 안에서 this 라고 하면 현재의 dom 객체를 참조한다

근데 dom 객체 자체로는 기능이 별로없으므로 $(this) 이렇게 사용하는것이다.

$(this) 이것은 jQuery 객체를 리턴한다.
이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 0
2008/05/06 18:29

[Flex] sort()의 option 사용하기

Array 클래스의 sort() 메서드는 기본적으로 "문자열 오름차순 정렬"을 한다
배열에 숫자가 포함되있더라도 이것을 문자로 취급하여 정렬을 한다

그러므로 숫자를 정렬할떄는 메서드의 두번째인자에 옵션값을 넣어줘야한다

arr.sort(Array.NUMERIC);

숫자취급 + 내림차순 을 하고싶다면

arr.sort(Array.NUMERIC | Array.DESCENDING);

하면된다.

정렬함수로 sortOn() 이라는것도있는데

여기에는 첫번째인자로 필드명을 넣어야한다

예를들어

arr[0] = {x:0, y:1}
arr[1] = {x:1, y:0}

일때,

arr.sortOn("x", Array.NUMERIC | Array.DESCENDING);

하면

x 필드의 값을 정렬 값으로 하고, 숫자로 취급하며 내림차순 정렬한다는 것이다.

이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 0
2008/05/06 14:08

[Flex] measuredWidth, measuredHeight 에 대한 이해


프로그래머가 컴포넌트의 width 와 height를 명시적으로 지정하지않으면 컴포넌트 생성시에 컴포넌트 자체적으로 너비와 높이를 계산한다.

예를들어서

var label = new Label("무궁화 삼천리 화려강산");
addChild(label)

여기서보면 라벨의 width와 height를 정하지않았으므로 Label 컴포넌트 내부적으로 너비와 높이가 계산된다는 말이다.

그럼 이 내부적으로 계산된 너비와 높이에 어떻게 참조 할 수 있을까?

모든 UIComponent에는 measuredWidth(조절된 너비) 와 measuredHeight(조절된 높이) 라는 멤버 변수가있다
즉 label.measuredWidth 하면 너비값을 얻을수 있는것이고
label.measuredHeight하면 높이값을 얻을 수 있는것이다.

만약 프로그래머가 컴포넌트의 높이와 너비를 명시적으로 지정한다면 measuredWidth 와 measuredHeight는 어떻게 되는것일까?

예륻들어

var label = new Label("무궁화 삼천리 화려강산")
label.width = 100;
label.height = 100;
addChild(label)

그리고 label.measuredWidth나 label.measuredHeight 에 접근해보면 0 또는  NaN 이라고 뜰것이다.
즉 명시적으로 높이와 너비가 지정됬기때문에 내부적으로 계산이 이루어지지 않은것이다.

 

이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 0
2008/05/02 16:54

[box2d] ApplyForce와 ApplyImpulse 의 차이점

b2Body 클래스에는 ApplyForce와 ApplyImpulse 라는 메서드가 있다.

전자는 말그대로 b2Body에 "힘을 가하는" 것이고후자는 b2Body에 "충격량을 가하는" 것이다.

var body:b2Body = ...blah blah

time step이 1/30 이라고 가정할때,

body.ApplyForce(new b2Vec2(0, 100), body.GetWorldCenter());

은 100N 의 힘을 1/30초 만큼 가한다. 즉 충격량은 N * S = 100 * (1/30) = 3.33333333

정도가 되는것이다.

body.ApplyForce(new b2Vec2(0, 100), body.GetWorldCenter());

time step 에 관계없이, 100 (kg*m/s) 만큼의 충격량을 가해버리는 것이다.

결과적으로 봤을때 첫번쨰 인자에 같은 크기의 벡터를 넣었어도, ApplyImpulse 가 더 큰효과를 발휘한다.

time step과 관계되지 않았기때문이다.

이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback 0 Comment 0