프로시저는 결과를 돌려주지 않고함수의 결과를 돌려준다


프로시저와 함수의 정의는 크게  부분으로 나누어 진다한가지는 프로그램의 다른 부분에서 해당 프로시저와 함수의 선언을 정의하는 부분이고다른  부분은 실제 프로시저나 함수의 내용을 적는 부분( 개의 문장들로 이루어진 블록)이다

Procedure <프로시저 이름>(매개변수목록);

[선언부]

begin

   [문장들]

end;


예) 

Procedure ReverseStr(s: String);

Var

   r: String;

   i: Byte;

Begin

   // 문자열 변수 r (null) 설정한다.

   r := ' ';

   // 문자열을 마지막 문자부터 첫번째 문자까지 반복한다.

   for i := length(s) downto 1 do

      // s내의 문자를 r 끝에 연결한다.

      r := r + s[i];

   // Memo객체를 비우고 결과를 나타낸다.

   Form1.Memo1.Lines.Clear;

   Form1.Memo1.Lines.Add(r);

End;


Procedure 프로시저의 시작임을 알리는 예약어 이며, <프로시저 이름> 프로시저를 호출할  사용되는 이름이다. (매개변수목록) 프로시저를 호출한 쪽에서 프로시저에게 넘겨주는 입력값들의 목록이고, [선언부] 프로시저에서 사용할 변수나상수레이블들을 선언하는 곳이다만약 사용되는 변수나 상수들이 없다면 생략가능하다마지막 [문장들] 실제 프로시저의 행위를 정의하는 문장들이다



Function <함수 이름>(매개변수목록):<리턴타입>;

[선언부]

begin

   [문장들]

end;


예) 

Function Reverse(s: String) : String;

Var

   r: String;

   i: Byte;

Begin

   r := ' ';

   For i := length(s) downto 1 do

      r := r + s[i];

   Reverse := r;   // Result := r  같은 결과를 얻을  있다.

End;



함수와 프로시저를 호출

Procedure Tform1.Button1Click(Sender: Tobject);

Begin

   ReverseStr(Edit1.text);                     // 프로시저를 호출하는 경우

   Memo1.Lines.Add(Reverse (Edit1.Text));      // 함수를 호출하는 경우

End;


매개변수 전달방법

Call by value

 방법에서는 변수를 값으로 전달하는 방식으로 컴파일러는 변수의 값을 복사하여 원래 값이 아니라 복사한 값이 전달된다그러니까 윈도우 탐색기에서 파일을 복사하여 다른 디렉토리에 붙여쓰기를 하는 것처럼변수의 내용을 복사하여 프로시저의 매개변수로 붙여쓰기하는 것과 마찬가지라고 생각하면 좋을  싶다.

그러면 프로시저내에서  매개변수를 지지고 볶든 간에원래 변수에 저장되어 있던 값들은 그대로이다.

Procedure add(x,y : integer);

 

Call by Reference

 방법은 변수의 값을 복사하여 쓰는 것과는 달리방번호는 같은데 변수와 매개변수의 사용하는 이름이 다르다고 생각하자. 100 방에 있는 값을호출할 때는 A(변수)라고 부르고 프로시저에서는 A1(매개변수)이라고 부른다고 가정하면 같은 방에 있는 값이므로 A1 바뀌면 A 자연히 따라 바뀌게 되는 것이다.

Procedure ReadData(Var rec : string);


Call by Const

상수로 매개변수를 전달하는 것은 프로시저 내에서 값을 변경하지 못하도록 컴파일러에 알린다.

아래의 예처럼 매개변수 s const 전달하는 경우는 WriteData라는 프로시저 안에서 s 값을 바꿀 수가 없다. Read Only 변수라고 생각하면 되겠다.

 

Procedure WriteData(const s : string);



출처: http://foco85.tistory.com/162 [래채'sTory]

1. dpr(delphi project) 

프로젝트 파일 이라고 부르며 여러 개의 pas 파일과 dfm 파일의 정보를 가지고 있다.

※ 통프로그램(하나의 exe 파일)으로 개발 시 dpr 파일은 반드시 하나만 존재한다.

※ DLL 분할 프로그램으로 개발 시 DLL파일 개수만큼 dpr 파일이 생성된.

 

 

2. dpg(delphi project group) 

프로젝트 그룹 파일 이라고 부르며 여러 개의 프로젝트 파일의 정보를 가지고 있다.

여러 개의 프로젝트 파일을 관리할 때 사용하는 파일이다.

 ※ 여러 개의 DLL파일도 bpg로 관리하면 편리하다.

 

 

3. pas(pascal) 

유닛 파일 이라고 부르며 하나의 폼에서 실행되는 처리 코드를 저장하는 텍스트 파일이다.

※ 무조건 pas 파일과 dfm 파일은 1:1 매칭을 이룬다.

 

 

4. dfm(delphi form) 

폼 파일 이라고 부르며 하나의 폼에 관련된 모든 속성을 저장하는 텍스트 파일이다.

※ 델파이4.0 까지는 바이너리 파일이었으나 5.0부터 텍스트 파일로 생성된다.

※ dfm 파일을 에디터나 메모장으로 열어 수정하고 저장하면 에러가 난다. 반드시

델파이 상의 오브젝트 인스펙터창을 이용하여 수정해야 한다.

 

 

5. dsk - 델파이 환경설정 파일

dpr 파일과 파일명이 같으며 해당 프로그램의 환경설정 내용을 가지고 있는 파일이다.

삭제하더라도 프로그램 컴파일 시 자동으로 만들어지는 파일이다.

※ F12키로 잘 보이던 폼이 안 보일 때는 dsk파일을 삭제 후에 다시 컴파일 + 빌드한다.

