Rich Rodecker’s blog on flash, flex, actionscript, javascript, and php, with a dash of randomness
Flex MXML Code Formatting?
Just throwing this question out there to pick the brains of other Flex developers: Do you have any preferences/standards that you follow for your mxml formatting? Care to share? Here are the formats I seem to come across most:
Single line, common attributes grouped together and listed first:
XML:
-
<mx:Image id="thumb" x="10" y="20" width="90" height="90" scaleContent="false" source="" />
Single line, with all attributes in alphabetical order:
XML:
-
<mx:Image height="90" id="thumb" scaleContent="false" source="" width="90" x="10" y="20" />
Each attribute listed on a new line:
XML:
-
<mx:Image
-
id="thumb"
-
x="10"
-
y="20"
-
width="90"
-
height="90"
-
scaleContent="false"
-
source=""
-
/>
Personally, I don't have a standard yet. I usually go with tags on a single line, but the attribues are in no particular order at all, except in pairs where it make sense, like x & y always together. I do go with each attribute on a single line for the opening tag of a component or the main Application, though...seems to make more sense to do it there.
| Print article | This entry was posted by rich on July 27, 2008 at 8:39 pm, and is filed under flash. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
about 4 years ago
Usually I go with the first one.
But when the line gets long I switch to the third solution.
I prefer up/down scroll to left/right.
about 4 years ago
I usually go with grouped attributes on multiple lines. For example, x and y on a line, width and height on a line, etc. Of course, many attributes are unique and live on a line by themselves. I also try to always put the id attribute first.
about 4 years ago
I usually have the layout-related properties (x, y, width, height) as attributes and the rest as child elements, but it depends on the situation. I usually aim for short lines, but avoid line breaks within elements.
about 4 years ago
I usually put attributes such as name, id and stuff like that first and then break the line when the width gets too long so i don't have to scroll left/right. Physical properties(x,y,width,etc...) usually come after non physical attributes.
about 4 years ago
If you are developing in a team with source version control, it is better to use the third option, to avoid conflicts when several developers are editing the same files.
about 4 years ago
I try to maintain the 80 char column width using the "show print margin" setting. For both AS & MXML. And as @funkyboy mentioned, follow style 1, and jump to style 3, when i hit the 80 char margin. And when I break lines, I tend to group attributes based on their relevance - like x & y properties in one line, width & height in another etc.
about 4 years ago
1st one if there are only one or two attributes, but usually the 3rd, but improved as follows (if my html works out)...
I find it far easier to read two columns of name value pairs.
about 4 years ago
Definitely the third one unless it's a very short or insignificant tag. This way, it's easy to re-arrange the attributes using the alt-up and alt-down keyboard shortcuts. In my world, the id goes at the top, visual attributes next and event listeners at the bottom.
about 4 years ago
The alphabetical example is a bit much, don't you think?
I agree with Bryan's assessment (which was good to hear from someone else) that thinking of the attributes in groups is helpful.
Putting one attribute per line is a bit much as well, as it doesn't really help you with reading the code (IMO). Just because you don't need to scroll to the right does not mean that scrolling down a lot more is any easier.
I requested that Flex Builder 3 have a custom source formatter that you could set your preferences on how code gets formatted. I hate it when a developer (or FB's design mode) puts the y attribute before the x, or places them in two different places. it drives me a little crazy.
If you are working with a team, it helps if you try to set some best practices. Even if you don't work in a team, setting some personal best practices will help, as other developers will see your code eventually. Asking the question, Rick, helps us all to look at what we do on a daily basis and see if there might be a better way. Thanks.
Leif
about 4 years ago
(Sorry for calling you Rick, Rich.)
about 4 years ago
good 3rd way is good
I also will keep x & y, and width & height on the same line, and other related properties. While you have to scroll more, you NEVER have to scroll right.
about 4 years ago
I use a combo of 1 & 3. I group similar attributes, on multiple lines. x, y, width, height, all on one line, style info on another, events on the next, etc.
about 4 years ago
Yeah, I used to do the first, but then hated to break up long elements. Then I saw the second one, switched to, and liked having a convention (I don't have to think about what to do when breaking up a line, everything is the same).
Some other details:
- It's also good for source control (as previously mentioned). I group related attributes together (x/y, width/height, borderStyle/borderThickness/cornerRadius, backgroundColor/backgroundAlpha, etc.).
- I put event listeners at the end.
- I put id on the same line as the element name (picked that up from somewhere, I like it).
- I usually put the attributes most significant to the element first, with layout attributes second and style elements last (order of importance).
about 4 years ago
I usually go for the first, and for tag with tons of attributes, the third one.
Third one makes it readability for big tags to, especially when you are working in a team
about 4 years ago
The funny thing about MXML is that no matter which way you format it, it always seems to still look ugly.
about 4 years ago
Hi,
I've found a good starting point here:
http://preview.tinyurl.com/24orv6
I prefer double indenting properties beyond first line not to align them with inner tags:
Regards, Alessandro
about 4 years ago
Thanks for all the feedback. I think I'm going to go with the 3rd way, with related attributes on a single line and see how that works out.
about 4 years ago
I hope someone at Adobe checks out this post and recognizes the need for better custom code formatting support in Flex Builder.
about 4 years ago
It's pretty ridiculous that Flex Builder doesn't have code formatting functionality. I mean, it's a $500 IDE. Wtf?
about 4 years ago
Cormac, agreed. I was thinking about trying IntelliJ, it claims to support code formatting, but I don't really want to invest the time in messing with a new IDE at the moment.
about 4 years ago
I put together an mxml/as formatter (eclipse plugin) in December that you might find useful. It has a decent number of options, but I'm sure not enough for everyone.
about 4 years ago
I guess I should stick the link in the body too:
https://sourceforge.net/project/showfiles.php?group_id=248408
about 4 years ago
Nice! I'll check it out.
about 4 years ago
Ernest, this is stunning! Many thanks.
about 4 years ago
Ernest, just one thing I picked up: A tag like this:
A Value
which appears on one line, is split into multiple lines after formatting, e.g.:
A Value
which changes the data. The element now contains newlines etc. Any chance of changing this behavior? Of course you knew that first thing to happen is people are going to start requesting features
about 4 years ago
Sorry about previous post, the XML I put in the post got converted to tags. What I was referring to is an tag with a value followed by a closing tag (all on one line). It gets split up with the opening tag, value, and closing tag, each on it's own line, so the value now includes newlines.
about 4 years ago
Ok, idiot of the year, sorry about that
I'll try again: This
Some Valuegets converted to:Some Value
about 4 years ago
Last attempt. I tried using the "code" tag in my previous post but it still does not work. I am referring to an mx:String tag with a value and a closing mx:String tag, all on one line. It gets broken into multiple lines.
about 2 years ago
i want the coding for these questions plz help me out...
1.Take a dateChooser control, disable all the dates that are falling before the current date?
2.Take a 3 checkboxes and name them as Pickles, Tomatoes, Lettuce, Mayonnaise.
The selected items should be displayed in a TextArea and when unselected should be removed from TextArea.
Check out the Screenshots?
plz plz help me out plz gimme me the source code to generates des outputs!
about 2 years ago
flash builder
just downloaded it today.
about 1 year ago
Can someone please give me an example mxml code of how to make password to protect a website.
Thank you!