高层用户界面设计.ppt

《高层用户界面设计.ppt》由会员分享，可在线阅读，更多相关《高层用户界面设计.ppt（101页珍藏版）》请在三一办公上搜索。

1、广东科贸信息工程 张雷,J2ME程序设计,高层用户界面设计,广东科贸信息工程 张雷,三章、高层用户界面设计,学习内容：1、用户界面基本元素2、全屏界面编程3、item组件使用技巧j2meAPI地址：http:/,广东科贸信息工程 张雷,学习目标和要求,了解J2ME中用于电子商务程序的高层用户界面设计。需要掌握：1、高层界面前景和背景元素的构成及使用。2、高层事件的传递和处理3、高层事件中特殊的Command,广东科贸信息工程 张雷,什么高层用户界面？,什么高层用户界面？Screen继承下来的这一组被称为高层用户界面功能：主要完成电子商务方面的程序。看下图。,广东科贸信息工程 张雷,广东科贸信息

2、工程 张雷,3-1 用户界面的基本元素,在学习高层之前，我们来学习下用户界面的基本元素1、display:屏幕输入、输出设备的管理器2、Displayable:屏幕背景的基础3、Ticker:滚动字幕4、Item:屏幕上的组件,广东科贸信息工程 张雷,3-1-1 Display,Display:屏幕输出和输入设备的管理器。作用：MIDlet通常由若干个屏幕组成，每个屏幕包含若干个组件元素，那么程序的运行依靠屏幕之间、组件之间的调度和切换。Display完成这个工作。,广东科贸信息工程 张雷,用法：1、定义一个全局的变量：Private Display display;2、在MIDlet的构造方

3、法（构造器）中获得 实例。Display=Display.getDisplay(this);注释：方法getDisplay(MIDlet m);的参数是MIDlet类型。,广东科贸信息工程 张雷,3、在starApp()中设置MIDlet的初始屏幕。display.setCurrent(mainScreen);注释：mainScreen是一个Screen类及其子类（FormTextBoxAlertList）的一个对象。,广东科贸信息工程 张雷,Display方法,setCurrent()方法:setCurrent(Displayable dis)把参数的屏幕设置为当前屏幕，其他屏幕则处于背景状

4、态。注释：Displayable是所有屏幕的基类。例如1：Display display;：Form form;：display.setCurrent(form);,广东科贸信息工程 张雷,例如2：private Display display;：private TextBox mainScreen=null;：display.setCurrent(mainScreen);,广东科贸信息工程 张雷,setCurrent()针对Alert屏幕,Alert屏幕是个特殊的屏幕：特点：它在显示一段时间后会自动退出。注意：所以如果需要使用SetCurrent()将Alert一个对象设置前景屏幕时，必须给

5、出Alert消失后的屏幕。例如：:Display display;:TextBox first;:Alert alert;display.setCurrent(alert,first);设置在alert 消失后显示first屏幕。,广东科贸信息工程 张雷,实验1,实验内容：1、创建一个form画板对象，form1，一个textbox画板对象tb1.分别初始化对象。2、创建display对象，初始化，并将form1设置为midlet应用成程序的初始屏幕。,广东科贸信息工程 张雷,getCurrent();获取当前处于前景的屏幕。问题：返回值是什么类型？例如：:Private Display di

6、splay;:Form form1,form2;:form2=display.getCurrent(form1);,广东科贸信息工程 张雷,getDisplay();作用：获得当前MIDlet的Display的一个对象（实例）。特点：1、在MIDlet中至少被调用一次。2、每次调用都是得到同一个Display对象（实例）。,广东科贸信息工程 张雷,3-1-2屏幕背景的基础-Displayable,类Displayable定义：是所有构成背景屏幕类的基类。主要包括：Screen 高层用户界面Canvas底层用户界面,广东科贸信息工程 张雷,基本功能,Displayable界面的基本功能：1、一个

