Im using the accordion component in Flex and cant seem to get the header to have rounded corners. The footer rounds no problem but the header remnains square, any suggestions?
Here's an in-depth example from Doug McCune showing how to customize the Accordion control, with accompanying source code and explanation, in which he does something similar. While the specifics will depend on what you're trying to do, essentially you need to re-skin the button and/or selection skins of the accordion-item header.
Skinning can be a bit tricky, one of those things that seems like it ought to be easier than it is (and personally I find using Flash for skinning to be a pain for all but the simplest situations; I much prefer to do it in code or markup), but if you spend a little time with the code in the example I'm sure you'll see what's going on and be able to apply to your project. Hope it helps -- good luck!
Your best bet is to probably design the skin in flash and use that skin in flex.
I suggest downloading the flex skinning templates from here
http://www.adobe.com/cfusion/entitlement/index.cfm?event=custom&sku=RC00530&e=flex_skins
installing it.
When flash opens goto 'create from template' and click on more. Select flex skins. You can choose just to create an accordion template or a full skins template. Design it as you want. Run it to create a swc and then import that swc into flex. You can then use that skin in your accordion panel.
That way your skin can be designed with your rounded corners (make sure you have scale 9 enabled so that they scale properly)
Related
What framework is more friendly and open towards css customisation? How ugly will it get? Ideally they should look and behave exactly like their kendo counterparts.
(To give some context: I have to choose between the two frameworks and maybe later
will hire a webdesigner to mimick Kendo's web UI look & feel.)
As an example: Kendo's calendar picker UI
http://demos.kendoui.com/web/calendar/index.html
That date picker seems pretty standard fair. Dojo's picker (the one I am most familiar with) will handle it.
The skinning will be the trickier part. Dojo has good theme support, so you should be in good shape there, but it will still require a lot of effort to get things looking the way you want. (Having a web designer will be a big help).
What I would do if I were you is look at your project, and see what widgets are must have, then make sure whatever toolkit you go with has them.
I would be surprised if any prime-time JS framework didn't include skinning support that would handle the look and feel you want to add. Still, you are going to have to dig into that support and learn it, and end up dealing with a lot of pretty involved layout and CSS.
It's still in its early stages, but you can try playing with the theme editor at http://maqetta.org to customize Dojo's Claro theme.
I'm wondering what the best tool is for developing a mobile UI is. My requirements are that I retain full control over the look and movement of every UI component. I think Flex might be the best way to do this but I can't tell if I'll have that level of control using their UI components.
Any links would be appreciated. Thanks!
Edit: For example, looking at the documentation I see there's a an 'enabled' field which dims the color of a container and it's children if false. Am I able to change that so, maybe a repeated bitmap pattern appears if false?
Or, if there's a sliding menu can I edit the speed and change in speed as it closes?
You can create any component you like and make it look like anything you want. You don't have to use standard components. You can reskin any components just by specifying a new skin. It's really pretty easy.
You can create custom skins for Flex, for both Spark and Halo components. You also can create custom components, either based on other existing components, or based on the base component. You could even create custom objects which are just based on Sprites or similar (if you like to have control over everything :P).
edit
In response to your updated question. Regarding the enabled/disabled property, yes, it is possible to skin that. Spark components have states, for example a Button has a up, over and down state – and an disabled state. That state is exactly what is active when the enabled property is set to false. So yes, you can skin that.
Regarding the sliding menu animation, I'm not totally sure if that would be easily possible as I believe that this is coded into the component itself and not part of the skin to decide. However even if that is the case, you could instead create your own component that basically features exactly the same functionality but has a changed animation there.
I'm not sure if the Spark skinning wouldn't be able to do this though, because what you definitely can do is creating transitions between states. So if the slide is made with different states, you'll probably be able to change the transition as well.
Also, where do you start if you want to create a complete Flex 4 skin? Is there a list of all the "pieces" (component parts) you need to create graphics for somewhere, or some complete, example skins out there to use as a template? And do your skins render correctly in Flash Builder Design View? (including embedded fonts)
Most people will point you to Flash Catalyst, but the last time I looked it was not all-inclusive in terms of creating a complete skin/theme, not to mention other issues inherent to 1.0 software. I start by copying the default skin files and modifying them, as well as creating a new CSS file based on the defaults.css file that comes with the SDK. The trickier part is that not all components (Tree, DataGrid, DateChooser, ColorPicker, etc) are available as Spark components, which means to have a complete skin/theme you need to create a bunch of mx skins as well. Bottom line: If you are serious about doing this properly, you'll need to spend a lot of time understanding defaults.css and the skin classes it refers to.
To answer your original question, my personal workflow is to create a mockup of the skin in OmniGraffle, then use that as a guide to modify copies of the default skin files (look in spark.skins, and mx.spark.skins) by manipulating the mxml directly (as opposed to using a graphical tool such as Illustrator or Catalyst.)
Hope that helps.
Basically, you have many options when skinning Flex 4 apps :
Using "general" styles (chromeColor, selectionColor, focusColor, ...). This is usually called "Styling" instead of Skinning because you only change the overall look of the application. It's by far the easiest way to change the appareance of your application quickly without knowing anything about FXG, MXMLG, ... The drawback is it will still look like a Flex app, but with different colors/fonts
Using Adobe tools to produce FXG files. These tools can be Illustrator, Photoshop, Flash CS5. You design each of the spark component with these tools and export the result in .fxg format. FXG is great because it's optimized, but you can't use things such as Data Binding in it
Write your skin in MXMLG , by hand (starting from scratch or copying the default spark skin) or with the help of Flash Catalyst. Catalyst can take your Illustrator or Photoshop design and convert it to MXMLG. Experience shows it's still painfull, even with the last version. And you often end up doing things like this.
In our team, there is no such thing like designer/developer workflow with Flash Catalyst. The next version looks better but it's still far from what Microsoft is doing with Visual Studio/Blend.
That being said, the new Spark architecture is awesome. Skinning is much easier, flexible and readable. With this architecture, a developer codes the component and the designer skins it only by knowing the contract (skinparts, skinstates, data)
This also true for views if you use the Presentation Model pattern.
There is no "template" skins as the one available in Flex 3 because skinning doesn't use symbol anymore. What could be done though is a Flex 4 style explorer.
A final word, it has already been said here, but don't forget that with the current version (4.1), there is no spark equivalent for all of the components, so you will still use Flex 3 skinning techniques for components such as DataGrid, Tree, ...
This is where I normally "start"
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
Once I figure out what components I have to skin, and I can't change what I want to change in Flex with CSS, then I go into Flash and start breaking the components apart and tweaking them.
http://www.adobe.com/devnet/flex/articles/skins_styles.html
(Also, I've never had anything render "correctly" in design view)
This may be more of an opinion poll than a question, but here goes. I have a fairly complex Flex application that uses many different components. I want the application to be able to custom styling and/or skinning. I also want to be sure that the styling approach makes the most efficient use of system resources (memory, CPU, network), and that it does not adversely impact performance.
We currently are using a hybrid approach to styling the application that uses both CSS and a Flash skin created in CS3. It seems odd to me to have a two-pronged approach to styling an application and ideally would like to settle on one approach or the other. Can someone outline the advantages and disadvantages of using either exclusively CSS or a Flash skin? Is there a justification for using both within the same app?
Using CSS exclusively seems advantageous because it is approachable by anyone with a basic understanding of other uses of CSS, especially when using the Flex 2 Style Explorer. On the other hand, I know that the CS3 skin we use declares up/over/down/disabled/pressed skins for each component where these states are needed and Flex manages the transitions to the appropriate skins as each state is (de)activated. However, my impression is that creation of a Flex skin in CS3 requires somewhat specialized skills and tools.
So what would you recommend for styling a Flex application if performance, customization, and efficient resource utilization are priorities?
First, I would suggest using Flex 4 if you haven't started already. Flex 4 is just about to be released.
With Flex 4, they have a whole new skinning architecture. This means you'll never use Programmatic Skins again. Plus they have Advanced CSS Selectors, so you can do way more with CSS in Flex 4. Programmatic Skins are very hard to make dynamic anyways. In the end, you'll end up creating an architecture like Flex 4 Spark Skins if you try to abstract out the logic for Programmatic Skins.
Customization
What we're doing to make Flex 4 Skins and Styling as dynamic as possible is the following:
Style Palletes: Either static classes, or XML files
Custom Skins
CSS
Style Palletes: These are static classes that hold all of the variables you use in either CSS or Skins. For example, you can have a ColorPalette that has all of your colors: public static const ColorPalette.BRIGHT_RED:uint = 0xff0000;, etc. You can then use these in Flex 4 Skins via binding, such as <mx:Button color="{ColorPalette.RED}"/>. The only problem with static classes is they they're not dynamic (you couldn't define an arbitrary number of colors for them). Same with XML: you'd have to hard-code (eventually) a certain XML structure in order to use them in Skins. You could even have the XML define ColorPalette values (so ColorPalette.ACCENT_COLOR could be set to anything from XML (gold, bright blue, or any accent). Fun stuff.
Custom Skins: Flex 4 allows you to easily skin all the Flex 4 and Flex 3 (datagrid, accordion, etc.). So if you don't like how Panels only have 1 drop shadow and no gradients, you can add a background with 4 gradients and 2 dropshadows (for 2 angles of light), and maybe some rollover effect. And then you could apply your ColorPalette.BRIGHT_RED to the shadow (or a glow :)). And you could have XML configure the ColorPalette settings. Here's a cool custom Flex 4 Skin
CSS: Then in CSS, you could write a very simple Palette parser that applied your ColorPalette values (for example) to CSS. Check out the Degrafa CSS Skin for some code examples.
Performance
The only problem with Palettes and CSS is performance. By definition, static class and binding decrease performance. Binding causes lots of event dispatching in the background, so things like <mx:Button color="{ColorPalette.RED}"/> decrease performance (not noticeable of course, since there are much worse applications, such as using built in Adobe Tweens), but it does to some degree.
Same with CSS. In Flex, every CSS Selector (Panel { properties:values... } is converted into an Object. So if you have 100 selectors, you get not only 100 extra object, but 100 extra classes in your application, at least! And that definitely adds to your swf size. And all of their properties are dynamic, and by definition, dynamic classes are slower than non-dynamic classes. Plus, setting a style (with setStyle(property, value) in Flex is very slow because you have to loop through all the children. If you're setting styles via an admin system (or something like Flex Style Explorer like you suggested), then you don't really care. But because they use setStyle(), you can see a decent performance hit when changing styles.
So if performance was a super big issue, the best option would be to hard code every style value, and not change styles at runtime (who needs to do that anyway (unless your in the admin section)?). How do you hard code styles while still remaining agile? Use Palletes (ColorPalette.BRIGHT_RED) and the like, and convert the binding expressions (<mx:Button color="{ColorPalette.RED}"/>) to static declarations via some preprocessor (I use ruby to compile my swfs, so I just match patterns and replace). So it'd convert <mx:Button color="{ColorPalette.RED}"/> to <mx:Button color="0xff0000"/>, and you get a performance boost.
In the end though, it's best to create custom skins and define the styles there, either through:
static declarations <mx:Button color="0xff0000"/>
palette declarations <mx:Button color="{ColorPalette.RED}"/>
xml declarations <mx:Button color="{myxml.#button_color}"/>
Then you can define some really cool and advanced skins and have them wired up to a palette or xml file and have the user edit that. Trying to build a very cool and modular skin/styling system with Flash or Flex using their built in stuff is not easy (nor desirable). So it's best to
create a set of skins (and package them up as a theme)
wire skins to xml
let user modify xml
Avoid CSS, it's too processor intensive, unless you need advanced selectors like you'd use in HTML because it does make life easy. But for modularity and customizability (and performance), create Skins and wire them to XML.
I myself create a basic theme that I can use in all of my client projects, something that defines my style. That consists of 3 packages (myskins, mx, spark). In there, I copy/paste all the default Flex 3/4 skins and start customizing. You can download a Scale 9 Skin Project for free to have most components ready to skin and test. Then I just merge my design (photoshop or whatever) into Flex however you choose. For all the colors I reuse, I add them to a palette and eventually to XML. Then if I need a slightly different skin and I use that multiple times, I use CSS to define a new style for a skin (maybe a list with no background color or border). My CSS is very lean. Then I can just copy/paste my theme/palettes/css to new projects, modify it as needed, allow the user to edit the colors and positions via xml (or an admin interface) and I'm ready to go.
You can't do that much with just CSS.
Hope that helps.
Lance
I've always exclusively used CSS. You stated it best that it is approachable by anyone. We can delegate the design to people that have no idea how to code in actionscript and they have no problem working with the css and the style explorer (updated for flex 3 at http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html, haven't compared too much to find out whats different vs the flex 2 version).
If performance and flexibility are the two most important considerations for your skins, you should consider Programmatic Skins.
See: Programmatic skinning - QuickStart
To quote Adobe:
"One advantage of programmatic skinning is that it provides you with a great deal of control over styles. For example, you cannot control the radius of a Button control's corners with style sheets or graphical skins, but you can by using programmatic skins. You can also develop programmatic skins directly in your Flex authoring environment or any text editor, without using a graphics tool such as Adobe® Flash®. Programmatic skins also tend to use less memory because they contain no external image files."
Fore more info, you can also read "Creating programmatic skins" in the Adobe LiveDocs Help Docs.
While reviewing the tutorials and example Flex projects, they seem to focus mainly on form elements and data grids, rather than delivering content in a more visual way. Which is what I will need for this upcoming project. As a result, I have a gap in my comfort level that I'm hoping that a seasoned Flex developer can help me hurtle.
The project that I have is a collaboration index tool to display customers products and services using an user interface with four separate panels.
the top-left panel will contain a list of categories in a vertical scroll.
The bottom left panel will contain a wheel effect of sub-categories, based on the category chosen.
The top right panel will contain the detail information - The selected Category Title and Description. And below that, the selected sub-category title and description.
The bottom right panel will contain a list of the service and product items that belong to the sub-category. Below each item in the list will be a link-group accordion with url links for more information in each.
There will be an XML file containing the complete data tree driving this collaboration index.
Additionally, depending on the category chosen, color variances will occur in the background of the some of layout sections.
So, It appears that I will need to create a few custom components, maybe adopt a few existing components, and re-skin everything so that it carries a synonymous look and feel to the client's branding.
Although I have a bunch of questions, tackling the first section seems logical, and the first question that comes to mind in this section is: in the top left panel, should the list of categories be standard Flex buttons that are re-skinned? or should they be object instances somehow brought in to Flex.
Then in the second section, I was had seen a component that displayed images in a way that was perfect for this section. But, the items show here would be just visual, rounded corner blocks with subcategory names in them. So, I'm not sure if that component will work or not.
AS3 is very different from AS2. I'm sure you've noticed by now, but it's worth mentioning in case you hadn't.
Flex Components are basically just a package of Flash objects. So you can, sort of, write every Flex component on your own using just Sprites and/or TextFields. This includes skins. A skin is pretty much just a Shape attached to an object with custom drawing.
A button is just a combination of image+textField+skin, with all the events and skin transitions managed for you.
The reason I mention this is that there is no right way to do what you want. If you're using the List control, you should probably write a component that implements IListItemRenderer. Button does, so you can simply override the Button, no problems. You can have buttons with a label + icon. Or just icon. Or just a label. You can also define where the label is positioned relative to the icon (labelPosition="above|below|left|right"). There is a lot of built-in flexibility.
Thanks for the mention of FlexSpaces. Note that it was finally ported to Flex 4 including a first pass conversion to spark controls earlier this year. Still to do: add dependency injection with Spring ActionScript, remove use of Cairngorm 2.x.
I have been developing Flex 4 quite heavily the past 6 months and must say it would make your job very easy.
Here's what I would do:
1) Check out FlexSpaces for the best Flex 3 project architecture. It's a fully featured CMS in Flex with categories, tags, searching, filesystem, collaboration, etc.
2) Download the Flex 4 SDK and install that. There's no need to use Flex 3 anymore, if you're just getting started, DEFINITELY go with Flex 4. If you need custom components, Spark (the new component architecture) has a very simple way of doing them (here's a cool blog post building a Rating Component in Spark that shows you how do it). Flex 4 is backward compatible with Flex 3 components, so you can use projects/components you find on the internet if you want to, no problem.
3) For the top-left category list, if the categories aren't nested, I would use the spark.components.List, (here's one using more complex item renderers). Then just extend the spark.components.supportClasses.ItemRenderer, which acts just like a Skin. If categories are nested, just use the mx.controls.Tree. Check out that FlexSpaces project for that (they show how to use XML/ArrayCollections in the tree, your "object instances brought into flex somehow" question).
4) For the wheel effect, the only thing I don't like about Spark so far is that it's difficult to animate layouts. But people are starting to make 3D layouts, check out Here's 5 3D Layouts for Flex 4 by Ryan Campbell. There's also OpenFlux if you want very easily animated layouts. Flex effects in general are quite clunky, so I end up just using Tweener or TweenMax for animations.
5) As for reskinning, trying to reskin using the Flex 3 architecture would be a monumental task, if you wanted to make it look clean and nice, and it would be insane trying to reuse that code in the next project. For Spark, it's a snap, and it's 100% mxml. Just copy the whole sparkSkins folder from the SDK and start changing things, and you're good to go.
But yeah, that FlexSpaces project is a very solid example for what you're talking about. Totally open source.
Cheers