FlexOut » components

UI patterns

Vikram singh — Fri, 04 Jun 2010 11:26:35 +0000

User needs: these are the UI patterns that the user uses as a tool to understand and interact with the data that has to be conveyed to the user. In short we can say these are the gadget which helps the user to understand raw data by converting them into something meaningful. I have categorized the UI patterns in the order of “user needs and actions”.

Navigating around
· Accordion
· Headerless Menu
· Breadcrumbs
· Directory Navigation
· Doormat Navigation
· Double Tab Navigation
· Faceted Navigation
· Fly-out Menu
· Home Link
· Icon Menu
· Main Navigation
· Map Navigator
· Meta Navigation

Download detailed document: here

· Minesweeping
· Panning Navigator
· Overlay Menu
· Repeated Menu
· Retractable Menu
· Scrolling Menu
· Shortcut Box
· Split Navigation
· Teaser Menu
· To-the-top Link
· Trail Menu
· Navigation Tree

Basic interactions
· Action Button
· Guided Tour
· Paging
· Pulldown Button
· Slideshow
· Stepping
· Wizard

Searching
· Advanced Search
· Autocomplete
· Frequently Asked Questions (FAQ)
· Help Wizard
· Search Box
· Search Area
· Search Results
· Search Tips
· Site Index
· Site Map
· Footer Sitemap
· Tag Cloud
· Topic Pages

Dealing with data
· Carrousel
· Table Filter
· Collapsible Panels
· Details On Demand
· Collector
· Inplace replacement
· List Builder
· List Entry View
· Overview by Detail
· Parts Selector
· Tabs
· Table Sorter
· Thumbnail
· View

Personalizing
· Customizable Window
· Login
· Registration

Shopping
· Booking
· Product Comparison
· Product Advisor
· Product Configurator
· Purchase Process
· Shopping Cart
· Store Locator
· Testimonials
· Virtual Product Display

Making choices
· Country Selector
· Date Selector
· Language Selector
· Poll
· Rating

Giving input
· Comment Box
· Constraint Input
· Form

Miscellaneous
· Footer Bar
· Hotlist
· News Box
· News Ticker
· Send-a-Friend Link

Application needs: Patterns that help the application, or you the designer, communicate better with the user

Drawing attention
· Captcha
· Center Stage
· Color Coded Section
· Premium Content Lock
· Grid-based Layout
· Liquid Layout
· Outgoing Links
· Alternating Row Colors

Feedback
· Input Error Message
· Processing Page

Simplifying interaction
· Enlarged Click area
· Font Enlarger

Download detailed document: here

source : http://www.welie.com

No related posts.

Flex component lifecycle and event flow explained

Vikram singh — Wed, 10 Mar 2010 07:38:32 +0000

Learned something new from Ted today
Read original post by Ted here

Flex is an event driven programming model and everything happens due to an event. Looking at the MXML code can confuse most of the developers unless they haven’t looked at the internal class of flex components. If we were to compare Flex, HTML and FLASH in terms of component instantiation.

HTML instantiates top to bottom
Flash executes across frames starting at Frame zero.
Flex on the other had is a bit different.

When I started learning Flex, I struggled with understanding event flow and instantiation in MXML. I was puzzled because I really didn’t understand how event chain started and what happened inside a component to make it finally render on screen. Initially I used to run into numerous runtime null point exception since i used to think i could access a property of an object thinking it would have been created.

Anyhow the key is understanding the event basics and seeing the initialization and event flow, Lets look at a sample application that i have written to explain this. The structure of the application cann be understood by the following diagram.

With this Demo app there is no visual clue that you will get as an output to understand the event flow and instantiation step. its the TRACE statements that are important to explain how the event flow and instantiation happens. Below is the code for the same.

Call the following functions in a dummy APP

preinitialize = “preinit(event)”
initialize = “init(event)”
creationComplete = “handlecc(event)”

1
2
3
4
5
6
7
8
9
10
11
12

//preinit trace function
private function preinit(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> preinitialize "+event.currentTarget)
}
//init trace function
private function init(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> initialize "+event.currentTarget)
}
//creation complete trace function
private function handlecc(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> creationComplete "+event.currentTarget)
}

Download the source here
I have also Monkey-patched the following classes

VBox
HBox
Button

In all the above classes I have added a trace statement at measure() updateDisplayList() and createChildren(). you can see get these files in the source attached.

The component lifecycle happens in the following order. Note: i am not explaining what these methods do, but in what order are they executed to give you the final result.

preInitialize()
createChildren()
initialize()
measure()
updateDisplayList()
creationComplete()

The order of instantiation can be understood by the trace log if you compiled and debugged the demoApp

250ms >> preinitialize test0
259ms >> preinitialize test0.hbox
262ms >> preinitialize test0.hbox.can
265ms >> preinitialize test0.hbox.can.cbt1
266ms >> create Children – test0.hbox.can.cbt1
273ms >> initialize test0.hbox.can.cbt1
275ms >> preinitialize test0.hbox.can.cbt2
276ms >> create Children – test0.hbox.can.cbt2
277ms >> initialize test0.hbox.can.cbt2
278ms >> initialize test0.hbox.can
279ms >> create Children – test0.hbox.can
281ms >> preinitialize test0.hbox.vbox
283ms >> preinitialize test0.hbox.vbox.btn1
284ms >> create Children – test0.hbox.vbox.btn1
285ms >> initialize test0.hbox.vbox.btn1
287ms >> preinitialize test0.hbox.vbox.btn2
288ms >> create Children – test0.hbox.vbox.btn2
289ms >> initialize test0.hbox.vbox.btn2
290ms >> initialize test0.hbox.vbox
291ms >> create Children – test0.hbox.vbox
292ms >> initialize test0.hbox
293ms >> create Children – test0.hbox
294ms >> initialize test0
310ms >> measure – test0.hbox.can.cbt1
312ms >> measure – test0.hbox.can.cbt2
313ms >> measure – test0.hbox.vbox.btn1
313ms >> measure – test0.hbox.vbox.btn2
315ms >> measure – test0.hbox.can
315ms >> measure – test0.hbox.vbox
317ms >> measure – test0.hbox
344ms >> updateDisplayList – test0.hbox
348ms >> updateDisplayList – test0.hbox.can
350ms >> updateDisplayList – test0.hbox.vbox
351ms >> updateDisplayList – test0.hbox.can.cbt1
356ms >> updateDisplayList – test0.hbox.can.cbt2
358ms >> updateDisplayList – test0.hbox.vbox.btn1
359ms >> updateDisplayList – test0.hbox.vbox.btn2
364ms >> creationComplete test0.hbox.can.cbt1
365ms >> creationComplete test0.hbox.can.cbt2
366ms >> creationComplete test0.hbox.vbox.btn1
367ms >> creationComplete test0.hbox.vbox.btn2
368ms >> creationComplete test0.hbox.can
370ms >> creationComplete test0.hbox.vbox
371ms >> creationComplete test0.hbox
373ms >> creationComplete test0

Just by looking at the trace log and the application structure image you can slowly start making out a pattern (preorder traversal). preInitialize() is called first for the App then the first child(in our case only child HBOX) then its first child which is the CANVAS and finally the first child of canvas that is C BUTTON 1 after this the createChildren() and initialize() of the innermost left child is called then moving on to its sibling the preInitialize(), createChildren() and initialize() is called. This is followed till all the children have completed the preInitialize(), createChildren() and initialize() steps.

After this the measure() of all the child’s are called in a bottom up approach with left child priority.

After this the updateDisplayList() of all the children’s are aclled in a top down approach with left child priority.

Finally the creationComplete() of all the children are called again in bottom up approach with left child priority. Thus explaining why creationComplete() of the parent component is called at the very end. the more you look at the log trace the more you will understand the flow. Hope this effort of my explaining the instantiation process helped you out.

Download the source here

FlexBox

Vikram singh — Thu, 09 Oct 2008 12:33:58 +0000

Flexbox is a directory with a whole bunch of fine Adobe Flex components available for developers, compiled and managed by Mrinal Wadhwa.

Go check it out :)

flex useful links

Vikram singh — Sat, 30 Aug 2008 06:05:17 +0000

http://flex.org/

http://www.flex.org/blogs/

http://weblogs.macromedia.com/flexteam/

http://www.adobe.com/products/flex/

http://www.adobe.com/devnet/flex/

http://www.onflex.org/

http://quietlyscheming.com/blog/

http://butterfliesandbugs.wordpress.com/

http://blogs.adobe.com/aharui/

Chinese FlexExamples (http://blog.minidx.com/)

Russian FlexExamples (http://flexcookbook.ru/)

Useful links

Vikram singh — Tue, 18 Sep 2007 14:43:55 +0000

Adobe Flex cookbook beta

http://www.tiny.cc/VbU44

Asdia
integrate flowcharts, uml or any other diagrams in flash tools.
http://code.google.com/p/asdia/

Cairngorm
http://labs.adobe.com/wiki/index.php/Cairngorm

flex2treemap
http://code.google.com/p/flex2treemap/

FlexBook
Flex flip book component. Supports transparantcy.
http://www.quietlyscheming.com/blog/components/flexbook/

DisplayShelf Component

http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/

flexbox
Flex Components
http://flexbox.mrinalwadhwa.com/
flexcalendar
Calendar Components
http://code.google.com/p/flexcalendar/

flexedtoolkit
http://code.google.com/p/flexedtoolkit/

flexservicelocator
ServiceLocator for flex to use web service
http://code.google.com/p/flexservicelocator/

flextube
UI front end for youtube

http://code.google.com/p/flextube/

Flex 2 Basic Email Form
email script.
http://augiemarcello.com/flex-2-basic-email-form/

Flex 2 Debug Component
http://www.mikenimer.com/index.cfm/2006/7/5/FlexDebugPanel

Flex 2 Primitive Explorer
http://www.3gcomm.fr/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html

Dashboards

http://www.dashboardcompany.com/demos/gallery.html
http://adb.crowecs.com/flex/activeDashboard/dashBoard.mxml?versionChecked=true
http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html
http://www.searchcoders.com/flex/ (air example dashboard)
http://www.flickr.com/photos/7321637@N06/ (screen shots)

Style Explorer
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

FluorineNET Flash Remoting Gateway.
http://fluorine.thesilentgroup.com

Visual Reflection Component for Flex 2
http://blog.benstucki.net/?id=20

Live “reflection” component
http://www.rictus.com/muchado/2006/07/05/live-reflection-component/

scale nine
themes for flex
http://www.scalenine.com/

SpringGraph
component that displays a set of items that are linked to each other.
http://mark-shepherd.com/blog/springgraph-flex-component/

The ServeBox Foundry
http://sourceforge.net/projects/sbasfoundry

Yahoo! Maps Web Services – Flex™ API
http://developer.yahoo.com/maps/flash/flexGettingStarted.html

ZoomFrame
http://www.zeuslabs.us/2007/08/14/open-source-flex-component-zoomframe/

flex useful links