Modifying EmbossedNavigator

[Former Community Member]

Hi All - I'm working on some customizations to Workspace one of which is to change the EmbossedNavigator from an HBox to an HDividedBox. This was simple enough (import workspace code, make the change, and recompile). So now I can move the divider between the list view and the content area in "To Do", "Start Process", and "Tracking".



I also want to change the default width of the left side (list view). I'm having no luck doing it. The EmbossedNavigator constructor looks like:



public function EmbossedNavigator()

{

list.addEventListener(ListEvent.CHANGE, listChangeHandler);

list.width = 210;

list.percentHeight = 100;

list.setStyle("embossOpen", true);

list.setStyle("paddingLeft", 0);

list.setStyle("paddingRight", 0);

list.setStyle("paddingTop", 0);

list.setStyle("paddingBottom", 0);

_leftHandSide.percentHeight = 100;

_leftHandSide.setStyle("verticalGap", 0);

_leftHandSide.setStyle("horizontalAlign", "right");

_rightHandSide.percentHeight = 100;

_rightHandSide.percentWidth = 100;

_rightHandSide.alpha = 0;

verticalScrollPolicy = ScrollPolicy.OFF;

}



So it seemed logical to change the list.width from 210 to my new width. I did this and no change took place.



Anybody tried doing this or have any suggestions? My ultimate goal is to keep the divided box and set a maxWidth on the left side to be say 400, but as I grow/shrink the left side I'd like the list to grow/shrink accordingly.



Thanks!

Bryan

[Former Community Member]

I just got this to work. I think my browser may have been caching the swf.<br /><br />Anway, if anybody wants to know how to do this, here's what I did:<br /><br />1. Change EmbossedNavigator to extend HDividedBox<br />2. In the EmbossedNavigator constructor do the following:<br /> a. Comment out list.width = 210;<br /> b. add list.percentWidth = 100;<br /> c. add _leftHandSide.width = <some number>; <br /> d. <optional> add _leftHandSide.maxWidth = <some number>;<br /><br />In mine I made <some number> = 400 to make the left nav a little wider on start up, and to prevent the user from making it more than 400 pixels wide.

[Former Community Member]

One thing to note about this type of change. I've explored it in the past and decided to remove the functionality due to usability reasons. When you open a PDF document for example that displays the IFrame, and you click and drag the divider to the right over the IFrame, the IFrame will capture the drag and you're divider doesn't drag correctly. If you mouse back over the flex application however you've previously released the mouse button from the drag, the flex application still thinks the mouse button is pressed causing it to look like it's being dragged.



One thing I might suggest is adding a click handler to the divider to snap open, or snap close. Don't allow the user to drag the divider, things get a little wonky.



However, if you enable liveDragging on the HDividerBox things behave a little better.

[Former Community Member]

Thanks for the tip WorkspaceUser, however I've limited the width of the left side and I'm not seeing that effect you were talking about, it seems to work ok. I've also thought about the snap open/close but I wanted to do it on double click, and unfortunately when adding a double click handler to the divider it doesn't fire. I also thought about adding a snap handle to the divider (kind of like what you see in designer) but the BoxDivider class is hidden from ASDoc and very private so I haven't got around to trying to customize it.



Bryan