Add Button in TabNavigator Header - apache-flex

i want to add minmun/maximum button on tabnavigator header.......how i could be possible

put the tab navigator and a button in a canvas
set the X and Y of button Y=0 and X=tabnavigator.width - button-width-10
on click of button use Resize function set HeightTo=0 and heightFrom= tabnavigator.width
then play() the resize
to restore heightFrom=0 and heightTo=previous size of navigator
then you got the illusion of minimizing ang maxizing the tab navigator.. please do add some more effects of your desire..
Hope this gives you a idea on it..

Forget how it looks at first. Create a button that simply hides the TabNavigator. I'm sure there are plenty of tutorials out there on how to animate show/hide. Once you have that, move the button where you want it and style it as you wish.

Ive never heard of a tabNavigator header, but if you mean adding buttons to the tabs themselves, then theres an example and source code you could work from with FlexLib SuperTabNavigator

Related

addOnScreenMenu - Change properties of the main button

I'm working with the .addOnScreenmenu method on a ChartXY.
Demo: https://www.arction.com/lightningchart-js-interactive-examples/edit/lcjs-example-0706-onScreenMenu.html?theme=lightNew&page-theme=light&isList=false
Documentation: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#addonscreenmenu
I found that you can change the size of the fly out menu icons by changing the dimension, but I can't seem to find a way to change the size of the main button that triggers the fly out. Thoughts?

Can watir-webdriver click a css background-image or at an arbitrary position in the browser?

I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.

adobe flex datagrid selectable columns

I'm trying to make a Flex (Advanced)DataGrid component with some mechanism where the user can toggle the visibility of the columns. I've crudely implemented this by reading in the columns into the right-click menu, and when a column name is selected here, the visibility is toggled. It works, but it's not the most elegant solution.
Specifically, I'm trying to emulate the "datagrid" that Mozilla Thunderbird uses to display emails. Here is an image:
In the upper right, there is an icon over the scroll bar. If there is no scrollbar, the icon remains in the same place. When clicking the icon, it opens up a menu that shows all the possible columns, with the visible ones having a check mark next to them, like this:
Also, the scroll bar always appears under this button, never "pushing" it over into it's own column.
I'd like to re-create this in Flex. I believe the menu part and creating a column with a button headerRenderer is easy enough. But I can't figure out how (if at all possible) to do this with the scrollbar, because the scrollbar always seems to be "its own column". Any ideas or help would be appreciated. Thank you.
Ian
One dirty solution comes to mind. Create a component based on Canvas, then add an AdvancedDataGrid by overriding createChildren. Override updateDisplayList as well and add a button like the one in Thunderbird to the upper right of the Canvas. This will cause the button to appear over the DataGrid. Problemo solved?

Flex 3 - Custom tab navigator

I'm trying to create a custom tab navigator that has to look like this http://www.freeimagehosting.net/uploads/b470d024c4.jpg.
Also, when there's a rollover, the borders of the arrow have to be in blue (like the label in the current tab).
For that purpose, I've created a custom component: a hbox containing a label and a canvas with 3 images inside (for the arrow tip that has to change depending on the currentState).
Then, I thought of overlapping the components in order to get the blue highlight color (ex: arrow button 3 is over arrow button 4. The image of the arrow tip in button 3 will be transparent outside the arrow, so that we can see the black color of the following button).
I'm now trying to position the components inside the canvas ... but I cannot.
After the creationComplete event, I assign the label text and I was calculating the coordonates of the component but it doesn't take into account the label width... -_-'
Any ideas?
Thanks. Regards,
BS_C3
Read up on the Flex Component LifeCycle. You should be positioning and sizing your child components in the updateDisplayList() method; not in a creationComplete handler.
You should assign the label text in either commitProperties or createChildren depending upon when you know what it is.
If you want to share some code, we may be able to hone in on the exact problem. If you run code like this:
myLabel.text = 'Blahblahblahblah';
trace(myLabel.width);
I would expect that the width has not changed to reflect the new text because the myLabel has not gone through it's own component lifecycle steps yet.

moving image in a div by mouse draging and generating the css dynamically

I want to implement an image/div drag functionality like the one in the tinymce,
when the user click on the image, its border are selected and one can move the image/div around in the editor, and in the meanwhile it generate inline css as well..
Thanks...
You probably want something like jQuery UI's draggables, which allows you to make dragging movements with your mouse which will alter the dragged element's CSS accordingly. Use the start and stop events if you want to change the border color when it is being dragged.

Resources