Home ›

Boxely - FAQ



Frequently Asked Questions

Do you have any questions? Look here to read the answers to some of the most frequently asked questions about the Boxely™ UI Toolkit and the OCP.

Licensing and Support

1. Where can I view the license agreement?

The software license agreement for Boxely will be presented to you before you can download the software. You can view the license agreement for Boxely by following the download link.

Back to Licensing and Support 2. What kind of support can I expect?

The Boxely Developers Forums has been created to support developers using the Boxely UI Toolkit. The Boxely team will regularly monitor and respond to developer questions posted on the forums.
For the preview releases, support will be limited to the forums.

Back to Licensing and Support

About the OCP Preview

1. What is the Open Client Platform (OCP)?

The Open Client Platform (OCP) is comprised of modules called "services" that provide developers with functionality that is robust, reusable, and easily accessible for dynamic application development. OCP services provide access to various tools that are not native to JavaScript, such as timers and SQL-based local storage. These services can be accessed and used by any Boxely application.

Back to About the OCP Preview 2. What is in the package?

The OCP Preview package contains the following components:

  • the Boxely UI Toolkit
  • core OCP services
  • documentation on how to use the Boxely UI Toolkit and OCP services
  • a variety of samples (both, made by the Boxely team and contributed by users)
For more detailed information about what is installed by the package, please refer to the Downloads page.

Back to About the OCP Preview 3. How do I download and get started?

To download the OCP Preview installer, go to the Downloads page and follow the link at the bottom. When the installer is finished, a file called README.html will get you started right away. Inside the documentation directory will be a file called boxelyDocs.html. This will provide you with the Boxely User Guide and OCP Service API Reference documentations that will help you develop your own Boxely application.

You may also take a look at the online documentation to familiarize yourself with the Boxely UI Toolkit and OCP services.

Back to About the OCP Preview 4. How can I stay informed?

We have many exciting plans for the Boxely UI Toolkit and the OCP. If you would like to be informed of new releases and developments, subscribe to our announcements mailing list.

Back to About the OCP Preview 5. Where can I go to ask questions and/or provide feedback?

Do you have a question you can't find an answer to? Do you want to let us know about your opinions? We're really interested in what you think about the Boxely!

Visit the Boxely Forums and post your questions, comments and feedback about the Boxely UI Tooklit.

Back to About the OCP Preview

About the Boxely UI Toolkit

1. What is the Boxely UI Toolkit?

The Boxely UI Toolkit is a next generation, standards based UI Toolkit. It is designed to enable the creation of rich desktop application interfaces with the same ease, flexibility, and extensibility as authoring internet applications today.

Back to About the Boxely UI Toolkit 2. How do you spell Boxely?

B O X E L Y

Back to About the Boxely UI Toolkit 3. Why didn't you use CSS?

We decided against CSS specifically because we wanted a styling model that was more XML centric (CSS is not standard XML per say in that CSS uses a completely different syntax). We adopted a style language that allowed us to style our composite controls based on the state the controls are in. We also allow styles to selectively style the "parts" of composite controls separately from the gadget instances themselves.

Back to About the Boxely UI Toolkit 4. What script languages does the Boxely UI Toolkit currently support?

Currently the Boxely UI Toolkit supports JavaScript.
You can read more about how to integrate scripts with your application in Chapter 4. Scripting and Event Handling of the Boxely User Guide

Back to About the Boxely UI Toolkit 5. What about security or obfuscation of the JavaScript code?

The Boxely UI Toolkit is an application development toolkit (similar MFC or wxWindows) and not necessarily a content engine (browser). At this time, it's up to the application developer to determine how to hide any sensitive application logic.

Back to About the Boxely UI Toolkit

Boxely Basics

1. What is a box?

A box is the common building block of a Boxely scene. Each box represents a rectangle on the screen, over which you have full control of the appearance and behavior. Boxes are identified with a tag name, and inherit from one of several basic box types. Boxes can be specified in XML using this tag name, or created and inserted into a scene via script.

Back to Boxely Basics 2. What is data binding?

