如何使屏幕像这样对黑莓 [英] How to make a screen like this on Blackberry
问题描述
很抱歉的冠军，但我不知道如何来概括这个问题= /
Sorry for the title but I don't know how to summarize the question =/
我需要做一个屏幕是这样的：
I need to make a screen like this:
正如你所看到的，它显示了这些盒子
与每一个内部的UI元素。
As you can see, it shows those "boxes" with UI elements inside each one.
每个盒子被放在里面的东西像某种表格的单元格。
Each "box" is placed inside something like cells of some kind of table.
我认为这将是一个好主意，重新present的盒子与垂直滚动一个TableLayoutManager内各个屏幕，但我甚至不知道这是否是可靠的。
I thought it would be a good idea to represent the "boxes" as individual screens inside a TableLayoutManager with vertical scroll, but I don't even know if that would be reliable.
请有人告诉我该怎么做类似的东西在BlackBerry
因为我不知道从哪里开始。
Please someone tell me how to do something like that on BlackBerry since I have no idea where to start.
我使用的是BlackBerry JRE 4.5.0
I'm using the BlackBerry JRE 4.5.0
在此先感谢！
编辑：
我编辑这个答案只是为了展示该解决方案由用户内特有多好提供：
I edit this answer just to show how good the solution provided by the user Nate was:
推荐答案
下面是我的建议。如果你想使之成为一个的表的，有标题/文字/图片/按键/页脚图案重复的可能性，应该有一个管理子类重新presents一个的行的布局。
Here's my suggestion. If you want the possibility of making this a table, with the title/text/image/button/footer pattern repeating, there should be a Manager subclass that represents the layout for one row.
<青霉>如Arhimed所指出的，这种解决方案假定一个相对小数目的行（见下面的注释），表现良好。的
首先，我创建了一个简单的类，保存数据的一行将包含：
First, I created a simple class that holds the data that one row would contain:
/** The data representation of one row in our table */
private class Data {
public String title;
public String footer;
public String[] text; // each array element is a line of text
public Bitmap icon;
public Data(String title, String footer, String[] text, String iconName) {
this.title = title;
this.footer = footer;
this.text = text;
this.icon = Bitmap.getBitmapResource(iconName);
}
}
那么，这里是管理的子类，规定了只有一行，这是有一个数据对象：
Then, here is the Manager subclass that lays out only one row, which is the presentation of one Data object:
/** The UI for one row of data */
private class RowManager extends Manager {
private LabelField title;
private LabelField footer;
private BitmapField iconImage;
private ButtonField button;
private TextField text;
private static final int TITLE_AND_FOOTER_HEIGHT = 32;
private static final int TEXT_HEIGHT = 80;
public RowManager(int index, Data content, long style) {
super(style);
final Font titleFont = Font.getDefault().derive(Font.PLAIN, 24);
final Font footerFont = Font.getDefault().derive(Font.PLAIN, 20);
final Font textFont = Font.getDefault().derive(Font.PLAIN, 16);
title = new CustomLabelField(content.title, titleFont,
Color.BLACK, Field.USE_ALL_WIDTH | DrawStyle.LEFT);
title.setPadding(6, 0, 0, 10); // top, right, bottom, left pad
add(title);
iconImage = new BitmapField(content.icon);
add(iconImage);
button = new ButtonField("Button" + index, ButtonField.CONSUME_CLICK);
// the cookie helps identify which button this is (which row)
button.setCookie(new Integer(index));
button.setFont(textFont);
add(button);
text = new TextField(TextField.NON_FOCUSABLE) {
public void paint(Graphics g) {
int c = g.getColor();
g.setColor(Color.DARKRED);
super.paint(g);
g.setColor(c);
}
};
text.setFont(textFont);
StringBuffer textContent = new StringBuffer();
for (int line = 0; line < content.text.length; line++) {
textContent.append(content.text[line] + "\n\n"); // double line-spacing
}
if (content.text.length > 0) {
text.setText(textContent.toString().substring(0, textContent.toString().length() - 2)); // 2 \n chars
}
text.setPadding(10, 10, 10, 10);
add(text);
footer = new CustomLabelField(content.footer, footerFont,
Color.BLACK, Field.USE_ALL_WIDTH | DrawStyle.RIGHT);
footer.setPadding(6, 10, 0, 0); // top, right, bottom, left pad
add(footer);
}
// overridden just to change background color (OS 4.5+!)
public void paint(Graphics graphics)
{
int oldBgColor = graphics.getBackgroundColor();
graphics.setBackgroundColor(Color.GRAY);
// make the whole field gray, first, and then fill in the blue
graphics.clear();
// paint just the middle section blue
int oldColor = graphics.getColor();
graphics.setColor(Color.LIGHTBLUE);
graphics.fillRect(0, TITLE_AND_FOOTER_HEIGHT, getWidth(), TEXT_HEIGHT);
super.paint(graphics);
graphics.setColor(oldColor);
graphics.setBackgroundColor(oldBgColor);
}
public void setChangeListener(FieldChangeListener listener) {
// only the button field supports change listeners
button.setChangeListener(listener);
}
public int getPreferredWidth() {
return Display.getWidth();
}
public int getPreferredHeight() {
return TITLE_AND_FOOTER_HEIGHT + TEXT_HEIGHT + TITLE_AND_FOOTER_HEIGHT;
}
protected void sublayout(int width, int height) {
int y = 0;
layoutChild(title, width, TITLE_AND_FOOTER_HEIGHT);
setPositionChild(title, 0, y);
layoutChild(iconImage,
iconImage.getPreferredWidth(), iconImage.getPreferredHeight());
setPositionChild(iconImage,
width - iconImage.getPreferredWidth() - 10, 5);
y += TITLE_AND_FOOTER_HEIGHT;
int buttonWidth = 88;
layoutChild(text, width - buttonWidth - 20, TEXT_HEIGHT);
setPositionChild(text, 0, y);
layoutChild(button, buttonWidth, 40);
setPositionChild(button, width - buttonWidth - 20,
y + (TEXT_HEIGHT - 40) / 2);
y += TEXT_HEIGHT;
layoutChild(footer, width, TITLE_AND_FOOTER_HEIGHT);
setPositionChild(footer, 0, y);
super.setExtent(width, y + TITLE_AND_FOOTER_HEIGHT);
}
}
和，这里有一个屏幕类，它会创建一些样本数据对象，并使用 RowManager ：
And, here's a Screen class that would create some sample Data objects, and use the RowManager:
public class StackScreen extends MainScreen implements FieldChangeListener {
private Vector rowData;
public StackScreen() {
super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);
// define the screen title
Font titleFont = Font.getDefault().derive(Font.PLAIN, 30);
CustomLabelField title = new CustomLabelField("Screen Title",
titleFont, Color.DARKRED, DrawStyle.HCENTER | Field.USE_ALL_WIDTH);
title.setPadding(10, 10, 10, 10);
add(title);
// populate a dummy set of model data
rowData = new Vector();
Data one = new Data("Title 1", "Some footer info",
new String[]{ "First line of text", "Second line of text" },
"image1.png");
Data two = new Data("Title 2", "Some footer info",
new String[]{ "First line of text", "Second line of text" },
"image2.png");
rowData.addElement(one);
rowData.addElement(two);
// create a UI representation of each row's data
for (int i = 0; i < rowData.size(); i++) {
RowManager row = new RowManager(i, (Data)rowData.elementAt(i), 0);
row.setPadding(10, 20, 10, 20); // top, right, bottom, left pad
row.setChangeListener(this);
add(row);
}
}
// invoked when buttons are clicked
public void fieldChanged(Field field, int context) {
Object cookie = field.getCookie();
if (cookie instanceof Integer) {
Integer rowIndex = (Integer) cookie;
Dialog.alert("Button " + rowIndex + " clicked!");
}
}
}
还有我用最后一个程序UI类，打造彩色标签：
There's one last utility UI class I used, to create colored labels:
/** A label field with custom font and color attributes */
private class CustomLabelField extends LabelField {
private int fontColor = Color.BLACK;
public CustomLabelField(String text, Font f, int color, long style) {
super(text, style);
setFont(f);
fontColor = color;
}
public void paint(Graphics g) {
int oldColor = g.getColor();
g.setColor(fontColor);
super.paint(g);
// reset graphics context
g.setColor(oldColor);
}
}
这是它的外观上OS 5.0 9550我相信我远离，将不提供OS 4.5（ setPadding（）是任何的API 无证的，但可用的）。显然，布局高硬度codeD。你需要调整其他设备，但我不得不离开你一些工作：）
This is how it looks on a OS 5.0 9550. I believe I stayed away from any APIs that wouldn't be available on OS 4.5 (setPadding() is undocumented, but usable). Obviously, the layout is highly hardcoded. You'll need to adjust for other devices, but I have to leave you some work :)
这篇关于如何使屏幕像这样对黑莓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
