Rendering The Fat

Rendering the Fat:How to Keep Your DataGrid HealthyBen Schmidtke IIIDigital Primatesbschmidtke@digitalprimates.netTwitter: stunnedgrowth

Who Am IBen Schmidtke IIIConsultant - Digital Primates IT Consulting GroupFlash Platform Developer for 11 yearsAdobe Certified InstructorTwitter: stunnedgrowth

AgendaOverview of List Components DataGrid and AdvancedDataGridWhy should we take care of themItemRenderersBuilding Slim ItemRenderersTips and GuidelinesQuestions

Get To ItFocus will be looking at best practices for dealing with custom cell formattingData customization in DataGrid and AdvancedDataGridMany of the concepts can be used in the other List components

The InterwebsThe Internet is full of examples about how to use Flex components.Some are greatSome are okOthers, let’s pretend they don’t exist.

Out Of The BoxFlex 3 provides several components for presenting data in a list format:List Controls List TreeDataGridTileListMenuAnd More…Data VisualizationAdvancedDataGridOLAPDataGrid

General FeaturesSupport Multiple Data TypesDrag and DropScrolling - Vertical and HorizontalCell EditingVariable Row HeightlabelFunctionAnd more...

DataGrid: What Is It?Presents data in a Table formatRowsColumnsCan automatically create rows & columns based on the dataSingle Column SortingColumn Reordering

AdvancedDataGridSupports all the functionality of DataGridProvides support for Hierarchical DataUnderstands how to display parent/child relationships.XML, XMLList, HierarchicalData, HierarchicalCollectionViewCustom objects with “parent” and “children” propertiesAdvanced Sorting (Multiple Columns)Column Grouping

In Short They…Are a view for the data modelCan render data multiple waysFlat, Hierarchical Data, GroupedAre a control that render other controlsHeadersRenderersEditorsScrollBars, Lines & Other UI Stuff

Why should we take care of it?PerformanceTroubleshootingFlexibilityMaintainability

It Takes WorkLarge quantities of informationEach cell is a componentThe more rows and columns displayed decreases performance

What Could Go Wrong?Cells appear slow to displayContent placed incorrectly “sometimes work, sometimes not work”Content shift a few pixels for no reasonScrolling is jumpy or lagSorting & Column reordering take a long time to processIn worst case, it crashes.

It All Boils Down ToUnexpected ResultsPoor User ExperienceCranky Client Your Personal Health: Stress

The Fat : ItemRenderersWhat are they?Purpose:Read dataPresent the data (Text, Icons, Controls, etc.)What are they not?Things that compute data to displaymx.containers.* (HBox, Canvas, etc.)

ItemRenderer LifecycleIn general, list components will only create as many ItemRenderers as needed to display1 Column X 10 Visible Rows = 10 Renderers100 data objects = 10 RenderersPlus one or two extra for performance reasonsItemRenderers are Recycled

The Default: It’s Text!DataGridDataGridItemRendererExtends UITextField > FlexTextField > TextFieldAdvancedDataGridAdvancedDataGridItemRendererExtends UITextField > FlexTextField > TextFIeld

Why Is It Text?Extremely lightweightDirect and to the pointTake the least amount of time to create and displayNo container overhead

But Containers Are Easy…Containers provide a lot of useful functionality:Automatic Layout: Horizontal & VerticalAbsolute Layout: Coordinates X and YScrollbarsDividers, Tabs, etc.

Too Much FunctionalityContainers are performance heavyEverything that makes them easy, slows them down10 Rows + 10 Columns = 100 Containers

Custom ItemRenderersDepending on the project requirements, it most likely require a custom ItemRendererDifferent text colors based on the dataSupport for iconsSupport for other ControlsCheckBox, ComboBox, etc.

Do you need one?If you do not need one, do not create oneCustom String ManipulationUse a label function if possibleCan be done with out creating a renderer

Typical Label Functionpublic function myLabelFunction(item:Object,column:DataGridColumn):String{ return item.firstName + " " + item.lastName;}<mx:DataGrid dataProvider="{myDataProvider}"> <mx:columns> <mx:DataGridColumn labelFunction=“myLabelFunction"/> </mx:columns></mx:DataGrid>

That doesn’t cut itA single question is the determining factor for the approach of a ItemRenderer.Q: Does the content require something other than text or a label function can provide?A) No, formatting, custom styling, truncated textB) Yes, I need some icons or checkbox

Just some formatting…Extend the Base ItemRenderer Class for the componentAdvancedDataGridItemRendererDataGridItemRendererEtc.They extend UITextFieldOverride validateProperties();

ValidateProperties()The part of DataGridItemRender that:Sets the Text property on the TextFieldSets the TooltipApplies WordWrap based on Column settingsApply any necessary formatting based on the data here

Unhealthy Text Renderer<mx:AdvancedDataGridColumn headerText=“Add User"><mx:itemRenderer> <mx:Component> <mx:HBox width="100%" height="100%"> <mx:Label id=“userLabel” text="{data.name}“ styleName="{((data.name == 'Jack') ? 0x990000 : 0x000000)}”/> <mx:Image source=“{data.imageURL}” /> </mx:HBox> </mx:Component></mx:itemRenderer></mx:AdvancedDataGridColumn>

What is wrong with it?Improper use of a ContainerUnknown length of the user nameScrollBarsInline ItemRenders are unable to be reused elsewhere in the application