※ 특정 DLL소스에 브레이크 포인트가 갑자기 들지 않을 때는 이 파일을 삭제 후에 다시

컴파일 후 브레이크 포인트를 적용해본다.

※ 위의 방법으로도 브레이크 포인트가 들지 않으면 bpg파일에 있는 dpr파일을 모두

삭제한 후 다시 추가하거나 그래도 안되면 델파이를 종료 후 다시 실행한다.

 

 

6. dpk(delphi package) - 델파이 패키지 파일

델파이 패키지 파일로 컴포넌트 소스인 .pas(유닛파일)를 하나로 합쳐 패키지로 만든

파일이다. 델파이에 컴포넌트를 쉽게 추가하기 위한 목적을 가진 패키지 파일이다.

 

 

7. dll(dynamic link library) - 동적 링크 라이브러리

※ 자주 사용하는 함수는 공유파일 이진파일로 만든다.

 

 

8. dcu

델파이의 소스를 컴파일해서 생기는 object파일 이진파일이다.

 

 

9. exe - 프로그램 설치 파일

 델파이의 object파일을 실행 가능한 파일로 만든 것이다.

 

 

10. RES 

컴파일 된 이진 리소스 파일

 

 

11. bpl(borland package library) - 델파이 패키지 라이브러리

볼랜드 패키지 라이브러리 파일이며 다이나믹 링크 라이브러리(DLL) 파일과 비슷하지만

bpl은 볼랜드 제품에서만 호환되며 dll은 MS 제품에서도 사용 가능하다.



출처: http://tenlie10.tistory.com/69 [게임 개발자 블로그]

유닛은 상수, 데이터 형, 변수, 프로지셔, 함수의 집합체이다.
유닛은 프로그램을 짜맞출수있는 선언 라이브러리이며 프로그램을 분할하여 각각의 컴파일을 하기위한 것이다.
이렇게 프로그램을 분할하여 따로 컴파일을 할수있게하면 다음과 같은 좋은 점이 있다.

 * 파일이 커져서 다루기 어렵게되지 않는다.
 * 다른 프로그램이나 유닛에서 이용할 수있는 단위를 유닛으로 다룰 수 있다.
 * 프로그램을 일부 변경하더라도 전체 컴파일을 안해도 된다.

보통 상호간에 관련을 갖는 선언을 하나의 유닛으로 정리한다.
예를 들면 Strings 유닛은 NULL로 끝나는 문자열(PChar)를 처리하는 루틴의 모든 선언을 정리해둔 것이다.

■ 유닛의 구조
유닛은 인터페이스부(interface)와 실현부(implementation)으로 나누어져있다.
유닛을 사용할 때에는 uses절에 유닛이름을 쓰지만 이용하는 쪽에서 보면 유닛을 그 프로그램에서 선언한(그 프로그램에 포함되 있는) 것과 똑같이 취급한다.
일반적인 유닛의 구조는 아래와 같다.

unit <식별자>
interface
uses <유닛이름의 리스트>
여기에 상수, 데이터형, 변수, 프로시져나 펑션을 선언한다. (외부에 대해서 public인 것)
implementaion
uses <유닛이름의 리스트>
여기에 상수, 데이터형, 변수, 프로시져나 펑션을 선언한다. (외부에 대해서 private인 것)
프로시져나 함수의 본체
begin
    초기화 코드
end;
end.  // 마지막의 피이어드에 주목

위에 구조에서 필요없는 절이나 선언은 생략할 수 있다.
종종 초기화 코드는 생략되어지곤한다. 단순한 유닛에서는 실현부에는 프로시져나 펑션읜 본체만 씌여지는 경우도 많이 있다.
선언부에서는 주로 데이터형으로서 클래스가 선언 되어진다.

■ 선언
선언은 interface부와 implementation부의 두곳이 있다.
interface부의 선언은 외부에 대한 인터페이스의 선언이기 때문에 외부로 공개된다.
implementation부의 선언은 외부에 공개되지않게 때문에 다른 유닛에서 참조할 수 없다.

■ 표준유닛

델파이의 기본 루틴이나 컴포넌트를 사용할 때에는 uses절에 유닛명을 추가할 필요가 있다.
컴포넌트를 폼에 붙일때 자동적으로 필요한 유닛이 추가되어지지만 프로그램에서 Create 컨스트럭터를 사용하여 컴포넌트를 초기화할 때는 uses절에 수동으로 필요한 유닛을 추가해야만 된다.


