• Home
• Platform
• Download
• Documentation
• Community
• Wiki
• Blog

From OpenLaszlo

These examples can be accessed from the OpenLaszlo Explorer, and are within the 'Components' menu. Please run the tests with the debugger on. No debugger warnings should be shown at any time.

Build:
Branch:
Build Date:

Contents 1 Test Environment 2 Sampler Example 3 Form Components 3.1 Button Example 3.2 Checkbox Example 3.3 Combobox Example 3.4 Date Picker Example 3.5 Edit Text Example 3.6 Form Example 3.7 List Example 3.8 Radio Group Example 3.9 Slider Example 4 General Components 4.1 Window Example 4.2 Tree Example 4.3 Data Grid Example 4.4 Tabslider Example 4.5 Tabs Example 4.6 Floating List Example 4.7 Scrollbar Example 4.8 Menu Example 5 Class Hierarchy 6 Other 6.1 Audio Example 6.2 Hello Example

Test Environment

Platform	SWF7	SWF8	SWF9	DHTML
WindowsXP - Firefox 2
WindowsXP - Internet Explorer 6
WindowsXP - Internet Explorer 7
Linux - Firefox 2
MacOSX - Firefox 2
MacOSX - Safari 2

Sampler Example

	Pass	Fail	Comments
Default style is blue
Style combobox has style options silver, green, blue, gold, white, and purple
Choosing a different style changes the app to the appropriate style colors
Verify that all the tabsliders work and that you can go back and forth between tabs
Content in open tabsliders looks ok or works as expected
Can switch between regular tabs 'Insecticides', 'Parcheesi', 'Bogart, GA'
Can choose different radio buttons in 'Insecticides'
'Parcheesi' has a button that can be depressed
Columns in 'Bogart, GA' can be sorted alphabetically and reverse alphabetically
Verify that clicking a column numerous times will continue to sort and reverse sort the column
'Disabled' button cannot be depressed, but 'Submit', 'Cancel', 'OK', and 'Revert' can be
'Pistachio' combobox works as expected
Radiobuttons and slider work as expected
'Trunk of the tree' folder can be expanded and subfolders can be expanded to reveal Leaf files A, B, C, and D
Can expand and hide folder contents repeatedly
Checkboxes work as expected
Editable text field allows input
Disabled text field does not allow input
Frosty the Snowman window can be resized, moved around, and scrolled
'File' and 'Document' comboboxes can be expanded, and can continue into the list of subitems in 'File'
Can navigate to different parts of the app using the 'tab' key
Tab key goes forward in selection, Shift+Tab goes back in selection
When selected, checkboxes can be checked and unchecked using the spacebar
The different sections of the application can in general be navigated using the keyboard

Form Components

Button Example

	Pass	Fail	Comments
Launched App shows buttons (note that they do not function when clicked)
The top 3 buttons are increased width, increased height, and default size
The next 3 buttons have an image, image that has text, and a small colored box aligned with text
The next 2 buttons are colored a distinct hue
Verify that you can change the focus to different buttons using the tab key.

Checkbox Example

	Pass	Fail	Comments
'Checked by default' box is already checked upon launching the app
Disabled box is fainter and cannot be checked
Blue style checkbox is blue and can be checked and unchecked
Green checkbox is green and creates a green square when checked
Unchecking the green checkbox removes the green square
To the right, 'Check me' box is already checked upon launching the app
Toggle value is true when 'Check me' box is checked, and false when unchecked
Clicking the Toggle button will check and uncheck the box
Clicking the 'Disable' button greys out the 'Check me' box and disables checking and unchecking
Can still use the Toggle button while 'Check me' box is disabled
When checkbox is disabled, says "enabled=false"
Clicking the Enable button reactivates the checkbox if it was disabled, and says "enabled=true"
Verify that you can tab to different parts of the app.

Combobox Example

	Pass	Fail	Comments
