You are viewing an archive page. Click here to go to the current Open Exhibits website.
Log-in is disabled for the archived site

Software: UI Elements

Templates allow novices to create their own floor or Web based exhibits. Universal Modules allow more advanced developers to combine, branch, and write their own modules that can act as building blocks for new Exhibits.

Key Viewer

Key Viewer

First Posted: June 28, 2011
v1.1.1 Updated: April 11, 2011

Project Summary

The keyViewer module is a simple extendable onscreen keyboard which can be omni-directionally repositioned and re-sized onstage using multitouch gestures. The keyboard styling, size, layout, and spacing can be customized using the module XML.


Profile picture for Matthew Valverde

Matthew Valverde

Lead ActionScript Developer
Open Exhibits Staff

Total Activity:  2K
Downloads:  63
Article Views:  1K
Shared:  0
Tweets:  1

Uploads:  20
Comments:  24
Favorites:  12
Likes:  1
Emails:  0

Profile picture for Robert Speck
Robert Speck commented
7 years ago
Hey, I'm having a problem getting this module to work in my custom application. I've added everything I need to to the document and the folder, and right now it spawns the keyboard object correctly when the user touches a specific object in my app. However when I go to interact with the keyboard it throws up a 'Cannot access a property or method of a null object reference' error. When I press the keys after that they work and generate characters in the little text field, but I can't drag the keyboard around, etc. Any ideas?
Profile picture for Robert Speck
Robert Speck commented
7 years ago
Solved it myself, actually. The problem stems from using Flash CS4 and thus Flash Player 10 instead of 10.1+. For anyone else who'd like to use this with CS4, the problem is just that KeyViewer passes a -1 to the touchDrag() function which isn't necessary when publishing to Flash Player 10. Just change that and you're good to go on CS4.
Profile picture for Robert Speck
Robert Speck commented
7 years ago
One more query developed, now that I have this working. I have a text field on a menu in my application that, when clicked, creates a new KeyViewer object. Is there any way to link that KeyViewer object back to that text field in my main document class, so that instead of outputting to the NotePad it outputs to that text field? Thanks!
Profile picture for Gergely Nagy
Gergely Nagy commented
7 years ago
I've tried this by including sources in the project. It compiles fine, but letters/numbers/symbols don't show up on the buttons. XML config files loading don't trigger errors. Also is it possible to write directly in a textfield? Thanks Greg
Profile picture for Matthew Valverde
Open Exhibits Staff
7 years ago


I fixed the linkages between the libraries and the text now appears fine.

Please download it again.

And yes, you can also use a TextField.



The keyViewer module constructs a simple extend-able onscreen keyboard which can be omni-directionally repositioned and re-sized onstage using multitouch gestures. Detailed aspects of the keyboard appearance such as key size, color and separation as well as dynamic interactions can be customized using the module XML. The keyViewer has three associated XML files; application.xml, which is used to set global application settings like frame rate in all Open Exhibits-contributed modules and templates; keyViewer.xml, which sets application styling and properties, and layout.xml, which defines the layout and size of the keyboard keys.


  • Skinable
  • Scaleble
  • Characters are modifiable
  • Type to a notepad



Example Code

Using this

package id.module
    import id.core.TouchComponent;
    import id.component.KeyDisplay;
    import id.element.KeyParser;

    public class KeyViewer extends TouchComponent
        private var keyDisplay:KeyDisplay;

        public function KeyViewer()

        private function onParseComplete(event:Event):void
            keyDisplay=new KeyDisplay();

Properties and Customization

Included XML tags and functions:

Name Description Notes
<Background> Contains the settings for keyboard background color, opacity and spacing.
<GlobalSettings> Contains the path to the keyboard layout.xml and scale settings
<Key> Contains the styling and padding for the keys.
<KeyText> Contains font settings for the key text.
<KeyViewer> Contains the module properties.
<NotePadDraw> Sets whether or not the Notepad is visible.
<Notepad> Contains styling and visibility settings for the notepad feature. The notepad allows users to see what they're typing as they press keys.
<cornerRadius> Sets the corner radius of the keys. Set to "0" if angular corners are desired.
<dock> Docks the notepad on top of the keyboard. If set to "false", it will populate in the top left corner of the application.
<dropShadow> Sets whether or not a drop shadow is applied to the keys.
<fillAlpha> Sets the opacity for an element. 1 is 100% opaque; .5 is 50% opaque, and so on.
<fillColor1> Sets the color for an element. If only <fillColor1> is set, the background color for the element will be solid. If both <fillColor1> and <fillColor2> are set, the element will have a horizontal gradient background.
<fillColor2> Sets the secondary color for an element that has a background gradient fill. See notes under <fillColor1>.
<fontColor> Sets the font color for an element.
<fontSize> Sets the font size for an element in pixels.
<keyAlpha> Sets the opacity of the keys, including text and outline. See notes on fillAlpha.
<keyAlphaOnSelect> Sets the opacity of the keys when selected. See notes on fillAlpha.
<layoutPath> Sets the path to the layout XML.
<maxScale> Sets the maximum size the keyboard can scale to, relative to its actual size.
<minScale> Sets the minimum size the keyboard can scale to, relative to its actual size.
<objectScale> Sets the size of the keyboard when it appears on stage, relative to its actual size.
<outlineColor> Sets the outline color for an element.
<outlineStroke> Sets the width of the outline for an element in pixels.
<padding> Sets the padding of the background around the key-filled area.
<spacing> Sets the padding around the keys in pixels.
<width> Sets the width of the notepad. Can be set to width of KeyViewer by writing "KeyViewer" or can handle number (pixel) values- "100"

Included AS3 Classes and customization:

Name Superclass Notes
KeyViewer TouchComponent
Name Type Description Notes
COMPLETE String String utilized for a dispatch event when module has loaded. Public Static
displayObject Array The object holder for the KeyViewer Class. Public
id int The identification number of an object within a module. Public
keyDisplay KeyDisplay The main display class for the KeyViewer. Private
moduleName String The module name is the same as its class name. Public
Name Description Notes
KeyViewer() The Constructor. Private
callNewObject(int):void Calls an new object to the stage and passes an int as its argument. Public
onParseComplete(event:Event) The function called after the module xml has been parsed. Private
updateUI():void Calls to the callNewObject() function. Protected
Name Description Notes
Event.COMPLETE On xml parse complete. Private

This material is based upon work supported by the National Science Foundation under Grant Number Division of Research on Learning in formal and informal settings #1010028. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the authors and do not necessarily reflect the views of the National Science Foundation.

Open Exhibits was developed by Ideum, makers of GestureWorks. Open Exhibits SDK is free for non-commercial use.

YouTube Twitter Flickr