( 출처 : http://wwwi.tistory.com/139 )

 - Button : Button은 UIComponent를 확장해서 만든 컴포넌트로 주로 다음과 같이 정의 해서 사용한다.

<mx:Button id =”id명” label=”버튼명” click=”이벤트핸들러명”
    Icon=”아이콘파일명 ”
    Color=”0x0B333C”
    textAllign=”center | left | rigth”
    click=”버튼을 마우스로 눌렀다가 놓았을 때 이벤트 핸들러”
    buttonDown=”버튼을 눌렀을 때 이벤트핸들러”
/>

- LinkButton : LinkButton은 Button의 하위 컴퍼넌트로 Button과 유사하지만 마우스를 올렸을 때 커서의 모양이 바뀐다는 점이 다르다. Button도  buttonMode=’true’  useHandCursor=’true’로 설정하면 LinkButton처럼 사용할 수 있다.

<mx:LinkButton id=”id명” label=”링크버튼명” click=”이벤트핸들러명”
    icon=’아이콘파일명”
color=”0x0B333C”’
    textAllign=”center | left | rigth”
    click=”버튼을 마우스로 눌렀다가 놓았을 때 이벤트 핸들러”
    buttonDown=”버튼을 눌렀을 때 이벤트핸들러”
/>

- CheckBox : CheckBox는 설문조사에서 여러 개의 항목을 선택할 수 있게 해준다. CheckBox는 Button을 확장한 컴퍼넌트이기 때문에 태그 사용법은 버튼과 유사하다. CheckBox를 선택하게 하려면 selected속성을 true로 설정한다.


<mx:CheckBox id=”id명” label=”체크박스에 나타날 설명”
    labelPlacement=”right | left | top | bottom”
    click=”CheckBox 클릭시 이벤트 핸들러” selected=”true | false” color=”글자색” />

- RadioButton : RadioButton도  CheckBox처럼 Button을 확장한 컴퍼넌트 이기 대문에 태그 사용법은 버튼과 유사하다. Radiobutton은 설문조사에서 여러 개 중 한 개의 항목만 선탹할수 있도록 해준다. 그래서 CheckBox와는 달리 groupName의 속성으로 RadioButtonGroup을 주면 그룹명이 같은 것 중에서 한 개만 선택할수 있게 한다. RadioButton을 선택되게 하려면 selected 속성을 true로 설정한다.


<mx:RadioButton id=”id명” label=”RadioButton에 나타날 설명”
    labelPlacement=”right | left | top | bottom” groupName=”라디오버튼 그룹명”
    click=”RadioButton 클릭시 이벤트 핸들러” selected=”true | false” color=”글자색” />

RadioButtonGroup : RadioButtonGroup은 EventDispatcher를 확장한 넌비주얼 컴퍼넌트로서 하나만 선택할 수 있도록 RadioButton들을 groupName으로 묶어주는 역할을 한다.

- ColorPicker : ColorPicker 컴퍼넌트는 RGB 색상을 고를 수 있는 컴퍼넌트로 콤보박스의 상위 클래스인 ComboBase 클래스를 확장해서 만들었다.


showTextField는 ColorPicker를 클릭했을 때 RGB값을 같이 보여줄지를 설정한다.
사용자가 선택한 색상은 ColorPicker의 selectedColor값을 통해서 읽어올 수 있다.

<mx:ColorPicker id=”id명” showTextField=”true” selectedColor=”0xFFFFFF” />

- DateChooser : DateChooser는 UIComponent를 확장해서 만든 달력 컴퍼넌트이다. DateChooser 컴퍼넌트는 달력기능을 위해 추가된 속성이 많으며 그 용도는 다음 태그와 함께 정리했다. DateChooser를 선택하면 change 이벤트가 발생한다. 날짜에서 월을 나타내는 값은 0부터 시작해서 11로 끝난다. 즉 0은 1월을 의미하며 11이 12월을 의미한다.
 

<mx:DateVhooser
    allowMultipleSelection=”false | true” //여러 날을 선택할 수 있는 옵션
    allowDisjointSelection=”true | false”
    // Control 키를 이용해서 이웃해있지 않은 날짜를 선택할 수 있는 옵션으로
    // allowMultipleSelection=’true’ 로 되어 있어야 함. 
    dayNames=”[“S”,”M”,”T”,”W”,”T”,”F”,”S”]” // 요일 이름 배열
    disabledDays=”No default”   // 비활성화할 일자들
    disabledRanges=”No default” // 비활성화할 날짜 영역
    displayedMonth=”Current month”
    // 현재 달로서 0이 1월을 표현하며 11이 12월을 표현함
    displayedYear=”Current year”    // 현재 연도
    firstDayOfWeek=”0”        // 0으로 되어있으면 일요일부터 시작 
    maxYear=”2100”
    minYear=”1900”
    monthNames=”[“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”
        ,”September”,”October”,”November”]”    // 월의 이름 
    monthSymbol=”월”     // 원 다음에 표시되는 이름 
    selectableRange=”No default”    // 선택가능한 날짜 영역 
    selectedDate=”No default”        // 선택한 날짜
    selectedRanges=”No default”    // 선택된 날짜 영역
    showToday=”true | false”        // 오늘 날짜 표시 옵션
    yearNavigationEnabled=”false | true”    // 연도 이동 컨트롤 표시 여부 
    yearSymbol=”년”        // 년 다음에 표시되는 이름
    change=”날짜를 선택했을 때 발생”
    />


- DateField : DateField는 ComboBase를 확장한 컴퍼넌트로서 TextInput과 DateChooser의 기능을 합쳐놓은 컴퍼넌트라고 보면 되겠다.


<mx:DateField
    Properties
    dayNames=”[“S”,”M”,”T”,”W”,”T”,”F’,”S’]”    // 요일 이름 배열 
    disabledDays=”No default”                // 비활성화 일자들 
    disabledRanges=”No default”        // 비활성화 날짜 영역
    displayedMonth=”Current month”    
    // 현재 달로서 0이 1월을 표현하며 11이 12월을 표현함
    displayedYear=”Current year”        // 현재 연도
    firstDayOfWeek=”0”            // 0으로 되어있으면 일요일부터 시작
    formatString=”MM/DD/YYYY”        // 텍스트 필드에 표시될 날짜 형식
    labelFunction=”텍스트필드에 표시될 내용에 사용할 함수명”
    maxYear=”2100”
    minYear=”1900”
    monthNames=” [“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”
        ,”September”,”October”,”November”]”        // 월의 이름
    monthSymbol=”월”                     // 월 다음에 표시되는 이름
    parseFunction=”텍스트필드에 들어오는 입력값을 처리해주는 함수명”
    selectableRange=”No default”        // 선택가능한 날짜 영역 
    selectedDate=”No default”            // 선택한 날짜
    showToday=”true | false”            // 오늘 날짜 표시 옵션
    yearNavigationEnabled=”false | true”    // 연도 이동 컨트롤 표시 여부 
    yearSymbol=”년”                 // 년 다름에 표시되는 이름 
    change=”날짜를 선택했을 때 발생”
    close=”달력을 닫을 때”
    open=”달력을 열 때”    
    />

- HSlider/VSlider : Slider를 확장한 컴퍼넌트로서 슬라이더썸(Thumb:조절바)을 움직여서 다른 컨트롤의 값을 설정하는 데 사용하는 컨트롤이다. 상하로 움직이는 것은 VSlider, 좌우로 움직이는 것은 HSlider이다. 

<mx:VSlider id=”slider1”
    thumbCount=”1’    // 슬라이더썸의 수로서 어려 개 지정이 가능하다.
    minimum=”0”    // 슬라이더의 최소값
    maximum=”2”    // 슬라이더의 최대값
    labels=”[0배,0.5배,1배,1.5배,2배]”    // 슬라이더에 나타날 라벨값
    values=”[1]”            // 초기화될 때 선택된 값
    tickInterval=”0.5”        // 눈금자 간격 
    snapInterval=’0.5”         // 눈금 이동 간격
    liveDragging=”true”     // 마우스를 슬라이더썸을 드래그하는 동안의 가밧도 처리할     것인지 여부 
    dataTipPlacement=”left | right | top | bottom”     // 슬라이더를 움직일 때 보이는
 데이터텁의 위치
change=”슬라이더값이 변할 때 발생하는 이벤트”  
    />


- NumericStepper : NumericStepper는 UIComponent를 확장한 컴퍼넌트로서 최대/최소값 사이를 상하 조절 버튼을 누르면서 바꿔 줄 수 있다. 이때 최대값과 최소값이 뒤바뀌지 않도록 해야한다.

<mx:NumericStepper
    imeMode=”null”
    maxChars=”10”
    maximum=”10”    //    표현최대값
    minimum=”0”    //    표현최소값(음수도 가능)
    stepSize=”1”    //    컨트롤을 누를 때 마다 바뀌는 값의 크기
    value=”0”    //    기본 선택값
    change=”값이 변경되었을 때 발생하는 이벤트”
    />

- Label : Label은 화면에 글자로 설명을 넣어야 하는 곳에 사용하는 컴퍼넌트로 Button과 마찬 가지로 UIComponent를 확장해서 만든 컴퍼넌트이지만 이벤트를 써서 사용자와 인터랙션하는 곳에는 잘 쓰지 않는다. Text 속성에 Label에 나타낼 문자를 적어주면 되고 selectable 속성은 기본적으로 false로 되어있다. 이 속성을 true로 주면 Label의 text를 마우스로 선택해 복사할수 있다.

<mx:Label  text=”” selectable=”true | false” /> 

- Text : Text 컴퍼넌트는 Label을 확장해 만든 컴퍼넌트로 Label과 마찬가지로 사용자의 입역을 받지는 못하지만 여러 줄로 텍스트를 표시할 수 있다. Text에는 상위 컴퍼넌트에서 상속받은 이벤트가 있지만 주로 텍스트를 보여주는 데에만 사용하기 대문에 이벤트를 그다지 활용하지 않는다. 텍스트의 속성에는 text와 htmlText가 있는데 두 속성에 값이 동시에 들어오면 htmlText값을 보여준다. Text 컴퍼넌트의 태그는 다음과 같이 사용한다.

<mx:Text text=”표시할 내용” >
    <mx:htmlText>
    <![CDATA[
    <font color=”#FF0000”>HTML 텍스트</font>
    ]]>
    </mx:htmlText>
</mx:Text>

htmlText에사 사용할 수 있는 HTML 태그는 다음과 같다.
Anchor 태그 (<a>)
Bold 태그 (<b>)
Break 태그 (<br>)
Font 태그 (<font>)
Image 태그 (<img>)
Italic 태그 (<i>)
List item 태그 (<li>)
Paragraph 태그 (<p>)
Text format 태그 (<textformat>)
Underline 태그 (<u>)

- TextArea : TextArea는 UIComponent에 스트롤 기능을 추가한 ScrollControlBase 컴퍼넌트의 하위 컴퍼넌트로서 HTML의 TextArea처럼 사용자의 입력을 받으면서 여러 줄로 표시가 가능한 텍스트 처리 컨트롤이다. TextArea는 Label,Text와 달리 상용자의 입력을 받으므로 다음과 같이 다양한 속성들이 있다. 


<mx:TextArea
    condenseWhite=”false | true”
    // true로 되어있으면 htmlText에 들어있는 모든 줄바꿈 공백을 무시한다.
    diaplayAsPassword=”false | true”    // true로 되어있으면 *형식으로 글자를 표시한다.
    editable=”true | false”    // 에디팅 가능 여부
    horizontalScrollPolicy=”auto | on | off”    // 수평 스트롤바 표시 여부
    htmlText=”null”    // html태그를 사용한 텍스츠 내용
    imeMode=”KOREAN”    // KOREAN이라 설정하면 바로 한글 입력모드로 설정된다.
    length=”0”         // 화면에 표시될 글자수 
    maxChars=”0”        // 최대 수용 글자수 
    restrict=”null”        // 입력제한
    styleSheet=”null”         // text 영역에 적용할 스타일시트
    text=””            // 표시할 text내용
    textHeight=”height of text”    // text의 높이
    textWidth=”width of text”    // text의 넓이
    verticalScrollPolicy=”auto | on | off”    // 수직 스크롤바 표시 여부
    wordWrap=”true | false”    // 자동 줄바꿈 기능 사용여부 
    change=”No default”    // 텍스트 내용이 바뀌었을 때 발생하는 이벤트
/>

- TextInput : TextInput는 UIComponent의 하위 컴퍼넌트로서 TextArea와 기능은 우사하나 한 줄로만 표시된다는 점에서 다를다. TextInput에서 데이터를 입력하고 엔터키를 치면 enter이벤트가 발생하며 여기서 입력처리(입력값 검증 및 서버 전송)를 할 수가 있다.

<mx:TextInput
    condenseWhite=”false | true”
    // true로 되어있으면 htmlText에 들어있는 모든 줄바꿈 공백을 무시한다.
    displayAsPassword=”false | true”    // true로 되어있으면 * 형식으로 글자를 표시한다.
    Editable=”true | false”        // 에디팅 가능 여부 
horizontalScrollPolicy=”auto | on | off”    // 수평 스트롤바 표시 여부 
htmlText=”null”    // html태그를 사용한 텍스트 내용 
imeMode=”KOREAN”    // KOREAN이라 설정하면 바로 한글 입력모드로 설정된다.
length=”0”        // 회면에 표시될 글자수 
maxChars=”0”        // 최대 수용 글자수 
restrict=”null”    // 입력제한
text=””        // 표시할 text내용
textField=”internal subcontrol”
textHeight=”height of text”     // text의 높이 
textWidth=”width of text”        // text의 넓이
change=”No default”            // 텍스트 내용이 바뀌었을 때
enter=”No default”            // 텍스트 입력후 엔터키를 쳤을 때
textInput=”No default”        // 텍스트 내용을 입력했을 때(키입력,붙여넣기,지우기 등)

restrict

restrict=”[abc]” : abc만 입력 가능
restrict=”[0-9]” : 숫자만 입력 가능
restrict=”[A-z]” : 영어만 입력 가능
restrict=”[A-z0-9.@\-]” : 이메일 입력
restrict=”[0-9\-]” : 전화번호 입력


- RichTextEditor : RichTextEditor는 Panel을 확장해서 TextInput,Button,TextArea,ComboBox,ColorPicker등의 컴퍼넌트를 합쳐서 만든 간단한 HTML입력용 컴퍼넌트이다. 

<RichTextEditor
    defaultLinkProtocol=”http://”     // 화면에 표시되는 링크 방식
    htmlText=””                // htmlText 내용
    showControlBar=”true | false”
    // RichTextEditor의 하단 버튼이 들어있는 ControlBar의 표시 여부
    showToolTips=”false | true”    // 풍선도움말(툴팁) 표시 여부 
    text=””                // 일반 텍스트 내용 
    change=”                 // 텍스트 내용이 바뀌었을 때발생하는 이벤트 
/>

- Image : Image 컴퍼넌트는 SWFLoader를 확장한 컴퍼넌트로서 JPEG,PNG,GIF,SWF 파일을 실행시 화면에 보여줄수 있다. 보통 SWFLoader는 플렉스 애플리케이션 또한 로딩하는 데 사용하고, Image는 정적인 이미지를 로드하는 데에 사용한다. Image 컴퍼넌트에 source=”@Embed(source=’filenme’)” 형식으로 속성을 표시하면 SVG파일 또한 보여줄수 있으며 컴파일된 플렉스 애플리케이션 내에 이미지가 같이 포함된다.

<mx:Image source=”@Embed(‘assets/Nokia_6630.png’)” />


- SWFLoader : SWFLoader는 UIComponent를 확장한 컴퍼넌트로서 JPEG,PNG,GIF,SWF 파일을 실행시 화면에 보여줄 수 있다. 주로 동적인 SWF를 로드하는 데에 사용한다.

<mx:SWFLoader
    autoLoad=”true | false”        // 컨텐츠 자동 로딩 여부 
    maintainAspectRatio=”true | false”
    // 원본이미지의 width,height의 비율을 유지할 것인지 여부 
    scaleContent=”true | false”    // 이미지의 스케일 조절 여부 
    showBusyCursor=”false | true”     // 컨텐츠를 로드할 때 작동중 커서를 보여줄 것인지의     여부
    source=”No default”            // 컨텐츠 경로 
    complete=”No default”         // 로딩 완료시 발생
    progress=”No default”         // 로딩 중 
    unload=”No default”            // 로딩한 객체를 언로드할 때
/>

- ProgressBar : ProgressBar는 UIComponent를 확장한 컴퍼넌트로서 어떤 작업의 진행상황을 bar모양을 채워가면서 보여주는 컴퍼넌트로서 전체 작업에 대한 예측치가 있는 determinate와 그렇지 않고 시간을 기준으로 진행하는 indeterminate방식이있다.

<mx;ProgressBar
    Conversion=”1”        // 로드한 바이트수/전체바이트수를 나눈는 값으로 1이 기본값임 
    direction=”right | left”        // progressBar의 진행방향
    indeterminate=”false | true”    // indeterminate방식 여부 
    label=”No default”        // progressBar의 라벨 
    labelPlacement=”bottom | top | left | right | center”    // 라벨위치 
    maximum=”0”            // 최대 표시값
    minimum=”0”            // 최소 표시값 
    mode=”event | polled | manual”    // bar를 업데이트하는 방식 
    source=”No default”            // ProgressBar 가 표시하려는 작업 객체
    complete=”No default”        // 작업 완료 
    progress=”No default”        // 작업 진행중 
/>


- VideoDisplay : VideoDisplay는  UIComponent를 확장한 컴퍼넌트로서 FLV(플래시 비디오) 파일을 플렉스 애플리케이션에서 보여준다. FLV파일은 웹서버로부터 조금씩 다운받아서 보여주거나 웹캠이나 플래시 미디어 서버에서 스트리밍해서 보여줄 수 있다.


<mx:VideoDisplay 
    autoBandWidthDetection=”false | true”    // 밴드대역폭의 자동여부 
    autoPlay=”true | false”             // 자동 실행 여부 
    autoRewind=”true | false”
    // 플레이하다가 정지하거나 플레이가 끝났을 때 맨앞으로 자동 되감기 여부 
    bufferTime=”0.1’        // 비디오 버퍼에 넣을시간 
    cuePoints=””    // 미디어 내에 들어있는 특정 지점으로 큐포인트로 바로 이동할 수 있다.
    idleTimeout=”300000”
    // 아무것도 안하고 있을 동안 얼마나 커넥션을 유지할 것인가를 밀리초로 설정 
    Live=”false | true”        // 라이브 스트리밍 실행 여부 
    maintainAspectRatio=”true : false”
    // 원본 비디오의 width,height의 비율을 유지할 것인지 여부
    source=””        // 미디어 파일 경로 
    totalTime=””        // 미디어의 총 길이(초)
    volume=”0.75”        // 볼륨크기 (0~1 사이)
/>


-- 데이터 바인딩 --
데이터 바인딩은 두 개 이상의 컴퍼넌트들이 있을 때 한쪽 컴퍼넌트의 속성이 바뀌면 
다른 쪽의 컴퍼넌틑에도 바뀌 내용이 속성에 반영되도록 컴퍼넌트의 관계를 엮는 것을 말한다.
MAML에서 일반적인 속성 표기는 <mx:컴퍼넌트 속성=”참조값” /> 으로 하지만, 데이터 바인딩이 이뤄지게 하려면 속성값을  표시할 때 { } 기호를 써서 <mx;컴퍼넌트명 속성=”{참조값}” />과 같이 표시해야 한다.

참조값은 보통 다른 컴퍼넌트이 id.속성명으로 표현한다, 한편 액션스크립트에서 일반적으로 선언해 사용하는 변수를 데이터 바인딩이 일어나게 하려면 다음과 같이 변수 앞에 [Bindable] 이라고 명시를 해줘야 한다.


[Bindable]
Private vaar myData:ArrayCollection;

<mx:DataGrid dataProvider=”{myData}” />

콤퍼넌트 간의 데이터 바인딩 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:Script>
        <![CDATA[
        // 이 변수는 TextInput에 바인딩 되어 있어 반드시 [Bindable]로 선언해줘야 함 
            [Bindable]
            private var bindableVar:Number = 0; 
        ]]>
    </mx:Script>
    <!-- 이 Label의 text값은 TextInput의 text값과 바인딩 되어 있음 -->
    <mx:Label text="TextInput의 값 : {myTxt.text}" />
    <!-- 이 TextInput의 text는 변수 bindableVar와 바인딩 되어 있음 --> 
    <mx:TextInput id="myTxt" text="{bindableVar}" />
    <!-- 버튼을 클릭하면 bindableVar을 바꾸고 바뀐 값이 Button과 TextInput에 반영됨 -->
    <mx:Button label="Change Variable" click="bindableVar++" />
</mx:Application>
dataProvider, 컴퍼넌트 데이터 연결 창구 

데이터 바인딩은 주로 데이터가 필요한 컴퍼넌트의 데이터값을 지정해주는 데 사용한다.
아래의 컴퍼넌트들은 데이터 바인딩을 통해 사용할 데이터를 화면으로 보여주는 컴퍼넌트들로서 dataProvider 속성에 배열값이나 XML 데이터값을 넘겨줌으로써 데이터를 보여줄 수 있다.

컨트롤 계열 컴퍼넌트
ComboBox / DataGrid / List / HorizontalList / TileList / Tree / Repeater / ColorPicker / DateField / Menu / MenuBar / PopUpMenuButton

모든 차트 컴퍼넌트 
LineChart / ColumnChart / AreaChart / BarChart / PieChart / PlotChart /BubbleChart /CandleStickChart / HLOCChart

레이아웃 계열 컴퍼넌트 
ButtonBar / LinkBar / TabBar / ToggleButtonBar  

예제

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<!-- List와 DataGrid에서 사용할 데이터 선언 -->
    <mx:ArrayCollection id="myAC">
        <mx:source>
            <mx:Object label="한국" data="1"/>
            <mx:Object label="미국" data="2"/>
            <mx:Object label="일본" data="3"/>
        </mx:source>
    </mx:ArrayCollection>
    <!-- List와 DataGrid의 dataProvider 속성으로 myAC를 설정함 -->
    <mx:List dataProvider="{myAC}" width="282"/> 
    <!-- DataGrid는 editable속성을 true로 하여 셀을 클릭하면 편집되도록 함 -->
    <mx:DataGrid dataProvider="{myAC}"  editable="true" /> 
</mx:Application>

- ComboBox : ComboBox는 UIComponent를 확장한 ComboBase의 하위 컴퍼넌트로서 HTML의 Select객체처럼 드롭다운 리스트형식으로 데이터를 보여준다. 사용자는 여기서 값을 하나만 선택할 수 있다. ComboBox에서 선택한 아이템의 배열은 selectedIndex로 알아낼 수 있으며 선택한 값은 selectedItem으로 값을 읽을 수 있다. 여러 개의 아이템을 선택하려면 List나 PopupButton을 사용한다.

<mx:ComboBox
    dataProvider=”null”    // 데이터 속성 
    dropdownWidth=”100”     // ComboBox의 폭
    labelField=”label”        // ComboBox의 이름으로 나타날 필드명
    prompt=”null”        // 처음 ComboBox의 리스트에 표시할 값
    rowCount=”5”        // ComboBox의 리스트에 표시할 아이템 최대 개수 
    selectedIndex=”-1”    // 선택한 아이템의 인덱스 
    selectedItem=”null”    // 선택한 아이템 
    change=”No default”    // 아이템을 선택할 때 
    open=”No default”     // 리스트를 오픈할 때 
/>

1.    dataProvider 데이터 연결하기 
2.    ComboBox의 아이템 추가 
3.    Combobox의 아이템 삭제
4.    원하는 ComboBox의 아이템이 선택되게 하기 
5.    ComboBox에서 다른 아이템을 선택했을 때 선택된 아이템의 인덱스,label,data값 읽어 오기

- Tree : Tree는 List를 확장해서 만든 컴퍼넌트로서 트리 메뉴 구조를 보여주는 역할을 한다. 다른 데이터 관련 컨트롤과는 달리 Tree는 XML 데이터를 dataProvider에 연결해주어야 한다. XML의 특정 노드의 엘리먼트가 하위 노드를 가지면 자동으로 폴더모양의 아이콘으로 설정되어 클릭하면 하위 노드를 보여준다.

<mx:Tree
    dataProvider=”null”            // 트리가 사용할 XML 데이터의 정의 
    dragMoveEnabled=”true | false”    // 트리의 아이템을 드래그로 이동하게 하는 설정 
    firstVisibleItem=””            // 트리의 제일 위에 보여줄 엘리먼트에 대한 설정 
    hasRoot=”false | true”        // 현재의 노드가 최상위의 노드인지를 판단 
    itemIcons=”null”            // 트리의 아이콘 설정 
    openItems=”null”            // 트리를 보여줄 때 모든 노드를 펼질지의 여부
    showRoot=”true | false”        // 트리의 루트 엘리먼트를 보이게 하는 설정 
    change=”No default”            // 트리의 노드를 클릭했을 때 발생 
    itemClose=”No default”        // 트리의 노드를 열었을 때 발생 
    itemOpen=”No default”        // 트리의 노드를 받았을 때 발생 
/>

1.    dataProvider에 XML 데이터 연결하기
2.    Tree 열고 닫기 
3.    Tree 에 아이템 추가
4.    Teee 노드 이동 
5.    Tree 노드를 선택했을 때 선택된 노드의 인덱스,label,data값 읽어 오기

- List : List는 DataGrid처럼 ListBase를 확장한 컴퍼넌트로서 ComboBox와 유사하지만 여러건의 아이템을 선택할 수 있다. 이는 HTML에서 다중 선택이 가능한 Select 객체와 유사하다.


<mx:List
    Editable=”false | true”        // 에디팅 가능 여부
    imeMode=”null”            // IME 설정 
    itemEditor=”TextInput”
    // 아이템을 편집모드 시 List에 보여지는 컴퍼넌트로 TextInput의 형태로 편집한다.
    rendererIsEditor=”false | true”    // 아이템 에디터를 화면에 그대로 표현할지를 결정
    itemEditBegin=”No default”        // 아이템이 편집될 때 
    itemEditEnd=”No default”        // 아이템 편집이 끝났을 때 
/>

- TileList : ListBase에 열과 행의 개념을 적용한 TileBase 컴퍼넌트를 확장하여 만든 컴퍼넌트로서 아이템들을 지정된 공간 안에 차례대로 배치한다. 배치할 수 있는 아이템이 5개인데 데이터로 갖고 있는 아이템이 15개라면 3줄에 걸쳐서 5개씩 아이템을 보여준다.


<mx:TileList
    allowDragSelection=”false | true”        // 드래그해서 아이템을 선택하도록 하는 옵션 
    allowMultipleSelection=”false | true”    // 여러 개의 아이템을 선택하도록 하는 옵션 
    columnCount=”4”                // 화면에 보여줄 열 개수 
    columnWidth=”NaN”        // 열의 폭 
    dataProvider=”null”        // 사용할 데이터 객체 
    data=”Object”            // itemRenderer를 사용할 때 참조하는 객체 속성 
    iconField=”null”        // 아이콘으로 보여줄 필드 속성 
    itemRenderer=”null”        // itemRenderer 이름 
    labelField=”label”        // 데이터에서 label로 보여줄 필드명 
    rowCount=”-1”            // 화면에 보여줄 행의 개수 
    rowHeight=”NaN”        // 화면에 보여줄 행의 높이 
    selectable=”true | false”    // 리스트에 보여주는 아이템을 선택가능하도록 하는 옵션 
    selectedIndex=”-1”        // 리스트에 선택된 아이템 배열의 인덱스 
    selectedIndices=”null”    // 리스트에 여러 개로 선택된 아이템 배열의 인덱스들 
    selectedItem=”null”        // 선택된 아이템 객체
    selectedItems=”null”     // 선택된 아이템 객체들
    showDataTips=”false | true”    // dataTip을 보여주는 옵션 
    wordWrap=”false | true”    // 아이템에서 줄바굼을 하는 옵션 
    change=”No default”        // 다른 아이템을 선택했을 때 (selectedIndex가 바뀔때)
    itemClick=”No default”    // 아이템을 클릭했을 때 ”
/>

TileList에서 자주 사용하는 속성은 itemRenderer이다. itemRenderer는 화면에 데이터를 보여줄 때 다른 컴퍼넌트를 사용해서  화면에 보여줄 수 있도록 해부는 속성이다. 이 컴퍼넌트는 사진 갤러리에서 이미지를 리스트로 보여주는 데 많이 사용한다.

여기서는 itemRenderer에 <mx:Component> 속성 안에 사용할 MXML 태그를 넣었다. 이때 두가지를 정확히 처리해야 한다.

1.    <mx:Component> 태그 안에 들어가는MXML 태그 또는 컴퍼넌트 명은 반드시 하나여야 한다.
    예) 다음 예는 VBox안에 컴퍼넌트가 들어간 itemRenderer의 예이다.