Data binding allows us to translate a data hierarchy into a hierarchy of boxes with attributes and styles. Data can be bound in several different ways, using forms, templates, trees and listboxes. The boxes are created dynamically from a data source whose structure maps onto the structure of the box hierarchy to be created.
You can read more about data binding in Chapter 9. Using Data Binding of the Boxely User Guide

Back to Boxely Basics 3. What is a scene?

A scene is an entity sometimes called a "form" which contains a tree of gadgets or components (the DOM) and can include other supporting resources such as behavior and themes. The scene is what makes up a single viewable region. Conceptually a scene can be thought of as a window, however in actuality it is distinct from the native entity. A scene can handle and dispatch events as well as have scripts associated with it.

Back to Boxely Basics 4. What is a shell?

A shell is a singleton and is basically the master of the scenes. It is responsible for parsing and creating/destroying scenes. The shell also contains anything else that is at the global (across all scenes) level. A shell contains 1 or more scenes.

Back to Boxely Basics

Using the Boxely UI Toolkit

1. How do you specify fill or text colors in Boxely markup?

There are 2 ways to specify a color is Boxely markup

  1. You can use a RGB value. Specify the color's RGB hex value in the format: #RRGGBB
  2. The Boxely UI Toolkit has 16 built-in color names, and 26 system color definitions.
Example: Using hex value
<window xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        id="window"
        translucent="false"
        title="My Sample"
        s:fill="#FF0000"
        s:width="600" s:height="480">
</window>

Example: Using color name
<window xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        id="window"
        translucent="false"
        title="My Sample"
        s:fill="red"
        s:width="600" s:height="480">
</window>

Back to Using the Boxely UI Toolkit 2. How do you set the background fill color for a window?

You can set the s:fill="#FFFFFF" attribute on your main window to change the fill color. The color format is #rrggbb, where the values are in hex.

Example: (Filling a 600x480 window with red.)

<window xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        id="window"
        translucent="false"
        title="My Sample"
        s:fill="#FF0000"
        s:width="600" s:height="480">
        </window>

Back to Using the Boxely UI Toolkit 3. How do you pin an element to the end (right side) of a row?

If you would like to present a row of buttons, but would like one or more items at the end of the row to be pinned along the right side of the box or form, you can utilize a <spacer> tag with it's flex property set to 1.
This will create a flexible area between the first set of elements and the set after the tag.

Example:

<hbox>
  <button label="Button 1" s:width="50"/>
  <button label="Button 2" s:width="50"/>
  <spacer s:flex="1"/>
  <button label="Button 3" s:width="50"/>
</hbox>

Back to Using the Boxely UI Toolkit 4.How do you set a different font family for each menu item label?

You can set the fontFamily attribute on the menuItemtag.

Example:

<menuBar>
  <menuBarItem label="Font">
    <menuPopup>
      <menuItem label="Arial"           fontFamily="Arial"/>
      <menuItem label="Arial Black"     fontFamily="Arial Black"/>
      <menuItem label="Arial Narrow"    fontFamily="Arial Narrow"/>
      <menuItem label="Courier"         fontFamily="Courier New"/>
      <menuItem label="Comic Sans MS"   fontFamily="Comic Sans MS"/>
      <menuItem label="Times New Roman" fontFamily="Times New Roman"/>
      <menuItem label="Verdana"         fontFamily="Verdana"/>
    </menuPopup>
  </menuBarItem>
</menuBar>

Back to Using the Boxely UI Toolkit 5. What is the rectangle format for margins and padding?

The rectangle format for margins and padding is the same as CSS: "top right bottom left" or "top/bottom left/right".

Example of "top right bottom left":

<style tag="splitter">
  <attribute name="axis" value="y"
             margin="2 0 2 0"
             fill="#787878"
             fillSize="both"
             width="2">
  </attribute>
</style>
Example of "top/bottom left/right": 
<style id="input" tag="input"
      cursor="text"
      margin="2 4"
      minWidth="60"
      fill="#ffffff"
      stroke="#888888"
      strokeWidth="1"
      fontFamily="Tahoma"
      fontSize="15px"
      textColor="#606060"
      fontWeight="normal"
      fontStyle="normal">
</style>

Back to Using the Boxely UI Toolkit
» Submitted by Developer Network on April 30, 2007 - 12:47pm.