skin the dropdownbox - apache-flex

i am wondering if there is a way to skin the whole drop down box, after searching Google i could only find thing like adding icons resizing and alike, but no full skinning of the box.
Is this at all possible and if so how? i would very much like my whole program to be skinned rather than everything but the drop down boxes.
I am more of a designer than a coder so as far as code goes I'm quite a novice with the code side, would be a great help if you could give me a point in the right direction and/or a quick insight how to do it.
in flex... sorry
Thanks.

i am wondering if there is a way to skin the whole drop down box,
Yes, create a custom skin class for the DropDownList, just like you would any other Spark class. You can use code for the DropDownListSkin as a reference point for creating your own. In Flash Builder, if you create a new MXML Skin; and specify the hostComponent as a DropDownList then you'll get the DropDownListSkin code as a starter point for your customization.
For more info, read these docs on skinning Spark Components.
We did, in essence, exactly this to create our Mobile DropDownList.

Related

Should children of a ContentPage be rendered too when using a custom renderer?

I’ve been using Xamarin.Forms for a bit lately and can generally get enough information following the Microsoft docs. But I seem to be stuck now that I need to create a custom renderer, so if someone could help, I’d really appreciate.
I read through the docs on creating a custom render and maybe I missed the part I’m looking for, but I’m not able to tell if as part of OnElementChanged, I also need to render all the children of the Element?
The ContentPage could have a StackLayout for example with several child elements. If I dont have to render these, how do they get rendered/laid-out?
No, you don't need to render ContentPage's children.
When you create a Custom Renderer you are only extending Xamarin's renderer, meaning you only add functionality (unless you explicitly change something, like redefining a property).
So, basically, the ContentPage render/lay-out the children the same way it renders/lays-out without the Custom Renderer.
Answering your second question, actually the layout and positioning is done without renderers, as said here Xamarin.Forms Layouts.
If you want to dig deeper, you can try to understand how the ContentView (it's the easier one) is positioned by reading the source code. Here the TemplatedView (ContentView's base class) is calling LayoutChildIntoBoundingRegion for each of its children: TemplatedView.
Then this line on the LayoutChildIntoBoundingRegion calls the Layout method of the view: Layout.
The VisualElement.Layout method only gets the rectangle and sets the Bounds of the view (Layout Method). The Bounds setter is called: Setter.
Well, now you can go on and explore more of the source code if you want, but I think you got the idea ;)
Hope it helps!

Flex: Custom context menu for a component

I have a Flex application, running with Flash Player, not AIR, that contains a Tree that I would like to put a custom context menu on.
Tried just doing <mx:Tree ... contextMenu="{MyClassWithStatic.menu}">, but that didn't do anything.
Went searching, and found this quote from some Adobe docs somewhere
In Flex or Flash Builder, only top-level components in the application can have context menus. For example, if a DataGrid control is a child of a TabNavigator or VBox container, the DataGrid control cannot have its own context menu.
so went upwards, trying each parent element until I reached my <Application>-element, which is consistent with what they wrote.
Tried making a Flex component, based on Group (the default) which contained my tree, and the context menu on the top-level element there, hoping it would work, but to no avail.
Is there any other way to manage this that I haven't found yet?
The code I use to create the menu:
var menuItems:Array = [];
var rename:ContextMenuItem = new ContextMenuItem("Rename");
rename.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, renameSelectedHandler);
menuItems.push(rename);
menu.customItems = menuItems;
menu.hideBuiltInItems();
You're right, the contextmenu only works on top level components. It's a limitation of Flex which is annoying and shouldn't be there in the first place. There's not much you can do since there is no way to capture the event other than using some Javascript trickery, but even then, it doesn't tell you where you were clicking.
If I were you, I would just forget the concept and go away from using right click altogether if possible.
I can't be sure, as all the code isn't' there. But you seem to have ignored your own research. Don't use your new component, or anything which "contains" your tree. Then just stick the Tree in your application.
Also I've a memory of TreeItemRenderer not being the same as in other UIcomponents. Maybe, test your "menu" code with a Datagrid first and make sure it works. Good luck
I did not try it myself, but after reading the comments on http://michael.omnicypher.com/2007/02/flex-trees-with-context-menu_14.html it looks like you could add a context menu to the tree's item renderer.
The article and comments at http://blog.arc90.com/2008/04/21/adding-a-contextmenu-to-a-flex-tree/ are worth a look too.

build tooltip for fxg button

I have a nice looking fxg button, to which I want to attach a tooltip- how do I achieve that without much hassle? (the spark button does this out-of-box, but is not very visually pleasing)
The examples I have seen on search is reverse- using fxg effects in the tooltip...
Thanks again for any guidance/ pointers
Typically you use FXG to draw the skin for a Button, then attach that skin to your Button (either by CSS or by setting the skinClass style on the button when it is declared.) That way you get all of the behaviors of a standard Button drawn however you like using your FXG. You do this by creating a new ButtonSkin based on the default spark ButtonSkin and replacing the default FXG with your own. You will then get the tool tip functionality for free. Hope that helps.

How to create a polldaddy like editor

Most of you here must have used polldaddy. I would like to get some advise from you guys about how can I design an editor like the one seen in polldaddy. Below is a screenshot.
On the left side there is a list of controls (Text box, list etc) and on the right there is a panel(editor). I can click and drag on of the control and as soon as I drop it in the panel it aligns itself int he panel and shows other options. How can I do this using asp.net? Any samples or ideas would be great.
Thanks
alt text http://hdwall1.googlepages.com/poll.JPG
you have a lot of work to do.
Ignoring your server side model, you cashould probably use jQuery/jQuery UI/ExtJS or any other UI framework to allow drag/drop sort functionality.
I am not familiar with PollDaddy but I imagine that there's a lot of code there to achieve a poll/form builder. You could look at their code too assuming its not packed.
hope this helps.

Adobe Flex - How to jump view?

I understand that we need to create MXML file to define a view. Suppose on user click of a button I want to show another view defined in another MXML file. How can I do this?
You could use a viewstack. each item in the viewstack would be a different MXML file so when the user clicks a button you change the selected index of the viewstack which makes the view change.
You could probably do with checking out the examples in http://www.adobe.com/devnet/flex/tourdeflex/ this will help explain so much more than a simple answer will.
From your question it sounds like you need to get the basics of flex first and the tour de flex app contains loads of examples with source code.
HTH.

Resources