<mx;TileList>
    <mx;itemRendrer>
        <mx:Component>
            <mx:VBox width=”100” height=”250”>
                <mx:Label text=”{data.label}” />
                <mx:Image source=”{data.data}” />
            </mx:VBox>
        </mx:component>
    </mx;itemRendrer>
</mx:TileList>
    예) 다음 예는 itemRenderer로 MXML 컴퍼넌트를 사용한 예이다.

<mx:TileList>
    <mx:itemRenderer>
        <mx:Component>
            <MyRD/>
        </mx:Component>
    </mx:itemRenderer>
</mx;TileList>

// MyRD.mxml의 내용
<?xml version=”1.0” encoding=”utf-8”?>
<mx:VBox xmlns:mx=http://www.adobe.com/2006/mxml width=”100” height=”250”>
    <mx:Label text=”{data.label}”/>
    <mx:Image source=”{data.data}”/>
</mx:VBox>

예) 다음의 예는 itemRenderer에 MXML컴퍼넌트의 이름을 사용한 예이다.
<mx:TileList itemRenderer=”MyRD” />

2.    itemRenderer에 들어가는 데이터는 data라는 참조명으로 가져온다.
데이터 구조가 아래와 같이 되어 있으면,
<mx:Object label=”힌드폰1” data=”phone_1.png” />
data.data, data.label 식으로 itemRenderer에사 값을 가져올 수 있다. 

