How to create splash screen in tornadofx - javafx

I could not find any example, neither any resource on how to create a splash screen in tornadofx. I have a working splash screen in plain javafx along the same line of this example : https://gist.github.com/jewelsea/2305098
But, I have no clue on how to achieve it in tornadofx as it uses different paradigm with views and fragments instead of stage and screen.

You are not using the JavaFX preloader here as far as I can see, so this is really no different from opening one View while you do your loading, and then replacing that View with another View when you're done. Just point your app class to a SplashScreenView, handle your loading there, then do replaceWith(MainView::class) when you are done. In MainView, you might want to override the onDock callback and do currentStage?.sizeToScene() to make sure the window resizes to your desired size.

Related

Gluon Mobile 5.0.0 - New FAB behaviour causes trouble

In our app we use multiple floating action buttons. With Gluon 4.4.4 we added them as layers, which had the following behaviour:
Each view had it's own FAB.
When changing the view, the FAB was hiding.
When changing back to the view, the FAB was showing.
Now, with Gluon 5.0.0 (FAB's as objects) the following happens:
The buttons get stacked over each other, when they are not hidden.
When they are hidden and we change back to a view, the FAB is no longer showing.
This led to a lot of trouble and unnecessary code lines. How can we improve this or how is it intended to be used?
We could imagine to use one FAB for the whole app and exchange it's content for each view - however, this ends up in a bigger mess as well, since it would have to be declared public etc.
Any help is appreciated :-)
You are looking for the new FloatingActionButton#showOn(View) method.
This method makes sure to automatically show and hide the FAB depending on the View's showing property, removing most of the boiler code required in earlier versions to achieve the same functionality.
From the Javadocs:
Makes sure that the FAB is automatically shown when the supplied view is shown. The FAB also automatically hides when the view is hidden. This allows the developer to not worry about calling show() and hide() methods explicitly.

How to "embed" one window inside another

I have inherited a Qt-based app that handles the master/detail relationship by presenting the detail screens as separate windows. The main window includes a list, and when you tap on a row a separate detail window is opened up.
In the code base, the detail windows are handled by a QML file and a matching .cpp file (the main window also has its own .cpp file). The problem I am facing is that a new client wants me to modify this application for them, except that they want everything to occur within a single window. They want the list to be shown on the left side, and then when a user taps a row, the detail screen is to be shown on the right side of the window in its own panel (but not in a separate window).
For various reasons I can't easily refactor this application. A quicker solution for me would be to continue to present the detail screen in its own window, but to make it a borderless window and position this borderless window over top of the main window (on the right) so that it appears to be a panel within the main window.
Is something like this possible with Qt? I have written Windows apps in the past that hooked into the Windows API to do something like, but I don't know whether this is even possible in a native Mac OS app, so I don't know whether Qt can handle it in some way automaticaly.
One thing you could try is to create a widget based "main" window and then use QWidget::createWindowContainer() to wrap the QtQuick windows for positioning them with QtWidget means, e.g. layouts.

Best way to do loaders in a flex application?

What is the best way to do a loader in a flex application? I have an animated .gif that is to be used as our loader (whenever I need to wait for an action to complete), and I am not sure the best way to do it.
This is how I am thinking:
Have the loader be a custom component.
On the parent application, add an event listener for my custom event AceEvent.SHOW_LOADER.
In the event listener, use the PopUpManager to show the loader.
Listen for AceEvent.HIDE_LOADER.
Get rid fo the loader via PopUpManager.
What do you think about this? Is there a better way to do it?
Thanks!
Andrew
Well, last I checked, animated gifs don't work in Flex unless you have a workaround. Still, I wouldn't use an animated gif to create an animation because of their low quality. I would just recreate it using Flash.
The way I would do the loader however would be very different. personally, I don't believe in 'system loaders' unless it's your application's preloader. The reason for this is that there could be more than one thing loading at the same time (which might not know about each other) which means that the loader popup could disappear before everything is loaded (first one loads, dispatches event and removes popup, while the other is still loading).
What I like to do is create a custom component for the popup loader (since it will be reused quite a bit) and from there I can either use states the are appropriate for my view or have a boolean flag binded to show the popup when true (this can easily be done using frameworks like Parsley). The popup would only cover the part of the system that's actually loading data (since I doubt that your whole app is loading data at the same time) which makes for a better UX.
I ended up using as3gif (until I can get this recreated as a .swf). The way I do this is by using my custom event class (AceEvent.SHOW_LOADER and AceEvent.HIDE_LOADER), which bubbles up to the top. I then use the PopUpManager to add/remove this with modal to disable the application.

