knowledge.lapasa.net

Greater Toronto Area Flash Platform Developer Blog

Notes: Working With Data Views

TAGS: None

Some notes I took while RTFM’ing. One begins to take for granted how sorting and filtering works after working with ArrayCollections for so long. Such write ups help me as a reference down the line. May be of help to you too.

Working With Data Views
===================

ArrayCollection/XMLListCollection have a ‘view’ property provided by the ICollectionView interface.

Data views feature:

- Modify the data view to show the data as sorted; without affecting the underlying data.

- Modify the data view to show a subset of items in the data; without affecting the underlying data.

- Traverse a collection using a ‘cursor’ pointer

- Save ‘bookmark’ the cursor positions

- Insert and delete items in the collection; which directly impacts the data.

- Access parts of data set that might become available at different times.

* Best practices is to work with the collection rather than a control’s dataprovider property that maps to that collection

Sorting and filtering data for viewing
===========================

[Sorting]

- “Data view operations have no effect on the underlying data object content, only on the subset of data that the collection view represents”

- Sort objects: Specify fields to be sorted (Using SortField); require results to be unique, or store custom sort functions to be used for ordering sorted output.

- Sort objects can be used to find items in a collection

* .refresh() is always required to see the results of the application of the sort.

[Filtering]

- Use filter function to filter a subset of the source data

- The function signature must take a single Object which will be a collection item. The functions return is Boolean, true if if the item in question is to be included in the view.

* .refresh() is always required to see the results of the application of the filtering.

Using a view cursor
===============

- A cursor indicates the current position of a particular target object in a data collection.

- To access a cursor, the collection has an createCursor() method that returns a view cursor of type IViewCursor.

seek(bookmark:CursorBookmark, offset:int = 0, prefetch:int = 0):void

Moves the cursor to a location at an offset from the specified bookmark.

“When you use standard Flex collection classes, ArrayCollection and XMLListCollection, you use the IViewCursor interface directly; as the following code snippet shows, you do not reference an object instance:

public var myAC:ICollectionView = new ArrayCollection(myArray);
public var myCursor:IViewCursor;
myCursor=myAC.createCursor();

Manipulating the view cursor
=====================

- Traversal forward: Always do a IViewCursor.afterLast:Boolean check to see if there exists an item in the collection to perform IViewCursor.moveNext().

/*******************************************************/
moveNext():Boolean
Moves the cursor to the next item within the collection.
/*******************************************************/

- Traversal backwards: Always do a IViewCursor.beforeFirst:Boolean check to see if there exists an item in the collection to perform IViewCursor.movePrevious().

/*******************************************************/
movePrevious():Boolean
Moves the cursor to the previous item within the collection.
/*******************************************************/

* The collection must have a Sort Object defined and .refresh declared before using the following search methods

/*******************************************************/
findAny(values:Object):Boolean
Finds an item with the specified properties within the collection and positions the cursor to that item.
/*******************************************************/

/*******************************************************/
findFirst(values:Object):Boolean
Finds the first item with the specified properties within the collection and positions the cursor to that item.
/*******************************************************/

/*******************************************************/
findLast(values:Object):Boolean
Finds the last item with the specified properties within the collection and positions the cursor on that item.
/*******************************************************/

- findAny() executes faster than findFirst() or findFast()

- “If the associated data is from a remote source, and not all of the items are cached locally, the find methods begin an asynchronous fetch from the remote source; if a fetch is already in progress, they wait for it to complete before making another fetch request.”

Getting, adding, and removing data items
===============================

/*******************************************************/
IViewCursor.current : Object
[read-only] Provides access the object at the location in the source collection referenced by this cursor.
/*******************************************************/

/*******************************************************/
IViewCursor.insert(item:Object):void
Inserts the specified item –BEFORE– the cursor’s current position.
/*******************************************************/

Note: If the collection has a sort applied, the object is inserted in a way that maintains the sort. Otherwise, the object is inserted where the cursor is in the collection.

/*******************************************************/
IViewCursor.remove():Object
Removes the current item and returns it.
/*******************************************************/

Removes the item the cursor is referencing then refers to the location after the removed item provided it is not the last item.

Using bookmarks
=============

1) Move the cursor to a location in the collection using findAny(), findFirst(), findLast(), moveNext(), movePrevious(), remove(), or seek()

2) Bookmark the current position

var myBookmark:CursorBookmark = myViewCursor.bookmark;

3) Do step 1) to move cursor around

4) To get back to the bookmark position, tell the cursor to seek the bookmark.