Healthy Text Rendererpublic class ExpiredUserItemRenderer extends AdvancedDataGridItemRenderer{override public function validateProperties():void{ super.validateProperties();if (data && listData) { text = listData.label; if((data is Person) && (data as Person).isExpired == true) { setStyle("color", "0x990000"); toolTip = “Warning! “ + listData.label; } else { setStyle("color", "0x000000"); toolTip = listData.label; } }}}

Why Is It Healthy?It is still just a TextFieldDoes the least amount of work to present the custom textNo additional overhead from Container classes or UIComponent

Rendering Other ControlsWhen rendering images or multiple controls:Extend UIComponentImplement InterfacesIDataRendererIListItemRendererIDropInListItemRenderer (Optional)Build Custom Functionality

Interfaces Part 1IDataRendererdata (value:Object)Provides the data object for the entire row

Interfaces Part 2IListItemRendererAll renderers must implement this interfaceDoes not define any new methodsExtends several other Flex InterfacesUIComponent already has required properties and methods

Interfaces Part 3IDropInListItemRenderer (Optional)listData (value:BaseListData)Provides additional information to the renderer: Column Index, Row Index, dataFieldAllows the renderer to be re-used with different data fields and List components

Custom FunctionalitySince we are extending UIComponent, we have the Flex Component Life CyclecreateChildren()commitProperties()measure()updateDipslayList(…)

Unhealthy Renderer<?xml version="1.0" encoding="utf-8"?><mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script><![CDATA[protected function linkbutton_clickHandler(event:MouseEvent):void{ // navigate to data.url}]]></mx:Script> <mx:HBox> <mx:Label id="city" text="City: {data.city}" /> <mx:Label id="state" text="State: {data.state}“ /> </mx:HBox> <mx:LinkButton label="More Information“ click="linkbutton_clickHandler(event)"/></mx:VBox>

Another Unhealthy Rendereroverride protected function commitProperties():void { if(dataChanged) { // start over removeChild(pdfIcon); removeChild(labelField); }}override protected function updateDisplayList( … ):void { super.updateDisplayList(unscaledWidth, unscaledHeight);if(data && !pdfIcon) {createPDFIcon();}if(data && !labelField) { createLabelField();}// position & sizing logic…

What is wrong with it?Improper use of the display listUsing removeChild() & addChild() every time the data changes when unnecessaryIf you know what you need, create it once and update it when the data changes

Healthy Versionoverride protected function commitProperties():void { if(dataChanged) { // update the text on the label if(data) {labelField.text = data.labelField; labelField.visible = true; } else {labelField.text = “”; labelField.visible = false; } }}

Healthy Component RendererExample of a Text & Icon Renderer

Tips for Healthy ItemRenderersAvoid extending or containing anything in the mx.containers.* package.Using a RepeaterUsing Remote Objects! Don’t Do it!Inappropriate use of the display list.addChild(), removeChild(), etc.Excessive recursion in the UIComponent lifecycle.Directly modifying the data model, remember it’s a view

GuidelinesWhen displaying:Text: Extend base ItemRenderer componentImages & Controls: Extend UIComponentAdd items to the display list once.Avoid removing items from the display list unless necessary

SummaryKnow the issues related to a poorly performing DataGridAsk the right question before creating a custom ItemRendererBase ItemRenderer classes, UITextField and UIComponent are your friendsDon’t be afraid to get in there

Thank YouBen Schmidtke IIIConsultant - Digital Primates IT Consulting Groupbschmidtke@digitalprimates.net

Performance NoteA majority of all performance issues with AdvancedDataGrid are related to improper use of a custom item renderer.Even if when updating the dataProvider collection more than necessary, a single poorly made item renderer can decrease performance severely.

The DataProviderWill accept pretty much anythingoverride public function set dataProvider (value:Object):voidBehind the scenes if it does not meet certain criteria, it becomes something else.

The DataProviderAll data is or becomes one of two types:ICollectionViewArrayCollectionXMLListCollectionIHierarchicalCollectionViewHierarchicalCollectionView

Behind The Scenesif (value is Array) { collection = new ArrayCollection(value as Array);} else if (value is XMLList) { collection = new XMLListCollection(value as XMLList); } ...else {// convert it to an array containing this one itemvar tmp:Array = [];if (value != null) tmp.push(value); collection = new ArrayCollection(tmp); }

CollectionEventcollection.addEventListener( CollectionEvent.COLLECTION_CHANGE, …);AdvancedDataGrid watches for CollectionEvent to respond accordingly keeping things up to date.HierarchicalCollectionView Caches parent/child relationships for quick lookups and respond to the parent & children properties changing.

Issue 1: CollectionEventEvery time a collection event is dispatched on the dataProvider, AdvancedDataGrid may perform a considerable amount of work including:Rebuilding the data viewReconstructing Hierarchical Structures & Updating Cached Collections if necessarySetting the data on all visible renderers

DataProvider GuidelinesManage your data prior setting the dataProviderArrayCollection, XMLListCollection or HierarchicalCollectionApply updates to data objects in bulk if possibleExample: When editing a property, set the value once not one character at a time.

Rendering The Fat

More Related Content

What's hot (7)

Viewers also liked (6)

Similar to Rendering The Fat (16)

Recently uploaded (20)

Rendering The Fat