Re: Fruit basket app in Adobe Flex/Flash

  • From: Jamal Mazrui <empower@xxxxxxxxx>
  • To: programmingblind@xxxxxxxxxxxxx
  • Date: Fri, 22 Apr 2011 12:59:59 -0400 (EDT)

Thanks for the update, Don. I have also not been successful in running the fruit basket app with Firefox 3.6, and wondered whether the Flash plug-in for Firefox was installed. If mine had been removed, what is the easiest way to re-install it? Is it a Firefox extension? 


This morning I posted an updated version of the app at the same address,
http://EmpowermentZone.com/flex_fruit.zip

or
http://EmpowermentZone.com/FruitBasket.htm
The flex_fruit.txt documentation explains more about best practices for Flash accessibility. I added keyboard shortcuts to go to the first or last control (Control+PageUp or Control+PageDown), or to delete a fruit (Shift+Delete). I found that adding such hotkeys is tricky because either the screen reader or browser may use keystrokes that we might normally assign in a desktop app, e.g., Alt+A for the Add button or Alt+D for the Delete button. Other combinations did not seem to be taken, yet I was unable to get them to work, e.g., Alt+Shift+D for the Delete button (I also tried Control+Shift+D).
Evidently, this is an area that is making progress in accessibility but still rough around the edges. I relayed some feedback to Adobe and was told that VoiceOver support for Flex apps is currently being worked on. There was no mention of Orca support. 

Jamal
On Fri, 22 Apr 2011, Don Marang wrote: 


Date: Fri, 22 Apr 2011 12:02:56 -0400
From: Don Marang <donald.marang@xxxxxxxxx>
Reply-To: programmingblind@xxxxxxxxxxxxx
To: programmingblind@xxxxxxxxxxxxx
Subject: Re: Fruit basket app in Adobe Flex/Flash
I have an update of Flash support in Thunderbird. I forgot that Firefox automatically removed Flash a while ago when it was discovered that it was a serious security risk. For some reason, they just removed it rather than updating Flash. I think the fix was not yet available when they had to take action.
Therefore, when I attempted to use the Fruit Basket demo, Flash was not installed. Perhaps the demo code should make sure Flash 10 or greater is installed.
With the latest version of Flash (10.2 as I recall), the Flash object is now recognized. However, only one button, labeled "FruitBasket" is available toJAWS and seems to do nothing.
Orca still sees no Flash object on the demo page in Vinux. I will check if the latest source code from git master changes anything. 

I have not yet updated to Firefox 4.0 on either platform.


*Don Marang*
Vinux Software Development Coordinator - vinuxproject.org <http://www.vinuxproject.org/> There is just so much stuff in the world that, to me, is devoid of any real substance, value, and content that I just try to make sure that I am working on things that matter. 
-- Dean Kamen
Hi Don,
I am curious what screen reader and browser versions you have tried with the demo. What happens with Orca and Firefox? Also, Can anyone report on results with VoiceOver and Safari?
I found the best results with the latest JAWS and NVDA. JAWS 12 includes the Flex controls within the web page in virtual mode, whereas JAWS 10 (have not tried 11 yet), requires turning off the virtual cursor in order to notice anything between the "Flash Start" and "Flash End" statements on the page. NVDA indicates there is an "embedded object" -- pressing Enter opens it.
I think the input box for entering a fruit name probably did not disappear, but at least with a JAWS version less than 12, the "Fruit" label is not spoken consistently. I do not know why. I also noticed a problem of having to tab several times with JAWS 10 before arriving at the input box, even though the code tries to set focus to it initially.
I want to compare the accessibility of this fruit basket with the couple of Silverlight ones that others from this list have recently contributed to FruitBasketDemos.org. Let's keep the discussion going. I am going to give feedback directly to Adobe's accessibility group as well.
According to the Adobe web site, Flex apps can be built to run on iOS and Android as well, so this is potentially a cross-platform way of developing apps with essentially the same code. 

Jamal

 On Wed, 20 Apr 2011, Don Marang wrote:


Date: Wed, 20 Apr 2011 10:08:06 -0400
From: Don Marang <donald.marang@xxxxxxxxx>
Reply-To: programmingblind@xxxxxxxxxxxxx
To: programmingblind@xxxxxxxxxxxxx
Subject: Re: Fruit basket app in Adobe Flex/Flash

Great work!  This could be very useful.
What are the remaining issues with the demo? I only noticed two issues. after entering the first fruit, it was added to the list, then the edit box disappeared. Second at the "bottom" of the Flash object there is an unlabeled graphic. It only says "graphic 9" before adding any fruit and "graphic 10" after. 


*Don Marang*
Vinux Software Development Coordinator - vinuxproject.org <http://www.vinuxproject.org/> There is just so much stuff in the world that, to me, is devoid of any real substance, value, and content that I just try to make sure that I am working on things that matter. 
-- Dean Kamen