myViewCursor.seek(myBookmark);

Chronological Overview of The Task-Centered UI Design Process

TAGS: None

  • Identify your audience and understand the world they live in such that the interface can tie into their tasks
  • Identify concrete representative tasks that users perform in which the system must accomplish. This will make for a good initial skeleton outline
  • Conduct research on existing user interfaces and look for ways on how to improve upon them without having to blatantly plagerize. No sense in reinventing the wheel
  • Try to scribble the conceptual interface on to paper rather than hitting the computer. Heading straight to the computer forces the UI designer to commit to too many decisions early in the process; With each task conceptualized, prioritize it under a key representative task as discovered in the second step. If it fails to be significant, discard the idea. If it is very significant, consider making it a new representative task
  • Re-analyze your design by attempting to quantify some of the properties that make up the system. An example would be to count keystrokes and mental operations (decisions) for the tasks the design is intended to support. See GOMS analysis and cognitive walkthrough
  • Prototype your design! Attempt to emulate results users would expect visually
  • Test your design with a sample of your target audience. Experience has shown that the real problems occur at this phase. As the design is being tested, gather real-time feedback like video taping them to collect immediate responses to performing system tasks
  • Develop the UI system by means of an iterative process. Ensure that required objectives are met for that iteration
  • Develop the code for the UI design with the intention that certain pieces of it will change in the future. Build it using object-oriented principals so that the system can evolve with change, not fight it
  • Those who are responsible for the UI design or make contributions to it should not be kept quarantined from the rest of the system development effort. UI designers should be rotated from implementing the design to actually dealing with the target users. The idea is that surprise innovations may occur if general awareness is increased
  • The UI design cannot be designed once and be like that forever. Users will evolve and their tasks will change. Thus, be mindful that the UI may have to go through an update to address changes how users perform tasks. Designers need to stay on top of these changes

Reference
Lewis, Clayton and Rieman, John. Task-Centered User Interface Design: A Practical Introduction. Colorado, Shareware 1994

Java GUI Event Handling

TAGS: None

Java and event handling: How events are passed to user interface components, how to create event handlers, and more
By Todd Sundsted

Summary
Here’s the rundown on event handling as implemented by the abstract windowing toolkit (AWT). This article describes the Event class and explains how the Java run-time system passes events to the components that make up a user interface. It also explains how to create event handlers either by redefining the handleEvent() method in a newly derived class, or by redefining one of its helper methods.

HTML Article: http://www.javaworld.com/javaworld/jw-08-1996/jw-08-event.html

Commentary

  • Event driven messaging instead of big loop polling
  • Event dispatching classes generate Event objects that descibe details about an event
  • Event handling can be done from within the object who dispatched the event or the event object can be propagted to a higher object in the hierarchy.
  • It looks like AS3/Flex has made this a core language feature with ‘event bubbling’. In Java, this is featured only in the AWT.

GUI Dynamics - Lecture 24 - CS211 Spring 2006
by Cornell University Computer Science Department

PDF of PowerPoint
http://www.cs.cornell.edu/courses/cs211/2006sp/Lectures/…

Homepage
http://www.cs.cornell.edu/courses/cs211/

Summary
Event listeners can be implemented in 1 of 3 ways:

Listener is defined as a method of a class (personal prefered method)

  • a class has one behavior of setting up a listener to an event
  • that same class has another behavior of handling events

Listener is defined as an Inner Class (Java Only)

  • Inside the class that will perform an addEventListener(), that object has an inner class definition.
  • When the addEventListener is performed, an instance of the inner class is created where it is passed into addEventListener()
  • ActionScript to my knowledge does not have inner classes. Alternative: Can use mx.utils.delegate

Listener is defined as an Anonymous Class/Object directly as a parameter of addEventListener()

  • function object is defined inside the arguments for addEventListener().
  • great for small simple tasks but bad cause it’s hardcoding implementation.

Task-Centered User Interface Design

TAGS: None

Task-Centered User Interface Design: A Practical Introduction
by Clayton Lewis and John Rieman
Copyright ©1993, 1994

PDF Version
http://hcibib.org/tcuid/tcuid.pdf

HTML Version
http://hcibib.org/tcuid/

Motive for research
Couldn’t sleep. Wondered around the internet and found myself at U of T’s 20059 / CSC428H1F Human Computer Interaction course webpage. Great links there.

© 2009 knowledge.lapasa.net. All Rights Reserved.

This blog is powered by Wordpress and Magatheme by Bryan Helmig.