1 / 162

UI 컴포넌트

UI 컴포넌트. 2004. Fall. 유저 인터페이스 (UI: User Interface). 사용자 인터페이스 (UI: User Interface) 하드웨어와 사용자를 연결 사용자가 하드웨어를 통하여 원하는 결과를 얻어낼 수 있도록해주는 것. UI 의 종류. High Level UI 정형화 되어 있는 UI 가져다 쓰기만 하면 됨 Low Level UI 사용자가 자신의 취향에 맞게 새롭게 만들 수 있는 UI WIPI 의 경우 High Level UI 와 Low Level UI 모두 제공

piera
Download Presentation

UI 컴포넌트

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. UI 컴포넌트 2004. Fall

  2. 유저 인터페이스 (UI: User Interface) • 사용자 인터페이스(UI: User Interface) • 하드웨어와 사용자를 연결 • 사용자가 하드웨어를 통하여 원하는 결과를 얻어낼 수 있도록해주는 것

  3. UI의 종류 • High Level UI • 정형화 되어 있는 UI • 가져다 쓰기만 하면 됨 • Low Level UI • 사용자가 자신의 취향에 맞게 새롭게 만들 수 있는 UI • WIPI의 경우 • High Level UI와 Low Level UI 모두 제공 • High Level UI를 중심으로 • org.kwis.msp.lwc 패키지에 포함 • Ex) ListComponent, DialogComponent..

  4. UI Component 패키지 • UI 컴포턴트 패키지의 클래스 상속도 • org.kwis.msp.lwc • Component 클래스 • 추상 클래스 • 자식 클래스 • ButtonComponent, ListComponent, LabelComponent등등 • 인터페이스 • CommandListener, ActionListener, ChangedListener, EventListener, GrabKeyListener

  5. UI Component 패키지의 클래스 상속도

  6. UI Component 패키지의 클래스들의 기능별 연결도

  7. 컴포넌트를 이용한 UI 구성 • WIPI 프로그래밍 • Display 객체에 Card객체 등록 • 모든 Jlet 프로그램은 Display 객체에 Card 객체를 등록함으로써 화면을 보여줌 Display 객체에 Card 객체 등록

  8. 컴포넌트를 이용한 UI 구성 • WIPI UI Component • 휴대폰 LCD화면에 리스트를 나타내는 화면을 등록?? • List UI를 Display 객체에 바로 등록 못함 • ShellComponent 를 제외한 모든 Component는 부모 컴포넌트를 가지고 있어야 함 리스트 내용을 화면에 등록 (실패)

  9. 컴포넌트를 이용한 UI 구성 • WIPI UI Component • High Level UI 화면 구성 단계 • 화면을 나타내고자하는 Component 객체 생성 • ShellComponent 객체 생성 • Component객체를 ShellComponent 객체에 등록 • Display 객체에 ShellComponent 객체 등록

  10. 컴포넌트를 이용한 UI 구성 • 다중 컴포넌트의 구성 • ShellComponent 특성 • 모든 컴포넌트의 부모컴포넌트가 될 수 있다 • 단 하나의 컴포넌트만 자식으로 둘 수 있다 ListComponent와 DataFieldComponent의 등록 실패

  11. 컴포넌트를 이용한 UI 구성 • 다중 컴포넌트의 구성 • 해결방법 • ContainerComponent의 사용 • 두개의 컴포넌트를 자식으로 가질수 있는 컴포넌트에 컴포넌트들을 등록

  12. 컴포넌트를 이용한 UI 구성 • Jlet 프로그램의 특성 • 모든 Jlet 프로그램은 Display 객쳉에 Card를 등록함으로 화면에 보여줄 수 있다 • UI 컴포넌트에서는 Card를 만들어주지 않아도 화면에 표시?? • ProxyCard • Card의 역할을 함 • UI 컴포넌트를 만들면 이것에 해당하는 ProxyCard를 자동 생성

  13. 컴포넌트를 이용한 UI 구성 • ProxyCard의 역할

  14. 컴포넌트를 이용한 UI 구성 • ProxyCard의 구성 • 각각의 ProxyCard를 Display 객체에 넘겨주어야하는가?? • 최상위 컴포넌트의 ProxyCard를 넘겨주면 자식 컴포넌트의 ProxyCard들도 함께 넘겨짐

  15. 컴포넌트 클래스의 역할 • 컴포넌트 클래스의 역할 • 위치와 크기를 가진다 • 상위부모가 있다 • 사용자 입력을 받아서 적절한 행동을 한다

  16. 컴포넌트 클래스의 역할 • 컴포넌트의 위치와 크기 • 자신의 폭과 넓이를 프로그램에서 결정 • 상위 컴포넌트에 의해 그 크기가 결정 • 하위자식 컴포넌트는 상위 부모 컴포넌트의 영역을 벋어날 수 없다 • 상위 부모 컴포넌트보다 클 수 없다. • 컴포넌트 크기 변경 • Invalidate 함수 호출 • 컴포넌트의 내용 변경 • 컴포넌트의 크기가 다시 계산될 경우 • Validate 함수 호출 • 하위 컴포넌트까지 모두 적당한 크기로 변경 • 컴포넌트가 화면에 보여지거나 • PaintContent 함수가 호출될 경우

  17. 컴포넌트 클래스의 역할 • 상위 부모 컴포넌트 • WIPI의 제약사항 • ShellComponent를 제외한 모든 Component들은 항상 상위 부모 컴포넌트를 가지고 있어야 한다. • UI 컴포넌트에서의 부모 컴포넌트 • 상속관계에 있어서의 부모 컴포넌트라기 보다는 휴대폰 LCD 화면에 보여지기 위해 추가되는 순서에 따른 것 상속관계 Component는 Component1, Component2, Component3의 부모관계

  18. 컴포넌트 클래스의 역할 • 상위 부모 컴포넌트 • UI 컴포넌트에서의 부모관계 • 상속관계를 말하는 것이 아니라 컴포넌트의 추가된 순서를 말함 • Ex) Component2에 Component3를 추가, 이것들을 Component1에 추가 • Component1, 2, 3은 서로 상속관계가 없음 • Component3의 부모  Component2 • Component2의 부모  Component1

  19. 컴포넌트 클래스의 역할 • 컴포넌트 이벤트 처리 • 발생된 모든 이벤트에 대해서 setEventListener 함수를 통해 지정된 EventListener에게 발생한 이벤트를 알려줌 • EventListener가 true 값을 돌려줄 경우 • 더 이상 이벤트 처리되지 않음 • EventListener가 false 값을 돌려줄 경우 • 이벤트가 정상적으로 처리

  20. 컴포넌트 클래스의 역할 • Component 클래스 메소드

  21. 컴포넌트 클래스의 역할 • Component 클래스 메소드

  22. 휴대폰 LCD화면 분할하기 • ShellComponent Layout • Title Area • Title을 표시 • Work Area • 다른 컴포넌트를 추가하여 작업할 수 있는 공간 • Command Area • 이벤트에 대한 동작을 연결 • Title Area와 Command Area를 사용하지 않으면 LCD화면 전체를 Work Area로 설정

  23. 휴대폰 LCD화면 분할하기 • ShellComponent 객체의 생성 • 생성자 • ShellComponent() • LCD 전체화면에 맞게 생성 • ShellComponent(boolean inflate) • Inflate 인수 • true  각 영역에 붙여지는 컴포넌트의 크기에 따라 각 영역의 크기가 결정 • false  1과 같이 생성 • ShellComponent(boolean inflate, boolean bTrans) • bTrans 인수  투명도 관련 • ShellComponent(int x, int y, int w, int h) • x, y 인수  화면의 위치 • w, h 인수  화면의 크기 • ShellComponent(int x, int y, int w, int h, boolean bTrans)

  24. 휴대폰 LCD화면 분할하기 • ShellComponent에 타이틀 붙이기 • setTitle() 메소드 • void setTitle(component cmp) • 다른 컴포넌트를 추가하여 타이틀 설정 • void setTitle(String str) • 문자열로 타이틀 설정 • 정보확인 • getTitle() 메소드

  25. 휴대폰 LCD화면 분할하기 • ShellComponent의 Work 영역에 컴포넌트 붙이기 • addComponent() 메소드 • setWorkComponet() 메소드 • 정보확인 • getWorkComponent() 메소드

  26. 휴대폰 LCD화면 분할하기 • ShellComponent의 Command 영역에 컴포넌트 붙이기 • setCommand() 메소드 • Void setCommand(Component cmp, boolean bGrab) • bGrab 인수 : 이벤트의 전달 여부 결정 • TRUE  이벤트를 추가된 setCommand가 먼저 받아들임 • FALSEShellComponent가 먼저 받아들여 처리한 후 cmp에 전달 • 정보확인 : getCommand() 메소드

  27. 휴대폰 LCD화면 분할하기 • ShellComponent 객체의 삭제 • void removeAllComponets() 메소드 • ShellComponent에 붙여진 모든 메소드 삭제 • void removeComponets(Component cmp) 메소드 • 인수로 주어진 컴포넌트만 삭제

  28. 휴대폰 LCD화면 분할하기 • UI 컴포넌트의 Card 객체 얻어오기 • 컴포넌트 객체가 생성될 때 ProxyCard 자동 생성 • GetCard() 메소드 • Card getCard() • 현재 연결된 컴포넌트의 최상위 컴포넌트의 Card를 리턴 • 언제나 getCard() 메소드는 ShellComponent의 Card를 반환 • 상위 부모 컴포넌트가 존재하지 않는 경우 NULL값 리턴

  29. 휴대폰 LCD화면 분할하기 • ShellComponent 내용 보기 • show() 메소드 • void show() • ShellComponent에 붙여진 자식 컴포넌트를 보여줌 • 차이점?? • displayLCD.pushCard(Shell.getCard()); • Shell의 Card를 리턴받아 이것을 Display 클래스 객체에 넣어주어 이것을 화면상에 보이게 함 • shell.show(); • 내부적으로는 1과 같은 동일한 작업을 수행

  30. ShellComponent 예제 import org.kwis.msp.lcdui.Jlet; import org.kwis.msp.lcdui.Display; import org.kwis.msp.lwc.ShellComponent; // UI컴포넌트 임포트 import org.kwis.msp.lwc.ButtonComponent; import org.kwis.msp.lwc.LabelComponent; public class ShellComponentExample extends Jlet { Display displayLCD ; protected void startApp(String[] arg0) { displayLCD = Display.getDefaultDisplay(); ShellComponent shell = new ShellComponent(); LabelComponent labelTitleArea = new LabelComponent("Shell Title Area"); LabelComponent labelWorkArea = new LabelComponent("Shell Work Area"); ButtonComponent buttonCommandArea = new ButtonComponent( "Shell Command Area", null); // 두번째인수 : 이미지 관련 shell.setTitle(labelTitleArea); shell.addComponent(labelWorkArea); shell.setCommand(buttonCommandArea, true); //displayLCD.pushCard(shell.getCard()); shell.show(); } protected void destroyApp(boolean arg0) {} }

  31. ShellComponent 예제 해당 Area에 객체 붙이기 Card 생성 실행결과

  32. ContainerComponent • ContainerComponent (추상 클래스) • 다른 여러 개의 컴포넌트를 담아내는 컴포넌트 • 담겨진 다른 컴포넌트들의 부모 컴포넌트 • ContainerComponent를 이용한 LCD화면 분할 • ContainerComponent에 여러 개 컴포넌트를 자식으로 추가 • ContainerComponent를 ShellComponent의 자식으로 추가

  33. ContainerComponent • 자식 컴포넌트의 위치와 크기 설정 • layout() 메소드를 이용 • 자식 컴포넌트의 configure() 메소드를 이용하여 각각의 자식 컴포넌트의 위치를 지정 class MyContainer extends ContainerComponent { protected void layout() { 자식Component.configure(); } }

  34. ContainerComponent • ContainerComponent의 생성 • 하위 자식 컴포넌트들은 ContainerComponent의 인셋(Inset) 내부에만 나타나고 외부에는 출력되지 않도록 함 • ContainerComponent의 생성자 • Protected ContainerComponent() • Container Component의 메소드

  35. ContainerComponent • ContainerComponent의 메소드

  36. ContainerComponent 예제 I • configure() 메소드 • void configure(int x, int y, int w, int h, int mask) • Mask 인수 • POS_MASK  상위 컴포넌트 내에서 위치 변경 • SIZE_MASK  상위 컴포넌트 내에서 크기 변경 h

  37. ContainerComponent 예제 I import org.kwis.msp.lcdui.Jlet; import org.kwis.msp.lcdui.Display; import org.kwis.msp.lwc.Component; import org.kwis.msp.lwc.ContainerComponent; import org.kwis.msp.lwc.ShellComponent; import org.kwis.msp.lwc.ButtonComponent; public class ContainerComponentEx1 extends Jlet { class ExtendedContainer extends ContainerComponent{ public ExtendedContainer() { super(); } protected void layout(){ int numComponent = getNumberOfComponent(); int height = getHeight(); int width = getWidth(); int widthComponent = width / numComponent; int heightComponent = height / numComponent; for(int i=0;i<numComponent;i++) { Component c = getComponent(i); // c.configure(2*i*(widthComponent/2),0,(widthComponent/2),height, // POS_MASK | SIZE_MASK); c.configure(0,2*i*(heightComponent/2),width,(heightComponent/2), POS_MASK | SIZE_MASK); } } }

  38. ContainerComponent 예제 I Display displayLCD ; ShellComponent shell; protected void startApp(String[] arg0){ displayLCD = Display.getDefaultDisplay(); shell = new ShellComponent(); ButtonComponent button1 = new ButtonComponent("Button1",null); ButtonComponent button2 = new ButtonComponent("Button2",null); ButtonComponent button3 = new ButtonComponent("Button3",null); ExtendedContainer container = new ExtendedContainer(); container.addComponent(button1); container.addComponent(button2); container.addComponent(button3); shell.setTitle(" Container Layout"); shell.setWorkComponent(container); displayLCD.pushCard(shell.getCard()); } protected void destroyApp(boolean arg0) { } }

  39. super() 메소드 • 생성자랑 관련 있는 메소드 • 부모클래스의 생성자를 호출하는 메소드

  40. ContainerComponent 예제 II • ContainerComponent 테두리 • 테두리 두는 것을 결정 • useFrame(boolean use) 메소드 • use 인수: true  테두리 설정, false  테두리 없음 • 테두리값 지정 • controlInset(boolean flag) 메소드 • flag인수 : true  테두리 두께 설정, false  테두리 두께 0

  41. ContainerComponent 예제 II import org.kwis.msp.lcdui.Jlet; import org.kwis.msp.lcdui.Display; import org.kwis.msp.lwc.Component; import org.kwis.msp.lwc.ContainerComponent; import org.kwis.msp.lwc.ShellComponent ; import org.kwis.msp.lwc.ButtonComponent ; public class ContainerComponentEx2 extends Jlet{ class ExtendedContainer extends ContainerComponent{ int dxInset , dyInset; public ExtendedContainer() { super(); } public ExtendedContainer(int x , int y) { super(); dxInset=x; dyInset=y; } protected void layout(){ int numComponent = getNumberOfComponent(); int height = getHeight()-(insetTop+insetBottom); int width = getWidth()-(insetLeft+insetRight); int widthComponent = width / numComponent; int heightComponent = height / numComponent; for(int i=0;i<numComponent;i++) { Component c = getComponent(i); c.configure(insetLeft,insetTop+2*i*(heightComponent/2), width, (heightComponent/2), POS_MASK | SIZE_MASK); } }

  42. ContainerComponent 예제 II protected void controlInset(boolean b) { insetTop = (short)dyInset; insetLeft = (short)dxInset; insetBottom =(short)dyInset; insetRight = (short)dxInset; } } Display displayLCD ; ShellComponent shell; protected void startApp(String[] arg0){ displayLCD = Display.getDefaultDisplay(); shell = new ShellComponent(); //shell = new ShellComponent(false, false); ButtonComponent button1 = new ButtonComponent("Button1",null); ButtonComponent button2 = new ButtonComponent("Button2",null); ButtonComponent button3 = new ButtonComponent("Button3",null); ExtendedContainer container = new ExtendedContainer(10,10); container.addComponent(button1); container.addComponent(button2); container.addComponent(button3); container.useFrame( true ); shell.setTitle(" Container Layout"); shell.setWorkComponent(container); displayLCD.pushCard(shell.getCard()); } protected void destroyApp(boolean arg0) { } }

  43. FormComponent • FormComponent • ContainerComponent를 상속받아 구현 • 다양한 컴포넌트를 자식으로 받아들여 일렬로 배열하여 화면을 구성하는 컴포넌트 • 자식 컴포넌트의 포커스 이동 • 상하로만 움직임(UP/Down 키를 사용) • 내부의 자식 컴포넌트가 많으면 자동적으로 스크롤바 생성

  44. FormComponent • FormComponent 생성자 • FormComponent() • FormComponent(boolean bVertical) • bVertical 인수 • true  위에서 아래로 배치 • false  왼쪽에서 오른쪽으로 배치

  45. FormComponent 메소드

  46. FormComponent 예제 import org.kwis.msp.lcdui.Jlet; import org.kwis.msp.lcdui.Display; import org.kwis.msp.lwc.ShellComponent; import org.kwis.msp.lwc.FormComponent; import org.kwis.msp.lwc.LabelComponent; import org.kwis.msp.lwc.ButtonComponent; public class FormComponentEx1 extends Jlet{ class ExtendedForm extends FormComponent { private int gab; public ExtendedForm(){ super(); } public ExtendedForm(int x ){ super(); setGab(x); } public ExtendedForm(boolean b , int x ){ super(b); setGab(x); } }

  47. FormComponent 예제 Display displayLCD ; ShellComponent shell; ExtendedForm form; public FormComponentEx1(){ displayLCD = Display.getDefaultDisplay(); shell = new ShellComponent(); } protected void startApp(String[] arg0) { LabelComponent label1 = new LabelComponent("Label 1"); LabelComponent label2 = new LabelComponent("Label 2"); LabelComponent label3 = new LabelComponent("Label 3"); ButtonComponent button1 = new ButtonComponent("Button",null); label1.setBackground(0x00ffff00); label2.setBackground(0x00ff0000); label3.setBackground(0x00ff00ff); form = new ExtendedForm(10); form.addComponent(label1); form.addComponent(label2); form.addComponent(label3); form.addComponent(button1); shell.addComponent(form); shell.setTitle(" Form Component"); displayLCD.pushCard(shell.getCard()); } protected void destroyApp(boolean arg0) { } }

  48. LabelComponent • LabelComponent • 사용자가 입력한 문자열과 이미지를 화면에 보여주는 컴포넌트 • LabelComponent 생성자 • LabelComponent() • LabelComponent(String str) • 주어진 문자열로 생성 • LabelComponent(String str, image img) • 주어진 문자열과 이미지 데이터로 생성 • LabelComponent(String str, String imgString) • 주어진 문자열과 지정된 자원에서 읽어 들인 이미지 데이터로

  49. LabelComponent 메소드

  50. LabelComponent 정렬 • 화면상의 나타나는 위치를 정렬 • setlayout(int) • 정렬 조합 규칙 • 수평방향 • LAYOUT_LEFT, LAYOUT_RIGHT, LAYOUT_HCENTER • 수직방향 • LAYOUT_TOP, LAYOUT_BOTTOM, LAYOUT_VCENTER • 예) 화면의 정중앙에 위치 • LAYOUT_VCENTER | LAYOUT_HCENTER

More Related