- HorizontalList : ListBase에 열과 행의 개념을 적용한 TileBase 컴퍼넌트를  확장하여 만든 컴퍼넌트이다.
아이템들을 수평으로 배열하는 컴퍼넌트로서  사진들을 슬라이드 형식으로 보여주는 데에 많이 사용한다.

<mx:HorizontalList
    allowDragSelection=”false | true”        // 드래그해서 아이템을 선택하도록 하는 옵션 
    allowMultipleSelection=”false | true”        // 여러 개의 아이템을 선택하도록 하는 옵션 
    columnCount=”4”                // 화면에 보여줄 열 개수 
    columnWidth=’NaN”            // 열의 폭 
    dataProvider=”null’             // 사용할 데이터 객체
    data=”Object”                // itemRenderer를 사용할 때 참조하는 객체 속성 
    iconField=”null”                // 아이콘으로 보여줄 필드 속성 
    itemRenderer=”null”            // itemRenderer 이름 
    labalField=”label’                // 데이터에서 label로 보여줄 필드명 
    rowCount=”-1”                // 화며넹 보여줄 행의 개수 
    rowHeight=”NaN”                // 화면에 보여줄 행의 높이
    selectable=”true | false”             // 리스트에 보여주는 아이템을 선택가능하도록 하는 옵션 
    selectedIndex=”-1”             // 리스트에 선택된 아이템 배열의 인덱스 
    selectedIndices=”null”            // 리스트에 여러 개로 선택된 아이템 배열의 인덱스들 
    selectedItem=”null’            // 선택된 아이템 객체 
    selectedItems=”null”            // 선택된 아이템 객체들 
    showDataTips=”false | true”        // dataTip을 보여주는 옵션 
    wordWrap=”false | true”             // 아이템에서 줄바꿈을 하는 옵션 
    change=”No default”            // 다른 아이템을 선택했을 때 (selectedIndex가 바뀔 때 )
    itemClick=”No default”            // 아이템을 클릭했을 때 
