I'm creating a rich text control that uses a WebView for display and HTMLEditor for editing. When I tried to add the control to Scenebuilder's custom controls an exception was thrown:
Exception for: com/spindotta/jfx/control/text/RichTextArea.class
javafx.fxml.LoadException:
at javafx.fxml.FXMLLoader.constructLoadException(FXMLLoader.java:2601)
...
Caused by: java.lang.IllegalStateException: Not on FX application thread; currentThread = LibraryFolderWatcher([library folder location])
...
at javafx.scene.web.WebEngine.checkThread(WebEngine.java:1216)
...
It seems that Scenebuilder tries to instantiate a WebView, which in turn tries to instantiate a WebEngine which seems to require an FX application thread, which the custom control doesn't generate.
Would be grateful for any ideas/workaround.
Thanks!
SceneBuilder has a built in mechanism that checks all the jars in the user library looking for custom controls.
For any given jar, that implies checking all its classes, looking for possible controls: concrete classes that are assignable from Node. Then it creates an instance for these and try to load it on the class path. If it works, it will be added to the library panel.
In case of your custom control, that includes a WebView node, this means that when your control is being checked by SceneBuilder, a new instance of WebView will be done. At this point you'll get the exception you mentioned:
Caused by: java.lang.IllegalStateException: Not on FX application thread; currentThread = LibraryFolderWatcher()
at com.sun.javafx.tk.Toolkit.checkFxUserThread(Toolkit.java:236)
at com.sun.javafx.tk.quantum.QuantumToolkit.checkFxUserThread(QuantumToolkit.java:423)
at javafx.scene.web.WebEngine.checkThread(WebEngine.java:1216)
at javafx.scene.web.WebEngine.<init>(WebEngine.java:856)
at javafx.scene.web.WebEngine.<init>(WebEngine.java:845)
at javafx.scene.web.WebView.<init>(WebView.java:271)
So the easy solution for this will be allowing the custom control to be loaded in the JavaFX application thread when being loaded in design mode by SceneBuilder.
This small custom control works for me:
public class WebControl extends StackPane {
private WebView webView;
public WebControl() {
if (Platform.isFxApplicationThread()) {
init();
} else {
// Intended for SceneBuilder
Platform.runLater(this::init);
}
}
private void init() {
webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.load("http://www.google.com");
getChildren().add(webView);
}
}
I tried to override styles for GWT DataGrid component like described here :
DataGrid / CellTable styling frustration -- overriding row styles
My interface
public interface DataGridResources extends DataGrid.Resources {
#Source({ DataGrid.Style.DEFAULT_CSS, "myDataGrid.css" })
DataGrid.Style dataGrid();
}
public static final DataGridResources dataGridResources =
Datagrid instance using Inteface
GWT.create(DataGridResources.class);
static {
dataGridResources.dataGrid().ensureInjected();
}
...
dataGrid = new DataGrid<User>(10, dataGridResources);
But I get the following error :
Rebinding xxx.DataGridResources
-Invoking generator com.google.gwt.resources.rebind.context.InlineClientBundleGenerator
--Creating assignment for dataGrid()
---Creating image sprite classes
----Unable to find ImageResource method value("cellTableLoading") in xxx.DataGridResources : Could not find no-arg method named cellTableLoading in type xxx.DataGridResources
--Generator 'com.google.gwt.resources.rebind.context.InlineClientBundleGenerator' threw an exception while rebinding 'xxx.DataGridResources'
-Deferred binding failed for 'xxx.DataGridResources'; expect subsequent failures
The following works. Really.
public interface Resources extends DataGrid.Resources {
interface Style extends DataGrid.Style { }
#Source(value = {DataGrid.Style.DEFAULT_CSS, "myDataGrid.css"})
public Style dataGridStyle();
}
Also you don't need to call ensureInjected() since DataGrid will call it for you.
Anyway there is something wrong in the error log: it looks for cellTableLoading style which is not part of the DataGrid.Resources interface (is part of CellTable.Resources). Have you left some spurious CSS classes in myDataGrid.css that are not defined in the original interface?
Maybe you have moved from CellTable to DataGrid by simply renaming the css, but without changing the inner class names.
I need to implement multi character type ahead functionality on a DropDownList. Im using spark components Flex 4.5.1.
I wish the long list to for example if I type bl
It will go to Blue not to the first B then the first L
Its a common requirement and all browsers now support it, hope its something that already exists or someone has customized a version.
Why wouldn't you use the Flex Spark ComboBox, which has the type ahead feature built right in?
You can probably customize one of the many autocompletes. I posted the following snippet in another question on how to do an autocomplete.
package autoCompleteExample
{
import mx.collections.ICollectionView;
import mx.collections.IList;
import spark.components.ComboBox;
import spark.events.TextOperationEvent;
public class AutoCompleteExample extends ComboBox
{
override protected function textInput_changeHandler(event:TextOperationEvent):void{
super.textInput_changeHandler(event);
ICollectionView(dataProvider).refresh();
}
override public function set dataProvider(value:IList):void{
ICollectionView(value).filterFunction = defaultFilterFunction;
super.dataProvider = value;
}
private function defaultFilterFunction(item:Object):Boolean{
return (textInput.text.toLowerCase() == String(item[labelField].toLowerCase()).substr( 0, textInput.text.length ));
}
}
}
You can probably just change the text operation handler to select the first item AFTER the refresh. Not sure how well it would work.
I'm building a video player using Flash CS4 (hereby referred to as "Flash") to create the graphic symbols and compiling and debugging with Flash Builder 4 ("FB4"). Here are the steps I take in my current workflow:
--Create the graphic symbols in Flash. I've created a few different symbols for the player, but I'll focus on just the play/pause button ("ppbutton") here.
--In the Library panel, I go to the ppbutton symbol's Linkage properties and link to a class named assets.PlayPauseButtonAsset that extends MovieClip. I do not actually have an assets package nor do I have a class file for PlayPauseButtonAsset as Flash will create them for me when I publish.
--In Flash's Publish settings, I set the project to export a SWC that will be used in FB4, called VideoPlayerAssets.swc.
--After the SWC is created, I create my FB4 project called "VideoPlayer" and add the SWC to my path. FB4 creates the class VideoPlayer in the default package automatically.
--In VideoPlayer.as, I import assets.*, which imports all of the symbol classes I created in Flash and are available via VideoPlayerAssets.swc. I can now instantiate the ppbutton and add to the stage, like this:
var ppbutton:PlayPauseButtonAsset = new PlayPauseButtonAsset();
addChild(ppbutton);
At this point ppbutton doesn't have any functionality because I didn't create any code for it. So I create a new class called video.controls.PlayPauseButtonLogic which extends assets.PlayPauseButtonAsset. I add some logic, and now I can use that new class to put a working ppbutton on the stage:
var ppbutton:PlayPauseButtonLogic = new PlayPauseButtonLogic();
addChild(ppbutton);
This works fine, but you may be asking why I didn't just link the ppbutton symbol in Flash to the video.controls.PlayPauseButtonLogic class in the first place. The reason is that I have a designer creating the UI in Flash and I don't want to have to re-publish the SWC from Flash every time I make a change in the logic. Basically, I want my designer to be able to make a symbol in Flash, link that symbol to a logically named class in Linkage properties, and export the SWC. I do not want to have to touch that .fla file again unless the designer makes changes to the symbols or layout. I'm using a versioning system for the project as well and it's cleaner to make sure only the designer is touching the .fla file.
So, finally, here's the issue I'm running into:
--As the design gets more complex, the designer is nesting symbols to position the video controls on the control bar. He creates a controlbar symbol and links it to assets.ControlBarAsset. The controlbar symbol contains the ppbutton symbol.
--The designer publishes the SWC and ControlBarAsset is now available in FB4. I create new class called video.controls.ControlBarLogic that extends assets.ControlBarAsset so I can add some logic to the controlbar, and I add the controlbar to the stage:
var controlbar:ControlBarLogic = new ControlBarLogic();
addChild(controlbar);
--This works, but the ppbutton doesn't do anything. That's because ppbutton, while inside controlbar, is still only linked to PlayPauseButtonAsset, which doesn't have any logic. I'm no longer instantiating a ppbutton object because it's part of controlbar.
That's where I'm stuck today. I can't seem to simply re-cast controlbar's ppbutton as PlayPauseButtonLogic as I get a Type error. And I don't want to have to make a class that has to instantiate each of the video player controls, the place them at their x and y values on the stage according to how the designer placed them, as that would require me to open the .fla and check the various properties of a symbol, then add those values to the code. If the designer made a change, I'd have to go into the code each time just to update those properties each time. Not good.
How do I re-cast nested symbols to use the logic classes that I create that extend the asset classes? Remember, the solution is not to link Flash symbols to actual classes so I don't have to keep recompiling the SWC, unless there's a way to do that without having to re-compile the SWC. I want the designer to do his thing, publish the SWC, and be done with it. Then I can take his SWC, apply my logic to his assets, and be able to debug and compile the final SWF.
Here is the solution that i use sometimes:
Instead of making PlayPauseButtonLogic extends PlayPauseButtonAsset, use this class as a warpper of PalyPauseButtonAsset, use composition instead of inheritance ! ; ).
You will get something like this in your ControlBarLogic class:
//constructor exemple
public function ControlBarLogic(){
//all logic of PPButton is inside PlayPauseButtonLogic
//you just pass a reference to the PlayPauseButtonAsset button contained inside ControlBarAsset
var ppButtonLogic: PlayPauseButtonLogic=new PlayPauseButtonLogic(refToButtonAsset)
//the warper class can extends EventDispatcher so you will be able to listen to custom or redisatched events
ppButtonLogic.addEventListener("ppPause",onPause)
}
hope it will help you
You can have two classes, one holding functionality and the other providing its graphical implementation (asset/skin)
Have PlayPauseButtonLogic extend AssetWrapper.
A simple way to solve your issue regarding event listeners, you can do the following:
package {
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import flash.events.IEventDispatcher;
public class AssetWrapper implements IEventDispatcher {
private var _skin:DisplayObjectContainer;
public function AssetWrapper( skin:DisplayObjectContainer = null ) {
if ( skin ) setSkin(skin);
}
public function setSkin(skin:DisplayObjectContainer):void{
_skin = skin;
}
public function dispatchEvent(event:Event):Boolean{
_skin.dispatchEvent(event);
}
public function hasEventListener(type:String):Boolean{
return _skin.hasEventListener(type);
}
public function willTrigger(type:String):Boolean{
return _skin.willTrigger(type);
}
public function removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void{
_skin.removeEventListener(type, listener, useCapture);
}
public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void{
_skin.addEventListener(type, listener, useCapture, priority, useWeakReference);
}
}
}
EDIT:
You can then, of course, just add as many properties/methods to AssetWrapper that delegate to the DisplayObject (skin) as you need. It also gives you more control onto those properties/methods.
i.e:
public function get x( ):Number {
return _skin.x;
}
public function set x( v:Number ):void {
if ( _skin.x = v ) return;
if ( _useWholePixels ) _skin.x = Math.round(v);
else _skin.x = v;
}
That way, for instance, you can tween your AssetWrapper instance directly. Also, you can control if you want it to be placed in round numbers (x=100) or not (x=100.5)
For methods, just the same idea:
public function addChild( child:DisplayObject ):DisplayObject {
return _skin.addChild( child );
}
Then to use it, you would extend AssetWrapper and implement a concrete behavior:
package {
import flash.display.DisplayObjectContainer;
import flash.events.MouseEvent;
public class SimpleButton extends AssetWrapper {
public function SimpleButton( skin:DisplayObjectContainer = null ) {
super(skin)
}
override public function setSkin( skin:DisplayObjectContainer):void {
super.setSkin( skin );
addEventListener(MouseEvent.ROLL_OVER, _onRollOver );
addEventListener(MouseEvent.ROLL_OUT, _onRollOut );
}
protected function _onRollOver(e:MouseEvent):void {
_skin.alpha = .5;
}
...
}
And you would use it as follows:
//you can get your graphical assets in many different ways
var buttonSkin:Sprite = new LibraryButtonSkin
//or
var ButtonSkinClass:Class = this.loaderInfo.applicationDomain.getDefinition("SimpleButtonSkin") as Class;
buttonSkin = new ButtonSkinClass;
var button:SimpleButton = new SimpleButton(buttonSkin);
button.addEventListener(MouseEvent.CLICK, _handleButton);
It is just a guide, in the real implementation you want to make sure you check for things like if a skin already exists, then remove all added listeners. You would probably could listen for an ADDED_TO_STAGE event and trigger a initialize method...
Also is a great to clean up after your instance by implement a destroy() method where you make sure all added listeners are removed and null/stop things like timers, sounds, etc.
Wow all the flow and we sunk in the finish line....
well, what about something like this
AbstractButtonBehavior
PlayButtonBehavior extends...
The trick, the graphic components should all implement some interface that allow them to pass a behavior at instantiation time, or even better, at runtime. The you just plug the login in, the logic will always remain outside and the poor assets will keep asking or answering to the same interface call, allowing you to work outside them.
could be?.
I'm experimenting with TextArea and inheritance to implement some additional functionality on the protected textField property.
Unfortunately, when I create a new instance of the subclass, this property is set to null. I'm probably misunderstanding the way super() works, but I thought it would have been instantiated after the constructor finished.
Here's a small snippet of code which extends TextArea:
public final class ExtTextArea extends TextArea {
public function ExtTextArea() {
super();
}
public function testTextField():void {
if (textField == null)
Alert.show("null!");
}
}
}
The invoking code is simple:
var extTextArea:ExtTextArea = new ExtTextArea();
extTextArea.testTextField();
The Alert in ExtTestArea appears every time I run this code.
Why is this? Is there something more I need to do to access the textField property?
Since textField is "the internal UITextField that renders the text of this TextArea" I believe it will remain null until you add it to the display via .addChild(...). I ran a quick test to verify that once I've added it to the display, it is no longer null. You might want to add an event handler to the "creation complete" event and adjust it at that point (I think).
The Flex SDK comes with source code, so you can take a peek and see when this field is initialized. It is not initialized in the constrcutor, but you will see that a new TextField instantiated by createChildren(), which is called when the component is added to a layout container.