Table of Contents (Boxely User Guide)

IntroductionAbout the Boxely UI Toolkit
      
About the "To-Do List" Application
      
How to Use This GuideNavigating the Guide
Intended Audience
Conventions Used in This Guide
Contacting the Boxely Team for Support
About Boxely ApplicationsAbout Boxes
About Libraries and Resources
About Scripts
Installing the Boxely Files
      
Exercise Filesexercises/ToDoList
exercises/appendix
Summary
      
1. Getting StartedIntroducing the Boxely EnvironmentBoxely Source Code Files
Developing Boxely Applications
Running Boxely ApplicationsBoxely Application Viewer
Editing the Configuration File
Creating Custom Launchers
Creating a New Boxely ApplicationSetting Up the File Structure
The .box File
"To-Do List" Exercise 1.1: Creating a New Application
Adding BoxesAbout Text Boxes
About Plain, Horizontal, and Vertical Boxes
About Image Boxes
"To-Do List" Exercise 1.2: Adding Boxes
Adding GadgetsAbout Box Files
Defining Gadgets
Instantiating Gadgets
Why Use Gadgets?
"To-Do List" Exercise 1.3: Adding Gadgets
Styling Gadgets"To-Do List" Exercise 1.4: Styling Gadgets
Summary
      
2. Using StylesIntroducing the s NamespacePositioning and Alignment Styles
Dimension Styles
Fill, Stroke, Shadow, Bevel, Affine, and Other Styles
Text Styles
Declaring the s Namespace
      
Styling the Window Element"To-Do List" Exercise 2.1: Styling the Window Element
Styling Gadgets (Revisited)
      
Styling Parts Inside a Gadget"To-Do List" Exercise 2.2: Styling Parts Within a Gadget
Styling Parts within a Gadget (More Techniques)"To-Do List" Exercise 2.3: Adding a Scrollable textbox
Using States to Enhance Styles"To-Do List" Exercise 2.4: Using States
Using Images as FillsSupported Image Formats
Incorporating Images
Referencing Image Files
"To-Do List" Exercise 2.5: Loading an Image File into an Image Box
"To-Do List" Exercise 2.6: Loading an Image File Into the Library
Using Gradients"To-Do List" Exercise 2.7: Using Gradients
Summary
      
3. Using Toolkit GadgetsIntroducing Toolkit Gadgets
      
Using Toolkit Gadgets: How it Works
      
Using Text Gadgets"To-Do List" Exercise 3.1: Using the multilineLabel Gadget
"To-Do List" Exercise 3.2: Using the label Gadget
Using Button Gadgets"To-Do List" Exercise 3.3: Using the textButton Gadget
"To-Do List" Exercise 3.4: Using the button Gadget
Organizing Your Code"To-Do List" Exercise 3.5: Organizing Your Code
Summary
      
4. Scripting and Event HandlingIntroducing Scripting and Event HandlingCreating the Content: Main Application Window
Creating the Content: Pop-up Window
Creating JavaScript Functions for a Gadget
Associating JavaScript Functions with a Gadget
Testing Your Application
More on ScriptingShell Class
Scene Class
appUtils Class
More on Event HandlingEvent Handling Using Behaviors and Reactions
Event Handling Using the on Namespace
Debugging an Application
      
"To-Do List" Exercise 4.1: Programming the titleArea Gadget
      
"To-Do List" Exercise 4.2: Programming the buttonsArea Gadget
      
"To-Do List" Exercise 4.3: Programming the noteArea Gadget
      
"To-Do List" Exercise 4.4: Programming the buttonsArea Gadget (cont.)
      
Summary
      
5. Drag-and-DropProgramming Drag-and-Drop BehaviorCreating a Source Object that is "Draggable"
Creating a Target Object Where the Source Object Can Be Dropped
"To-Do List" Exercise 5.1: Making the noteArea gadget "draggable"
"To-Do List" Exercise 5.2: Creating a Target Object
Summary
      
6. Using OCP ServicesIntroducing OCP ServicesInvoking OCP Services
"To-Do List" Exercise 6.1: Using the basics Service
      
"To-Do List" Exercise 6.2: Using the localStorage Service
      
Summary
      
7. Using TransitionsIntroducing Transitions
      
"To-Do List" Exercise 7.1: Using Transitions
      
Summary
      
8. Using AnimationIntroducing Animation
      
"To-Do List" Exercise 8.1: Using Animation
      
Summary
      
9. Using Data BindingIntroducing Data Binding
      
Introducing Collection Binding
      
"To-Do List" Exercise 9.1: Using Data Binding
      
Summary
      
10. Distributing your Boxely ApplicationDistributing your Boxely ApplicationModifying the Boxely Application Viewer and Configuration File
Creating your Boxely Application Directory Structure
Packaging your Application
Summary
      
A. More About LayoutsUsing Flowed LayoutLay Out Based on Parent
Using Orientation
Sizing and Distributing Boxes (Using s:flex)
Using Padding and Margins
Using Views
Using Fixed LayoutUsing Offset
Using Layers
Summary
      
B. More About StylesUsing Fills and ColorsUsing Built-In Colors
Using System Colors 
Using HEX Colors
Using an Image Resource as a Fill 
Modifying Fills and ColorsUsing Slicing
Using Brushes
Using a Mask
Creating Color Transformations
Using Gradients
Tiling Images
Using Stroke Patterns
Using Pens
Using Clipping and Scrolling
Using Shadows
Using Blur and Glow
Using Bevel
Scaling and Rotating Boxes 
Boxely Color Constant ReferencesBuilt-in Colors: W3C CSS Standard Color Names
System Color Constants with Windows Equivalents 
Summary
      
C. More About AnimationsCreating a Simple Animation
      
Resetting an Animation
      
Animating a Box's Position
      
Using "Set" Animations
      
Calling Animations When Entering and Exiting States
      
Adding Dynamic Effects to Animations
      
Creating a Complex Animation: Bouncing Image
      
Summary
      
D. Troubleshooting ReferenceDebugging JavaScript Code
      
Debugging the Inclusion of External Files
      
Summary
      
E. Accessibility ReferenceAbout Accessible ApplicationsAbout Full Keyboard Navigation
About High Contrast Mode
About Screen Reader Technology
Enabling Full Keyboard NavigationSetting Tab Order
Incorporating Keyboard Shortcuts
Incorporating Accelerator Keys
Incorporating Access Keys
Styling Accessible ApplicationsEnabling High-Contrast Mode
Using System Colors
Using Non-System Colors
Sizing Applications for High Contrast Mode
Integrating with Screen Reader TechnologyHow it Works
Integration Guidelines
"Reading" Input Fields
"Reading" Check Boxes
"Reading" Radio Buttons
"Reading" Combo Boxes
"Reading" Menus
"Reading" Tree Views
"Reading" Custom Gadgets
Testing Applications for AccessibilityTesting Applications for Full Keyboard Navigation
Testing Applications in High Contrast Mode
Testing Applications with a Screen Reader
Summary
      
Glossaryattribute
box
Boxely UI Toolkit
commandable
container
CSS (Cascading Style Sheets)
data binding
decimal code
DHTML (Dynamic HTML)
Document Object Model (DOM)
event
flowed child boxes
gadget
HTML, HyperText Markup Language
listener
namespace
object
OCP Toolkit
overflow
registered view factory
scene
state
styles
shell
style cascade
TRBL (top right bottom left)
eXtensible Markup Language (XML)