/>

- DataGrid : DataGrid는 DataGrid List 의 상위 컴퍼넌트인 ListBase를 뿌리에 두고있다. DataGrid는 플렉스에서 데이터를 표현하는 데 가장 많이 사용하는 컴퍼넌트로서 테이블 형태의 데이터를 보여주는 데 사용한다. DataGrid의 기능은 다음과 같다.

1.    배열 형태의 데이터를 테이블 리스트로 표현한다.
2.    각 열별 정렬 기능 
3.    열 간에 드래그앤드랍으로 이동 가능 
4.    셀 내용을 직접 편집가능 
<mx:DataGrid
    Columns=”From dataProvider”     // 데이터그리드의 열 지정 
    draggableColumns=”true | false”    // 열을 드래그앤드랍으로 이동할 수 있게 하는 속성 
    editable=”false | true”     // 데이터그리드의 각 셀의 값을 편집할 수 있게 하는 속성 
    horizontalScrollPosition=”null”
    imeMode=”KOREAN”            // KOREAN이라 설정하면 바로 한글 입력모드로 설정  
    minColumnWidth=”NaN”        // 열이 최소 폭
    resizableColumns=”true | false”     // 열의 크기를 바꿀 수 있게 할지 설정 
    sortableColumns=”true | false”     // 열을 정렬할 수 있게 할지 설정
    change=””                // 데이터가 바뀌었을 때 발생 
    itemClick=””                // 데이터그리드 아이템을 클릭했을 때 발생 
