The Mobile Experiment – Blackberry GUI Prototype – Part II

I’d finished the initial prototype few days ago, but I hadn’t a chance to post my findings. Here is how it looks:

In the previous post, I talked about the AutoCompleteField. Probably this is the most complex field I’m going to use. For the notes, I’ve use an EditField, and for the Date/Time, a DateTimeField (see how clever!).

Actually, I’m not completely happy with this last choice. Having the date and time available on the main screen doesn’t seem very intuitive. The idea of having one toggle button demands that the date is chosen at the time the user clicks the button. The way I’ve done, it passes the idea that this can be done anytime.

I believe the best choice here would open a dialog window with the date/time field as soon as the user clicks the button. That way, I’d enforcing the right behavior, and keeping the code simple at the same time. The problem is that I don’t want to deal with more than one screen for now, so I’ll keep this that way and see how things go.

But one thing that I thought was very important was to block access to the fields after the user starts an activity. To make the Notes field editable or block it, I just need to user its setEditable() method. Pretty straightforward.

My problem was the AutoCompleteField and its built-in list. For some reason, the above method doesn’t apply to this field. To solve this problem, I decided to have an invisible LabelField, and when the Start button is pressed, I switch between this LabelField and the AutoCompleteField.

As far as I could find, there is no way to simply set the field invisible. You have to actually remove it from the screen. To make things worst, the components are added to the screen in a stack way, so when I remove a field, the next field will be added at the top of this stack (or bottom, depends on your point-of-view), making the new LabelField be displayed after the Start button.

To avoid that, I’ve found a nice trick: basically you can find where is the component you want to remove, and insert the new one in that position. After that, just remove the component-to-be-invisible and you’re done.

Here is a snapshot of the code which remove the AutoCompleteField and make the LabelField visible:

buttonStart.setLabel("Stop");
editNotes.setEditable(false);
int x = projectListField.getIndex();
insert(projectLabelField, x);
projectLabelField.setText(projectListField.getEditField().getText());
delete(projectListField);

The getIndex() method returns the object index position on Screen. Then the insert() method adds the new field at that position. Finally, the delete() removes the previous field from screen.

Important! The field is remove from the screen, but its instance is still valid. Because of that, we don’t need to recreate it using the new, as I did at the start.

If you want to check the full source so far, just drop a comment.

My next step is to add the guts for this program, first make the project list persistent and dynamic.

package com.mobilecreator.timetracker; 

import net.rim.device.api.collection.util.BasicFilteredList;
import net.rim.device.api.i18n.SimpleDateFormat;
import net.rim.device.api.ui.DrawStyle;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FieldChangeListener;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.component.AutoCompleteField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.ui.component.DateField;
import net.rim.device.api.ui.decor.Border;
import net.rim.device.api.ui.decor.BorderFactory;

public class TimeTrackerScreen extends MainScreen implements FieldChangeListener {

ButtonField buttonStart;
LabelField dateLabel;
AutoCompleteField projectListField;
LabelField projectLabelField;
BasicFilteredList filterList;
EditField editNotes;

int buttonState = 0;

public TimeTrackerScreen() {

super();

// Populate list for prototype
LabelField title = new LabelField(“Tracker – mobilecreator.wordpress.com”,
LabelField.ELLIPSIS | LabelField.USE_ALL_WIDTH);
setTitle(title);

// sample project list
filterList = new BasicFilteredList();
String[] projects = {“Paint the house”,”Paint the kitchen”,”Paint the bedroom”,”Fix the tap”,”Wash the car”};
filterList.addDataSet(1,projects,”projects”,BasicFilteredList.COMPARISON_IGNORE_CASE);

Border border = BorderFactory.createSimpleBorder(new XYEdges(1,1,1,1));

LabelField projectLabel = new LabelField(“Project: “,LabelField.FIELD_VCENTER);
add(projectLabel);
projectListField = new AutoCompleteField(filterList, AutoCompleteField.LIST_DROPDOWN);
add(projectListField);
// Don’t add this, just create
projectLabelField = new LabelField(“”);

LabelField notesLabel = new LabelField(“Notes: “,LabelField.FIELD_VCENTER);
add(notesLabel);
editNotes = new EditField(EditField.EDITABLE | EditField.USE_ALL_WIDTH);
editNotes.setBorder(border);

add(editNotes);
// last field that will display the date and time selected
dateLabel = new LabelField(“Date/Time: “);
add(dateLabel);

DateField dateField = new DateField(“”, System.currentTimeMillis(), new SimpleDateFormat(“dd/MM/yyyy hh:mm”), Field.FIELD_LEFT | DrawStyle.LEFT | Field.FOCUSABLE);
dateField.setBorder(border);
this.add(dateField);

// Button
buttonStart = new ButtonField(“Start”);
buttonStart.setChangeListener(this);
add(buttonStart);

}

public void fieldChanged(Field field, int context) {
if(field == buttonStart) // if Delete button is clicked
{
Dialog d = new Dialog(Dialog.D_YES_NO, “Confirm ?”, Dialog.NO, null,0);

if(d.doModal() == Dialog.YES) {
if (buttonState==0) {
buttonState = 1;
buttonStart.setLabel(“Stop”);
editNotes.setEditable(false);
int x = projectListField.getIndex();
insert(projectLabelField, x);
projectLabelField.setText(projectListField.getEditField().getText());
delete(projectListField);
} else {
buttonState = 0;
buttonStart.setLabel(“Start”);
editNotes.setEditable(true);
int x = projectLabelField.getIndex();
insert(projectListField, x);
delete(projectLabelField);
}
}
}
}

}

Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: