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 모두 제공 • High Level UI를 중심으로 • org.kwis.msp.lwc 패키지에 포함 • Ex) ListComponent, DialogComponent..

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

휴대폰 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)

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

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

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

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

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

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

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) {} }

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

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

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

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

ContainerComponent • ContainerComponent의 메소드

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

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); } } }

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) { } }

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

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

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); } }

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) { } }

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

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

FormComponent 메소드

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); } }

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) { } }

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

LabelComponent 메소드

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

UI 컴포넌트

UI 컴포넌트

Presentation Transcript

UI 309

UI SIDES

jQuery UI

UI Controls

FLAT UI

Mongoose UI

GERIATRICS : UI

UI/UI prototype generation

jQuery UI

Jquery ui

IR UI

UI kompositio

UI Concepts

UI Design

Creating UI

UI command

Tangible UI

UI ontwerpproces

UI SUMMARY

CTSS-UI

Ui-View

ui-woorden