/>
1.    dataProvider 데이터 연결하기 
2.    DataGrid의 행 추가
3.    DataGrid의 행 삭제 
4.    원하는 DataGrid의 아이템이 선택되도록 하기
5.    DataGrid에서 다른 아이템을 선택했을 때 선택된 행의 인덱스 ,label,data값 읽어오기

'IT > Flex/Flash' 카테고리의 다른 글

DataGrid의 labelFunction  (0) 2017.09.12

DataGrid의 labelFunction

──LANGUAGE/Flex 2009.04.21 13:00

public function gridDisplay(data:Object,column:DataGridColumn):String{

    var date:Date = data.date;

    return dateFormat(date);

}


private function dateFormat(date:Date):String{

    var dateFormat:DateFormatter = new DateFormatter();

    dateFormat.formatString = "YYYY年M月D日、EEEE曜日";

    return dateFormat.format(date);

}

   

<mx:DataGrid textAlign="center" id="dg" width="100%" height="90%" dataProvider="{detailData}">

     <mx:columns>

         <mx:DataGridColumn width="120" headerText="日付" dataField="date" labelFunction="gridDisplay"/>

     </mx:columns>

</mx:DataGrid>

'IT > Flex/Flash' 카테고리의 다른 글

[Flex] 컨트롤 컴포넌트(각종 속성정리)  (0) 2017.09.12

+ Recent posts