Is there an easy way to replace the ScrollPane scrollbar with the OS's native scrollbar?
Flash applications look much more integrated if they have the same skinning as the user's operating system -- which isn't always easy to detect (Vista Aero vs. Classic?).
Have you guys come across any examples of Flash apps doing this?
To set up something like this would be a big and dirty job. If you're that concerned with OS look-and-feel integration, you're probably better off using native browser controls rather than Flash or another plugin.
Arguably, you could break up your Flash application into separate SWF modules and put each of them into their own scrolling div or iframe in the page. You'd then have to communicate through ExternalInterface or LocalConnection to pass data between the SWFs. Personally, I'd only be willing to try that as a technical challenge to myself, but I doubt it would be worth the effort for a production application.
For the curious, we separated the scrollpane component into a self-contained swf and placed a set of two nested divs along the right and bottom side of the widget.
Using the vertical scrollbar as an example, the outer div was set to the height of the scrollpane and had a CSS overflow-x of hidden, and an overflow-y of auto. The child div was then set to some arbitrary width and a height equal to the height in px of the scrollpane's content.
The browser would display an appropriately sized "scroll grip" and we could quickly read the vertical scroll offset on the outer div to know how far to offset the Flash scrollpane. The same technique, with appropriate modifications, was used for the horizontal scrollbar.
We also included some logic to auto-hide the containers based on their overflow. The result matched native OS behavior pretty closely.
While this may sound like a huge hack, we were able to widely deploy the solution (scribd.com) without any major issues.
Hate to say it, but there is no way to do this. You could use an OS inspired skin/theme, but even then there's possibilities that the user could have modified their appearance settings with custom colors, sizes, etc.
Related
Is there a way to adjust the thickness of the scrollbars of a WebView using the stylesheet used by the whole JavaFX application?
I am a bit confused since
on the one hand I read that the scrollbars are not part of the JavaFX UI control and therefore can only be customized by a stylesheet set on the web engine (webview.getEngine().setUserStyleSheetLocation(..)) which means I have to write another CSS trying that the scrollbars look like all other scrollbars in the application
and on the other hand I can see that the scrollbars are obviously correctly customized using the JavaFX CSS except the thickness of the scrollbars (and that the vertical scrollbar is always shown even if the loaded page requires no scrollbars at all)
So where am I wrong and which is the correct way to solve this problem?
Thanks in advance!
I'm new to JavaFX, but I'm used to developing/designing applications in WPF for C#, and I want my window to be maximizable due to some hefty controls and lists. Is there an equivalent to WPF's margin in JavaFX so the controls will stay put when the window's size changes?
Thanks in advance!
No, there is no exact equivalent in JavaFX 8 to WPF margin support for all nodes.
A feature request to add node margin support is currently scheduled to be implemented for Java 9.
RT-27785 Add "margin" property to node and make it styleable from CSS
For the use case you detail (having controls stay put when the window's size changes), a couple of potential solutions are:
Use an absolute positioning layout container such as an AnchorPane.
Use a GridPane which has margin support.
Tweak the padding values on your nodes.
Set spacing for hbox/vbox style controls.
Using struts as outlined in James Weaver's (somewhat dated and slightly obsolete) document on JavaFX layout.
How is it possible to (automatically) adjust the height of a Flex (4) application at runtime so that only the HTML-page scroll bar is shown, not any Flex scroll bar?
I'm using a ViewStack control which will change always its content. So every time some new content (NavigatorContent controls) is shown (which apparently will have different heights) i want the application height to adjust its height in a way it is reflected in changing only the height of the HTML-page.
I have the slight feeling that this means changing the height of the SWF at runtime! Is this true? If yes how to tell the page ? Is this possible?
I hope i explained my problem as close as possible.
Thanks in advance.
If you haven't already come across a solution to this here's a blog post described a solution for this : http://blog.wezside.co.za/blog/fullscreen-flash-with-browser-scrollbar/
It's a little more then you may be looking for so here's the general gist of it:
Set the embedded swf in the html height to 100%
Then on page change in flash, use an ExternalInterface call to set the height of the container div to your flash content.
Enjoy browser scrolling for your flash/flex app :P
This is the solution which worked (for me)!
I'm developing a presentation tool for AIR (to be used together with, or as a replacement to, PowerPoint) but I'm quite a newcomer to flex layouting.
As you can see from the image, the presenter can open various apps from the main window.
Each of these apps open up in new windows which have different visual characteristics; some use the main content area to show graphics, others bullet points. Most app windows have buttons and view stacks with embedded Flash assets (using s:SpriteVisualElement).
My questions are the following:
1a. When developing a PowerPoint-like presentation tool with Flex, which layout type (basic, vertical etc.) will provide most flexibility?
1b. How do I make sure no clipping occurs on various projector screens - which aspect ratio should I have in mind?
2a. How can I resize children sprites in the SpriteVisualElement container proportionally to the window resolution?
2b. And where do I place this resize logic - on each component (sprite) with resizeHandlers or in one resizeHandler / window?
Please use the comment thread if you want me to elaborate further. Thanks.
Since you're new to Flex, I strongly reading up on the Flex Component LifeCycle.
1a. When developing a PowerPoint-like presentation tool with
Flex, which layout type (basic,
vertical etc.) will provide most
flexibility?
The layout you choose will depend on what you want to display. I don't see layouts as "Flexible". They do their job and position their elements appropriately. I can easily envision using all types of layouts in such a complicated application, each for different purposes.
1b. How do I make sure no clipping occurs on various projector screens -
which aspect ratio should I have in
mind?
I'm not quite sure I understand what this question means, but I take it to mean you want to avoid the presence of scroll bars in your app. To do that, you'll have to develop layout code that sizes and positions your children so that they do not extend past the height and width of your available content space. In Flex 3 (Halo) architecture, this would be done by writing an updateDisplayList() method for your component. In the Flex 4 (Spark) architecture, this would probably be done by writing an updateDisplayList() method for your skin class.
2a. How can I resize children sprites in the SpriteVisualElement
container proportionally to the window
resolution?
I believe my above answer already addresses this.
2b. And where do I place this resize logic - on each component
(sprite) with resizeHandlers or in one
resizeHandler / window?
In a resize handler, I would most likely use invalidateSkinState and/or invalidateDisplayList. The resizing code would be in the skin and/or updateDisplayList.
I'm working on a Flex 4 application and I started customizing the interface with skins to give a whole new look.
So, I've created two scrollbar skins in Flash Catalyst (one horizontal, one vertical).
Its working great when I test the application through Catalyst so I took it and imported it on Flash Builder, copied the components and defined the new skins in my css file for the HScrollbar and VScrollbar.
The skin is working, all the buttons are ok. But, the scrollbar isnt resizing for some reason. It remains in the same height I've designed it to be regardless of the content it is bound to.
It scrolls the content in all the ways it should be but it doesnt resize and the thumb isnt getting all the way down.
Also I've noticed the following.
I have a custom component acting as a list. It extends Group and contains a Scroller. So at one place of the application the Scrollthumb is getting lower than on another place where the same custom list is used.
I also have to mention that this scroller works perfectly without a custom skin.
Anyone else having similar problems?
Okay, I know you posted this a while ago but I have been scouring the internet for days looking for why the scrollbar's thumb wasn't scaling like the default scrollbar.
There are a couple things to check, first is there a set height on your thumb's skin?
If not, and this is what I was overlooking, go to your scroller skin and at the point where you add the vertical and horizontal scrollbar set the "fixedThumbSize" property to false.
I suppose that your graphic elements are defined as every single part of the scrollbar (top arrow, bottom arrow, track, etc...): in this case you should check that the elements dimensions are not fixed... they should be in % to be able to change the dimensions based on the container.