7、标题栏。2、一个滚动字幕。3、一个命令侦听器（CommandListener）4、多个命令的容器。注意：每个Displayable只有一个 命令侦听器，如果设置了多个，只有最后一个有效。,广东科贸信息工程 张雷,3-1-3滚动字幕-Ticker,有什么用？为屏幕设置显示滚动字幕如何使用:Form firstscreen;:Ticker ticker1=new Ticker(“这里显示滚动字幕”);:firstscreen=new Form(“第一屏幕”);:firstscreen.setTicker(ticker1);firstscreen中的滚动字幕就是ticker1了.,广东科贸信息工程

8、张雷,Ticker方法,1、构造方法:Tocker(String string);参数说明:string 是滚动字幕中的内容.2、setString(String string)：设置滚动字幕中的内容 例如：ticker1.setString(“欢迎参观”);3、getString():获得滚动字幕中的内容。,广东科贸信息工程 张雷,实验2,实验内容：在实验1的基础上，创建一个滚动字幕ticker，初始化该对象，并将该对象显示在form1中，通过display对象将form1显示在手机屏幕中。,广东科贸信息工程 张雷,代码3.2,广东科贸信息工程 张雷,广东科贸信息工程 张雷,广东科贸信息工程

9、 张雷,3-1-4 Form上的组件-Item,是什么：是所有可以在屏幕上显示的组件的基类。象什么：类似于我们在j2se中的窗口界面的组件，例如：JTextFieldJButtonJlabel等等属性：抽象类，具体组件由其子类完成。子类有哪些：下图。,广东科贸信息工程 张雷,广东科贸信息工程 张雷,Item在使用中的特点,如何在屏幕中加入组件：以TextField组件为例：1:Form form;屏幕2:TextField tf1,tf2;组件3:tf1=new TextField(“用户名”,”,10,TextField.ANY);4:tf2=new TextField(“电邮”,”,30,

10、TextField.EMAILADD);5:form.append(tf1);将组件加入到屏幕中6:form.append(tf2);将组件加入到屏幕中,广东科贸信息工程 张雷,构造方法（构造器）：TextField(String str1,String Str2,int x,TextField.ANY);注释：TextField构造方法共有4个参数，第一个为静态显示的内容 第二个为需要用户填写的内容 第三个为文本宽度 第四个为显示的内容属性,广东科贸信息工程 张雷,实验3,实验内容：根据实验1，创建两个textfield组件，将其加入到form1画板中。通过display显示出来。,广东科贸

11、信息工程 张雷,3-1-6命令按钮-Command,首先，我们来回忆下，j2se如何处理事件步骤：1、定义一个类，来实现接口ActionListener class hand implements ActionListener2、监听者对象向事件源对象注册Button but=new Button();but.addActionListener(hand);3、监听者调用相应的接口方法，来处理这样的事件。actionPerformed(ActionEvent e),广东科贸信息工程 张雷,在j2me中如何处理事件？J2ME中的事件处理工具Command.步骤如下：1、生成的MIDlet子类必须

12、实现CommandListener,ItemCommandListener例如：public class generalItemExample extends MIDlet implements CommandListener,ItemCommandListener,广东科贸信息工程 张雷,2、创建命令对象Command tf1command,exitcommand;3、初始化命令对象:exitcommand=new Command(“退出”,Command.EXIT,2);:tf1command=new Command(“Edit1”,Command.ITEM,3);4、将命令加入到Item

13、或Screen中，进行监听。:text1.addCommand(tf1command);:form.addCommand(exitcommand);,广东科贸信息工程 张雷,5、在设置侦听对象为本屏幕:form.setCommandListener(this);6、通过方法commandAction()处理事件：注意：处理Displayable和Item对象分别有不同的commandAction()方法。Public void commandAction(Command cmd,Item item)Public void commandAction(Command cmd,Displayabl

14、e screen),广东科贸信息工程 张雷,命令构造方法,Command(String label,int commandType,int priority):label:标签.是该命令在屏幕中的显示内容.种类:长标签短标签.如果需要使用长标签,则使用下面的构造方法.Command(String shortLabel,String longLabel,int commandType,int priority),广东科贸信息工程 张雷,Command的类型:,广东科贸信息工程 张雷,命令按钮的优先级,构造方法的最后一个参数.1为最高级别,数字越大级别越低.,广东科贸信息工程 张雷,实验4,实验目

