I fleetingly thought about porting my hotspot library to B4J, then with a closer look at JavaFX and the Scene Builder, I realized that all of the tools are already available. I ended up creating a code module - HotSpotManager, that will allow easier manipulation of the hotspots, mainly for amending Polygons points, but there are a couple of useful search routines too.
There are a couple of things that are different from B4A that are worth mentioning. Going through the demo app in order:
The JavaFX CSS Id field is used to store the identifiable object names and to generate them into the code as Dimmed variables. It is important to note that these are not exclusive. You can have multiple nodes with the same ID. This is similar to the EventName in B4A as callback subroutines except that this is the prefix for the subroutine names. Any Node that you use the same Id for will only be dimmed once and will use the same callback. I haven't got my head around what other issues it may cause for the way I do things in B4A, somethings may have to change but suffice it to say that I think TAG's will take on a greater responsibility.
There is no designated place to add tags in the Scene Builder, I tried using the Style field, but with the Scene Builder and B4J you need to use this field to style nodes with colour etc, so I decided to use a dummy style class prefixed with TAG:. This shouldn't cause any problems as the classes have to be used explicitly. I created a subroutine to extract the Tags and place them in the Tag field of the Nodes. (HotSpotManager.ExtractTags).
There appears to be a bug in JavaFX when you make a form non resizable, where it adds a number of pixels to the size. This is not usually a problem, but if you are trying to accurately place hotspots, it could cause an issue. AGraham provided a fix which is commented in the code.
Once you get used to using the JavaFX Scene Builder, everything else should be pretty straightforward.
The CodeModule contains:
HotSpot Manager
Author: Steve Laming
Version: 1
The Demo app has a picture with 5 hotspot areas, Balloons 3,4 and 5 were copied and rotated with JavaFX scene Builder, Rect1 gives a very rough approximation of the shape. Poly1 is redefined in code to give the shape of the balloon.
As you can see, there are many more possibilities using the tools available.
I hope this code module helps.
There are a couple of things that are different from B4A that are worth mentioning. Going through the demo app in order:
The JavaFX CSS Id field is used to store the identifiable object names and to generate them into the code as Dimmed variables. It is important to note that these are not exclusive. You can have multiple nodes with the same ID. This is similar to the EventName in B4A as callback subroutines except that this is the prefix for the subroutine names. Any Node that you use the same Id for will only be dimmed once and will use the same callback. I haven't got my head around what other issues it may cause for the way I do things in B4A, somethings may have to change but suffice it to say that I think TAG's will take on a greater responsibility.
There is no designated place to add tags in the Scene Builder, I tried using the Style field, but with the Scene Builder and B4J you need to use this field to style nodes with colour etc, so I decided to use a dummy style class prefixed with TAG:. This shouldn't cause any problems as the classes have to be used explicitly. I created a subroutine to extract the Tags and place them in the Tag field of the Nodes. (HotSpotManager.ExtractTags).
There appears to be a bug in JavaFX when you make a form non resizable, where it adds a number of pixels to the size. This is not usually a problem, but if you are trying to accurately place hotspots, it could cause an issue. AGraham provided a fix which is commented in the code.
Once you get used to using the JavaFX Scene Builder, everything else should be pretty straightforward.
The CodeModule contains:
HotSpot Manager
Author: Steve Laming
Version: 1
- HotSpotManager
Methods:- extracttags (Pane1 As Pane) As String
Adding Tags to Scene Builder using a style class TAG:{name}
This subroutine with extract the Tag and add to the Nodes Tag field within B4J
- findallnodesfromid (Parent As Node, ID As String) As Object[]
Find the All Nodes with the same ID as defined in JavaFX SceneBuilder
- findallnodesfromtag (Pane1 As Pane, TAG1 As Object) As Object[]
Find All Nodes with the TAG field value of TAG
- findnodefromid (Parent As Node, ID As String) As Node
Find the first Node from it's ID as defined in JavaFX SceneBuilder
- findnodefromtag (Pane1 As Pane, TAG As String) As Node
Find Nodes with the TAG field value of TAG
- gettag (EventData As MouseEvent) As String
For use within a click callback. From Code we can access the Tag Property directly
- logchildren (Target As AnchorPane) As String
List all children on the given AnchorPane - To the Log
- redefinepoly (Poly As Node, NewPoints() As Object) As Boolean
Redefine the points in Polygon
- extracttags (Pane1 As Pane) As String
The Demo app has a picture with 5 hotspot areas, Balloons 3,4 and 5 were copied and rotated with JavaFX scene Builder, Rect1 gives a very rough approximation of the shape. Poly1 is redefined in code to give the shape of the balloon.
As you can see, there are many more possibilities using the tools available.
I hope this code module helps.
Attachments
Last edited:
