Gen2 Components
From OpenLaszlo
Goals
Data-only
each component has its own self-contained data - not necessarily XML
name/value
attributes
text area, checkbox, radio button, etc..
name/value
list
array of data, managed by replicator
combobox
list of name/value pairs, selection
data grid
list of rows
list of lists
(maybe) dataset
hierarchy (tree, menubar/menus)
local dataset
Fresh Look
Common architecture for both, or two directions?
Clean, light, fast
css sprites/tiling/bitmap only?
Rich, heavier
drawviews?
Platform improvements
Runtime CSS
True CSS
Mixins
Composable
goes together
placement is key
Validation
presentation, e.g. animate/make room
data/type, e.g. number, date, text, empty, length
Skinnable (css)
vector descriptions invoked via CSS
written as methods
called in discreet order
background
foreground
border
highlight
can override procedural steps
Parameters
attributes
corner offsets for 3 piece, 9 piece
At least 2 skins
Fast/light
Richer
Ideally, can change CSS at runtime
Separate click region layer
Designer workflow
Illustrator -> SVG -> drawview?
Create high-level layers (background, outline)
Each layer is a list of drawing procedures
moveto, drawto, curveto, bezierto
relative/absolute
Define control points (3up, 9up)
Styling
Accessible (screen readers)
name
value
description
keyboard shortcut
tab order
state change notification
Auto-labeling
Modular
comes apart
Data-only
Built around mixins, replicator
Mixin/behavior-oriented
instead of superclasses where possible, e.g. with drawable, focusable, etc.
Rich base class
high-level events bound to visual cues
select
focus
accessibility
keyboard
Parametric
Attach behaviors to events
E.g. bounce
Size
color
highlight
little bits of code for styling
Hierarchical selection
Focus
Ordered tabbing
Directional navigation
Mousewheel
'soft' focus
Multitouch
Gestures
flash-only features exposed to DHTML
play audio/video
Set clipboard
Flash Super-cookie
Fuller component set
Flex 3 - from http://examples.adobe.com/flex3/componentexplorer/explorer.html Visual General Alert ColorPicker Combobox DataGrid HorizontalList HRule HScrollbar HSlider List NumericStepper ProgressBar Spacer TabBar TileList Tree VRule VScrollbar VSlider Button Button ButtonBar CheckBox LinkBar LinkButton PopupButton RadioButton RadioButtonGroup ToggleButtonBar Date DateChooser DateField Loader Image SWFLoader VideoDisplay Menu Menu MenuBar PopUpMenuButton Text Label RichTextEditor Text TextArea TextInput Containers Application Accordion ApplicationControlBar Box Canvas ControlBar DividedBox Form, FormHeading, FormItem Grid, GridItem, GridRow HBox HDividedBox Panel TabNavigator Tile TitleWindow VBox VDividedBox ViewStack Repeater Repeater Print Controls FlexPrintJob, PrintDataGrid Validators CreditCardValidator CurrencyValidator DateValidator EmailValidator NumberValidator PhoneNumberValidator RegExpValidator SocialSecurityValidator StringValidator Validator ZipCodeValidator Formatters CurrencyFormatter DateFormatter Formatter NumberFormatter PhoneFormatter SwitchSymbolFormatter ZipCodeFormatter Effects *AddItemActionEffect AnimateProperty Blur Dissolve Effect Fade Glow Iris Move Parallel Pause *RemoveItemActionEffect Resize Rotate Sequence SoundEffect WipeDown WipeLeft WipeRight WipeUp Zoom View States State Transitions Transition Chart controls AreaChart AxisRenderer BarChart BubbleChart CandlestickChart CategoryAxis ColumnChart DateTimeAxis GridLines HLOCChart Legend LinearAxis LineChart LogAxis PieChart PlotChart Chart Series AreaSeries BarSeries BubbleSeries CandlestickSeries ColumnSeries HLOCSeries LineSeries PieSeries PlotSeries Chart Effects SeriesInterpolate SeriesSlide SeriesZoom 'Adanced' Data Grid Tree with columns OLAPDataGrid CRUD grid List TBD Standard Button ... Extended Charting Timeline Map Calendar
Forms
As easy/easier than HTML
See http://maxcarlson.com/js/NS4_Obj.pdf for an API reference
Multistage processes
series of steps
IDE
Visual editing
Attributes exposed by importance/class
Avoid overwhelming devs with 1000 attributes with no way to know which are the most important
CSS
Color
lists
bitmaps
procedures?
Aspects - see http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html Application Background image background color background gradient colors background gradient alphas theme color text color Button Corner radius text indent text spacing padding highlight for off, over, down, up alphas, colors fill for off, over, down, up alphas, colors colors alternating highlight gridlines borders headers overall text rollover selected border theme font family size formatting
Combobox
background list view
APIs
Styling
Based on CSS
Javascript
Based on HTML forms
Name/value
List of name/value pairs with selection
Animators
Multiple tweens, dimensions
Easing function, a.k.a. motion
e.g. bounce, dampen
<mx:Sequence id="movePauseMove">
<mx:Move xBy="150" duration="2000" easingFunction="Bounce.easeOut"/>
<mx:Pause duration="2000"/>
<mx:Move xBy="-150" duration="2000" easingFunction="Bounce.easeIn"/>
</mx:Sequence>
Global manager
pause/play
maximum number of simultaneous animations
scaling factor
overall time
Parameters
Rate
Same feeling independent of distance
Duration
Same amount of time
Callbacks
on percent/time
Point generator
Used for animation and layouts
Use case
Physics layout
Mixins
drawable clickable trackable focusable accessible selectable
Containers/groups
what are the common features?
list
container of list items
layout, selection (toggle/multi), highlight
tab
row of tabs
layout, selection, highlight
h/vbox
layout
tree
container item
leaf item
radio
checkbox
buttongroup
Community
biggest gripes
