LWUIT 自定义灵活Style的Component

当你使用LWUIT的这些Component时,如果一个页面中的布局比较复杂,组件很多,而且页面比较多时,常用的组件诸如 Label,Button,TextField,TextArea等会用的非常平凡。用起这些组件时,我们常常会设置它的Style,Style很像 web里的css,它能够让我们自定义Border,Font,FgColor,BgColor,Margin,Padding,设置一个组件的 Style的代码很简单:

代码
this.getStyle().setBorder(Border border)

 

但是大多数的组件都有Style和selectedStyle,能够被点击的Button及其子类还有pressedStyle,以上面一句为例, 它仅仅只能设置这个组件未选中的时候的Border,当选中它时,又会回到系统代码中设定的模样。一个页面有很多组件,大多数的组件都要设置 Style(选中和未选中的Style),虽然代码是很简单,但是一个页面写下来,你会发现你至少一半的代码都花在布局和设置样式上了,代码看起来非常臃 肿。

好在LWUIT是开源的,我们可以修改它的源代码来自定义这些UI的方法,找到Component.java文件,我们只需要在这个文件中添加几个方法来简化我们的Style设置。

以下是我在Component.java类中添加的一些方法,代码我写的比较粗糙,你们可以按照自己的方式来写, 理论上每个方法都应该有两个参数,未选中和选中的状态,传参时可以为null,需要进行一些判断以适合大多数的情况。

 

代码
    //1469行起是添加的代码
    /**
     * 设置自定义的Font
     * 
@param font
     
*/
    
public void setCustomFont(Font font) {
        
this.getStyle().setFont(font);
        
this.getSelectedStyle().setFont(font);
    }
    
/**
     * 设置水平方向Margin
     * 
@param margin
     
*/
    
public void setCustomHorizontalMargin(int margin) {
        
this.getStyle().setMargin(Component.LEFT, margin);
        
this.getStyle().setMargin(Component.RIGHT, margin);
        
this.getSelectedStyle().setMargin(Component.LEFT, margin);
        
this.getSelectedStyle().setMargin(Component.RIGHT, margin);
    }
    
/**
     * 设置自定义的Border
     * 
@param border
     
*/
    
public void setCustomBorder(Border border){
        
this.getStyle().setBorder(border);
        
this.getSelectedStyle().setBorder(border);
    }
    
/**
     *设置自定义FgColor
     * 
@param unsectedColor
     *              未选中时的颜色
     * 
@param selectedColor
     *              选中时的颜色
     
*/
    
public void setCustomFgColor(int unsectedColor, int selectedColor){
        
this.getStyle().setFgColor(unsectedColor);
        
this.getSelectedStyle().setFgColor(selectedColor);
    }
    
/**
     * 设置自定义的Style
     *              Style包含选中和未选中的情况,属性包含Margin,Padding,Border,FgColor,BgColor,Font等
     * 
@param unselectedStyle
     * 
@param selectedStyle
     
*/
    
public void setCustomStyle(Style unselectedStyle, Style selectedStyle){
        
this.setStyle(unselectedStyle);
        
this.setSelectedStyle(selectedStyle);
    }

 

 Button类及其子类就比较特殊,它有一个pressedStyle,我们需要对一些方法进行重写。

 

代码
    //301行起是添加的代码
    /**
     * 设置自定义的Font
     * 
@param font
     
*/
    
public void setCustomFont(Font font){
        
super.setCustomFont(font);
        
this.getPressedStyle().setFont(font);
    }
    
/**
     * 设置自定义的Border
     * 
@param border
     
*/
    
public void setCustomBorder(Border border){
        
super.setCustomBorder(border);
        
this.getPressedStyle().setBorder(border);
    }
    
/**
     * 设置自定义FgColor
     * 
@param unsectedColor
     *              未选中时的FgColor
     * 
@param selectedColor
     *              选中时的FgColor
     * 
@param pressedColor
     *              点击时的FgColor
     
*/
    
public void setCustomFgColor(int unsectedColor, int selectedColor,int pressedColor){
        
super.setCustomFgColor(unsectedColor, selectedColor);
        
this.getPressedStyle().setFgColor(pressedColor);
    }
    
/**
     * 设置自定义的Style
     * 
@param unselectedStyle
     *              未选中时的Style
     * 
@param selectedStyle
     *              选中时的Style
     * 
@param pressedStyle
     *              点击时的Style
     
*/
    
public void setCustomStyle(Style unselectedStyle, Style selectedStyle, Style pressedStyle){
        
super.setCustomStyle(unselectedStyle, selectedStyle);
        
this.setPressedStyle(pressedStyle);
    }

 

当修改完这些基本的组件类以后,我们就可以灵活的运用这些组件了。以Button为例,在一个应用程序中会运用到很多Button,有边框的,无边框的, 无背景的,带下划线的(类似于超链接)等等。我们完全可以把这些样式归到一个类中,那我们就写一个类CustomButton继承自Button。

代码
import com.sun.lwuit.Button;
import com.sun.lwuit.Image;
/**
 *
 * 
@author Sunny Peng
 
*/
public class CustomButton extends Button{
    
/**
     * 构造方法
     
*/
    
public CustomButton(){
        
    }
    
/**
     * 构造方法
     * 
@param text
     *          传入文本
     
*/
    
public CustomButton(String text){
        
    }
    
/**
     * 构造方法
     * 
@param text
     *          文本
     * 
@param icon
     *          图片
     
*/
    
public CustomButton(String text,Image icon){
        
    }
    
/**
     * 构造方法
     * 
@param text
     *          文本
     * 
@param icon
     *          图片
     * 
@param direction
     *          方向,图片和文本的位置,比如图片在文本下方,图片在文本右边等等。
     
*/
    
public CustomButton(String text,Image icon, int direction){
        
    }
    
/**
     * 无边框按钮
     
*/
    
public void setNoBorder(){
        
    }
    
/**
     * 无背景按钮
     
*/
    
public void setNoBg(){
        
    }
    
/**
     * 无边框,无背景按钮
     
*/
    
public void setNoBorderBg(){
        
    }
    
/**
     * 超链接形式的按钮
     
*/
    
public void setURLStyle(){
        
    }
}

以上方法的主体大家可以自己写,方法参数也自己定义。

我现在用的源代码是1.3版本之前最新的(1.3版本的目前还不能够使用),是我反编译LWUIT.jar后,修改了代码中混淆产生的错误,使用正常,下面是LWUIT源代码的下载地址:

http://download.csdn.net/source/1856358 

 

 

 

 

posted @ 2009-11-30 14:10  Sunny Peng  阅读(1410)  评论(0编辑  收藏  举报