고수준 사용자 인터페이스 프로그래밍 Lecture #4

강의 목차 사용자 인터페이스의 개념과 종류를 알아본다. Display, Command, Displayable 등 기본 API의 기능과 사용 방법을 익힌다. TextBox, Alert, List 등 컴포넌트 클래스의 기능과 사용 방법을 익힌다. Item의 서브 클래스를 화면에 출력하는 Form 클래스의 활용 방법을 익힌다. Mobile Programming

미들렛 UI API (1) MIDlet UI API javax.microedition.lcdui package MIDP 사용자 interface를 위한 다양한 클래스와 interface를 제공 MIDP에서 기본적으로 제공하는 여러 가지 사용자 interface: Mobile Programming

Javax.microedition.lcdui 미들렛 UI API MIDlet UI API 구조 Command Graphics Displayable Display Screen Canvas TextBox List Alert Form Javax.microedition.lcdui Javax.microedition.lcdui.gam GameCanvas Mobile Programming

Display 클래스 Display 클래스 화면 출력과 입력 장치 관리를 담당 화면 출력 getDisplay() 메소드 이용 display = Display.getDisplay(this); Displayable 객체 출력 텍스트 박스, 리스트, 폼, 캔버스 등 Mobile Programming

Displayable 컴포넌트 (1) MIDP에서 사용 가능한 Display 컴포넌트들이 가져야 할 기능을 정의 Mobile Programming

Displayable 컴포넌트 (2) Displayable 컴포넌트의 기본적인 클래스 Screen 클래스 Canvas 클래스 Displayable 클래스의 기본 메소드: Mobile Programming

Command 클래스 (1) Command 클래스 생성자 Command 클래스로 생성할 수 있는 명령의 종류 Command(String label, int commandType, int priority) Command(String shortLabel, String longLabel, int commandType, int priority) Mobile Programming

Command 클래스 (2) Command 클래스 명령어 객체 생성 방법 Command ok_cmd = new Command("OK", Command.OK, 1); Command exit_cmd = new Command("Exit", Command.EXIT, 0); 명령어 객체를 Displayable 객체(textbox) 에 추가하는 방법 addCommand() 이용 textbox.addCommand(ok_cmd); textbox.addCommand(exit_cmd); Mobile Programming

Command 클래스 (3) 예제: 명령어 생성 프로그램 CommandMIDlet.java 01 import javax.microedition.midlet.MIDlet; 02 import javax.microedition.lcdui.*; 03 04 public class CommandMIDlet extends MIDlet { 05 private Display display; 06 private Displayable textbox; 07 08 public CommandMIDlet() { 09 textbox = new TextBox("Command MIDlet", "명령어 출력", 20, TextField.ANY); 10 Command ok_cmd = new Command("OK", Command.OK, 1); 11 Command exit_cmd = new Command("Exit", Command.EXIT, 0); 12 textbox.addCommand(ok_cmd); 13 textbox.addCommand(exit_cmd); 14 } 15 protected void startApp() { 16 display = Display.getDisplay(this); 17 display.setCurrent(textbox); 18 } 19 protected void destroyApp(boolean arg0) { } 20 protected void pauseApp() { } 21 } 실행 결과 화면 Mobile Programming

Command 클래스 (4) 예제: 명령어 처리 프로그램 초기화면 OK 명령 실행 결과 OK 버튼 클릭 Mobile Programming

Command 클래스 (5) 예제: 명령어 처리 프로그램 CommandActionMIDlet.java 01 import javax.microedition.midlet.MIDlet; 02 import javax.microedition.lcdui.*; 03 04 public class CommandActionMIDlet extends MIDlet implements CommandListener { … 10 public CommandActionMIDlet() { 16 textbox.setCommandListener(this); 17 } 24 public void commandAction(Command cmd, Displayable dis) { 25 if(cmd == ok_cmd) { 26 textbox = new TextBox("Command Action MIDlet", "OK 버튼 클릭 !!", 20, TextField.ANY); 27 textbox.addCommand(exit_cmd); 28 textbox.setCommandListener(this); 29 display.setCurrent(textbox); 30 } else if(cmd == exit_cmd) { 31 notifyDestroyed(); 32 } 33 } 34 } Mobile Programming

