Is there a method to implement a splitter panel for desktop applications?
I'm searching for something similar to the SplitViewNavigator for mobile apps.
Is there a library or I have to write it myself?
Here is a picture of what I mean for splitter panel:
you can use Flex Mobile components for desktop Applications. I found this tutorial you could follow
After some days of research I find a method to implement the vertical splitter panel without relying on mobile components: I use a thin (4 pixels) button between the panels, then while drag and dropping this button, I change the width of the left panel according to mouse horizontal position.
Some sample code:
<s:HGroup>
<s:Panel id="panel1" width="50%" height="100%"/>
<s:Button width="4" height="100%"
mouseOver="mousePointerDrag()"
mouseOut ="mousePointerDrop()"
mouseDown="mouseDownHResize()"
mouseUp ="mouseUpHResize()"/>
<s:Panel id="panel2" width="50%" height="100%"/>
</s:HGroup>
The mouseOver and mouseOut change the pointer into a hand while over the split button:
private function mousePointerDrag():void
{
Mouse.cursor = "hand";
}
private function mousePointerDrop():void
{
Mouse.cursor = "auto";
}
the mouseDown and mouseUp enable a resize event listener to resize the panel1 width (panel2 will change accordingly):
private function mouseDownHResize():void
{
this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHResize);
}
private function mouseUpHResize():void
{
this.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHResize);
}
private function mouseMoveHResize(event:MouseEvent):void
{
panel1.width = event.stageX-4-4; // tricky part
}
The tricky part is to select the correct width of the panel1, in order to make sure the mouse pointer remains in the resize button when the mouse is released (in this case 4 pixels for the border.
Of course for horizontal splitter is something similiar.
I am new in ActionScript programming so this could be a bad solution, but it was the simpler I found so far; if other cleaner solutions are available they can be added to this question.
Related
I have an application that switches between touch and mouse interactions. On a as needed basis I change between the two. However, when I switch from touch to mouse the scroll bars have disappeared.
It seems like a bug. I'll post an example soon but basically just switch between modes:
scroller.setStyle("interactionMode", "touch");
// later:
scroller.setStyle("interactionMode", "mouse");
// scrollers are invisible after this call
Example code:
<s:Scroller id="myScroller" top="20" right="40">
<s:Group height="100" width="100">
<s:Rect width="100" height="400">
<s:fill>
<s:SolidColor color="red"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="blue" weight="2"/>
</s:stroke>
</s:Rect>
</s:Group>
</s:Scroller>
ActionScript:
protected function button1_clickHandler(event:MouseEvent):void
{
if (myScroller.getStyle("interactionMode")=="mouse") {
myScroller.setStyle("interactionMode", "touch");
}
else {
myScroller.setStyle("interactionMode", "mouse");
}
}
You have to click down on the scroller and move it while it's in touch mode and then the scrollers disappear and don't reappear.
The visible and includeInLayout properties are both true after setting back to mouse.
It looks like it has to do with some skin parts being reused but not being reset. From the Scroller design documents:
The first time Scroller detects it needs to display a ScrollBar it
will ensure one exists
Scroller detects that it needs to display ScrollBar at beginning of touch interaction mode or at skin attach time if interaction mode
is anything but "touch"
If the legacy ScrollBar part already exists, the Scroller will use that one else the ScrollBar will create an instance from the factory part, set the instance to the corresponding non-factory part and call
partAdded() for it.
For example Scroller will create an instance from
the horizontalScrollBarFactory part and will set horizontalScrollBar
to that instance with partAdded() being called.
I've looked at all the scrollbar parts and scale, visible and includeInLayout are all true or 1. So, it seems the only way is to force it to recreate the parts.
The below is a work around. It changes the skins, validates and then changes back to the original skin:
if (myScroller.getStyle("interactionMode")=="mouse") {
myScroller.setStyle("interactionMode", "touch");
}
else {
myScroller.setStyle("interactionMode", "mouse");
myScroller.setStyle("skinClass", skins.MinimalScrollerSkin);
myScroller.validateNow();
myScroller.setStyle("skinClass", spark.skins.spark.ScrollerSkin);
}
I tried using the default busy cursor in flex 4.6 mobile. But the busy cursor is very small compared to the one available in web application. Is it possible to increase he size of the cursor. I dont want to add image instead of cursor.Any ideas??
Or atleast is it possible to use the busy indicator component instead of the normal busu cursor?
Generally I stay away from the busy cursor for several reasons, including the fact that it is so small on mobile apps. The busy indicator is very easy to use and can be positioned and sized how you like:
<s:BusyIndicator id="myBusyIndicator" width="100" height="100" verticalCenter="0" horizontalCenter="0" visible="false"/>
Then, when you want to show it, set the visible property to true. For instance, if you are using a httpService you could do the below:
private function myResultHandler(e:ResultEvent):void
{
myBusyIndicator.visible = false;
//handle data results
}
private function myFaultHandler(e:FaultEvent):void
{
myBusyIndicator.visible = false;
//handle fault results
}
<s:HTTPService id="myHttpService" result="myResultHandler(event)" fault="myFaultHandler(event)" invoke="myBusyIndicator.visible = true"/>
How can I set something like corner radius for the default rectangle which appears when an item is hovered?
Your question is a bit non-specific, which is why people are down voting you.
If you're talking about a Flex Button; the rounded corners on roll-over are part of an FXG asset; which is not changed by use of the cornerRadius style. At least in the mobile skin; I imagine the desktop skin is similar.
We put together a mobile skin that will create a square button; and something that should have been trivial took a few days. It's available as part of the Flextras Mobile Flex Components Package and usable for free.
Here is a sample we put together to show the button differences.
You can use in a non-mobile project at your own risk, though.
Trival in Flex3.
You did not specify what you are styling so this is how I would style a button
<mx:Style>
.roundedbtn{
cornerRadius: 10;
}
</mx:Style>
<mx:Button id='btn' styleName='mybtnnormal />
// or in ActionScript
btn.styleName = 'roundedbtn';
// or without the styles
<mx:Button cornerRadius="10" />
The answer to my question is possibly easy, yet I haven't found an example of solving it in the web, nor have I found a solution reading ActionScript reference.
My problem is the following: I have a big UIComponent derivate element inside a Scroller (spark.components.Scroller) window. The Scroller class is great because when my canvas element, that changes size dynamically, exceeds its boundaries, scrollbars appear automatically and handle scrolling of my UIComponent inside it.
However, I'd like not just to be able to Scroll using these automatically appeared scroll bars, but also by using a pan tool that I will myself implement (similar to the hand tool in Adobe software, for example). The thing is that I am not able to modify correctly the element's position inside the Scroller window.
I tried, as a first approach, accessing to my elements' 'x' and 'y' properties, however, when changing them, I dont get the resulkts wanted. The code for it is the following (in which, for symplifying reasons, I used a text label as my 'inside' element, and two buttons as an external scroll controller, instead of a hand tool)
Tests.mxml
<fx:Script>
<![CDATA[
protected function der_clickHandler(event:MouseEvent):void
{
text.x += 5;
}
protected function izq_clickHandler(event:MouseEvent):void
{
text.x -= 5;
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Scroller id="sc" x="50" y="50" width="200" height="100">
<s:Group width="100%" height="100%">
<s:Label id="text" width="400" height="10" x="50" y="50" text="blebleblebleblebleblebleblebleblebleblebleble"/>
</s:Group>
</s:Scroller>
<s:Button id="der" x="154" y="182" label="->" click="der_clickHandler(event)"/>
<s:Button id="izq" x="76" y="182" label="<-" click="izq_clickHandler(event)"/>
</s:Application>
And a link to a compiled version, to see what I'm speaking about:
http://megaswf.com/file/1135821
(press 'view fullscreen' if you can't see it)
Help would be really appreciated, as I've been stuck all afternoon with this, and really need it for my project :S
Anyway, many thanks in advance, and regards!
I managed to solve it! (This is the second time this week that I solve something just after posting it here :D).
The property that I had to change is sc.viewport.horizontalScrollPosition+=5; instead of the internal elements 'x' position. And the same for vertical pos.
Here's my dilemma:
If I add buttons to a Sprite, I have to listen for the MOUSE_DOWN or CLICK event to make the button work as it should.
However, I want the sprite that contains the button to function like a touchscreen device, and I want the contents of the sprite to scroll up-and-down when you swipe it...
I am afraid the mouse events of the buttons will prevent the events from being captured by the container. This would mean that when I swipe over the button, the button get's clicked instead of the container.
I know Flex passes events down the chain of elements, but I don't believe this is the case for Flash.. ?
You should use MOUSE_UP event instead of MOUSE_DOWN, it's better practice, even if not to consider problems with scrolling. After there's nothing on MOUSE_UP you can hang
function onMouseDown(e: Event) {
flag = true
}
on MOUSE_DOWN. After that
function onMouseDown(e: Event) {
if (flag) {
//scrolling here
}
}
and dont forget to set flag=fasle on MOUSE_UP.