How not to code Flex Applications
description
Transcript of How not to code Flex Applications
![Page 1: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/1.jpg)
How not to code Flex Applications
Jeff [email protected] Primates IT Consulting
Tips and Tricks to keep you from being fired, or fed to the lions.
![Page 2: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/2.jpg)
Who Am I Jeff Tapper ([email protected]) Senior Consultant – Digital Primates IT Consulting Group Building Internet Applications since 1995 Authored 10 books on internet technologies Adobe Certified Instructor for all Flex, AIR, Flash, and
ColdFusion courses http://blogs.digitalprimates.net/jefftapper Twitter: jefftapper
![Page 3: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/3.jpg)
Who Are You?
• Developers who…– are open to learning– Have some experience with Flex– Have a sense of humor
• If this isn’t you, you should probably leave
![Page 4: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/4.jpg)
Agenda
• What is bad code• Why do developers code badly• Bad Code Samples• Rules to Live By• Questions
![Page 5: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/5.jpg)
What is Bad Code
• Bad code is…– Code which doesn’t meet the needs of a project• Efficiency• maintainability• Time to develop
– Code which doesn’t make sense
![Page 6: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/6.jpg)
Why do developers code badly?
• Lack of Time• Lack of Knowledge• Lack of Caring
![Page 7: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/7.jpg)
Some of my bad code…public class XMLListener extends EventDispatcher {
// FIXME! - JT - yes, i know this is// not the right solution// but im making the socket public so I// can attach a listener to it// this can clearly be done better, but im// tired, and this is what i have at the // momentpublic var socket:XMLSocket;
![Page 8: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/8.jpg)
What are the consequences
• Bad code can lead to– Delays– Project failure– Job loss– Death
![Page 9: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/9.jpg)
Sample 1<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="username" width="150"/><mx:TextInput id="password" width="150"/><mx:VBox width=“150" height="10" styleName="doubleLine"/><mx:Button label="submit"/>
</mx:VBox>
Main.css.doubleLine{background-image: Embed("/assets/images/doubleLine.png");}Rule1.mxml
![Page 10: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/10.jpg)
What is wrong with #1
• Summary: Inappropriate use of container. • Description: <mx:Image> should be used to
display an image, not a container with an backgroundImage style
• Type: Maintainability, Performance• Rule: Its never appropriate to use a container
which will never have children.
![Page 11: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/11.jpg)
#2Main App<mx:List dataProvider="{ac}"
itemRenderer="component.ItemRenderer" selectable="false" />
ItemRenderer<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Image source="{data.image}"/><mx:Label text="{data.colorname}" height="30"/>
</mx:VBox>
Rule2.mxml
![Page 12: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/12.jpg)
What is wrong with #2
• Summary: List used when VBox more appropriate
• Description: A List control has lots of code dealing with selecting items, clearly, this is not about item selection
• Type: Performance, Maintainability• Rule: Never use a List based component when
list functionality is not needed.
![Page 13: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/13.jpg)
#3<mx:Script><![CDATA[private function setData(un:String, pw:String):void{username.text=un;password.text=pw;
} ]]></mx:Script><mx:TextInput id="username“ /><mx:TextInput id="password" />
![Page 14: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/14.jpg)
What is wrong with #3
• Summary: Properties are set on controls, when data binding would be better
• Description: Setting properties on controls • Type: Maintenance, Development Time• Rule: Modify the Model, Let the View Follow
![Page 15: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/15.jpg)
#4
Rule4.mxml
![Page 16: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/16.jpg)
What is wrong with #4
• Summary: Views events handled in top level component
• Description: View is dispatching an event which is handled by a controller by passing event data back to view
• Type: Maintenance, Separation of Concerns• Rule: Always handle events as locally as
possible
![Page 17: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/17.jpg)
#5<mx:VBox borderStyle="solid" borderColor="#00000" backgroundColor="#FFFFFF" width="200" height="100"><mx:Text text="{bodyText}" width="100%"
height="100%" /></mx:VBox>
Rule5.mxml
![Page 18: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/18.jpg)
What is wrong with #5
• Summary: Inappropriate container nesting• Description: Additional containers added for
styling, not for child layout• Type: Performance• Rule: If you have a container with only one
child, you are usually doing something wrong.
![Page 19: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/19.jpg)
#6<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="*">
<comp:ChooseMenu id= "chooser" />
<comp:DisplayMenumenuForDisplay="{chooser.menuGroup.selection.label}"
/>
</mx:Application>
Rule6.mxml
![Page 20: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/20.jpg)
What is wrong with #6
• Summary: reaching into a child of a child• Description: Components should interact with
their children, not their children’s children• Type: Separation of Concerns, Encapsulation• Rule: Two dots and you are out
![Page 21: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/21.jpg)
#7<mx:LinkButton label="{labels.ProcessStatus}"
enabled ="{(gridTests.selectedItems.length==1 && (hasRight || (gridTests.selectedItem.StatusCode!='XX' &&gridTests.selectedItem.StatusCode!='XY')))?((gridTests.selectedItem.IsDerived=='n')?(gridTests.selectedItem.StatusCode!='YY'&& gridTests.selectedItem.StatusCode!='YX' && gridTests.selectedItem.StatusCode!='XYX'):false):false}"click ="setTestStatus(event);"/>
Rule7.mxml
![Page 22: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/22.jpg)
What is wrong with #7
• Summary: unreadable code• Description: Use functions, not complex
binding expressions• Type: Maintainability• Rule: Being too clever makes you a dumb-ass
![Page 23: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/23.jpg)
Everyone Writes Bad Code - sometimes
• If you spend some time in the SDK source code, you can find gems like this:
var changeCount:int;changeCount=Math.max(1,getStyle("horizontalChangeCount"));if (changeCount * 0 != 0){
changeCount = 1;}
![Page 24: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/24.jpg)
Rules To Live By
• Its never appropriate to use a container when they will never have children.
• Never use a List based component when list functionality is not needed.
• Modify the Model, Let the View Follow• Always handle events as locally as possible• If you find you have a container with only one child, you
are probably doing something wrong.• Don’t be a dumb-ass• Flex isnt broken, you are.
![Page 25: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/25.jpg)
Questions
?
![Page 26: How not to code Flex Applications](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816582550346895dd8227b/html5/thumbnails/26.jpg)
Upcoming talks
• Adobe MAX 10/4-10/8 Los Angeles
• RIA Unleashed 11/13 Boston