Screen 컴포넌트 MIDP 사용자 interface의 최상위 추상화 클래스 제공 사용자 입력을 렌더링하는 특정 디바이스의 그래픽을 캡슐화한 객체 Screen 클래스의 주요 메소드: Mobile Programming

TextBox 클래스 (1) 개요 생성자 화면에 텍스트를 보여주거나 사용자가 텍스트를 직접 입력하고 편집할 수 있다. title : 제목 text : 화면에 표시할 초기 내용 maxSize : 저장할 수 있는 최대 문자 수 constraints : 입력 형식 TextBox(String title, String text, int maxSize, int constraints) Mobile Programming

TextBox 클래스 (2) 사용 예 제목 화면출력 내용 TextBox textbox = new TextBox( "First MIDlet", // 제목 "명령어 출력", // 화면 출력 내용 20, // 문자의 최대 크기 TextField.ANY); // 모든 입력 유형 가능 제목 화면출력 내용 Mobile Programming

TextBox 클래스 (3) 입력 형식 TextBox 클래스의 메소드  ANY EMAILADDR NUMERIC PASSWORD PHONENUMBERUR URL TextBox 클래스의 메소드  Mobile Programming

TextBox 클래스 (4) 간단한 문자 입출력 프로그램 초기화면 문자 입력 결과 OK 명령 실행 결과 BACK 버튼 클릭 초기화면 문자 입력 결과 OK 명령 실행 결과 문자 입력 OK 버튼 클릭 Mobile Programming

TextBox 클래스 (5) 간단한 문자 입출력 프로그램 TextBoxTest.java 01 import javax.microedition.midlet.*; 02 import javax.microedition.lcdui.*; 03 04 public class TextBoxTest extends MIDlet implements CommandListener { 05 private TextBox textbox; 06 private Command ok_cmd; 07 private Command exit_cmd; 08 private Command back_cmd; 09 private Display display; 10 11 public TextBoxTest() { 12 ok_cmd = new Command("OK", Command.OK, 1); 13 exit_cmd = new Command("Exit“, Command.EXIT, 1); 14 back_cmd = new Command("Back", Command.BACK, 1); } 16 public void startApp() { 17 textbox= new TextBox("문자를 입력하세요", "“, 30, TextField.ANY); 18 textbox.addCommand(ok_cmd); textbox.addCommand(exit_cmd); display = Display.getDisplay(this); Mobile Programming

TextBox 클래스 (6) 간단한 문자 입출력 프로그램 TextBoxTest.java 21 textbox.setCommandListener(this); 22 display.setCurrent(textbox); 23 } 24 public void pauseApp() { } 25 public void destroyApp(boolean unconditional) { } 26 public void commandAction(Command cmd, Displayable disp) { 27 if(cmd == ok_cmd) { 28 String tb = textbox.getString(); 29 textbox = new TextBox("입력 결과", "입력된 문자는 :\n " + tb + "입니다.", 30, TextField.ANY); 30 textbox.addCommand(back_cmd); 31 textbox.setCommandListener(this); 32 display.setCurrent(textbox); 33 } else if(cmd == exit_cmd) { 34 notifyDestroyed(); 35 } 36 if(cmd == back_cmd) { 37 startApp(); 38 } 39 } 40 } Mobile Programming

Alert 클래스 (1) 개요 생성자 경고 메시지 title : 제목 alertText : 화면에 출력되는 문자열(내용) alertImage : 화면에 출력되는 이미지 alertType : 경고 유형(ALARM, CONFIRMATION, ERROR, INFO, WARNING) Alert(String title) Alert(String title, String alertText, Image alertImage, AlertType alertType) Mobile Programming

Alert 클래스 (2) 사용 예 #1 사용 예 #2 Alert(String title, String alertText, Alert alert = new Alert("Alert !!"); alert.setString(“경고! /n 다시 입력하세요."); // 화면 출력 문자열 try { Image img = Image.createImage("/alertfig.png"); // 이미지 생성 } catch(Exception e) { } alert.setImage(img); // 화면 출력 이미지 alert.setType(AlertType.INFO); // 경고 유형 사용 예 #2 Alert(String title, String alertText, Image alertImage, AlertType alertType) 를 이용하여 경고 화면을 출력하시오. <112-113 페이지 참조> Mobile Programming

Alert 클래스 (3) 단순 경고 메시지 프로그램 프로그램: <예제 4-4 참조> 실습 경고 표시 화면이 자동 반환되지 않도록 <예제 4-4>를 수정하시오 OK 버튼 클릭 자동 반환 Mobile Programming

List 클래스 (1) 개요 생성자 이미지와 문자열로 구성된 선택 항목 리스트 제공 리스트 유형 IMPLICIT, EXCLUSIVE, MULTIPLE 생성자 title : 제목 listType : 리스트의 유형(IMPLICIT, EXCLUSIVE, MULTIPLE) stringElements : 리스트의 항목 문자열 imageElements : 리스트의 항목 앞에 표시할 이미지 List(String title, int listType) List(String title, int listType, String[] stringElements, Image[] imageElements) Mobile Programming

List 클래스 (2) 사용 예 프로그램: <예제 4-6 참조> String[] select ={" 고급 게임 ", " 중급 게임 ", " 초급 게임"}; Image high_game = Image.createImage("/high_game.png"); Image medium_game = Image.createImage("/medium_game.png"); Image first_game = Image.createImage("/first_game.png"); Image[] imageArray = new Image[]{high_game, medium_game, first_game}; List lists = new List("리스트 테스트“, // 제목 "List.IMPLICIT“, // 리스트 유형 select, // 리스트 문자열 imageArray); // 이미지 프로그램: <예제 4-6 참조> Mobile Programming

List 클래스 (3) 리스트 유형 별 선택 처리 프로그램 IMPLICIT SELECT_COMMAND 이용 <예제 4-7 참조> if(c == List.SELECT_COMMAND) { int index = lists.getSelectedIndex(); alert = new Alert("리스트 선택 정보", lists.getString(index) +"을 선택하였습니다.“, null, AlertType.INFO); display.setCurrent(alert, lists); } 명령어 객체 이름을 직접 정의하고 객체 생성하여 이용 <예제 4-8 참조> private Command select_cmd; select_cmd = new Command("Select", Command.ITEM, 1); lists.setSelectCommand(select_cmd); public void commandAction(Command c, Displayable d) { if(c == select_cmd) { … Mobile Programming

List 클래스 (4) 리스트 유형 별 선택 처리 프로그램 EXCLUSIVE 실습 명령어 객체 이름을 직접 정의하고 객체 생성하여 이용 lists = new List("EXeclusive 리스트",List.EXCLUSIVE, select, imageArray); select_cmd = new Command("SELECT", Command.ITEM, 1); lists.addCommand(select_cmd); … public void commandAction(Command c, Displayable d) { if(c==select_cmd) { int index = lists.getSelectedIndex(); 실습 예제 4-8 를 수정하여 위의 예를 적용하시오. Mobile Programming

List 클래스 (5) 리스트 유형 별 선택 처리 프로그램 MULTIPLE 명령어 객체 이름을 직접 정의하고 객체 생성하여 이용 lists = new List(“Multiple 리스트",List.MULTIPLE, select, imageArray); select_cmd = new Command("SELECT", Command.ITEM, 1); lists.addCommand(select_cmd); … public void commandAction(Command c, Displayable d) { if(c==select_cmd) { …… <참조 예제 4-9> Mobile Programming

Form 클래스 (1) 개요 여러 아이템(Item)을 한 화면에함께 출력하는 일종의 틀 Form 클래스 이용 예 이미지(ImageItem) 읽기 전용 텍스트 필드(StringItem) 편집 가능 텍스트 필드(TextField) 편집 가능 날짜 필드(DateField) 게이지(Gauge) 선택 그룹(ChoiceGroup) 사용자 정의항목 (CustomItem) 등 Form 클래스 이용 예 Form 객체를 이용해 화면에 TextField, DateField, ImageItem을 출력한 결과 TextField DateField ImageItem Mobile Programming

Form 클래스 (2) 생성자 이용 예: title : 제목 Item[] items : item 배열 private TextField textfield; private DateField datefield; private ImageItem imageitem; private Item[] items; textfield = new TextField("텍스트 필드", "문자를 입력하세요 : “, 30, TextField.ANY); datefield = new DateField("날짜 및 시간", DateField.DATE_TIME); imageitem = new ImageItem("게임 캐릭터", game_img, ImageItem.LAYOUT_DEFAULT, "게임 캐릭터 제공할 수 없음"); items = new Item[]{textfield, datefield, imageitem}; // items 배열 객체 생성 forms = new Form("Form Test", items); // Form 제목과 items 배열 Form(String title) Form(String title, Item[] items) Mobile Programming

Form 클래스 (3) 예제 4-10 참조 Form 클래스의 첫 번째 생성자인 Form(String title)를 이용해 먼저 제목만 있는 Form 객체를 생성한 뒤 Form에 포함할 항목들을 생성하여 추가하는 과정을 보여주는 프로그램 Mobile Programming

Item 컴포넌트 Form, Alert 등의 컨테이너에 추가될 수 있는 컴포넌트의 슈퍼 클래스(Super Class) Mobile Programming

ChoiceGroup 컴포넌트 (1) 아이템 그룹에 속한 여러 개의 아이템 중에서 단일 또는 다중 선택할 수 있는 기능을 제공 하나 또는 여러 개를 선택할 수 있는 그룹을 생성 가능 EXCLUSIVE와 MULTIPLE 타입만 지원 예: form = new Form("GhoiceGroup Test"); // 선택할 수 있는 form을 생성 form2 = new Form("당신이 선택한 결과는"); //결과를 보여주는 form생성 //결과 화면에서 보여줄 TextField생성 tf = new TextField("좋아하는 운동은?","",20,TextField.ANY); String[] select_radio={"축구","야구","농구","배구","탁구"}; cgradio = new ChoiceGroup("좋아하는 스포츠경기는?", ChoiceGroup.EXCLUSIVE, select_radio, null); /* 좋아하는 스포츠 경기라는 레이블을 가지고 EXCLUSIVE라는 타입과 보여줄 문자열의 값을 갖는 ChoiceGroup를 생성 */ Mobile Programming

ChoiceGroup 컴포넌트 (2) Mobile Programming

DataField 컴포넌트 (1) 날짜와 시간을 Form에 보여주는 Item 객체 날짜, 시간의 정보를 수정하거나 두 가지 정보 모두를 설정할 수 있다. 입력모드 DATE입력 모드: DATE입력 모드는 날짜만을 설정 TIME 입력 모드: TIME 입력 모드는 단지 시간정보(시간,분)만 설정 DATE_TIME 입력 모드: DATE_TIME 입력 모드는 시간과 날짜를 모두 설정 Mobile Programming

DataField 컴포넌트 (2) 예: // 현재의 디스플레이를 얻는다. display =Display.getDisplay(this); form = new Form("DateField Test"); //Date_Time라는 모드를 가진 DateField생성 DateField df = new DateField(" ", DateField.DATE_TIME); form.append(df); // form에 추가한다. display.setCurrent(form); Mobile Programming

Gauge 컴포넌트 (1) Form 내에서 프로그레시브 바 형태의 막대 그래프를 보여주기 위한 클래스 0부터 주어진 최대값까지… interactive or non-interactive Mobile Programming

Gauge 컴포넌트 (2) 예: dis= Display.getDisplay(this); form = new Form("Gauge Test"); Gauge gu = new Gauge("음량", false,100,70); Gauge gu1 = new Gauge("크기", true,100,50); form.append(gu); form.append(gu1); dis.setCurrent(form); Mobile Programming

ImageItem 컴포넌트 Image 객체가 Form이나 Alert에 추가 될 때 레이아웃 지시어를 제공 레이아웃 지시자를 조합하여 사용하는 규칙 LAYOUT_DEFAULT는 다른 지시자와 함께 사용할 수 없다. 실질적으로 그 값이 0이기 때문에 다른 레이아웃 값과 조합하면 오버라이딩이 된다. LAYOUT_LEFT+LAYOUT_RIGHT는 LAYOUT_CENTER와 같은 효과를 나타낸다. LAYOUT_CENTER는 LAYOUT_LEFT또는LAYOUT_RIGHT과 같이 사용할 수가 없다. 일반적으로, LAYOUT_LEFT, LAYOUT_RIGHT와 LAYOUT_CENTER를 LAYOUT_NEWLINE_BEFORE나 LAYOUT_NEWLINE_AFTER를 같이 사용할 수가 있다. Mobile Programming

StringItem 컴포넌트 내용은 어플리케이션에 의해서만 변경 가능. Mobile Programming