'Editable combobox' initially says "choose one..." and has value null
Can choose 'item one' in combobox, and that changes the value to item1. Same for item 2, item 3, and item 4
Editable combobox text can be edited, but this does not change the value
Non-editable combobox text cannot be edited
Non-editable combobox initially says item one, with value item1
Can choose item one, two, three, or four in non-editable combobox, and this will change the value appropriately
Lower combobox shows seven entries at a time
Lower combobox has a scrollbar that can be used to see other entries
Verify that the lower combobox text cannot be edited, and that you can select a different value
Verify that you can tab between the different comboboxes.
Hitting the spacebar while focus is on the editable combobox will bring up the cursor
Hitting the spacebar while focus is on a non-editable combobox will show the contents of the combobox
Using the up or down arrows while focus is on a combobox will show the contents of the combobox

Date Picker Example

	Pass	Fail	Comments
On launch, shows a small icon above "datepicker that starts with an icon", and a full month view above "datepicker that starts without an icon"
Clicking the small icon expands the icon so the days become visible
On either date picker, can scroll to a different month using the small arrow buttons
Cannot scroll before current month using left arrow button
Can select a month using the drop-down menu for month title
Can select a year using the drop-down menu for year title
Selecting a different month or year from drop-down menu updates the calendar appropriately
Past days in current month are greyed out
Hovering over a day highlights it
Clicking on a day selects it, indicated by its highlight (currently, selecting a day closes the datepicker with icon 8/16/06)
Clicking the 'x' button closes the date picker
Maximum scroll forward is a year after the current month
Verify that tabbing allows you to select not only the date picker itself, but also different options at the top of the date picker
Make sure that, when focus is on a date picker option, you can use the spacebar and enter key to control those options

Edit Text Example

	Pass	Fail	Comments
On launch, shows edit text areas that are pre-filled, except for "username" which defaults blank
Can edit and enter in text in all text fields
Text wraps in multi-line edit text field
Text in 'password' field shows as an asterisk, regardless of what character is entered
Verify that you can tab to different edit text fields
Make sure that when the focus changes to a text field via tabbing, the contents of that field are highlighted

Form Example

	Pass	Fail	Comments
Has two tabs, 'Example 1' and 'Example 2'
Example 1 is the default open tab
Can change tabs by clicking on the menus
Can select one of the three radio buttons in Example 1
Can scroll the list in Example 1, and select one option from the list
Can check and uncheck checkbox in Example 1
Clicking submit button shows a new Results form to the right of the existing form
Clicking submit on Example 1 shows a 'definition' numerical value corresponding to the radio button chosen,
Clicking submit on Example 1 shows an 'email' value that is true or false based on whether the checkbox was selected
Clicking submit on Example 1 shows an 'home' text value that corresponds to the list item selected
Can enter in text values in the editable text fields in Example 2
Can select one or multiple options (using shift-click or ctrl-click) from the list in Example 2
Can scroll list in Example 2
After clicking submit in Example 2, Results tab is visible
Clicking submit on Example 2 shows a 'firstname' value corresponding to what was entered in its text field
Clicking submit on Example 2 shows a 'lastname' value corresponding to what was entered in its text field
Clicking submit on Example 2 shows a 'pain' value that has each item that was selected from the list, separated by commas and with no spaces between items
In either Example tab, can re-submit form values that will overwrite the existing data in the Results tab
Verify that you can access and control the elements of the forms using only the keyboard.

List Example

	Pass	Fail	Comments
Can select one item from single select list
Single select list has value underneath it that corresponds to selected list item
Can select one item from toggle selected list
Toggle selected list has value underneath it that corresponds to selected list item
Hovering over list item in toggle selected, single select, or multi-select highlights the item as long as mouse is over it
Selecting list item in toggle selected, single select, or multi-select highlights the item even when mouse is not hovering over it
Can select multiple items in multi-select list
Clicking 'clear selection' button removes selection(s) from the multi-select list
Clicking 'get value' button retrieves a value for the multi-select list item(s) that have been chosen
Purple style list has purple colors and different highlighting colors for hovering mouse over and selecting item
'Custom list item class' shows different color squares corresponding to the list item's name
'Custom colors, spacing=2' shows a small spacing between list items
Custom colors shows different highlighting colors for hover and selection
Can scroll all lists that have scrollbars
Verify that all elements and options of the list example can be controlled using only the keyboard.

Radio Group Example

	Pass	Fail	Comments
