LWUIT 自定义漂亮的Dialog

LWUIT 自定义漂亮的Dialog

 

LWUIT 提供了一个Dialog类，而Dialog类有很多静态的show方法来为我们显示对话框。首先不说这么多的show方法具体是干什么的（我也不清楚每个 show方法是做什么的），这些show方法不仅参数繁多，而且在页面中显示时非常之丑，以及对话框的大小和位置我们不能够随心所欲。

但 好歹Dialog类是继承自Form类的，我们当然可以把Dialog当成Form来使用，比如在Dialog中 addComponent,addCommand,addActionListener等。有了这些方法，我们就可以随心所欲的使用Dialog了，而且 通过resource editor的设计，可以设计出整个应用程序统一风格的Dialog.

首先，我们得对Dialog做一下分解，一个Dialog应该分为3部分：

1.Title(标题)

2.Text(文本)

3.Button(有时有，有时无)

既然分成了3部分，那Dialog的布局也显而易见，采用BorderLayout布局。Title部分可以用Label来代替，Text用TextArea来代替（因为有时候有多行文本），Button部分就不用多说了。

既然基本思路已经清楚了，那做起来就容易很多了，我们还是先看看基本的效果图吧：

LWUIT提供了一个Dialog类，而Dialog类有很多静态的show方法来为我们显示对话框。首先不说这么多的show方法具体是干什么的（我也 不清楚每个show方法是做什么的），这些show方法不仅参数繁多，而且在页面中显示时非常之丑，以及对话框的大小和位置我们不能够随心所欲。
但 好歹Dialog类是继承自Form类的，我们当然可以把Dialog当成Form来使用，比如在Dialog中 addComponent,addCommand,addActionListener等。有了这些方法，我们就可以随心所欲的使用Dialog了，而且 通过resource editor的设计，可以设计出整个应用程序统一风格的Dialog.
首先，我们得对Dialog做一下分解，一个Dialog应该分为3部分：
1.Title(标题)
2.Text(文本)
3.Button(有时有，有时无)
既然分成了3部分，那Dialog的布局也显而易见，采用BorderLayout布局。Title部分可以用Label来代替，Text用TextArea来代替（因为有时候有多行文本），Button部分就不用多说了。
既然基本思路已经清楚了，那做起来就容易很多了，我们还是先看看基本的效果图吧：

 

  
  

   
   
   
    1
 
   
                   Dialog dialog 

   
   =

   
    

   
   new

   
    Dialog();



   
    2
 
   
                   Button viewButton 

   
   =

   
    

   
   new

   
    Button();



   
    3
 
   
                   Label title 

   
   =

   
    

   
   new

   
    Label(

   
   "

   
   History

   
   "

   
   );



   
    4
 
   
                   TextArea body 

   
   =

   
    

   
   new

   
    TextArea(

   
   "

   
   You can see the icredit history of your query here.

   
   "

   
   );



   
    5
 
   
                   body.setEditable(

   
   false

   
   );



   
    6
 
   
                   body.setFocusable(

   
   false

   
   );



   
    7
 
   
                   body.setFocusPainted(

   
   false

   
   );



   
    8
 
   
                   title.setUIID(

   
   "

   
   SearchDialogTitle

   
   "

   
   );



   
    9
 
   
                   body.setUIID(

   
   "

   
   SearchDialogBody

   
   "

   
   );



   
   10
 
   
                   

   
   final

   
    Command CANCEL_CMD 

   
   =

   
    

   
   new

   
    Command(

   
   "

   
   Cancel

   
   "

   
   , 

   
   0

   
   );



   
   11
 
   
                   

   
   try

   
    {



   
   12
 
   
                       viewButton.setIcon(Image.createImage(

   
   "

   
   /view.png

   
   "

   
   ));



   
   13
 
   
                       viewButton.setBorderPainted(

   
   false

   
   );



   
   14
 
   
                       viewButton.setFocusable(

   
   true

   
   );



   
   15
 
   
                       dialog.setLayout(

   
   new

   
    BoxLayout(BoxLayout.Y_AXIS));



   
   16
 
   
                       Container titleContainer 

   
   =

   
    

   
   new

   
    Container();



   
   17
 
   
                       titleContainer.getStyle().setMargin(Component.LEFT, 

   
   10

   
   );



   
   18
 
   
                       titleContainer.addComponent(title);



   
   19
 
   
                       dialog.addComponent(titleContainer);



   
   20
 
   
                       Container bodyContainer 

   
   =

   
    

   
   new

   
    Container();



   
   21
 
   
                       bodyContainer.getStyle().setMargin(Component.LEFT, 

   
   10

   
   );



   
   22
 
   
                       bodyContainer.addComponent(body);



   
   23
 
   
                       dialog.addComponent(bodyContainer);



   
   24
 
   
                       

   
   final

   
    Container viewContainer 

   
   =

   
    

   
   new

   
    Container(

   
   new

   
    FlowLayout(Component.CENTER));



   
   25
 
   
                       viewContainer.getStyle().setMargin(Component.TOP, 

   
   60

   
   );



   
   26
 
   
                       viewContainer.addComponent(viewButton);



   
   27
 
   
                       dialog.addComponent(viewContainer);



   
   28
 
   
                       viewButton.addActionListener(

   
   new

   
    ActionListener() {



   
   29
 
   
                           

   
   public

   
    

   
   void

   
    actionPerformed(ActionEvent evt) {



   
   30
 
   
                               HistoryForm demoHistory 

   
   =

   
    

   
   new

   
    HistoryForm();



   
   31
 
   
                               demoHistory.run(Saleslion.midlet.backCommand, Saleslion.midlet);



   
   32
 
   
                           }



   
   33
 
   
                       });



   
   34
 
   
                       



   
   35
 
   
                       dialog.addCommand(CANCEL_CMD);

  
  

 

其中UI的设计部分，如下图：

在代码中要注意两句话，设置Label和TextArea的UI

 

  
  

   
   
   
   1
 
   
   title.setUIID(

   
   "

   
   SearchDialogTitle

   
   "

   
   );



   
   2
 
   
   body.setUIID(

   
   "

   
   SearchDialogBody

   
   "

   
   );

  
  

 

如果你想调整Dialog的位置和大小，那就用show(int top,int bottom,int left,int right,boolean includeTitle)来显示。

如果你想让应用程序中的Dialog都统一，那就写一个类继承Dialog,相关的属性都可以在类里面进行设置。

是不是很简单？

以上内容转自：http://blog.csdn.net/pjw100/archive/2009/11/24/4860798.aspx