Accessibility

Table of Contents

  1. Introduction
  2. Kiosk concepts
  3. User-driven and timedscreens—keeping track of the application's state
  4. Creating the initial Welcome screen
  5. Creating the user input screen
  6. Tying the new views into main.mxml
  7. Making the screen saver
  8. The countdown
  9. Time for timers
  10. Final pieces of the puzzle

Building a kiosk using Flex

Kiosk concepts

Before diving into the nitty-gritty details of building a kiosk, there are some concepts to learn that will help change your mindset from traditional application development to working with kiosks. The following list is by no means comprehensive, but should help you wrap your head around how a kiosk is put together.

The machine itself

Chances are, one of the reasons you became a Flex developer was because it saved you time moving the application from one platform to another. Almost gone are the days of using JavaScript to detect what version of Opera, Firefox, or Internet Explorer the user is on, and if that version supports CSS 2.x or 1.x, and so forth. Flex gives you the ability to standardize the user environment, so you no longer worry about those exceptions and instead can focus on the rich interface.

This is my favorite part of kiosk development – your company usually owns the hardware, the machine itself. You get to control the processor, RAM, video card, touchscreen, printer, swiper, or anything else you can imagine. This is by far the greatest advantage of kiosk development. Of course the tighter you integrate with a Windows machine, the harder it will be to switch to a Linux or Mac machine, so I encourage you to use as many cross-platform technologies as possible, for example Java, basic JavaScript, and printer/swiper/other hardware that will work across the platforms with little change, instead of browser and platform specific ActiveX.

Interacting with hardware

So here's the big question: How does Flex interact with hardware? Do you need to interact with hardware at all? Some kiosk applications require a printer, a card swiper, and maybe another piece of hardware (for example a scanner on an ATM, a barcode reader on a DVD Kiosk, and so on). Interacting with the hardware isn't as complicated as it might seem though; after all you usually own it. There are a few methods for interacting with hardware, but as of right now, the only way is to tunnel your communication from Flex to another application on the kiosk's hard drive to do the dirty work for you.

You can, for example, create and ActiveX or Java application that has native support for hardware interaction. The application might have to be signed (and trusted) in order to run with heightened permissioning to talk to the hardware; but as long as you have a valid Certificate Authority (CA) and signing certificate, it should be no problem. To bridge the ActiveX or Java application to Flex, I use ExternalInterface and create a hardware class in my Flex app that will take care of everything for me.

Touchscreens

Touchscreen development shouldn't be difficult, but if you have never worked with a touchscreen it can be a bit overwhelming. Touchscreens are just another Human Interface Device (HID) that your computer can use to determine what your users are trying to do—it's basically an expensive mouse. At the time of this writing, you can pick one up for development purposes, or even production, off of eBay for between $100 and $4000.

When you set up your touchscreen device, the software drivers that come with it will include various options to configure it for your application. These may include the ability to disable right-click from a touchscreen (yes, right-click is possible), decide when a user's click action is actually performed (for example on lift or on press), and even at which processor priority level the touchscreen application should run. In my experience, I would recommend disabling right-click, configuring the click to occur on press (mouseDown), and setting the processor priority level to High to simplify the development with kiosks and touchscreens..

Parallax

Parallax refers to an apparent shift in position of an object when the viewer's position changes. You have likely experienced this on older ATMs; there are physical buttons on either side of the screen, but the labels just don't seem to line up with the buttons. If you bend over or stand on tiptoes then you can line up the labels with the buttons–that's parallax in action.

If you don't want your users to have to bend over to make sure they're selecting what they really want, a full understanding of this phenomenon is important when you build your kiosk. Make sure designers are aware of this as well; placing vertical buttons too close together can cause users to accidentally select the wrong button.

Page 2 of 10
Previous Page
Next Page