Java Reference
In-Depth Information
stylesheets, as it is necessary to create many CSS classes for the various
components we are using: form, input, text, picture viewer, etc.
Now that we have our
widget.xml
file in place, let's analyze the
source code for the Flickr Viewer widget, discussing the most important
points for creating the application's UI and functionality.
A.4.2 Source Code
The first thing we notice is that this widget has much more complex views
than our simple Hello World example. Let us begin with the creation of
the Form view, used to input the search criteria:
Shell createForm()
{
Flow content = new Flow(getStyle("default"));
content.setPreferredSize(-100, -100);
content.add(createHeaderText("Enter the search criteria (multiple
values must be separated by a comma):"));
// create some text components and choices
addText(content,"Tags");
addInput(content,"Tags");
addText(content,"Tagmode");
addChoice(content,["All","Any"]);
final Shell shell = new Shell(content);
shell.setStyle(getStyle("maxi"));
return shell;
}
First, we create a
Flow
object (named
content
), which is the main
container for our view. We can think of a
Flow
object as the equivalent
of LCDUI's
Form
class, with the difference being that
Flow
uses HTML-
style positioning. An instance of the
Style
class is passed to
content
so all components added to it use the same style definitions. We then
proceed to add several UI components: a header text, serving as this
view's title, then a text item, an input field, another text item and a
Choice
object.
We used several helper methods to create and style these components,
and their source code is quite similar to each other: instantiate a compo-
nent, passing a Style defined in
widget.xml
, define a label for it, and
addittothe
content
container. For example, the
addInput()
method
is written like this:
void addInput(Flow content, String st)
{
// create text-input that can contain any characters
// input is the equivalent of MIDP's TextField
input = new Input(getStyle("form.input"), st, &", ANY);
input.setPreferredWidth(-100);