15、的：熟练掌握DisplayTickerItem,已经Command的使用。实验内容：1、设计两个画板，要求实现在两个屏幕之间可以顺利切换。,广东科贸信息工程 张雷,3-2高层用户界面设计-全屏界面编程,高层用户界面设计Screen包括4个子类.针对不同的需求分为四种。1、TextBox2、Alert3、List4、Form（表单）这四个类的编程，屏幕都占据了整个手机屏幕，所以叫做全屏界面编程。下面我们逐个学习。,广东科贸信息工程 张雷,3-2-1 TextBox-制作输入屏幕,TextBox是什么:一个可以用于文本输入的屏幕类。有什么作用：可以允许用户输入姓名、电话、电邮、密码等文本信息，通常

16、作为文本编辑器。,广东科贸信息工程 张雷,TextBox方法,1、构造方法（构造器、构造函数）：Public TextBox(String title,String text,int maxsize,int constraints)参数说明：Title:是这个屏幕的标题。Text:文本区域初始化字符串Maxsize:指文本区域中最大可容纳的字符数，必 须为大于0的整数。,广东科贸信息工程 张雷,Constraints,Constraints:约束性参数。例如：其值为TextField.NUMBER时，只可以输入数字（0到9），这个时候在文本区域中只能接受数字，如果输入的不满足约束，则出现异常。

17、例如：其值为TextField.ANY时，代表TextBox中接受任何输入。Constraints的参数值：必须是TextField类中定义的几个输入约束类型,广东科贸信息工程 张雷,TextField约束参数表,广东科贸信息工程 张雷,构造方法使用实例,构造方法实例：:Display display;:TextBox tbmMain=new TextBox(“”,”,255,TextField.ANY);:display=Display.getDisplay(this);:display.setCurrent(tbmMain);,广东科贸信息工程 张雷,2、文本处理方法,2、文本处理方法：T

18、extBox中文本处理的方法主要包括：设置文本1）、setString(String text)2）、setChars(char data,int offset,int length)说明：置换指定位置的字符或字符串，data为要置换的内容，offset代表从这个位置开始置换，length代表要置换多少字符例如：:String str=“abcd”;:tbmMain.setChars(str.toCharArray(),0,str.length();,广东科贸信息工程 张雷,获得输入文本3）、public String getString();4）、public int getChars(ch

19、ar data)说明：上面这个使用起来有点麻烦,但功能强大。,广东科贸信息工程 张雷,插入文本（insert）5）、public void insert(char data,int offset,int length,int position)6）、public void insert(String src,int position);删除文本：delete()7）、public void delete(int offset,int length)说明：TextBox我们就介绍到这里，其他内容有时间大家自己研究下。,广东科贸信息工程 张雷,3-2-2Alert 设计警告/信息提示屏幕,Aler

20、t有什么特性：警告/提示性屏幕。类似对话框。特点:具有自动消除机制.Display专门为Alert设计的setCurrent()方法setCurrent(Alert alert,Displayable nextDisplayable);,广东科贸信息工程 张雷,Alert方法,1、构造方法：public Alert(Stringtitle,StringalertText,ImagealertImage,AlertTypealertType)参数说明：Title:标题，可以为空alertText:警告/提示的内容alertImage:可以使用一个图片，可以为空,广东科贸信息工程 张雷,alert

21、Type：警告类型。表3。2 报警类型,广东科贸信息工程 张雷,2、setTimeout（int x）作用：设置Alert在屏幕上停留的时间（毫秒）,广东科贸信息工程 张雷,3、setCommandListener(Displayable dis)作用：设置命令侦听器，监听当前的命令。在使用Alert时注意：不要使用这个方法，否则，Alert屏幕将长期存在。,广东科贸信息工程 张雷,Alert 中的命令和侦听器,Alert 中拥有一个自带的命令Public static final Command DISMISS_COMMAND;特点:1、当Alert被创建时,这个命令就被创建了.2、不可以在

22、Displayable中被消除.3、它的优先级是最高的,为0(一般程序定义的最高级别是1),广东科贸信息工程 张雷,4、标签为”.为空5、它的命令属性是OK类型.6、当在Alert中加入一个命令时,它自动消除,当没有其他命令时,再次出现.,广东科贸信息工程 张雷,Alert使用事例,1:Display display;2:TextBox calculatorScreen;3:Alert errorScreen;4:errorScreen=new Alert(“警告”,”您的回答是错误的”,null,AlertType.ERROR);5:errorScreen.setTimeout(6000);

23、6:errorScreen.setCommandListener(this);7:display.setCurrent(errorScreen,calculatorScreen);,广东科贸信息工程 张雷,3-2-3菜单设计,有时间进行讲解。,广东科贸信息工程 张雷,3-3 Form(表单)中Item组件使用技巧,讲Form实质上是在讲Item如何使用Item是什么？怎么使用?我们在3-1-4这一节已经讲解了。这里我们来介绍两个内容1、在Form中使用Item要注意的事项2、逐个介绍个组件如何使用。,广东科贸信息工程 张雷,广东科贸信息工程 张雷,3-3-1在Form中使用Item注意事项,1

24、、唯一性：每个Item对象在某一时刻只能放置在一个Form上。注意:如果需要在其他Forms上使用这个Item对象，必须先在原Form中删除此对象，然后在加入到另个Form上。,广东科贸信息工程 张雷,2、Form中的Item索引：1：在Form中的每个Item都有一个标记其顺序的索引。2：这个索引的值从0到size-1。3：当有新的Item加入到Form中，自动排列在末尾，size加一。4：当删除一个Item对象时，size减一。5：其他Item对象的索引自动更改，这个索引由系统管理。,广东科贸信息工程 张雷,3、Form允许注册两种侦听器：1）、CommandListener:侦听所有Fo

25、rm上的命令2）、ItemStateListener:侦听Form中所有的Item命令,广东科贸信息工程 张雷,3-3-2文本组件TextField、StringItem,TextField是什么：接收用户输入信息的组件。特点：类似TextBox,共享约束属性。与TextBox区别：一个组件，一个屏幕。,广东科贸信息工程 张雷,广东科贸信息工程 张雷,TextField方法,1、构造方法public TextField(Stringlabel,Stringtext,intmaxSize,intconstraints)Label:标签Text:文本区默认的内容maxSize:文本区长度Const

26、raints:约束条件。,广东科贸信息工程 张雷,构造方法事例：:TextField tf1=new TextField(“”,”,6,TextField.PASSWORD|TextField.NUMERIC)说明：多个约束时，使用“|”来实现。,广东科贸信息工程 张雷,2、getString();获得输入的内容，返回值类型是String3、setString();设置文本区内容。4、getChars();5、setChars();6、insert();7大家可以察看TextField的API,广东科贸信息工程 张雷,广东科贸信息工程 张雷,TextField使用实例,:TextField u

27、sernameField，passwordField;:usernameField=new TextField(“用户名”,”,10,TextField.ANY);:passwordField=new TextField(“”,”,10,TextField.PASSWORD|TextField.NUMERIC);:registrationScreen.append(usernameField);:registrationScreen.append(passwordField);:username=usernameField.getString();,广东科贸信息工程 张雷,StringItem

28、组件,有什么用？类似窗口编程中的静态文本组件，可以用来显示结果，静态信息等内容。,广东科贸信息工程 张雷,StringItem方法,如何使用？1、构造方法public StringItem(Stringlabel,Stringtext)说明：Label:标签Text:显示的内容。,广东科贸信息工程 张雷,2、getText（）获得对象中的内容。3、setTextpublic void setText(Stringtext)设置对象中的内容。4、setFontpublic void setFont(Fontfont)注释：font类型Font（Font.face,Font.Style,Font.

29、size）设置字体5、getFontpublic Font getFont()获得字体,广东科贸信息工程 张雷,StringItem使用实例,:StringItem resultText;:resultText=new StringItem(“”,”);:resultScreen.append(resultText);:resultText.setText(“大家好呀！”);,广东科贸信息工程 张雷,实验5,实验内容：1、创建两个Textfield组件，通过方法setString、getstring实现将组件1中的内容复制到组件2中。并显示出来。2、创建两个组件，分别为TextField,St

30、ringItem.自创代码，实现调用getString,setString,以及getText,setText().setFont()等方法。,广东科贸信息工程 张雷,实验6,实验内容：使用Alert技术，编辑一个进行简单运算1+1=？的程序，如果程序得到的答案不是2，警告屏幕就会显示在手机屏幕上，并停留6秒。实验目的：熟练掌握屏幕类TextBoxAlert.了解Choice屏幕的运用。,广东科贸信息工程 张雷,3-3-3下拉菜单组件-ChoiceGroup,有什么用？用于在Form（表单）中创建单选、多选菜单或下拉菜单。特点：由于手机的特殊性，这样的组件会被经常使用。,广东科贸信息工程 张雷

31、,ChoiceGroup方法,1、构造方法public ChoiceGroup(Stringlabel,intchoiceType,StringstringElements,ImageimageElements)参数说明：label 标签choiceType 菜单类型：三种EXCLUSIVE,MULTIPLE,or POPUPstringElements 菜单元素（文字部分）imageElements 菜单元素（图片部分）label-the items label(see Item)choiceType-EXCLUSIVE,MULTIPLE,or POPUPstringElements-set

32、 of strings specifying the string parts of the ChoiceGroup elementsimageElements-set of images specifying the image parts of the ChoiceGroup elements,广东科贸信息工程 张雷,构造方法2：public ChoiceGroup(Stringlabel,intchoiceType)说明：这个构造方法没给出菜单中具体的元素。label-the items label(see Item)choiceType-EXCLUSIVE,MULTIPLE,or PO

33、PUP,广东科贸信息工程 张雷,choiceType 菜单类型：三种Exclusive.EXCLUSIVE:单选Exclusive.MULTIPLE:多选Exclusive.POPUP:下拉菜单。,广东科贸信息工程 张雷,下拉菜单,广东科贸信息工程 张雷,单选,广东科贸信息工程 张雷,多选,广东科贸信息工程 张雷,2、append：增加一个元素。public int append(StringstringPart,ImageimagePart)说明：stringPart:增加一个元素。imagePart:为增加的元素设置图标。,广东科贸信息工程 张雷,3、insert():在指定的位置加入一个

34、菜单元素。public void insert(intelementNum,StringstringPart,ImageimagePart)说明：elementNum-指定要加入的元素在菜单中的位置stringPart-增加一个元素（文字部分）。imagePart-为增加的元素设置图标。elementNum-the index of the element where insertion is to occurstringPart-the string part of the element to be insertedimagePart-the image part of the eleme

35、nt to be inserted,or null if there is no image part,广东科贸信息工程 张雷,4、delete：删除指定位置的菜单项public void delete(intelementNum)elementNum 被删元素所在的索引。elementNum-the index of the element to be deleted,广东科贸信息工程 张雷,5、isSelected：设置指定的元素为当前元素public boolean isSelected(intelementNum)还有很多方法，大家可以查看其API下面，我们来看看几个实例,广东科贸信息

36、工程 张雷,下拉菜单实例,:ChoiceGroup cg=new ChoiceGroup(“”,ChoiceGroup.POPUP);:for(int i=1;i6;i+)：cg.append(“选项”+String.valueOf(i),null):form.append(cg);说明：ChoiceGroup.append(),广东科贸信息工程 张雷,下拉菜单,广东科贸信息工程 张雷,单选按钮实例,1:String items=“USB连接”,”蓝牙连接”,”红外连接”,”TCP连接”,”HTTP连接”；2:ChoiceGroup cg；3:cg=new ChoiceGroup(“请选择连接

37、类型”,Choice.EXCLUSIVE,item,null);4:form.append(cg);,广东科贸信息工程 张雷,单选,广东科贸信息工程 张雷,多选菜单,下面程序为多选菜单，并且为多选设置了图标。代码：:Image img1=null;:try:img1=Image.createImage(“/star.gif”);:catch(IOException e):e.printStackTrace();:,广东科贸信息工程 张雷,:Image img2=null;:try:img2=Image.createImage(“/bluePiece.gif”);:catch(IOExcepti

38、on e):e.printStackTrace();:image imgs=:img1,img1,img2,img2,img2;:String items=“USB连接”,”蓝牙连接”,”红外连接”,”TCP连接”,”HTTP连接”；:ChoiceGroup cg；:cg=new ChoiceGroup(“请选择连接类型”,Choice.EXCLUSIVE,item,imgs);:form.append(cg);,广东科贸信息工程 张雷,多选,广东科贸信息工程 张雷,实验7,实验内容：1、在表单画板中制作一个单选组件，要求共有5个选项。2、在表单画板中制作一个多选组件，要求共有6个选项。3、为

39、第一个单选组件，增加一个选项。4、为上面的多选组件，增加一个选项，并设置该项为选中项。,广东科贸信息工程 张雷,3-3-4进度指示条-Gauge,有什么用？用于显示进度或调整值的大小常用：文件下载或上载进度、音量大小分类：交互性分类：交互模式、非交互模式 值的范围分：范围确定模式、范围不确定模式注意：如果范围不确定，必须设置为非交互模式。,广东科贸信息工程 张雷,Gauge方法,1、构造方法public Gauge(Stringlabel,booleaninteractive,intmaxValue,intinitialValue)说明：label 标签interactive 设置使用者是否可

40、以修改（是否为交互模式）maxValue 最大值initialValue 初始值0.maxValue，也可以是CONTINUOUS_IDLE,INCREMENTAL_IDLE,CONTINUOUS_RUNNING，INCREMENTAL_UPDATING,广东科贸信息工程 张雷,广东科贸信息工程 张雷,广东科贸信息工程 张雷,Gauge实例,1、下面为两个范围确定的进度条。Program1:1:Gauge gauge=new Gauge(“调整音量大小”,true,100,20);2:form.append(gauge);Program2:3:Gauge gauge=new Gauge(“调整

41、音量大小”,false,100,20);3:form.append(gauge);说明：1、2为交互式 3、4为非交互式这个时候，Program1中我们可以通过手机上左右键来修改值。Program2不可以。,广东科贸信息工程 张雷,2、下面程序，每个500ms,更新一下进度条值(使用线程技术，模拟更新非交互进度条):new Thread():public void run()for(int i=0;i=gauge.getMaxValue();i+)gauge.setValue(i);try Thread.sleep(500);catch(Exception e)e.printStackTrac

42、e();:.start();,广东科贸信息工程 张雷,3、CONTINUOUS_RUNNING模式说明：此模式的进度条自动更新进度状态，显示一个连续的动画。注意：CONTINUOUS_IDLE模式，只给出一个指示器，不做任何处理，不显示动画，如果需要连续动画时，需要调用setValue(Gauge.CONTINUOUS_RUNNING)语句。应用：在实际中经常将RUNNING和IDLE两种模式交换使用，开始的时候使用IDLE，当有值变化时，通过方法setValue(Gauge.CONTINUOUS_RUNNING)转为RUNNING模式，当值变化结束后再通过setValue(Gauge.CON

43、TINUOUS_ IDLE)转变回来。,广东科贸信息工程 张雷,:Gauge=new Gauge(“”,false,Gauge.INDEFINITE,最大值，范围不确定 Gauge.CONTINUOUS_RUNNING);初始值:new Thread()public void run()gauge.setValue(Gauge.CONTINUOUS_RUNNING);try Thread.sleep(2000);catch(Exception e)e.printStackTrace();gauge.setValue(Gauge.CONTINUOUS_IDLE);:.start();,广东科贸信息工程 张雷,实验5,实验目的：熟练掌握ChoiceGroupGauge组件实验内容：1、实现代码3.10，检验ChoiceGroup的使用。2、实现音量调节(代码3.12)，检验 Gauge的使用。,广东科贸信息工程 张雷,3-3-5到3-3-7，时间日期组件、“按钮”-DataField,由于时间的关系，这部分内容大家自己学习。注意：在MIDP中没有按钮，需要通过别的方式来表示出来。,