`
xusaomaiss
  • 浏览: 620169 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

LWUIT的布局与Style的使用

    博客分类：
  • java
招聘SUNSwingCSS 
阅读更多

一、LWUIT的布局

LWUIT一共有五个布局,分别是：

  1. BorderLayout；
  2. BoxLayout；
  3. FlowLayout；
  4. GridLayout；
  5. GroupLayout。

BorderLayout布局

BorderLayout与AWT或Swing中的BorderLayout相同，也是由东、西、南、北、中这五个区域组成。惟一不同的 BorderLayout不是容器Form的默认布局管理器，Form必须显式地指定它自己的布局管理器。下面给出一个示例：


图 1-1 BorderLayout示例

图中显示了5个Button组件，这五个Button组件都是用图片来表示的，它们分别分布在Form的东西南北中五个区域。其中，Form的布局 是BorderLayout。源代码如下:

package com.shen.lwuit;

import java.io.IOException;

import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;

import com.sun.lwuit.Button;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Image;
import com.sun.lwuit.layouts.BorderLayout;

public class TestLayout extends MIDlet {
	private Form form;
	private Button butt1,butt2,butt3,butt4,butt5;
	private static Image img1,img2,img3,img4,img5;

	public TestLayout() {
		Display.init(this);
		form = new Form("布局测试");
		form.setLayout(new BorderLayout());	
		TestLayout.getImageFromResource();
		butt1 = new Button("",img1);
		butt2 = new Button("",img2);
		butt3 = new Button("",img3);
		butt4 = new Button("",img4);
		butt5 = new Button("",img5);
	}

	protected void destroyApp(boolean arg0) 
	throws MIDletStateChangeException {

	}

	protected void pauseApp() {
		
	}

	protected void startApp() throws MIDletStateChangeException {
		form.addComponent(BorderLayout.EAST, butt1);
		form.addComponent(BorderLayout.SOUTH, butt2);
		form.addComponent(BorderLayout.WEST, butt3);
		form.addComponent(BorderLayout.NORTH, butt4);
		form.addComponent(BorderLayout.CENTER, butt5);
		form.show();
	}
	
	public static void getImageFromResource(){
		try {
			Image sourceImg = Image.createImage("/mainInterface.png");
			img1 = sourceImg.subImage(0, 0, 50, 45,true);
			img2 = sourceImg.subImage(50, 0, 50, 45, true);
			img3 = sourceImg.subImage(100, 0, 50, 45, true);
			img4 = sourceImg.subImage(0, 45, 50, 45, true);
			img5 = sourceImg.subImage(50, 45, 50, 45, true);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

FlowLayout布局

FlowLayout布局也与AWT或Swing的FlowLayout布局相同，都是将组件从左向右，从上往下的排列，默认布局为居中对齐。在这 里就不做叙述了。

BoxLayout布局

BoxLayout相当于Swing里的BoxLayout布局，它将组件沿X轴或Y轴排列，当沿X轴排列时，只有一行；沿Y轴排列时，只有一列。 BoxLayout布局在LWUIT中被大量使用，下面给出一个示例：


图 1-2 BoxLayout示例

图中显示了四个Button组件，每个Button组件都是图片与文字混合显示的。这些Button组件都是放在容器Form中的，Form的布局 是BoxLayout，并且沿Y轴排列的。源代码如下：

package com.shen.lwuit;

import java.io.IOException;

import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;

import com.sun.lwuit.Button;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Image;
import com.sun.lwuit.layouts.BoxLayout;

public class TestLayout1 extends MIDlet {
	private Form form;
	private static Image img1,img2,img3,img4;
	private Button butt1,butt2,butt3,butt4;

	public TestLayout1() {
		Display.init(this);
		form = new Form("BoxLayout测试");
		TestLayout1.getImageFromResource();
		butt1 = new Button("人才招聘",img1);
		butt2 = new Button("科技园区",img2);
		butt3 = new Button("招聘会",img3);
		butt4 = new Button("简  历",img4);
		form.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
		form.addComponent(butt1);
		form.addComponent(butt2);
		form.addComponent(butt3);
		form.addComponent(butt4);
	}

	protected void destroyApp(boolean arg0) throws 
	MIDletStateChangeException {
		// TODO Auto-generated method stub
		
	}

	protected void pauseApp() {
		// TODO Auto-generated method stub
		
	}

	protected void startApp() throws MIDletStateChangeException {
		form.show();
	}

	public static void getImageFromResource(){
		Image sourceImg = null;
		try {
			sourceImg = Image.createImage("/handset2.png");
			img1 = sourceImg.subImage(80, 0, 28, 28,true);
			img2 = sourceImg.subImage(80, 28, 28, 28, true);
			img3 = sourceImg.subImage(80, 56, 28, 28, true);
			img4 = sourceImg.subImage(80, 84, 28, 28, true);
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
}

GridLayout布局

LWUIT中的GridLayout与AWT或Swing中的GridLayout布局是一样的，它最大的特点就是要求布局中的每个组件的尺寸是一 样的。在LWUIT中，常常将GridLayout与BoxLayout结合起来进行使用，以构建出更复杂的界面。

GroupLayout布局

LWUIT的GroupLayout与Swing的GroupLayout是一样的。GroupLayout分为水平与垂直两个方向，组件可以同时 沿着两个方向排列。下面是一个示例：

源代码如下：

JComponent panel = new JComponent();
   GroupLayout layout = new GroupLayout(panel);
   panel.setLayout(layout);
 
   layout.setAutoCreateGaps(true);
 
   layout.setAutoCreateContainerGaps(true);
 
   GroupLayout.SequentialGroup hGroup = layout.createSequentialGroup();
 
   hGroup.addGroup(layout.createParallelGroup().
            addComponent(label1).addComponent(label2));
   hGroup.addGroup(layout.createParallelGroup().
            addComponent(tf1).addComponent(tf2));
   layout.setHorizontalGroup(hGroup);
   
   GroupLayout.SequentialGroup vGroup = layout.createSequentialGroup();
 
   vGroup.addGroup(layout.createParallelGroup(Alignment.BASELINE).
            addComponent(label1).addComponent(tf1));
   vGroup.addGroup(layout.createParallelGroup(Alignment.BASELINE).
            addComponent(label2).addComponent(tf2));
   layout.setVerticalGroup(vGroup);

GroupLayout在LWUIT中使用得很少。

二、LWUIT中Style的使用

Style对象用来给特定的组件设置颜色、字体、透明度、边距、内边距（padding）、图片以及边框等。它在LWUIT中的作用相当于CSS在 HTML文件中的作用一样，对LWUIT界面起美化的作用。每个组件都包含一个被选中的对象并且允许Style对象在运行时使用 Component.getSelected()方法与Component.getUnselected()方法对现有的Style样式进行修改。我们经 常使用Style的相关方法对LWUIT界面进行美化。例如，在上面的图1-2中的例子中，向大家展示了一个BoxLayout的示例，在这个例子中的四 个Button组件的边框都是一条黑线，现在，我要通过Style对象来去掉它们的边框，同时，再添加几个按钮，并同样通过Style对象对按钮菜单的样 式进行更改，使其更美观。

下面是对图1-2的例子添加了Style修饰效果后的演示：

其源代码如下：

package com.shen.lwuit;

import java.io.IOException;

import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;

import com.sun.lwuit.Button;
import com.sun.lwuit.Command;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Image;
import com.sun.lwuit.layouts.BoxLayout;
import com.sun.lwuit.plaf.Border;
import com.sun.lwuit.plaf.Style;

public class TestStyle extends MIDlet {
	private Form form;
	private static Image img1,img2,img3,img4;
	private Button butt1,butt2,butt3,butt4;
	private Command cmd1,cmd2,cmd3;

	public TestStyle() {
		Display.init(this);
		form = new Form("BoxLayout测试");
		TestStyle.getImageFromResource();
		butt1 = new Button("人才招聘",img1);
		this.setButtonStyle(butt1);
		
		butt2 = new Button("科技园区",img2);
		this.setButtonStyle(butt2);
		butt3 = new Button("招聘会",img3);
		this.setButtonStyle(butt3);
		butt4 = new Button("简  历",img4);
		this.setButtonStyle(butt4);
		form.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
		form.addComponent(butt1);
		form.addComponent(butt2);
		form.addComponent(butt3);
		form.addComponent(butt4);
		
		cmd1 = new Command("确定");
		cmd2 = new Command("取消");
		cmd3 = new Command("退出");
		form.addCommand(cmd1);
		form.addCommand(cmd2);
		form.addCommand(cmd3);
		this.setSoftButtonStyle();
		this.setMenuStyle();
	}

	protected void destroyApp(boolean arg0) throws 
	MIDletStateChangeException {
		// TODO Auto-generated method stub
		
	}

	protected void pauseApp() {
		// TODO Auto-generated method stub
		
	}

	protected void startApp() throws MIDletStateChangeException {
		form.show();
	}
	
	public void setButtonStyle(Button butt){
		Style style = butt.getSelectedStyle();
		style.setFgColor(0xFF0000);
		style.setBgColor(0x000000);
		style.setBgTransparency(30);
		style.setBorder(Border.createEmpty());
	}
	
	public void setSoftButtonStyle(){
       Style style = form.getSoftButtonStyle();
       style.setBgColor(0xFFFF08);
       style.setBgTransparency(30);
	}
	
	public void setMenuStyle(){
		Style style = form.getMenuStyle();
		style.setBgTransparency(40); //设置背景的透明度
	}

	public static void getImageFromResource(){
		Image sourceImg = null;
		try {
			sourceImg = Image.createImage("/handset2.png");
			img1 = sourceImg.subImage(80, 0, 28, 28,true);
			img2 = sourceImg.subImage(80, 28, 28, 28, true);
			img3 = sourceImg.subImage(80, 56, 28, 28, true);
			img4 = sourceImg.subImage(80, 84, 28, 28, true);
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
}

好，到这里，我们这一次的关于LWUIT的介绍就接近尾声了，希望有兴趣的读者下去多加练习.

 

原文：

http://express.ruanko.com/ruanko-express_16/webpage/tech-overnight_1.html

分享到：
| 关于WAP项目有话要说
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Hello LWUIT——LWUIT开发指南2

    总结来说，《Hello LWUIT——LWUIT开发指南2》涵盖了LWUIT基础组件的使用、事件处理、样式定制、布局管理等多个方面，旨在帮助开发者快速入门并熟练掌握LWUIT，从而创建出美观且功能丰富的移动应用。通过实践和不断...

    lwuit 开发文档

    开发者需要了解如何利用LWUIT提供的各种皮肤（skin）和样式（style）来美化界面，以及如何使用主题商店中的主题来更新应用程序的视觉效果。此外，文档中可能还会包含异常处理、资源管理和应用打包等高级话题，这些都...

    lwuit 源代码 下载

    使用LWUIT进行开发时，你可以直接调用源代码中的类和方法。LWUIT的核心类库包括各种UI组件，如按钮、文本框、列表视图等，以及动画、主题和布局管理器等。例如，`com.sun.lwuit.Form`是用于创建窗口或屏幕的基础类，...

    LWUIT精简解说.pdf

    该文不仅适用于Java开发人员，即便是.NET或其他领域的开发者也能从中受益，了解LWUIT的基本概念和使用技巧。 ### LWUIT概述 LWUIT由Sun Microsystems开发，其设计灵感来源于Swing框架，旨在为Java ME应用程序提供...

    LWUIT 中文文档

    2. **样式表（Style Sheets）**: LWUIT允许开发者使用CSS样式的概念来定义组件的外观和行为，使得界面设计更具灵活性和一致性。 3. **动画（Animations）**: LWUIT支持各种动画效果，如淡入淡出、滑动等，这些动画...

    LWUIT 入门资料个人整理

    文本域** `TextArea`：可编辑的文本区域，支持使用本机编辑器进行编辑。 **6. 列表与组合框** `List` 和 `ComboBox`：采用模型-视图-控制器架构，支持自定义外观和数据模型。 #### 三、底层资源与高级特性 **1. ...

    JavaME LWUITDemo 案例 界面开发

    3. **样式与主题**：LWUIT允许开发者自定义主题，通过修改CSS（Cascading Style Sheets）样式表来改变组件的外观和感觉，实现全局一致的界面风格。 4. **事件处理**：理解如何为组件添加事件监听器，如点击事件、...

Magicbox
Global site tag (gtag.js) - Google Analytics