how not to code flex applications n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
How not to code Flex Applications PowerPoint Presentation
Download Presentation
How not to code Flex Applications

Loading in 2 Seconds...

play fullscreen
1 / 26

How not to code Flex Applications - PowerPoint PPT Presentation


  • 122 Views
  • Uploaded on

How not to code Flex Applications. Jeff Tapper jtapper@digitalprimates.net Digital Primates IT Consulting. Tips and Tricks to keep you from being fired, or fed to the lions. Who Am I. Jeff Tapper (jtapper@digitalprimates.net) Senior Consultant – Digital Primates IT Consulting Group

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'How not to code Flex Applications' - aideen


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
how not to code flex applications

How not to code Flex Applications

Jeff Tapper

jtapper@digitalprimates.net

Digital Primates IT Consulting

Tips and Tricks to keep you from being fired, or fed to the lions.

who am i
Who Am I
  • Jeff Tapper (jtapper@digitalprimates.net)
  • 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
who are you
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
agenda
Agenda
  • What is bad code
  • Why do developers code badly
  • Bad Code Samples
  • Rules to Live By
  • Questions
what is bad code
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
why do developers code badly
Why do developers code badly?
  • Lack of Time
  • Lack of Knowledge
  • Lack of Caring
some of my bad code
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

// moment

public varsocket:XMLSocket;

what are the consequences
What are the consequences
  • Bad code can lead to
    • Delays
    • Project failure
    • Job loss
    • Death
sample 1
Sample 1

<mx:VBoxxmlns: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

what is wrong with 1
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. 
slide11
#2

Main App

<mx:ListdataProvider="{ac}"

itemRenderer="component.ItemRenderer"

selectable="false" />

ItemRenderer

<mx:VBoxxmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Image source="{data.image}"/>

<mx:Label text="{data.colorname}" height="30"/>

</mx:VBox>

Rule2.mxml

what is wrong with 2
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.
slide13
#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" />

what is wrong with 3
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
slide15
#4

Rule4.mxml

what is wrong with 4
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
slide17
#5

<mx:VBoxborderStyle="solid" borderColor="#00000" backgroundColor="#FFFFFF"

width="200" height="100">

<mx:Text text="{bodyText}" width="100%" height="100%" />

</mx:VBox>

Rule5.mxml

what is wrong with 5
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.
slide19
#6

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="*">

<comp:ChooseMenu id= "chooser" />

<comp:DisplayMenu

menuForDisplay="{chooser.menuGroup.selection.label}" />

</mx:Application>

Rule6.mxml

what is wrong with 6
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
slide21
#7

<mx:LinkButton label="{labels.ProcessStatus}"

enabled ="{(gridTests.selectedItems.length==1 &amp;&amp; (hasRight || (gridTests.selectedItem.StatusCode!='XX' &amp;&amp;gridTests.selectedItem.StatusCode!='XY')))?((gridTests.selectedItem.IsDerived=='n')?

(gridTests.selectedItem.StatusCode!='YY'&amp;&amp; gridTests.selectedItem.StatusCode!='YX' &amp;&amp; gridTests.selectedItem.StatusCode!='XYX'):false)

:false}"

click ="setTestStatus(event);"/>

Rule7.mxml

what is wrong with 7
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
everyone writes bad code sometimes
Everyone Writes Bad Code - sometimes
  • If you spend some time in the SDK source code, you can find gems like this:

varchangeCount:int;

changeCount=Math.max(1,getStyle("horizontalChangeCount"));

if (changeCount * 0 != 0){

changeCount = 1;

}

rules to live by
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.
upcoming talks
Upcoming talks
  • Adobe MAX 10/4-10/8 Los Angeles
  • RIA Unleashed 11/13 Boston