I am using Flare as my graphing library of choice for my current Flex project. Everything works great - my graph is being displayed correctly, but moving it poses a problem. The graph can be moved anywhere around the application, even outside of the graph's panel/container. It can even be placed on top of buttons and other GUI elements.
I need the graph to stay within its parent container, only able to move within its parent. I've spent numerous hours trying different approaches recommended by other Flare/Flex developers and nothing seems to work.
Some approaches I've tried: setting rectangular bounds on the graph's parent container, placing the parent container or the graph itself within a sprite object and setting specific bounds, and setting the clipToContent property appropriately.
I've found a few Flare demos online and each of the graph demos that are represented by nodes and vertices seem to have this same issue. This makes me thing that it's a Flare bug, but I don't want to jump to that conclusion yet.
Any help is greatly appreciated! Thanks.
I faced the same situation, and I solved it by creating a mask for my Visualization(solved or circumvented? lol):
--> in my .mxml
<mx:Panel width="65%" height="100%" layout="absolute" id="graphPanel">
<flexvis:FlareVis id="graph" label="Graph" width="100%" height="100%" />
<mx:Canvas width="100%" height="100%" id="graphMask" />
</mx:Panel>
--> in actionScript:
var vis:Visualization = graph.visualization;
vis.mask = graphMask;
There are two different issues causing this problem.
1)hitarea for panning and zoom. ->while using PanZoomControl, define the hitarea,like new PanZoomControl(here to specify the hitarea). It will help to solve the problem "mouse interactive out of the vis area cause the vis moving around";
2)mask to control the display area. It will help define the area to display your vis, or the vis will go out of the boundary.
Hope this helps:)
Related
I have a qml canvas with many elements, and when I zoom in, the elements needs to redrawn, if the canvas size grows too much, the rendering is delayed and quite visible.
I couldnt use the canvassize, canvaswindow properly to render only part of the scene, didnt find any proper examples to use this.
Could some expert please guide me with very minimalistic code.
Also, I see that these properties are marked as not to be used in future, does anyone know what is it that replaces ?
Regards,
Indrajit
I am having an interesting bug in MSIE8, only.
I have also tested this in MSIE7, MSIE9 and Chrome and could not reproduce it in those environments.
I have a flex application which is embedded in a webpage. The application has a few top level components. One is a mx:ViewStack which contains a number of different icons. The other is a mx:Canvas which contains a number of child mx:Canvas elements (which are used as layers to hold other UIComponents).
<mx:Canvas backgroundColor="#FFFFFF" id="drawing_area" borderColor="#000000" borderStyle="solid" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="728" x="10" height="522.8889" y="10">
...
</mx:Canvas>
The error occurs when I perform the following steps.
Load the page with the component
Let the component fully load
Scroll down so that the top of the flex content goes outside the bounds of IE8's content window.
When I do the above, the mx:Canvas with the border disappears. It can still be interacted with, but any content moved into one of the child elements also disappears.
In this first image you can observe my starting state, there is a border around the drawing area, and the drawing area can be interacted with.
This second image shows the issue, after additional scrolling down. The border disappears and all UIComponents placed into the drawing_area also disappear.
Unfortunately IE8 is still a popular browser in the organization this was designed for.
Anyone have any clues as to what might be happening. I have tried different wmodes for flash. I am currently using window, but have tried transparent as well, and have the same issue.
I have tried a number of different things to get a work-around for this bug without much success.
I am using Rails on the backend and this issue is tied to only the "new" action, and does not appear on the "edit" action. Both pages use a shared partial to render the content.
Because of this I am doing browser detection using the rails gem browser. When a user is using IE8 I provide a recommendation to upgrade. On the page that has this error occurs I am providing instructions to enter data for the required fields and then save their report. This will take the user to the "edit" action and they will be able to interact with the flash content without issue.
I am developing a Flex application in which I would like to simulate roughly what we get when we serach Google for images. When we pass the mouse pointer over an image, it enlarges a little bit so we can see it better and click it if we want.
I know I could just use an image and increase its size via mouseOver/ mouseOut events, but the thing is that it is much easier for users to realise that they're clickable when I use a button with an icon (as opposed to a plain image).
So here's the question. Is there any way to alter (in this case, its height and width) the button icon through the button methods/ properties?
I can explain it a little further if this is too confusing.
Thank is advance.
P.S.: The way I'm doing it now is by changing the src property of the icon to switch to another (larger) version of the same picture (that requires two versions of each pictures to be stored). However, I'm using the setStyle method to achieve that, which, according to the documentation itself, is not very good performance-wise. And it's so much easier to adjust the size than to have to load another picture which is just an old version of the previous one.
If your picture is enlarged only 'a little bit', you can get away with one (larger) version (just set smoothing = true on underlying Bitmap.) This also enables smooth transition from small to larger version. And hand cursor would be fine way to indicate clickableness, while very large buttons will look strange.
The question was already asked in these threads
Create a button with an icon in actionscript
Set the icon of a Flex button with a Sprite in runtime
According to them there is no graceful solution, but the task can be done via setStyle() or using this snippet:
http://blog.benstucki.net/?p=42
The another way is to use a hack like this (Transparent button over image):
<s:Group width="100" height="20">
<mx:Image source="picture_you_need.jpg" width="100%" height="100%" scaleContent="true" maintainAspectRatio="false"/>
<s:Button id = "test_button" width="100%" height="100%" alpha="0.0"}"/>
</s:Group>
I really hope there is someone that can help me out on this one. It took me days to implement a decent looking error skin for some custom text inputs but I am running into what seems to be a measuring issue with the resulting bitmap from validating.
I duplicated the Flex default error skin into my own class and just adjusted the GlowFilter to be "inner" and some color changes.
Setting the focus skin to NULL was an attempt to remove that styling since validation turns that thing red and applies it on top of everything else.
<view:PromptedTextInput id="inputCompanyName"
width="100%" height="35"
focusSkin="{null}"
styleName="promptedTextInput"
errorSkin="com.verical.common.skins.InnerGlowErrorSkin"
prompt="company name (optional)"
skinClass="com.verical.checkout.view.skins.PromptedUserInputSkin" />
Here is what I sometimes see happen randomly.
I have a problem with redrawing in flex 4. I have a spark titleWindow, and if i drag it faster, it looks like it's mask is one frame late after the component.
it's easily visible with 1pixel thin border, because it becomes invisible even with slower movement.
You can try it here (what is not my page, but it's easier to show you here than uploading example):
http://flexponential.com/2010/01/10/resizable-titlewindow-in-flex-4/
If you move in direction up, you see disappearing top border. in another directions it's not that sensitive as it has wide shadow, and it's not very visible on shadow.
On my computer i see it on every spark TitleWindow i have found on google, although it's much less visible with less contrast skins, without borders or with shadows.
Do you see it there? i had never this problem with halo components. It's doing the same thing with different skins. I tried to delete masks from skin, cache component, skin even an application as bitmap with no success.
I also turned on redraw regions in flash player, and it looks like it's one frame late after titlewindow too.
Does anyone know why is it doing this or how can i prevent it?
Thank you
UPDATE:
no answers? really?
I have been facing the same problem and I was really pissed that I couldn't find any answer.
The problem with me was, that I tried to center the component "component.x = (parent.width - component.width) / 2" and then draw that component programatically. The problem was, that component.x is a Number which can lead to floating values like 10.5 or similar. And it looks like that bitmapFill function rounds floats DIFFERENTLY than drawRect function, which makes exactly the 1px line around the objects (but ONLY when parent.width is an odd number). Strange thing for me was, that I only called the Draw function once, but still this line keep recurring ...
Doing Math.floor(component.x) solved the issue.
P.S.: I think that you can also help your issue by setting cacheAsbitmap=true on the dragged object ...
Cheers,
Jan Prazma