[Blackberry] 블랙베리 개발하기-4(UI 객체)

지난번에 오프라인으로 JavaDoc API을 볼 수 있는 것을 설명으로 이제 본격적으로 개발할 준비는 끝난 것 같습니다.
그럼 이제 화면에 몬가를 올려놔야지 만들고 싶은 어플의 모습이 그려지겠죠?
이제는 화면에 올려놓은 UI 컴포넌트에 대해서 설명을 하도록 하겠습니다.

앞에서 말을 했듯이 저도 공부를 하면서 정리를 하고 있고, 워낙이나 허접한 실력이기에 깊게 설명보다는 얕고 간단하게 설명을 하도록 하겠습니다.
자세한 내용은 지난번에 설명드린 API를 활용하시면 감사하겠습니다. ^^;;

제가 이번에 설명 드릴 UI 객체는 다음과 같습니다.

1. LableField
   • net.rim.device.api.ui.component.LabelField
   • 지난번에 Helloworld를 찍었던 것으로 화면에 글을 쓰기 위한 공간을 제공합니다.
2. EditField
   • net.rim.device.api.ui.component.EditField
   • 사용자에게 입력을 받기 위한 공간을 제공합니다.
3. PasswordEditField
   • net.rim.device.api.ui.component.PasswordEditField
   • 사용자에게 입력을 받지만 입력된 내용을 ‘*’로 표시합니다.
   • 이름 그대로 비밀번호 같은 것을 입력 받을 때 사용합니다.
4. DateField
   • net.rim.device.api.ui.component.DateField
   • Date 객체를 활용해서 날짜를 표시하는 공간을 제공합니다.
5. ButtonField
   • net.rim.device.api.ui.component.ButtonField
   • 사용자가 누를 수 있는 버튼을 제공합니다.
6. Dialog
• net.rim.device.api.ui.component.Dialog
• 사용자에게 Alert, Info 같은 메시지 박스를 제공한다.
7. SeparatorField
• net.rim.device.api.ui.component.SeparatorField
• 화면상에서 구분을 해주는 라인을 제공합니다.

위에 나열한 객체를 순서대로 생성해서 입력한 모습

아무런 꾸밈이 없기 때문에 정말 적막하게 화면이 구성되어버렸네요. ㅡㅡㅋ

버튼을 클릭했을 경우에 나타난 Dialog 모습

버튼을 클릭했을 때오는 Dialog 박스는 Info Box 입니다.

그럼 많은 분들이 원하시는 소스입니다.
지난번에는 Class를 두개를 생성해서 설명을 해 드렸는데, 조금 복잡한 것 같아서 간단한 코딩을 할 때는 한곳에 몰아서 생성할 수 있도록 하겠습니다.
그리고 입력하는 글자를 한글로 하고 싶었는데, 일단 한글이 깨지는 것을 봐서... 제가 시뮬레이터 설정의 몬가를 변경해야 되는데 아직까지 못 찾고 있습니다. 그래서 그것을 찾을 때까지는 입력하는 글자는 모두 영문입니다. 이해해 주세요.

view sourceprint?

01.package org.bbone.sample;

02. 

03.import net.rim.device.api.ui.Field;

04.import net.rim.device.api.ui.FieldChangeListener;

05.import net.rim.device.api.ui.UiApplication;

06.import net.rim.device.api.ui.component.ButtonField;

07.import net.rim.device.api.ui.component.DateField;

08.import net.rim.device.api.ui.component.Dialog;

09.import net.rim.device.api.ui.component.EditField;

10.import net.rim.device.api.ui.component.LabelField;

11.import net.rim.device.api.ui.component.PasswordEditField;

12.import net.rim.device.api.ui.component.SeparatorField;

13.import net.rim.device.api.ui.container.MainScreen;

14. 

15.public class UiSample1 extends UiApplication {

16. 

17.public UiSample1() {

18.UiSample1Screen uiScreen = new UiSample1Screen();

19.this.pushScreen(uiScreen);

20.}

21. 

22.public static void main(String[] args) {

23.UiSample1 theApp = new UiSample1();

24.theApp.enterEventDispatcher();

25.}

26. 

27.}

28. 

29.class UiSample1Screen extends MainScreen implements FieldChangeListener{

30.ButtonField buttonField;

31.public UiSample1Screen() {

32.// 생성된 객체의 타이틀을 설정한다.

33.setTitle("UI SAMPLE NO1");

34. 

35.// LabelField 객체를 생성한다.

36.// 생성시에 화면에 출력한 글자를 입력한다.

37.LabelField labelField = new LabelField("LabelField Sample");

38.// 생성된 객체를 Screen에 삽입합니다.

39.add(labelField);

40.// 구분자(SeparatorField)를 생성해서 Screen에 삽입한다.

41.add(new SeparatorField());

42. 

43.// EditField 객체를 생성한다.

44.// EditField에는 Label객체와 입력받는 곳에 초기값을 설정해서 생성할 수 있다.

45.EditField editField = new EditField("EditField : ", "—initValue");

46.//생성된 객체를 Screen에 삽입한다.

47.add(editField);

48.// 구분자(SeparatorField)를 생성해서 Screen에 삽입한다.

49.add(new SeparatorField());

50. 

51.// PasswordEditField 객체를 생성한다.

52.// 객체 생성시에 Label객와 초기값을 설정해서 생성할 수 있다.

53.PasswordEditField passEditField = new PasswordEditField("PassEditField : ", "");

54.// 생성된 객체를 Screen에 삽입한다.

55.add(passEditField);

56.// 구분자(SeparatorField)를 생성해서 Screen에 삽입한다.

57.add(new SeparatorField());

58. 

59.// DateField 객체를 생성한다.

60.// 객체 생성시에 Label객체와 날짜를 설정 할 수 있다.

61.DateField dateField = new DateField("DateField : ", System.currentTimeMillis(), DateField.DATE_TIME);

62.// 생성된 객체를 Screen에 삽입한다.

63.add(dateField);

64.// 구분자(SeparatorField)를 생성해서 Screen에 삽입한다.

65.add(new SeparatorField());

66. 

67.// ButtonField 객체를 생성한다.

68.// 객체 생성시에 Button에 출력된 Label을 설정해서 생성할 수 있다.

69.buttonField = new ButtonField("Button Field", ButtonField.CONSUME_CLICK);

70.// 버튼 클릭 이벤트에 대한 Listener를 등록한다.

71.buttonField.setChangeListener(this);

72.// 생성된 객체를 Screen에 삽입한다.

73.add(buttonField);

74.}

75.// 버튼에 등록한 Listener를 구현한다. 

76.public void fieldChanged(Field field, int context) {

77.// 발생한 이벤트가 buttonField에서 발생한지 여부를 비교한다.

78.if(field == buttonField){

79.// Dialog의 inform 박스를 활용해서 메시지를 보여준다.

80.Dialog.inform("This Field is ButtonField");

81.}

82.}

83.}

오늘은 여기까지 하겠습니다.
제가 설명하는 UI는 개발시에 자주 사용할 만한 것으로 더 많은 UI를 확인해 보고 싶으시다면 API를 찾아보시면 되겠습니다.
다음에는 이번에 이어서 UI에 대한 설명을 더 하도록 하겠습니다.