'Simple radio' group has buttons aligned vertically
'Horizontal axis' radio group has buttons aligned horizontally
'Wrapping layout' radio group has two columns of buttons
'With x positions' radio group has buttons with increasing indent as you descend
'Without automatic layout' radio group has buttons that indent more and then less as you descend
'Trap focus' has a vertically aligned group of buttons with a checkbox underneath
Checkbox is checked by default
Can check and uncheck the checkbox
Verify that you can select and control the different radio or checkbox options using only the keyboard.

Slider Example

	Pass	Fail	Comments
Slider defaults in the middle, with minValue 0, maxValue 100, and Value 50, and 'show value', 'show fill', and 'show range' all checked
Can drag slider to a different value
'Value' text field updates based on where you drag the slider
When 'show value' is checked, the value of the slider position will show while dragging
When 'show value' is unchecked, there is no value above the slider while dragging
When 'show fill' is checked, the slider bar is differently colored for values below the selected value
When 'show fill' is unchecked, the slider bar is the same for values both above and below the selected value
When 'show range' is checked, the slider has a minimum and maximum value shown below it
When 'show range' is unchecked, there are no values below the slider
Editing the minimum value updates the slider, and updates the min value below the slider if 'show range' is checked (doesn't work as of 8/16/06)
Editing the maximum value updates the slider, and updates the max value below the slider if 'show range' is checked
Editing the value of the slider in the 'Value' text field moves the slider to the appropriate location (doesn't work as of 8/16/06)
Verify that editing the value of the slider to a number beyond the minimum or maximum value does not crash the application
Verify that you can control and use the example with only the keyboard.

General Components

Window Example

	Pass	Fail	Comments
Can move the windows around by dragging with the mouse
'Close me' window has blue text on yellow background
By default, 'close me' window has a disabled vertical scrollbar
Can expand and shrink 'close me' window using the mouse
Verify that if you shrink the 'close me' window enough, the vertical scrollbar activates and that you can use it to scroll
Can close the 'close me' window by clicking the 'x' button
After closing the 'close me' window, clicking the 'appear' button causes a new 'close me' window to appear
'Frosty' window has scrollbars
Can scroll the 'Frosty' window to see text that is out-of-view
Can expand and shrink the 'Frosty' window using the mouse
Can close the 'Frosty' window by clicking its 'x' button
'w1: 200x100' window contains a checkbox and a button
Cannot expand, shrink, or close 'w1: 200x100' window
'Cherry' window contains an image of a cherry
Cannot expand, shrink, or close 'cherry' window
Clicking the 'new simple window' button opens a small blank window that can be resized or closed
Clicking the 'open modal dialog' button opens a window that contains a checkbox and an 'ok' and 'cancel' button
Clicking 'ok' or 'cancel' in the modal dialog closes the dialog window
Clicking the 'simple alert' button brings up a window whose 'ok' button can be clicked to close the window
Clicking the 'alert with buttons' brings up a 'lunch alert' window that has two different buttons
Clicking either of the two buttons in the 'lunch alert' window closes the window
Clicking the 'alert with image' button brings up a window with an image and an 'ok' button
Clicking the 'ok' button for the 'alert with image' window will close the window
Verify that the same window can be opened and closed multiple times using the buttons
Verify that you can cycle through and control the different buttons and checkboxes using only the keyboard

Tree Example

	Pass	Fail	Comments
Tree example contains three different trees: fruits and dairy, hominid evolution, and 'tree containing tab')
Fruits and dairy tree's 'basket' level is expanded by default, with subfolders 'fruits' and 'dairy'
Can expand all subfolders in the fruits and dairy tree
Verify that folders in the tree can be closed and opened multiple times, hiding and then revealing the folder contents
Closing and reopening a higher level folder remembers whether subfolders were open or closed
Subfolders terminate with files that correspond to the name of the folder
Double-clicking on a file in the 'fruits and dairy' tree opens a new browser window with information relating to the file name
The 'hominid evolution' tree is fully expanded by default
Can close and reopen folders in the 'hominid evolution' tree
Verify that subfolder states are remembered when closing a higher level folder in the 'hominid evolution' tree
The nesting in the tree terminates with empty folders
'Tree containing tabs' has two folders, 'fruits' and 'dairy', with identical content
Can open and close a 'tree containing tabs' folder repeatedly, revealing and hiding the folder contents
Opened folder shows 'slider' and 'button' tabs, with slider open by default
Can move the slider back and forth in either folder
Button tab contains a button that can be clicked, though clicking does not actually do anything
Can go back and forth several times between 'slider' tab and 'button' tab
Verify that you can control the example using only the keyboard (tab and arrow keys)

Data Grid Example

	Pass	Fail	Comments
Has 'Contacts' and 'Weather' tabs
'Contacts' tab is open by default
'Contacts' tab has columns 'No.', 'First', 'Last', 'Fullname', and 'Default Contact'
Verify that the rows are aligned horizontally
'No.' column contains integer values 1 through 137, in increasing order
'No.' column cannot be resorted
'No.' column cannot be resized
'First', 'Last', and 'Fullname' columns have text values
Can resize 'First','Last', and 'Fullname' columns
Can sort 'First', 'Last', and 'Fullname' columns alphabetically by clicking on the column name
Clicking the 'First', 'Last', and 'Fullname' columns multiple times alternates between A->Z and Z->A sorting
Verify that when sorting, text values in the sorted column are accompanied by corresponding row values in other columns
'Default contact' column has 'home' and 'work' radio buttons aligned horizontally
'Home' is the default radio button choice
Can toggle between 'home' and 'work' radio buttons
Cannot sort or resize 'Default contact' column
Contacts tab has vertical and, if columns are expanded enough, horizontal scrollbars
Scrollbars can be used to access values that aren't currently being displayed
Hovering over a row highlights the row
Can select a row by clicking somewhere in it
Can edit first, last, or fullname by clicking on the text value
Edited text values sort appropriately
Can switch to 'Weather' tab
Weather tab contains 'name' and 'text' columns
Can resize 'name' and 'text' columns
Can sort either column alphabetically or reverse alphabetically (numbers coming before letters when alphabetically, after when reversed)
Verify that can resort 'name' or 'text' column multiple times
Hovering over a row highlights the row
Clicking on a text value allows editing of that value in the edit text field
Edited text values in weather tab sort appropriately to their new values

Tabslider Example

	Pass	Fail	Comments
Shows two views with 3 tabsliders each upon launch
Top tabsliders 'Numbers' and 'Section One' are open by default
'Numbers' tab contains radio buttons, a checkbox, and 'Next' button
Clicking the 'Next' button in 'Numbers' tab opens the 'Fruit' tab
'Fruit' tab has radio buttons, a checkbox, "Help" button, a combobox, another checkbox, and a 'Next' button
Clicking the 'Help' button opens a window with an 'ok' button
Clicking 'OK' closes the window that the 'Help' button opened
Can select any of the choices in the drop-down menu
Can check and uncheck the checkboxes in 'Fruit' tab
Clicking 'Next' in Fruit tab opens the Pets tab
'Open Next Tab' works as expected, and also does nothing when at the last tab
'Open Prev Tab' works as expected, and also does nothing when at the first tab
Verify that in the Pets tab the radio buttons are selectable, the checkbox can be checked and unchecked, and the 'Submit' button can be depressed
Each tabslider of the second view has, when opened, a colored square corresponding to the color of the small square in the tabslider bar itself
Clicking on a tabslider that is already open does not change the viewing state
Clicking on a closed tabslider opens the tab for viewing
Can control tabsliders and tabslider contents using only the keyboard.

Tabs Example

	Pass	Fail	Comments
Shows 3 views, each with tabs
'Autosized' view has tab 'default' open on launch
'Default' tab has a regular button and 3 radio buttons lined up vertically
Can depress the regular button or choose a radio button option
Switching to 'insets 0' shows a new tab with a single button
There is no spacing between the button in 'insets 0' tab and the edge of the tab
Can depress the button in 'insets 0' tab
Can switch to 'insets 10' tab, revealing a single button
Button in 'insets 10' is indented from the top and left
Can depress the button in 'insets 10' tab
Can switch back and forth between tabs without problem
The 'set height and width' view has 'stuff' and 'more' tabs
Can switch back and forth between 'stuff' and 'more' tab without problem
Buttons and Radio buttons in 'stuff' and 'more' tab work as expected
'Bgcolor' view has tabs 'normal', 'yellow', 'green', and 'blue'
Each tab has a single button that can be depressed and a background color that corresponds to the title of the tab
Can switch back and forth between tabs
Can control tabs and tab contents using only the keyboard.

Floating List Example

	Pass	Fail	Comments
Launching the app shows 6 buttons and a single checkbox sparsely spaced around the background
Blue, gold, white, and purple buttons have their lists expanded by default
Silver and green buttons have their lists hidden by default
Clicking a button with an open list hides the list
Clicking a button with a hidden list reveals the list
Verify that you can open and close a list several times by clicking on a button repeatedly
Checking the 'animate' checkbox reveals all lists and moves the buttons around the screen
Buttons with lists continue to move around the screen as long as checkbox is checked
Unchecking the checkbox freezes the buttons in their current positions
Animate the buttons, and wait till they move to a different location. Uncheck the animate box. Verify that clicking the buttons still hides or unhides the lists.
Able to effectively control floating list and use the animate checkbox with only the keyboard.

Scrollbar Example

	Pass	Fail	Comments
Each of the 3 views can be scrolled both vertically and horizontally
Putting a numerical value and clicking the 'set scroll' button moves the horizontal scroll of the above view the numerical number of pixels from the left
'Set width' changes the width of the view with the cherry image
Setting the width to a small number will cut-off part of the image, and will disable horizontal scrolling
Verify that you can access and control the buttons and text fields using only the keyboard.

Menu Example

	Pass	Fail	Comments
Clicking the top 'File' or 'Document' button opens a list below
'Document' list has nested subitems that can be revealed using the mouse
Clicking the 'File' or 'Document' button hides the list if the list is already open
Can close and reopen 'File' or 'Document' list multiple times
Clicking 'openMenu top' button opens a list above the button
Clicking 'openMenu right' button opens a list to the right of the button
Clicking 'openMenu below' button opens a list below the button
Clicking 'openMenu left' button opens a list to the left of the button
The bottom 'File' or 'Document' buttons open their lists above
Bottom 'File' and 'Document' lists can be opened and navigated as expected

Class Hierarchy

	Pass	Fail	Comments
Initial page after launch is titled 'Component Hierarchy' and contains a tree of component types
The Component Hierarchy tree is contained within a view that initially has an inactive scrollbar
Clicking on an arrow in the tree either expands the listing to reveal subtypes, or collapses the listing if it was already expanded
Verify that all tree listings that have arrows actually contain subtypes
Verify that the most nested sublistings in the tree do not have arrows
Expand enough tree listings that the view no longer shows the entire contents. Verify that the scrollbar is activated.
Verify that the scrollbar can be used to navigate to parts of the tree that are hidden from view.
Hovering over a tree listing highlights the listing blue
Clicking on a tree listing opens a new browser window with the LZX reference page for that listing
Verify that there is a key to the right of the tree view
The key shows four color coded class types
Verify that values within the tree are color coded to match the key
Clicking the 'See Related Components' button below the tree changes the page to show a tab menu
The 'Form' tab is open by default when the Related Components page is first shown
There are eight tabs: 'Form', 'List', 'Tabslider', 'Tabs', 'Menu', 'Window', 'Scrollbar', and 'Tree'
Verify that clicking on a tab shows the contents of that tab
Verify that each tab contains a view with color coded class types, and a key to explain what the colors mean
Verify that clicking on a class type in a tab opens a new browser window with the appropriate LZX reference page
Clicking on the 'See Components Hierarchy' button takes you back to the original page
Verify that the entire contents of the Class Hiearchy Example can be viewed and controlled using only the keyboard

Other

Audio Example

Can be accessed at ".../[lps-version]/examples/audio.lzx?debug=true"

	Pass	Fail	Comments
Verify upon launch that the example has 'poof', 'beep', and 'troll' buttons
Clicking Poof button makes a "shwoop!" noise
Clicking Beep button makes a "piew!" noise
Clicking Troll button makes a "pullwoodup" noise
Keyboard can be used to navigate and control the buttons

Hello Example

Can be accessed at ".../[lps-version]/examples/hello.lzx"

	Pass	Fail	Comments
Says 'Hello Laszlo!'