On 4/20/2011 8:40 AM, Jamal Mazrui wrote:

From the archive
http://EmpowermentZone.com/flex_fruit.zip
This fruit basket program is developed with the Adobe Flex 4 framework. It uses Flash Player as a virtual machine to run code compiled from one of two languages: ActionScript -- similar to JavaScript -- or MXML -- a declarative markup language. The compiled code, FruitBasket.swf, is hosted in a web page, FruitBasket.htm, which serves as a wrapper for the app. Flash Player 10 is required on the client computer. Supported web browsers are Internet Explorer and Firefox. 

The free Flex 4 SDK is available in a zip archive from
http://OpenSource.adobe.com
It includes a command-line compiler, mxmlc.exe. There are two versions of the source code: FruitBasket.mxml and FruitBasket.as, using the MXML approach and the ActionScript approach, respectively. The batch files BuildMXML.bat and BuildAS.bat compile these files, creating FruitBasket.swf (the extension stands for ShockWave Flash) in either case.
Please note, however, that although FruitBasket.as compiles, the code evidently still needs some tweaking because the app does not work properly. The code is left in this distribution in case others may learn from it and take it furhter.
This app tries to follow best practices in developing accessible Flex apps, as explained at 
http://adobe.com/accessibility
A collection of text tutorials about Flex development -- saved from public web pages -- is available at 
http://EmpowermentZone.com/flex_doc.zip
Screen readers vary significantly in their client-side support for Flex accessibility, which is based on MSAA. It may be necessary to manually turn off a virtual or browse mode in order to interact with the app. To try it, open the embedding HTML file, either locally after unzipping the archive, or via the following web address: 
http://EmpowermentZone.com/FruitBasket.htm

The archive will soon be available on
http://FruitBasketDemos.org
For convenient reference, the FruitBasket.mxml code is also pasted below. 

Jamal Mazrui

<?xml version="1.0" encoding="utf-8"?>
<!-- Public domain fruit basket program in MXML
By Jamal Mazrui on April 20, 2011 -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth = "955" minHeight = "600" creationComplete = "initApp()">

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations>

<!-- Place UI components here -->
<s:HGroup id = "hgrpAdd" accessibilityEnabled = "true">
<s:Label id = "lblFruit" accessibilityEnabled = "false" text = "Fruit:" tabEnabled = "false"/> <s:TextInput id = "txtFruit" accessibilityEnabled = "true" accessibilityName = "Fruit:" tabIndex = "1"/> <s:Button id = "btnAdd" accessibilityEnabled = "true" label = "Add" tabIndex = "2" click = "addFruit();"/> 
</s:HGroup>

<s:HGroup id = "hgrpDelete" accessibilityEnabled = "true">
<s:Label id = "lblBasket" accessibilityEnabled = "false" text = "Basket:" tabEnabled = "false"/> <s:List id = "lstBasket" accessibilityEnabled = "true" accessibilityName = "Basket:" tabIndex = "3"> 
<s:dataProvider>
<mx:ArrayList>
</mx:ArrayList>
</s:dataProvider>
</s:List>
<s:Button id = "btnDelete" accessibilityEnabled = "true" label = "Delete" tabIndex = "4" click = "deleteFruit();"/> 
</s:HGroup>

<!-- Place ActionScript event handlers here -->
<fx:Script>
<![CDATA[
import mx.controls.Alert;

private function initApp(): void {
if (Capabilities.hasAccessibility && !this.accessibilityProperties) {
this.accessibilityProperties = new AccessibilityProperties();
this.accessibilityProperties.silent = false;
this.accessibilityProperties.forceSimple = false;
Accessibility.updateProperties();
}

this.defaultButton = btnAdd;
txtFruit.setFocus();
} // initApp method

private function addFruit():void {
var sFruit: String = txtFruit.text;
var iLength: int = sFruit.length;
if (iLength == 0) Alert.show("No fruit to add!", "Alert");
else {
lstBasket.dataProvider.addItem(sFruit);
var iIndex: int = lstBasket.dataProvider.length - 1;
lstBasket.selectedIndex = iIndex;
txtFruit.text = "";
}
} // addFruit method

private function deleteFruit(): void {
var iIndex: int = lstBasket.selectedIndex;
if (iIndex == -1) Alert.show("No fruit to delete!", "Alert");
else {
lstBasket.dataProvider.removeItemAt(iIndex);
var iLength:int = lstBasket.dataProvider.length;
if (iIndex == iLength) iIndex --;
if (iIndex >=0) lstBasket.selectedIndex = iIndex;
}
} // deleteFruit method
]]>
</fx:Script>
</s:Application>
__________
View the list's information and change your settings at //www.freelists.org/list/programmingblind 




__________
View the list's information and change your settings at //www.freelists.org/list/programmingblind 




__________
View the list's information and change your settings at //www.freelists.org/list/programmingblind

Other related posts:

  1. Home
  2. programmingblind
  3. Archive
  4. 04-2011