Maplet Application Layout Guidelines
Goals
After reading this worksheet, you should be able to:
Understand the concept of nested lists as it applies to Maplet applications
Define and identify Maplet application code structure.
Create a Maplet application with text, buttons, and text (input or output) fields.
Create a Maplet application with sophisticated layout by using Window, BoxRow, and GridLayout elements.
Nested Lists
A Maplet application is defined by using a box layout structure. The box layout structure is based on the Maple concept of nested lists (list of lists).
In Maple, a list is an ordered sequence of comma-delimited expressions that is enclosed in square brackets ([ ]).
For example:
List := [1,5,7];
List:=1,5,7
A nested list is an ordered sequence of expressions that is enclosed in square brackets, in which each expression can be a list.
NestedList := [1, [2,3], [4, 5,6], 7, 8, [9,10]];
NestedList:=1,2,3,4,5,6,7,8,9,10
When writing a Maplet application, text strings, user prompts, or text fields are defined as expressions in lists.
A Maplet application window definition includes the main list which contains the lists of text strings, user prompts, and other elements.
Rows and Columns
Row
To create a row, items are separated by commas and enclosed in one pair of square brackets (inside the main list).
([ [Item1, Item2] ])
restart;
with(Maplets[Elements]): RowExample:= Maplet([ ["Item1", "Item2", "Item3", "Item4"] ]): Maplets[Display](RowExample);
Column
To create a column, each item is enclosed in square brackets and items are separated by commas.
([
[Item1],
[Item2],
])
with(Maplets[Elements]): ColumnExample:= Maplet([ ["Item1"], ["Item2"] ]): Maplets[Display](ColumnExample);
When items are added to the sublists, the column width expands to the size of the list, which defines a row, containing the most items. The items in each row are horizontally centered within the column.
with(Maplets[Elements]): ColumnExample2:= Maplet([ ["Item1", "Item1a", "Item1b", "Item1c"], ["Item2", "Item2a"] ]): Maplets[Display](ColumnExample2);
Column from One List
The following Maplet application definition contains only one list, not a list of lists. It produces a column. Individual or groups of items are not enclosed in square brackets.
with(Maplets[Elements]): ListColumnExample1:= Maplet([ "Item1", "Item2", "Item3", "Item4", "Item5", "Item6" ]): Maplets[Display](ListColumnExample1);
Note: The ListColumnExample1 Maplet application can also be written as one line. This reduces the lines of code from ten to five.
with(Maplets[Elements]): ListColumnExample2:= Maplet([ "Item1","Item2", "Item3","Item4", "Item5","Item6" ]): Maplets[Display](ListColumnExample2);
Defining and Identifying Maplet Application Code Structure
To create a Maplet application:
Begin the Maplet application with the top-level element Maplets.
For long or complex Maplet applications, you can assign the Maplet application to a name by using the assignment symbol (:=). The following is a short Maplet application that has been assigned to the name helloworld.
helloworld:= Maplet(["Hello World 1"]): Maplets[Display](helloworld);
Note: Short Maplet applications do not require an assigned name.
Maplets[Display](Maplet([["Hello World 2"]]));
End the Maplet application definition with a semicolon or colon. If you end the Maplet application definition (that is, the Maplet application code before the Display command) with a semicolon, the XML data structure associated with the Maplet application is displayed in the Maple worksheet.
This code runs the Maplet application YourMapletName.
YourMapletName := Maplet([ "This is your Maplet application." ]): Maplets[Display](YourMapletName);
This code runs the Maplet application YourMapletName2 and displays the associated XML data structure.
YourMapletName2 := Maplet([ "This is your Maplet application." ]); Maplets[Display](YourMapletName2);
Examining a Sample Maplet Application
The following is a Maplet application named polycomp. It evaluates a specific polynomial at user input values. The Maplet application is created with default interface settings for spacing, alignment, and other visual elements. This Maplet application displays:
A text title.
A text string: "Evaluating the polynomial x^3 - x^2 + 3*x +4".
Two user prompts: "Enter a value for x:" and "Click OK to see the result."
One input field, 20 characters long.
One output field, 30 characters long. Important: An output field is a non-editable TextField.
Two buttons: OK and Close defined by using a text string and the Button command.
A call to the Maple engine to compute the polynomial's value at the number entered by the user.
A Display command to run the Maplet application.
The Maplet application definition ends with a colon. The Display command ends with a semicolon.
The following column layout sequence is used: ([ [Item1], [Item2], [ItemN] ])
#Invoke the Maplets Elements subpackage. with(Maplets[Elements]): # Define the Maplet application. Assign it to an appropriate name. polycomp := Maplet([ # By default, text strings are horizontally # centered in the Maplet application window. # To form a text string, enclose text in quotation marks. # Enclose the text string in square brackets. # End the line with a comma after the square # bracket. ["Basic Maplet Example #1"], # The purpose of the Maplet application is stated in a text # string that is displayed. ["Evaluating the polynomial: x^3 - x^2 + 3*x +4"], # The following is a text field. Enclose the # associated text in quotation marks. # The TextField['I1'](20) element creates an input field # 20 characters long. The input field reference # is defined as I1. # This is the third item in the lists of lists. # The column width expands to the size of this item. ["Enter a value for x: ", TextField['I1']( 20 )], # The empty quotation marks in square brackets add # a blank row between the text field and the # following text string. [" "], # This is a text string that directs the user # to click a button. ["Click OK to see the result"], # The Button element creates a button # labeled with the text specified # in quotation marks and associated with the # specified action. # The Evaluate command element calls the Maple # engine to evaluate the polynomial at the input # value referenced by I1. # The Shutdown command element closes the Maplet application. [Button("OK", Evaluate( 'A2'=I1^3 - I1^2 + 3*I1 + 4)), Button("Close", Shutdown())], # The following text field displays the results # of the polynomial evaluation assigned to A2. # The TextField element with the not editable # argument creates a display field in which the # user cannot enter text. # The final square bracket completes the body # of the Maplet application program. # Important: Do not place a comma at the end # of the last list (row) in the Maple code. [TextField['A2']('editable' = 'false', 'width' = 30)] # The right square bracket completes the main list. # The right parenthesis completes the Maplet application definition. # The definition ends with a colon(:) so that the associated # XML data structure is not displayed. ]): # The Display command in square brackets runs the # Maplet application assigned to polycomp. Maplets[Display](polycomp);
Creating a Maplet Application with Layout Elements
By using the layout elements (?Maplets, LayoutElements) listed in the Maple[Elements] subpackage, you can align or define interface items according to your design needs. Instead of defining columns and rows with square brackets, you can use BoxRow and BoxColumn elements.
Row Layout versus BoxRow Element Layout
The following example creates a row by using square brackets.
In the following example, the BoxRow element replaces the square brackets. You must enclose the expression sequence, "Item1", "Item2", "Item3", "Item4" in parentheses. When coding, the BoxRow element clearly defines the structure of the item(s) to be displayed.
When debugging, the BoxRow element is a useful marker for a Maplet application with many lists. The BoxRow element accepts interface options which enhance the Maplet application .
with(Maplets[Elements]): BoxRowExample:= Maplet([ BoxRow("Item1", "Item2", "Item3", "Item4") ]): Maplets[Display](BoxRowExample);
The following BoxRowExample2 Maplet application definition specifies a yellow background.
with(Maplets[Elements]): BoxRowExample2:= Maplet([ BoxRow('background'=yellow, "Item1", "Item2", "Item3", "Item4") ]): Maplets[Display](BoxRowExample2);
Column Layout versus BoxColumn Element Layout
The following example creates a column by using square brackets. This is a nested list.
with(Maplets[Elements]): ColumnExample:= Maplet([ ["Item1"], ["Item2"], ["Item3"] ]): Maplets[Display](ColumnExample);
In the following example, the BoxColumn element replaces the square brackets. You must enclose the expression sequence, "Item1", "Item2", "Item3" in parentheses. When coding, the BoxColumn element clearly defines the structure of the item(s) to be displayed.
When debugging, the BoxColumn element is a useful marker for a Maplet application with many lists. The BoxColumn element accepts interface options which enhance the Maplet application.
with(Maplets[Elements]): BoxColumnExample:= Maplet([ BoxColumn("Item1","Item2","Item3") ]): Maplets[Display](BoxColumnExample);
The following BoxColumnExample2 Maplet application definition specifies a white background.
with(Maplets[Elements]): BoxColumnExample2:= Maplet([ BoxColumn('background'=white, "Item1","Item2","Item3") ]): Maplets[Display](BoxColumnExample2);
The following BoxColumnExample3 Maplet application has an expanded column width based on the longest item in the list.
with(Maplets[Elements]): BoxColumnExample3:= Maplet([ BoxColumn('background'=white, "Item1","Item2","Item3xxxxxxx") ]): Maplets[Display](BoxColumnExample3);
Advanced Layout Using Window, BoxRow, and GridLayout Elements
In the following Maplet application, three layout elements are used:
BoxRow - Creates a row of items. For details, see the help page Maplets[Elements][BoxRow].
GridLayout - Aligns the objects in a box. This is particularly useful for aligning text with checkboxes. For details, see the help page Maplets[Elements][GridLayout].
Window - Allows the option of adding a title to the window. For details, see the help page Maplets[Elements][Window].
Examples
The following Maplet application displays three boxes of items.This Maplet application is constructed with square brackets. Options, such as border and background color are not available. To understand the layout, you must follow the lists within the square brackets. Note that the checkboxes and associated text do not align.
The Maplet application structure is:
Maplet(Window(item,[[item, item, item, item, item,[[item],[item],[item],item, item]]))
restart; with (Maplets[Elements]): Threeboxes1 := Maplet(Window( 'title' = "Using [] Brackets", [ ["ABC", Button("OK", Shutdown()), "More text...",TextField[TF1](5), "Title Here", [ [CheckBox['CB1'](), "red"], [CheckBox['CB2'](), "blue"], [CheckBox['CB3'](), "green"] ], "Text Goes Here",TextField['TF2'](5) ]])): Maplets[Display](Threeboxes1);
The following example produces a Maplet application similar, but visually enhanced, to the previous example. The first BoxRow element encompasses the entire contents of the Maplet application. The box is given a white border. Instead of square brackets, BoxRow and GridLayout elements are used.
The Maplet application structure is: Maplet(Window(item), BoxRow(item, BoxRow(item, item, item, item, item), BoxRow(item, item, GridLayout(item, item, item)), BoxRow(item, item) ))):
restart; with (Maplets[Elements]): Threeboxes2 := Maplet(Window( 'title' = "Using BoxRow and GridLayout Elements", BoxRow('border'=true, BoxRow('background'=blue, "ABC", Button("OK", Shutdown()), "More text...",TextField['TF1'](5)), BoxRow('background'=white, "Title Here", GridLayout([ [CheckBox['CB1'](), "red"], [CheckBox['CB2'](), "blue"], [CheckBox['CB3'](), "green"] ])), BoxRow('background'=red, "Text Goes Here", TextField['TF2'](5)) ))): Maplets[Display](Threeboxes2);
In complex Maplet applications, it is often easier to read code that employs specific elements from the Maplets[Elements] package rather than square brackets. Also, you can use interface options with elements to enhance the appearance of the Maplet application.
See Also
Authoring Maplet Applications for MapleNet, examples/MapletsTutorial, examples/AdvancedMapletsLayout, Overview of Maplet Applications
Return to Index for Example Worksheets
Download Help Document
