1 Reply Latest reply on Jan 27, 2009 6:29 AM by Newsgroup_User

    newbie looking for advice

    Clifford Meece
      Hi,
      I'm an advanced developer in other frameworks, but I am new to Flex. I've just finished the video series 'Flex in a week' and have some questions for more experienced developers.

      One thing I noticed is that there seem to be several ways to do everything, so it is hard for me to decide on the 'best way' for a given problem. For example, one video talks about creating new components by essentially moving the constituent MXML components into its own MXML file for reusability. Later however, we are shown a way to extend components (adding a button to a formitem) using just ActionScript subclassing.

      When would I choose one over the other?

      Likewise, on the styling section, there appear to be at least 4 general approaches to changing the look of something. When would I customize using a programmatic skin, or since it appears the ui components can also draw, why wouldn't I just subclass the component and draw directly there? Or using inline styles, or attach a css style, etc etc.

      I've started writing a proof of concept app so perhaps I could get some advice on the above topics for each of the hurdles I've come across so far?

      I would like two text fields to appear in the main area of the application, like a drawing pane, perhaps a canvas or something derived from canvas. Imagine this like a very simple diagramming tool. I would like the user to be able to drag the textfields around the canvas. I want the two text fields to be connected via a bezier line.

      What is the best way to implement dragging a component like this? Note, I am not dragging an element from one datagrid to another like so many of the examples illustrate.

      Should the bezier line be drawn by the containing canvas? or by the textfield component (or subclass)?

      While one textfield is being dragged around, the line needs to still be connecting both of them...how is the update to that drawing element done? What if I wanted to maintain the distance between the two, so draggin one caused the other to move with it. Would I register a listener in the other textfield as well, or would I implement a 'move' function and have textfield 1 call textfield 2's move function?

      The textfield should have 3 states: normal, selected, and editing. I'd like to override the look of the textfield, so that it can appear different depending on those three states. It looks like a rounded rectangle 'label' most of the time. It should be higlighted or color changed when clicked once, or when being dragged, and it should look like a normal textfiled when being clicked again after already being selected (ie blinking cursor, allowing text entry etc). Would a programmatic skin be better here, or should I sublass textfiled and draw right in the component? Should I subclass via actionscript or should I make a new mxml component?

      I'd like the container canvas to be bigger than the containing window and allow the user to pan across it (ideally eith a scrollwheel, and by a click and drag). I notice the flexlib contributions include some kind of scrolling canvas. Would that work?

      I'd like there to be a button (with a customized look) 'attached' to the textfield. I only want the button to be displayed when the textfield has focus. What's the best approach for that? subclass textfield and add a button? subclass canvas and add a textfield and and a button? If extending canvas, would I do that as an mxml component or an AS subclass?

      Thanks in advance for any feedback,

      Cliff
        • 1. Re: newbie looking for advice
          Level 7

          "Clifford Meece" <webforumsuser@macromedia.com> wrote in message
          news:glknkd$bme$1@forums.macromedia.com...
          > Hi,
          > I'm an advanced developer in other frameworks, but I am new to Flex. I've
          > just finished the video series 'Flex in a week' and have some questions
          > for
          > more experienced developers.
          >
          > One thing I noticed is that there seem to be several ways to do
          > everything, so
          > it is hard for me to decide on the 'best way' for a given problem. For
          > example, one video talks about creating new components by essentially
          > moving
          > the constituent MXML components into its own MXML file for reusability.
          > Later
          > however, we are shown a way to extend components (adding a button to a
          > formitem) using just ActionScript subclassing.
          >
          > When would I choose one over the other?
          >
          For a simple visual component, you're probably going to want to go with
          MXML. But if you need to get your fingers dirty, such as adding to the
          header or footer of a Panel, you'll need to go with ActionScript.
          Additionally, when you start making itemRenderers, you'll find that the
          Container classes are really too heavy for that, so you'll need to start out
          with something like UIComponent. When you're extending UIComponent, there's
          not a whole lot you can do with MXML, so you really need to use AS.

          A lot of it also depends on you and the task. If you use Design View
          extensively, you'll probably want to lean toward MXML. But with some tasks,
          Design View doesn't do anything anyway (anything data driven), so you'LL
          become more and more used to picturing in your head what the result of your
          coding will be. At that point, you'll pick the way you want to extend
          components based on which looks like it will be easiest and most intuitive.

          > Likewise, on the styling section, there appear to be at least 4 general
          > approaches to changing the look of something. When would I customize
          > using a
          > programmatic skin, or since it appears the ui components can also draw,
          > why
          > wouldn't I just subclass the component and draw directly there? Or using
          > inline styles, or attach a css style, etc etc.

          One place you'll want to use programmatic skins is with buttons. This is
          because buttons pass state data into the skin, and the skin can make more
          sophisticated use of that state data than just switching out a graphic. For
          instance, you could apply an effect or a transition. Or you could make a
          programmatic skin in Flash that does whizbang animations between over and
          up. If you were to try to extend Button to add this functionality directly
          to Button, you'd find yourself banging your head against the wall.

          Also, you can then use the normal Button class and apply or remove the skin
          as necessary. As you get more advanced, you'll appreciate things like this
          more and more. Another advantage is that you can pull in things like
          HaloBorder, that allow you to drop in styles like backgroundColor,
          borderStyle, etc., without having to write the code yourself.

          I typically use inline styles for "one-off" styling...only one thing has to
          look like that. If something else has to look like that, I'll usually go
          back and make a CSS style. Keep in mind that there are certain properties
          you can't just specify a value for--they need a class, which can be a
          graphic in many cases but sometimes you'll want to write a class that does
          moe than just 9-slicing. For instance, I once wrote an MXML class to use as
          an icon that takes the path to the image as a style. The icon class and
          image path were passed to the itemRenderer as a style, and then the renderer
          set the style on the icon to the path.

          One think I'd encourage you to look into is the AdvancedDataGrid's
          styleFunction. This is extremely powerful in that it lets you write one
          renderer that you can then make look completely different based on the data
          or usage. I found this so powerful that I extended TileList and DataGrid to
          do the same thing. These extended classes are available at
          flexdiary.blogspot.com.


          > I've started writing a proof of concept app so perhaps I could get some
          > advice
          > on the above topics for each of the hurdles I've come across so far?
          >
          > I would like two text fields to appear in the main area of the
          > application,
          > like a drawing pane, perhaps a canvas or something derived from canvas.
          > Imagine this like a very simple diagramming tool. I would like the user
          > to be
          > able to drag the textfields around the canvas. I want the two text fields
          > to
          > be connected via a bezier line.

          I think your biggest problem will be trying to figure out whether a click on
          the text field is a drag or whether they're trying to select text. MPO is
          that you should create a new component that's a text field with a little
          "tab" attached that allows dragging. You'd need to do some research into
          how to handle tabbing into the text field with it wrapped in such a way.

          > What is the best way to implement dragging a component like this? Note, I
          > am
          > not dragging an element from one datagrid to another like so many of the
          > examples illustrate.

          You might find this useful:
          http://www.quilix.com/node/3

          > Should the bezier line be drawn by the containing canvas? or by the
          > textfield
          > component (or subclass)?

          The textfield shouldn't know anything about the other textfield, so I think
          you can rule out having the textfield draw it.

          > While one textfield is being dragged around, the line needs to still be
          > connecting both of them...how is the update to that drawing element done?

          The first thing I'd do is look and see what events DragManager gives you
          access to in this case. If I didn't find anything there, I'd look at
          hooking up to the MouseMove event.

          > What
          > if I wanted to maintain the distance between the two, so draggin one
          > caused the
          > other to move with it. Would I register a listener in the other textfield
          > as
          > well, or would I implement a 'move' function and have textfield 1 call
          > textfield 2's move function?

          UIComponents already have a move function.

          > The textfield should have 3 states: normal, selected, and editing. I'd
          > like to
          > override the look of the textfield, so that it can appear different
          > depending
          > on those three states. It looks like a rounded rectangle 'label' most of
          > the
          > time. It should be higlighted or color changed when clicked once, or when
          > being dragged, and it should look like a normal textfiled when being
          > clicked
          > again after already being selected (ie blinking cursor, allowing text
          > entry
          > etc). Would a programmatic skin be better here, or should I sublass
          > textfiled
          > and draw right in the component? Should I subclass via actionscript or
          > should
          > I make a new mxml component?

          I'd wrap the textfield isn something else (my choice would be UIComponent,
          but you may find it easier to use Canvas), and then use States to manage the
          behavior.

          > I'd like the container canvas to be bigger than the containing window and
          > allow the user to pan across it (ideally eith a scrollwheel, and by a
          > click and
          > drag). I notice the flexlib contributions include some kind of scrolling
          > canvas. Would that work?

          Canvas already scrolls when its content extends outside the visible window.

          > I'd like there to be a button (with a customized look) 'attached' to the
          > textfield. I only want the button to be displayed when the textfield has
          > focus. What's the best approach for that? subclass textfield and add a
          > button? subclass canvas and add a textfield and and a button? If
          > extending
          > canvas, would I do that as an mxml component or an AS subclass?

          You're probably better off starting in MXML, especially since you should be
          using States. My understanding is that they're tricky to do in
          ActionScript.

          HTH;

          Amy