how to keep a nativewindow on top

I need to keep a NativeWindow I am creating on top of the main window of the application.
Currently I am using alwaysInFront = true, which is not limited to the windows in the application. I can successfully synchronize the minimize/restore/move/resize actions, so the top window behaves appropriately in those cases. Even though using this option has the drawback that if I alt-tab to other application the window goes on top of the other application.
Because of the above I am trying to get it to work without using the alwaysInFront. I have tried using orderInFrontOf and orderToFront, which gets it in place but when I click an area in the main window the top one becomes hidden i.e. air makes it the top one.
I have tried capturing activate/deactivate events but it only happens on the first click, so on the second click the top window becomes hidden again. I also tried making the top window active when the main one becomes active, but that causes the main one to loose focus and I can't click on anything.
Ps. I am doing this to improve the behavior of a HTMLOverlay I am using - see Flex Air HTMLLoader blank pop up window when flash content is loaded
Listening for Event.DEACTIVATE and calling event.preventDefault() should work. Not sure if that is what you have tried, but I have an app where that does the trick.
I ended up turning on/off the alwaysInFront option based on whether the main window or the top window were active i.e. if none where active I turned it off. This was additionally to what I mentioned in the question.
That way when the user switches to another application, the window doesn't go on top of the other apps. I still would prefer a solution where I don't have to use the alwaysInFront option, or even better an alternate solution to the flex loading flash in external sites issue I linked to above.
Ps. I will try to check with the owner of the HTMLOverlay to submit a patch (its an improvement, although its tied to an app that doesn't open extra windows when opening the overlay).
Update: I have committed the changes to the HTMLOverlay.
I'm trying to do something very similar. In an AIR application, I have one large full screen window which is essentially the "desktop". I always want this window to stay behind all other windows in my app. There are, however, some items on the "desktop" window that need to be clickable.
There appears to be no clean way to force a window to maintain its position in the window ordering.
What I've settled on so far, which isn't perfect, is to make all other windows in my app use the alwaysOnTop property but bind this to a global var (ugh) that I maintain to track the overall application level active/inactive state. This way, when I switch to another app, my windows don't float above the all other app windows - they correctly move behind as expected.
Then, I have a regular (alwaysOnTop=false) window that is fully transparent as an "overlay" to the desktop window on which I can place various interactive controls. This window is OK to come forward since it's transparent and my other windows are alwaysOnTop.
Finally, and crucially, I install three event listeners on the "desktop" window as follows:
protected function onApplicationComplete(event:Event):void
{
this.addEventListener(MouseEvent.MOUSE_DOWN, onClickHandler, true,1000,true);
this.addEventListener(MouseEvent.CLICK, onClickHandler, true,1000,true);
this.nativeWindow.addEventListener(Event.ACTIVATE, onActivateWindow,false,-1);
}
protected function onActivateWindow(event:Event):void
{
trace("sent via activate to back");
orderInBackOf(bigTransparentWindow);
}
protected function onClickHandler(event:MouseEvent):void
{
trace("sent via click to back");
orderInBackOf(bigTransparentWindow);
}
I'm not entirely happy with all this since there is still some occasionally noticeable flicker of objects in the overlay window - it appears that the "Desktop" window gets ordered in front of it, an update of some sort happens, and then it gets forced behind again.
Any better solutions welcome!

Air application created with Flex - How do I create a fly-out window to the left/right

I have an Air application with a main window. I would like to have a new window fly out from the side of the main window when the user clicks on a button in the main window. The window that appears needs to display information based on value passed from the main form. How can I achieve this with Flex Builder 3?
Target platform: any version of Flash/Flex/Air.
You'll probably want to use view states. Check out the Flex in one Week video tutorial on "Creating View States":
http://www.adobe.com/devnet/flex/videotraining/
What you want to do is what tweenMax was made for. it's a .swc that you add into your project. It will allow you to use the tweenLite (or tweenMax) command.
import com.greensock.*;
TweenLite.to(mc, 1, {x:65, y:117});
So you would say if your stage was 500 px wide and you want the box to come in from the right. Add the child at maybe 505, and then tween.to whatever x value you want. Yep. it's that easy. And the other parameters are for duration and easing and even alpha so you have control over that too. They even have a swf in the website so you an play with it and practice. http://www.greensock.com/tweenmax/

Resources