how do i get it to do what i want? focusing on the spark datagrid drew shefman [email protected]...
TRANSCRIPT
![Page 1: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/1.jpg)
HOW DO I GET IT TO DO WHAT I WANT?
Focusing on the Spark DataGrid
Drew [email protected]
Blog: http://squaredi.blogspot.com/Twitter: dshefman
![Page 2: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/2.jpg)
Who are you?
Freelance Developer / Architect with 15 years of professional multimedia experience
Certified Flex Expert / InstructorProfessor of Multimedia @ University of
Houston
Just finished multi-month AdvancedDataGrid customization
Working on Excel like features for SparkDataGrid
![Page 3: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/3.jpg)
What are you talking about today?
The elements and structure of the Spark DataGrid
Extending the grid, focusing on focus control examples
Bugs and gotcha’s when you are focusing and item editing
Setting yourself up for success in meeting requirements
“Focus is a matter of deciding what things you’re not going to do.” — John Carmack
![Page 4: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/4.jpg)
Outline
The Structure of the SDGFocus RequirementsShow me the Code – Focusing on FocusEditing dataAccolades & WishlistExtending the SDG for your domainQ&A
![Page 5: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/5.jpg)
Spark DataGrid related objects
![Page 6: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/6.jpg)
Responsibilities of the elements
DataGrid: Delegate properties, maintain selected state
DataGridEditor: Focus control, itemEditorSession
Grid Skin layers, delegate layout
GridLayout Actual layout
![Page 7: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/7.jpg)
What sort of unique focus requirements?
0,1, or 2 editable inputs per cell0,1, or 2 editable properties per row based on
business rulesGrouping and expanded rows that don’t have any
focusable fieldsClicking anywhere in the row focuses on editable
cellFirst editable field gets focus when the grid appears Set focus to a particular item from outside the gridUnique keyboard navigation
![Page 8: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/8.jpg)
Is there a key ingredient to focus?
Q: What happens internally when we focus into an editable cell?
A: 1. startItemEditorSession(rowIndex,
columnIndex) flows from DataGrid to DataGridEditor
2. if rendererIsEditable==true Item Editor Session events don’t fire, and is not cancelable
3. DataGridEditor.itemEditorInstance and DataGridEditor.editorItemPostion gets set
![Page 9: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/9.jpg)
SHOW ME THE FOCUS (TAB)!
Demo
![Page 10: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/10.jpg)
![Page 11: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/11.jpg)
SHOW ME THE FOCUS (TOTAL CONTROL)
Demo
![Page 12: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/12.jpg)
![Page 13: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/13.jpg)
Show me the code!
![Page 14: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/14.jpg)
DataGrid – Original Code
public function startItemEditorSession(rowIndex:int, columnIndex:int):Boolean
{ if (editor) return editor.startItemEditorSession(rowIndex,
columnIndex); return false; } public function endItemEditorSession(cancel:Boolean = false):Boolean { if (editor) return editor.endItemEditorSession(cancel); return false; }
![Page 15: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/15.jpg)
Step 1: Occasionally editable fields
![Page 16: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/16.jpg)
DataGrid: startItemEditorSession() – adding occasionally editable data
// Add a check for editable data override public function startItemEditorSession(rowIndex:int, columnIndex:int):Boolean
{var dataIsEditable:Boolean = isDataEditable(rowIndex,columnIndex);
if (dataIsEditable){
var editingStarted:Boolean = super.startItemEditorSession(rowIndex,columnIndex);
return editingStarted
}return false;
}
![Page 17: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/17.jpg)
DataGrid: isDataEditable()
//Convert the rowIndex and columnIndex to data and property values, then evaluate elsewhere
protected function isDataEditable(rowIndex:int, columnIndex:int):Boolean
{if (isDataEditableHelper != null){
var dataItem:Object = dataProvider.getItemAt(rowIndex);var column:GridColumn = GridColumn(columns.getItemAt(columnIndex));var dataField:String = column.dataField;return
isDataEditableHelper.isDataEditableForProperty(dataItem,dataField)
}return true;
}
![Page 18: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/18.jpg)
IIsDataEditable
function isDataEditableForProperty(data:Object,property:String=""):Boolean
![Page 19: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/19.jpg)
Step 2: Business Requirements
Creating the hoop
there is no jumping yet
![Page 20: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/20.jpg)
IGridFocus Adding additional focus functionality
function setFocusNone():void
function setFocusFirst():void
function setFocusRow(rowIndex:int):void
function setFocusToDataItem(data:Object):void
function setFocusVertically(direction:int=1, startPosition:IEditedItemPositionVO=null):void
function setFocusHorizontally(direction:int=1, startPosition:IEditedItemPositionVO=null):void
![Page 21: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/21.jpg)
TIPS AND GOTCHA’S AFTER YOU’VE FOCUSED TO THE CORRECT CELL
Editing a cell
![Page 22: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/22.jpg)
Two ways to edit
ItemRender (IGridItemRenderer)
ItemEditor (IGridItemEditor)
There is a separate instance of the renderer and editor.
Editor is created and sits on top of renderer
ItemRender (IGridItemRenderer) renderIsEditable = true
There is a renderer and it is editable.
![Page 23: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/23.jpg)
Differences between editor scenarios
Renderer & EditorMany good events
fireBefore session ends,
save() gets called2 separate visual
elements involved
RendererIsEditableHardly any events fireYou are on your own
for saving data1 visual element
involved
![Page 24: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/24.jpg)
Editing events when rendererIsEditable == true
Events that fire
GRID_ITEM_EDITOR_SESSION_SAVE
Events that DO NOT fire
GRID_ITEM_EDITOR_SESSION_STARTING
GRID_ITEM_EDITOR_SESSION_START
GRID_ITEM_EDITOR_SESSION_CANCEL
![Page 25: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/25.jpg)
RendererIsEditable: So how do I save?
Via IGridItemRenderer, you get the following properties: data:Object grid:Grid column:GridColumn
update the data object or data provider on: Event.CHANGE FocusEvent.FOCUS_OUT etc
![Page 26: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/26.jpg)
ItemEditor: How do I save?
Editing one property of a simple datatype: IGridItemEditor.value = updatedValue;
Editing multiple values: Override save() and update the data object Note: save() returns a Boolean. It should be true. You
can’t stop editing otherwise.
![Page 27: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/27.jpg)
Wishlist & Accolades
![Page 28: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/28.jpg)
What is right about SDG editing and extending?
Fantastically easy – relative to ADGSingle point of entry and exit for all editingHave not needed mx_internal, or even
protected method access
![Page 29: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/29.jpg)
What needs improvement about SDG editing?
Informational events if rendererIsEditable==true
Call save() if IGridItemEditor && renderIsEditable
Fix conflicting method signatures on IGridItemEditor && IGridItemRenderer They both can’t be implemented in the same class
easilyRow selected state should follow focus
![Page 30: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/30.jpg)
Adding a custom event when renderIsEditable
override public function startItemEditorSession(rowIndex:int, columnIndex:int):Boolean{
var dataIsEditable:Boolean = isDataEditable(rowIndex,columnIndex);if (dataIsEditable){
var editingStarted:Boolean = super.startItemEditorSession(rowIndex,columnIndex);if (editingStarted){
dispatchItemEditorChangedEvent(columnIndex,rowIndex);}return editingStarted
}return false;
}
override public function endItemEditorSession(cancel:Boolean=false):Boolean{
var rtn:Boolean = super.endItemEditorSession(cancel);dispatchItemEditorChangedEvent(-1,-1);return rtn;
}
![Page 31: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/31.jpg)
Custom informational event
private function dispatchItemEditorChangedEvent(columnIndex:int, rowIndex:int):void
{var dataGridEvent:FocusGridItemEditorEvent = null;var column:GridColumn =nullif (columnIndex >=0 && columnIndex < columns.length){
column= columns.getItemAt(columnIndex) as GridColumn;}
dataGridEvent = new FocusGridItemEditorEvent(FocusGridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_CHANGED);
dataGridEvent.columnIndex = columnIndex;dataGridEvent.column = column;dataGridEvent.rowIndex = rowIndex;dispatchEvent(dataGridEvent);
}
![Page 32: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/32.jpg)
HOW TO SET UP THESE FILES
Structure and Extending
![Page 33: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/33.jpg)
How many extensions do you have?
MySDGBugFix Exclusively for fixing Flex bugs (Note: At the moment, I haven’t found any for SDG)
MySDGLibrary Override and augment methods Add additional events Add interfaces with default delegate implementation
DomainSDG Build up business rules Implement interface delegates
![Page 34: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/34.jpg)
Building Business rules
Business rules change, adding, modifying, and deleting requirements frequently
Consider creating a single class for each ruleRespond to an event(s) and perform an action<fx:Declarations>
<business:FocusOnKeyboardNavigationRule grid="{this}"/><business:SelectRowOnFocusRule
grid="{this}" /><business:SetFocusOnRowClickRule
grid="{this}" /></fx:Declarations>
![Page 35: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/35.jpg)
Business Rule Structure
public function set grid(v:DataGrid):void{_grid = v;addGridListeners();
}protected function addGridListeners():void{
_grid.addEventListener(FocusGridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_CHANGED, onGridItemEditorSessionChanged, false,0,true);
}protected function onGridItemEditorSessionChanged(event:FocusGridItemEditorEvent):void{_grid.selectedIndex = event.rowIndex;
}
![Page 36: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/36.jpg)
Your Take-Aways
There is only one public method that needs to be modified for focus control – startItemEditorSession()
Be aware of rendererIsEditable ramifications
Spark DataGrid is well structured, making it easier to figure out what is going on
![Page 37: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/37.jpg)
DREW SHEFMANDSHEFMAN@SQUAREDI .COM
BLOG: HTTP: / /SQUAREDI .BLOGSPOT.COM/TWITTER: DSHEFMAN
Q & A
![Page 38: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/38.jpg)
![Page 39: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/39.jpg)
IGridFocus Implementations
MySDGSparkFocusDelegate
MySDG passes focus responsibility to the focus delegate
public function setFocusFirst(){focusDelegate.setFocusFirst()
}
![Page 40: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/40.jpg)
Getting access to the SDG
Focus delegate needs information from SDGPassing in a reference to SDG makes testing
difficult
Use “Accessor” or “Proxy” pattern to create a seam
![Page 41: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/41.jpg)
ISDGAccessor Isolating grid properties from the grid
function isGridEditable():Boolean;function getColumnCount():int;function isColumnEditable(columnIndex:int):Boolean;function setTargetEditableCell(
editableItemPosition:IEditedItemPositionVO):void
function getCurrentEditablePosition():IEditedItemPositionVO;function setFocusToNone():void;function getCollectionLength():int;function getCollection():ICollectionViewfunction getDataFieldFromColumnIndex(columnIndex:int):String;
![Page 42: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/42.jpg)
WARNING:SOME MIGHT BE CUSTOM
OR NEWLY CREATEDDUE TO LIMITED RESEARCH TIME
Design Patterns
![Page 43: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/43.jpg)
Accessor Pattern
Purpose:Provides access to public properties of a class.
Implementation:In its simplest form, it exposes the same public properties as the class that it is exposing. It is needed for unit testing, in which setting some of these properties creates a series of events that is difficult to test.
var gridAccessor:IGridAccessor = new GridAccessor(this);
![Page 44: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/44.jpg)
Evaluator Pattern
Purpose:To extract common business questions into a method that typically returns a boolean
Implementation:if (evaluator.isProductInOrder(product))if (evaluator.isProductOrderable(product))if (evaluator.isProductPromotion(product))
![Page 45: HOW DO I GET IT TO DO WHAT I WANT? Focusing on the Spark DataGrid Drew Shefman dshefman@squaredi.com Blog: //squaredi.blogspot.com](https://reader035.vdocument.in/reader035/viewer/2022062515/56649cef5503460f949be532/html5/thumbnails/45.jpg)
Delegate Pattern
Purpose:To offload all additional functionality, calculations, processing, etc that doesn’t directly set a property on the grid.