tag:blogger.com,1999:blog-53562726737490850382024-02-20T11:44:29.674-08:00AdmedFXAdmedFX is a Patient Management System that I started developing in 2012 with FX 2.2. It has been in use by a medical practice since 2013 and has been upgraded to JavaFX 8. It is continuously being improved.Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-5356272673749085038.post-75327744726165187402014-04-09T05:15:00.000-07:002014-04-09T05:15:00.277-07:00FX 2.2 to FX 8.0 Part 1 (3rd party controls)<div style="text-align: justify;">
Java FX 8.0 was released a few weeks ago and since then I have been working at ironing out the glitches in my application, as unfortunately it wasn't 100% compatible. So I thought I'd share my experience for others.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
I encountered about 10 problems in getting the app to look and work correctly with FX 8.0, which I detail here in nine short blogs.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
My first challenge was actually just getting the app to compile in FX 8.0 without errors !</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The problem was that I had some 3rd party controls that were extending SkinBase, which was a non-public class in 2.2 It has now been made public in 8.0 but with API changes, so it isn't directly compatible. Depending on how the control handles any key or mouse events, converting from the one to the other isn't necessarily a straightforward exercise and results in the control only being able to work in FX 8.0 afterwards. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
After some thought I decided that I wanted my app to be able to work correctly in both FX 2.2 and 8.0, so that transitioning my user base over from the former to the latter didn't have to be an all or nothing scenario. So the offending controls were changed to implement Skin instead of extending SkinBase (thankfully I had access to the control's source code, some of which I had previously customised). </div>
<div style="text-align: justify;">
<br />
Implementing Skin is fairly easy and basically involves adding 3 methods which are mostly one liners (getSkinnable, getNode, and dispose), and then removing the super( X,Y ) call in the constructor where X is now returned by getSkinnable(). Also remove the getChildren().add( Z ) line if present, where Z is now returned by getNode().<br />
<br />
In both cases, either implementing Skin or making changes for SkinBase, moving behavior is more complex and involves a bit of coding especially for handling any KeyEvent's.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Once I had reworked the offending controls the app successfully compiled :-), but my joy was short lived .... see part 2.</div>
<div style="text-align: justify;">
<br /></div>
Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0tag:blogger.com,1999:blog-5356272673749085038.post-87449914750617663172014-04-09T05:10:00.000-07:002014-04-09T05:10:00.448-07:00FX 2.2 to FX 8.0 Part 2 (stage issues).... so I'd successfully gotten my app to compile. <span style="text-align: justify;">Once the app has started and if the user is a Doctor then an authentication ("Login") dialog is shown. This is what it looks like in FX 2.2:</span><br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpepPAOpJ70i475aJmkfb6769e0m2PDt-yYDjjdtPY44wjT4qZVx6panWcsPyQtuZoXw7ifgR_rHfm2AMnt_jKJu-eO1TqTAKK0alR1_vfReRORSUPAZfevZAMAz0UenOqT6PW0Kb-Q/s1600/FX+2.2+Login.png" imageanchor="1" style="clear: left; margin-bottom: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpepPAOpJ70i475aJmkfb6769e0m2PDt-yYDjjdtPY44wjT4qZVx6panWcsPyQtuZoXw7ifgR_rHfm2AMnt_jKJu-eO1TqTAKK0alR1_vfReRORSUPAZfevZAMAz0UenOqT6PW0Kb-Q/s1600/FX+2.2+Login.png" /></a></div>
<br />
And this is how it initially looked like in FX 8.0<br />
<br />
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3n8SsQukpL0eF486vWnorfdeQ_AmbrVwJL0lNXz2TuPoQPFeOZOXOTXE8VvVXEWhoSaYurktsXe7rCv1MC7u2UWiTsLawp2lbSjsBzft4o3Bj-nr0Z0faZx4jL9DNZG65bJQsFVjfnA/s1600/FX+8+Modena+Login.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3n8SsQukpL0eF486vWnorfdeQ_AmbrVwJL0lNXz2TuPoQPFeOZOXOTXE8VvVXEWhoSaYurktsXe7rCv1MC7u2UWiTsLawp2lbSjsBzft4o3Bj-nr0Z0faZx4jL9DNZG65bJQsFVjfnA/s1600/FX+8+Modena+Login.png" /></a></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2EhFqV0tIh9WSEpOWEeD3W4YEWQMaJf_v04ARdN32FKg1foPXQ6xr-1E6Il_FmUjfzyPfjUWjb-FIK1S8DS86nq9DaBkt9nPyEqBpjRVhEThlAWVudKUYqZ-Gds5riKxzbxVFApUcvQ/s1600/FX+8+ScenicView+Login.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2EhFqV0tIh9WSEpOWEeD3W4YEWQMaJf_v04ARdN32FKg1foPXQ6xr-1E6Il_FmUjfzyPfjUWjb-FIK1S8DS86nq9DaBkt9nPyEqBpjRVhEThlAWVudKUYqZ-Gds5riKxzbxVFApUcvQ/s1600/FX+8+ScenicView+Login.png" title="" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">FX 8 ScenicView VBox highlighted</td></tr>
</tbody></table>
<br />
<br />
Basically its composed of a VBox in a TitledPane that is displayed in its own undecorated, modal Stage over the main app stage. Here's the code:<br />
<blockquote>
Stage passStage = new Stage( StageStyle.UNDECORATED );<br />
passStage.initModality( Modality.WINDOW_MODAL );<br />
passStage.initOwner( primaryStage );<br />
<br />
Button okBut = new Button( "OK" );<br />
Button exitBut = new Button( "Cancel" );<br />
<br />
TilePane buttonBox = new TilePane(24,0);<br />
buttonBox.setPadding( new Insets(6,0,6,0) );<br />
buttonBox.getChildren().addAll( okBut, exitBut );<br />
buttonBox.setAlignment( Pos.CENTER );<br />
<br />
VBox passBox = new VBox();<br />
passBox.setAlignment( Pos.CENTER );<br />
passBox.setPadding( new Insets( 12,24,12,24 ) );<br />
<br />
PasswordField passField = new PasswordField();<br />
passBox.getChildren().addAll( new Label( "Enter Your ID" ), passField, buttonBox );<br />
<br />
TitledPane loginPane = new TitledPane( "Authentication", passBox );<br />
loginPane.setCollapsible( false );<br />
<br />
Scene loginScene = new Scene( loginPane, 200, 110 );<br />
passStage.setScene( loginScene );<br />
passStage.show();</blockquote>
<div>
<br />
I found that if the Stage style is changed to decorated it displays blank until resized, however if the style is set to utility then the content displays correctly ?<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92pflCIuxztLD2F0x_5MWLSM4CykBZxEU7-Cw2cnVDtWYtpssAmSIEKxKdU7-BYCeCTIjkleWdiRl2BbFHnUCZllOtSjEV9-7xy25LypIIY7DoIrYKgNDy3vRxudYukeJx4Ft3pipVA/s1600/FX+8+Decorated+Stage+Login.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92pflCIuxztLD2F0x_5MWLSM4CykBZxEU7-Cw2cnVDtWYtpssAmSIEKxKdU7-BYCeCTIjkleWdiRl2BbFHnUCZllOtSjEV9-7xy25LypIIY7DoIrYKgNDy3vRxudYukeJx4Ft3pipVA/s1600/FX+8+Decorated+Stage+Login.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">FX 8 Decorated Stage</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4yfoSV8uGSxth62jkRnbjtoF2q7T268GIQEz0vLxF_mb3NZcvNrFnwC37evh_0diQDixk9igXJ65yx4nlo9m_7t0ehuOKBqKlCMhnun56GJQXF0SYd-M3nAKxGephPRBeUnZ4K3adVg/s1600/FX+8+Utility+Stage+Login.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4yfoSV8uGSxth62jkRnbjtoF2q7T268GIQEz0vLxF_mb3NZcvNrFnwC37evh_0diQDixk9igXJ65yx4nlo9m_7t0ehuOKBqKlCMhnun56GJQXF0SYd-M3nAKxGephPRBeUnZ4K3adVg/s1600/FX+8+Utility+Stage+Login.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">FX 8 Utility Stage</td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
So with all these clues I fiddled around a bit and found that if I rather set the VBox size and leave out the Scene size it works, like so:<br />
<blockquote class="tr_bq">
passBox.setPrefSize( 200, 110 );<br />
Scene loginScene = new Scene( loginPane <strike>, 200, 110 </strike>);</blockquote>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-RzzGUjj_b9HnG-d-_Ha8uwYEN9KDYucr_-VDHm5fUnDjZMQqbnyPEpEta51ROWdBHvplE6kI393I3PBOHC92uIgrEDHK5-6R1xUQ4oJYt_xyIqjQuN1EzarK2SD3tICp3kPYu1_WzQ/s1600/FX+8+Login+Fixed.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-RzzGUjj_b9HnG-d-_Ha8uwYEN9KDYucr_-VDHm5fUnDjZMQqbnyPEpEta51ROWdBHvplE6kI393I3PBOHC92uIgrEDHK5-6R1xUQ4oJYt_xyIqjQuN1EzarK2SD3tICp3kPYu1_WzQ/s1600/FX+8+Login+Fixed.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">FX 8.0 Modena</td></tr>
</tbody></table>
<br />
Finally logged in and started to check out the scene .... see part 3.<br />
<br /></div>
Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0tag:blogger.com,1999:blog-5356272673749085038.post-33560086985649305822014-04-09T05:05:00.000-07:002014-04-09T05:05:00.697-07:00FX 2.2 to FX 8.0 Part 3 (spacing & layout)<br />
Ok, so now I can login and can start checking out various views and editors. Two things got me here:<br />
<br />
<div style="text-align: justify;">
1. The first is that the vertical height of TextFields are different in Modena. So unless your layout can auto grow vertically things become a bit squashed, especially if its compact:</div>
<br />
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88fiai6NYbECIlmCN3EqcojmW2Qxn4r0psKCThq5sSWUEqdpKnbuhS9FG7c7n51z05yHnlAWjpa_jFhG4smZZ__dB03azPMeNHI22ghNgl2plU76EW65ia7dCX_YKKDLK42Vek_9dKw/s1600/FX+8.0+Diagnosis.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88fiai6NYbECIlmCN3EqcojmW2Qxn4r0psKCThq5sSWUEqdpKnbuhS9FG7c7n51z05yHnlAWjpa_jFhG4smZZ__dB03azPMeNHI22ghNgl2plU76EW65ia7dCX_YKKDLK42Vek_9dKw/s1600/FX+8.0+Diagnosis.png" /></a></div>
<div>
<br />
In FX 2.2 it looked like so:
<br />
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiClNtCZUnv_SlvHipsU9oWKyroRaj8F0PLCt-FaKtR-1Je4k_YGOQaAwkAFNWUK8loiZSyc146UXj9CrdDZ52uVE35L4unGqYMzxZ9J3z_qUMUiQclwLXpo6CZRQ5QI3UQZv7SnewCpA/s1600/FX+2.2+Diagnosis.png" /></div>
<br /></div>
<br />
<div style="text-align: justify;">
I used a GridPane for the above layout but I hadn't specified a vgap, nor a top and bottom inset padding in FX 2.2 as it wasn't necessary. After adding a vgap="2.0" to GridPane, and padding of top="4.0" and bottom="2.0" it looked better:</div>
<br />
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoBuZxWphzTXo2hjKkxex9Iinnz2y2kvDztitJpUiON3bpEmCF0KC8bXl8RN_2nnQG7iHBbiWRveYa1rM9ZoBIGJqg_s_KC_DfKHDStycEA8NzFSx1n5wc17Ss5e-46kTAc-gg4LA5w/s1600/FX+8.0+Diagnosis+Adjusted.png" imageanchor="1" style="clear: left; display: inline !important; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoBuZxWphzTXo2hjKkxex9Iinnz2y2kvDztitJpUiON3bpEmCF0KC8bXl8RN_2nnQG7iHBbiWRveYa1rM9ZoBIGJqg_s_KC_DfKHDStycEA8NzFSx1n5wc17Ss5e-46kTAc-gg4LA5w/s1600/FX+8.0+Diagnosis+Adjusted.png" /></a></div>
<br />
And with FX 8.0 Caspian it looks like so:
<br />
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQhyphenhyphenHawVQLidw4C4nUzYuyh3JMeiEHw-o4yQT0SZvS9inbIFkfdQqVNqJYuMrzH0ZVTJCvI-4U2gX_I0AOhRadn6GVrliWHTRZpCa6u6ZmzdyTRwwOLaoUC24MW50K-6KTme7C1QA-g/s1600/FX+8.0+Diagnosis+Caspian.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQhyphenhyphenHawVQLidw4C4nUzYuyh3JMeiEHw-o4yQT0SZvS9inbIFkfdQqVNqJYuMrzH0ZVTJCvI-4U2gX_I0AOhRadn6GVrliWHTRZpCa6u6ZmzdyTRwwOLaoUC24MW50K-6KTme7C1QA-g/s1600/FX+8.0+Diagnosis+Caspian.png" /></a></div>
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: justify;">
2. The second snag was that because of the above some of the screens that I had designed when first using SceneBuilder and the default AnchorPane didn't adjust well to Modena. Labels and TextFields sometimes became ever so slightly out of line changing a GUI that was smart into something sloppy. Other times fields would creep up or encroach on one another because they were too close:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsUitMZjH353Fp0qaFy9t0uSB1z4q97Y2yOLdzgEuQ4_lRB6Z3KHfDYHv1mU7ttNxeDbPuObUveG__t96H7SgMU2uI2O0TfnbSNKedCXY8gudfTR9l-u3I_EICDAQ0Gzh1O_8FvFb9_g/s1600/FX+8.0+Clinical.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsUitMZjH353Fp0qaFy9t0uSB1z4q97Y2yOLdzgEuQ4_lRB6Z3KHfDYHv1mU7ttNxeDbPuObUveG__t96H7SgMU2uI2O0TfnbSNKedCXY8gudfTR9l-u3I_EICDAQ0Gzh1O_8FvFb9_g/s1600/FX+8.0+Clinical.png" /></a></div>
<br />
And this is how it looked in FX 2.2:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaVIoYLMvKkGtNkaep5bO9irtSTHYwxMzUOuqv_PGdXTj3DjgLLkr28pmYD1fz8kz7_A63AO-9kVndm0of4jXsAaZGHo1zNxnEHUOhVmhIfHgku2qSTKV0HMMzV7rfTr2dheAQjZv0xw/s1600/FX+2.2+Clinical.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaVIoYLMvKkGtNkaep5bO9irtSTHYwxMzUOuqv_PGdXTj3DjgLLkr28pmYD1fz8kz7_A63AO-9kVndm0of4jXsAaZGHo1zNxnEHUOhVmhIfHgku2qSTKV0HMMzV7rfTr2dheAQjZv0xw/s1600/FX+2.2+Clinical.png" /></a></div>
<br />
So some screens needed to be redone using GridPane and others I could just adjust the space between components, like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzXvTcYpakdZo1qNQr2WJGLqQmlxX6lSwhQqGzGNvFE_2NZrdsPaipQGhW6Fml1Rpxmf8eODh9dESqtWgfUdm7UHmAuoO_OHHlpnmydMcr9L-ylSr0tgb5HYddZPGto56Mof4F-CvTg/s1600/FX+8.0+Clinical+Adjusted.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzXvTcYpakdZo1qNQr2WJGLqQmlxX6lSwhQqGzGNvFE_2NZrdsPaipQGhW6Fml1Rpxmf8eODh9dESqtWgfUdm7UHmAuoO_OHHlpnmydMcr9L-ylSr0tgb5HYddZPGto56Mof4F-CvTg/s1600/FX+8.0+Clinical+Adjusted.png" /></a></div>
<br />
<br />
Next some shocking Tree behavior .... see part 4.<br />
<br />Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0tag:blogger.com,1999:blog-5356272673749085038.post-19104766983830905422014-04-09T05:00:00.000-07:002014-04-09T05:00:01.395-07:00FX 2.2 to FX 8.0 Part 4 (trees & tables)Next I checked how TreeView was holding up to the change to FX 8.0 At first everything looked great until I started collapsing and expanding nodes which then made a mess, see the last two items (they shouldn't even be there, but are leftovers from the previous two items):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWqAjoowg54Bczu2hglZyjZOVLwoOZFjLgM74ATWi65uB4L8zMe8MT3KEPSSXfcaHykEGusfaEcdrWaI-hp-81z_k6NrHlTSveFBRZbSyXo-3OHfNeAvLZuHik1PLB64tKvMR15093g/s1600/FX+8+Script.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWqAjoowg54Bczu2hglZyjZOVLwoOZFjLgM74ATWi65uB4L8zMe8MT3KEPSSXfcaHykEGusfaEcdrWaI-hp-81z_k6NrHlTSveFBRZbSyXo-3OHfNeAvLZuHik1PLB64tKvMR15093g/s1600/FX+8+Script.png" /></a></div>
<br />
<br />
This is how it looked in FX 2.2:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLktQlUiuvRr_LU7KDSeBm2HVqJN4ESF9pRlY03BXqo8eHSPjdLpSOPDQpDRZ28aemjxeAHZN1kvJE9HRqYTFW0qe4iDgvkPcRVQ8aMc9kdzEUo7ay0fTunIj1XH7TRNox-XYLfZXTw/s1600/FX+2.2+Script.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLktQlUiuvRr_LU7KDSeBm2HVqJN4ESF9pRlY03BXqo8eHSPjdLpSOPDQpDRZ28aemjxeAHZN1kvJE9HRqYTFW0qe4iDgvkPcRVQ8aMc9kdzEUo7ay0fTunIj1XH7TRNox-XYLfZXTw/s1600/FX+2.2+Script.png" /></a></div>
<br />
<br />
<div style="text-align: justify;">
I figured something had changed in TreeCell so I had a look at the docs and Oracle tutorials (A BIG thank you for those :-) but actually didn't see anything new. So I decided to mimic one of their examples and see what I'd get. In the end it turns out that I wasn't correctly handling empty tree cells. (It maybe that FX 2.2 did this for me, but FX 8.0 sure wasn't.) So this is very important for TreeCell as well as <u>TableCell</u> where I had a similar problem:</div>
<br />
<blockquote class="tr_bq">
public void updateItem( Object item, boolean empty )<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>super.updateItem( item, empty );<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if ( empty ) <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b><span style="color: orange;">setGraphic( null );<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>setText( null );</span></b><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>setGraphic( <i>itemGraphic</i> );<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>setText( <i>itemText</i> );<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
}</blockquote>
<div>
<br /></div>
<div>
The result after fixing things up:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYVhHq7ix0FQsoNy6Czn39nRPQ5UHZ4mo9TZBDVP42dAZlTwTI0ZkwRC_JO068oyX4FbGFt0A8NOThPiEVyepkb4nfp1Ft0dOV0r_0bLHCTc4ZNQBBTpzLlPiUsurEvrgiEGXnwcPHg/s1600/FX+8+Script+Fixed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYVhHq7ix0FQsoNy6Czn39nRPQ5UHZ4mo9TZBDVP42dAZlTwTI0ZkwRC_JO068oyX4FbGFt0A8NOThPiEVyepkb4nfp1Ft0dOV0r_0bLHCTc4ZNQBBTpzLlPiUsurEvrgiEGXnwcPHg/s1600/FX+8+Script+Fixed.png" /></a></div>
<br />
<br />
Next up, where's my carrot ? Sorry I meant caret .... see part 5.<br />
<br />Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0tag:blogger.com,1999:blog-5356272673749085038.post-77369559880755621802014-04-09T04:55:00.000-07:002014-04-09T04:55:00.105-07:00FX 2.2 to FX 8.0 Part 5 (caret)I have a sticky note like widget on one of my views. Its actually just a TextArea with some effects on it, here's how it looks in FX 2.2 when its empty:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8uh9TxkDFYyfs8GDUN8c8TwlJsUmK8LwOExhksVMFlnkXgZgy8KwlzYWYngy4z35zOkKCFnRIk0GwCvLl25f825jkW-yxSsFPhJaa2KDATvclXTxGqCqhJJxxeaoy0GtpVgNcJTcTw/s1600/FX+2.2+Reminder+Blank.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8uh9TxkDFYyfs8GDUN8c8TwlJsUmK8LwOExhksVMFlnkXgZgy8KwlzYWYngy4z35zOkKCFnRIk0GwCvLl25f825jkW-yxSsFPhJaa2KDATvclXTxGqCqhJJxxeaoy0GtpVgNcJTcTw/s1600/FX+2.2+Reminder+Blank.png" /></a></div>
<br />
When you click on it its supposed to receive focus and then the cursor or caret appears so that you know where you are typing, like so in FX 2.2:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2r3gGrD78LdHFdF405gqLlHix5wWTuy_tPn-RXafcWUgTH-CP1Chehbp9VowsGmc4KS1luIIiP50c0Ilyv_9PpNJRMzLkY6ABB5PpzZYGSHn7nHLoApzxvRvAZ4kZC1vZwVSGRWKMw/s1600/FX+2.2+Reminder+Focused.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2r3gGrD78LdHFdF405gqLlHix5wWTuy_tPn-RXafcWUgTH-CP1Chehbp9VowsGmc4KS1luIIiP50c0Ilyv_9PpNJRMzLkY6ABB5PpzZYGSHn7nHLoApzxvRvAZ4kZC1vZwVSGRWKMw/s1600/FX+2.2+Reminder+Focused.png" /></a></div>
<br />
But in FX 8.0 there's no caret, you can click all you want and it doesn't appear. So what's the user to think ? Can I type or can't I type .... that is the question.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigeSHgpHjukZkpQhiEHfh1ucGCYql6pjOJn6JlrHb4nRHIQ2US8uqGKcslfuAKVKI-ini-SetwU6Akbdi8iUeejx68An0V4lPf329Sg-IptJqIWyYaTDVRGqS3pIGcAkwyo_Y5JZJDvA/s1600/FX+8.0+Reminder+Focused.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigeSHgpHjukZkpQhiEHfh1ucGCYql6pjOJn6JlrHb4nRHIQ2US8uqGKcslfuAKVKI-ini-SetwU6Akbdi8iUeejx68An0V4lPf329Sg-IptJqIWyYaTDVRGqS3pIGcAkwyo_Y5JZJDvA/s1600/FX+8.0+Reminder+Focused.png" /></a></div>
<br />
Well it turns out you can type and as soon as you start the caret appears. But I don't think that's a good user experience, they need feedback.<br />
<br />
Technically what happens when you click on the text area is that some effects and css are applied to the node and "Click here to add Reminder" is replaced with an empty "" string, like so:<br />
<div>
<blockquote class="tr_bq">
styleList = reminderNote.getStyleClass();<br />
styleList.remove( "reminderoff" );<br />
styleList.add( "reminderpresent" );<br />
reminderNote.setEffect( shadowAndSepia ); // Sepia can't be specified in css ?<br />
reminderNote.setText( "" );</blockquote>
</div>
<div>
An adequate solution I found was to just replace the empty string with a space instead: </div>
<blockquote class="tr_bq">
reminderNote.setText( "<b> </b>" ); // note the space</blockquote>
Problem solved, then I had some scroll pains .... see part 6.<br />
<br />Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0tag:blogger.com,1999:blog-5356272673749085038.post-82859880825208664992014-04-09T04:50:00.000-07:002014-04-09T04:50:00.757-07:00FX 2.2 to FX 8.0 Part 6 (scrollpane)<div style="text-align: justify;">
I have a view in which data from previous appointments are displayed side by side in a grid. The entire view is comprised of a number of GridPanes, one of which forms a header grid at the top (think table column header). This GridPane is inside a ScrollPane synchronized with the main data grid's own ScrollPane, below it. In FX 2.2 a section of the header and main grid looks like so:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTbCpz1WpOyDbZZxtwpi804Y4fDy6YzCCn5J83C4bUuDSwbsVAsrnt_p7BG4ji5HVfw5VxzMBzWvtqmKZ4jA1ILtAH5DMUqR8_chR02LLiYrE0AAk_aNwPsUzi5g5bYd8bngp6Xq8WMg/s1600/FX+2.2+ScrollPane.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTbCpz1WpOyDbZZxtwpi804Y4fDy6YzCCn5J83C4bUuDSwbsVAsrnt_p7BG4ji5HVfw5VxzMBzWvtqmKZ4jA1ILtAH5DMUqR8_chR02LLiYrE0AAk_aNwPsUzi5g5bYd8bngp6Xq8WMg/s1600/FX+2.2+ScrollPane.png" /></a></div>
<br />
<div style="text-align: justify;">
If you look carefully at the top right hand scroll bar you'll notice that the bottom arrow is missing. The top scroll pane is actually bigger than what is shown but its tucked away behind something. This didn't bother me in FX 2.2, to be honest I think I only noticed it now while doing this blog ! However in FX 8.0 this is no longer the case and it initially looked like so:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY0j1aD_R0Mp090p82T5tMyloOzYEfzkmggtoxQ8rXyK546lpc1hQHVxkJfWOfKFwaoe9Te8C_1dLRo7hbYhHxFeiVIQvsEOVBEsOdL4VflSxihMCQpeD4G_5KuLe286eDh9PbxYENLg/s1600/FX+8.0+ScrollPane.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY0j1aD_R0Mp090p82T5tMyloOzYEfzkmggtoxQ8rXyK546lpc1hQHVxkJfWOfKFwaoe9Te8C_1dLRo7hbYhHxFeiVIQvsEOVBEsOdL4VflSxihMCQpeD4G_5KuLe286eDh9PbxYENLg/s1600/FX+8.0+ScrollPane.png" /></a></div>
<br />
<div style="text-align: justify;">
See how the bottom arrow of the top scroll bar is now visible but now there's a gap between the top header grid and the main grid under it. Well I didn't like it, the gap had to go ! I used ScenicView (thanks for this tool) to discover that the gap was coming from the scroll pane and not the grid pane. So I figured it must have a minimum or preferred height that is preventing it from being smaller. The answer was: <b><span style="color: orange;">headerScroll.setMinHeight( 0 )</span></b> with the following result:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7XYPRqliltwoeSuZ6jdWrGNCH5wnhfmgxTG7Y3YaTQElCv5T7-bPFZR1J1j2SI5xCOMyB_Mj1ST-JnEaDsXUl0GDF72TauRIgm9yoljyXqDxjyz_PSQT1T2QCGGuCY0NEFhyr-Aztpg/s1600/FX+8.0+ScrollPane+Fixed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7XYPRqliltwoeSuZ6jdWrGNCH5wnhfmgxTG7Y3YaTQElCv5T7-bPFZR1J1j2SI5xCOMyB_Mj1ST-JnEaDsXUl0GDF72TauRIgm9yoljyXqDxjyz_PSQT1T2QCGGuCY0NEFhyr-Aztpg/s1600/FX+8.0+ScrollPane+Fixed.png" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Unfortunately that isn't the end of my scroll pains. The main or center grid's scroll pane position is bound to a left hand row label grid scroll pane as well as the header pane above it: </div>
<blockquote class="tr_bq" style="text-align: justify;">
centerScroll.hvalueProperty().bindBidirectional( headerScroll.hvalueProperty() );<br />
centerScroll.vvalueProperty().bindBidirectional( leftScroll.vvalueProperty() );</blockquote>
<div style="text-align: justify;">
So if you pan or scroll around in the center pane its supposed to keep the row labels and column headers in sync. Well this works great in FX 2.2 but for some strange reason it sometimes becomes unhinged in FX 8.0 (especially when panning) and then the columns and rows aren't synchronized anymore, like so:</div>
<div style="text-align: justify;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCT7b0brgDF1JpU2LxFv865rqnR5IFdI5ZCgjupcgKaA7_sxDxsSK61iTb9Mio4Ja_0jfvIhqer9uueSpj_26z7_lmf5U7JdQpduRayve9FQaeUSkFDjRqilkbfmmQjo1t2Zn90Rut3A/s1600/FX+8.0+ScrollPane+Sync.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCT7b0brgDF1JpU2LxFv865rqnR5IFdI5ZCgjupcgKaA7_sxDxsSK61iTb9Mio4Ja_0jfvIhqer9uueSpj_26z7_lmf5U7JdQpduRayve9FQaeUSkFDjRqilkbfmmQjo1t2Zn90Rut3A/s1600/FX+8.0+ScrollPane+Sync.png" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
This is related to <a href="https://javafx-jira.kenai.com/browse/RT-35783" id="key-val" rel="93933" style="color: #326ca6; font-family: Arial, FreeSans, Helvetica, sans-serif; font-size: 15px; line-height: 1.2667; text-align: start; text-decoration: none;">RT-35783</a> and is apparently fixed for FX 8u20 :-) </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The GridPane however was also "misbehaving" in this case .... see part 7.</div>
<div style="text-align: justify;">
<b><br /></b></div>
Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0tag:blogger.com,1999:blog-5356272673749085038.post-50781371155937934142014-04-09T04:45:00.000-07:002014-04-09T04:45:01.023-07:00FX 2.2 to FX 8.0 Part 7 (gridpane)<div style="text-align: justify;">
Carrying on from where I left off with my previous view. The user can double click on a row label on the left to include those rows in the header section:</div>
<div style="text-align: justify;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUpzahosc_sKTHrA6RwkU9Zv6LzqAGls7BZZ9N6z_qzQ2vX99c7OTW52sOUAUT-dWr67y1LyhGSY75jfQRE53blfmWE28T02r0ijOs5ZXZrAJ6RXLJl0e3IQ_ZRUnI7k16wRxbz7zhrg/s1600/FX+2.2+Freeze+0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUpzahosc_sKTHrA6RwkU9Zv6LzqAGls7BZZ9N6z_qzQ2vX99c7OTW52sOUAUT-dWr67y1LyhGSY75jfQRE53blfmWE28T02r0ijOs5ZXZrAJ6RXLJl0e3IQ_ZRUnI7k16wRxbz7zhrg/s1600/FX+2.2+Freeze+0.PNG" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
Its like the freeze row functionality in a spreadsheet. Well this works great in FX 2.2:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6J_MKm_Ikfei00R-rHoFgIT3tke27WQu8CtKg24VruHLglCDeKATJBJ5AWMSMxZlVQBmHUdwpdBHnEB5Oxnze_zIvEeqQifTzrO9-3ICS5dcgtpjFO9EA1uY6SaVsvp03pPsL9YZ9Rw/s1600/FX+2.2+Freeze+2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6J_MKm_Ikfei00R-rHoFgIT3tke27WQu8CtKg24VruHLglCDeKATJBJ5AWMSMxZlVQBmHUdwpdBHnEB5Oxnze_zIvEeqQifTzrO9-3ICS5dcgtpjFO9EA1uY6SaVsvp03pPsL9YZ9Rw/s1600/FX+2.2+Freeze+2.PNG" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div>
But in FX 8.0 the grids don't display or refresh correctly, note that the Doctor seen row is missing:</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXmzv1RDTzguxRppOElLctZ2ZuIaq0Gnv5LH8M9rIH75tND4cfwisQ2j6xHdU75-pjBbu16EZURM-wYqWxMMQzRVmKxm-bg-PY6FV3wTMy9WRMX9NpO_OQ-yMzbrzZKrcwzvN2GnpR6w/s1600/FX+8.0+Freeze+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXmzv1RDTzguxRppOElLctZ2ZuIaq0Gnv5LH8M9rIH75tND4cfwisQ2j6xHdU75-pjBbu16EZURM-wYqWxMMQzRVmKxm-bg-PY6FV3wTMy9WRMX9NpO_OQ-yMzbrzZKrcwzvN2GnpR6w/s1600/FX+8.0+Freeze+2.png" /></a></div>
<br />
It turns out that in FX 8.0 I needed to explicitly invoke <b><span style="color: orange;">headerGrid.autosize();</span></b> to get it to display correctly.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibu1MkoaZkDVSi5qYltYOLiupfWUGKodBLKjytjUGD2pKDuNyccqijSRXKj0zJDqp1Kp-ysg9vgECiHVlBuvkxx5jSP2HE-Ml6JqOxW6F8La-jLGkNY2Fd-rLGA9dgK0kC4SgdMFQHqQ/s1600/FX+8.0+Freeze+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibu1MkoaZkDVSi5qYltYOLiupfWUGKodBLKjytjUGD2pKDuNyccqijSRXKj0zJDqp1Kp-ysg9vgECiHVlBuvkxx5jSP2HE-Ml6JqOxW6F8La-jLGkNY2Fd-rLGA9dgK0kC4SgdMFQHqQ/s1600/FX+8.0+Freeze+3.png" /></a></div>
<br />
And now where's the action gone too ? .... see part 8.<br />
<br /></div>
</div>
Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0tag:blogger.com,1999:blog-5356272673749085038.post-86256889706317206772014-04-09T04:40:00.000-07:002014-04-09T04:43:24.847-07:00FX 2.2 to FX 8.0 Part 8 (button action)All buttons ready ? Ok then sound, camera, action ..... sorry only space works now enter has been fired !?<br />
<br />
<div style="text-align: justify;">
In FX 2.2 when a button has focus and you press the Enter key it animated a press and fired an on action event. This doesn't seem to happen anymore in FX 8.0 !? Only space works now. It doesn't matter if you've set the action in code, <span style="font-family: "Courier New", Courier, monospace;">button.setOnAction( someAction );</span> or if you've set it in FXML, <span style="font-family: "Courier New", Courier, monospace;">onAction="#handleAction"</span>, the result is the same - i.e. no action on Enter only Space.</div>
<br />
Try it yourself, here's a code snippet to quickly test:<br />
<blockquote>
<span style="font-family: "Courier New", Courier, monospace;">public class ButtonTest extends Application</span><br />
<span style="font-family: "Courier New", Courier, monospace;">{</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> public void start( Stage primaryStage )</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> {</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> final Button but = new Button( "Press Me" );</span><br />
<span style="font-family: "Courier New", Courier, monospace;"></span> <span style="font-family: "Courier New", Courier, monospace;"> but.setOnAction( new EventHandler<ActionEvent>()</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> {</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> private int count = 1;</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> public void handle( ActionEvent arg0 )</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> {</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> but.setText( "Button Pressed: "+ count++ );</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> }</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> } );</span><br />
<span style="font-family: "Courier New", Courier, monospace;"></span><br />
<span style="font-family: "Courier New", Courier, monospace;"> BorderPane bp = new BorderPane();</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> bp.setPadding( new Insets( 10 ) );</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> bp.setCenter( but );</span><br />
<span style="font-family: "Courier New", Courier, monospace;"></span><br />
<span style="font-family: "Courier New", Courier, monospace;"> Scene scene = new Scene( bp, 200, 50 );</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> primaryStage.setScene( scene );</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> primaryStage.show();</span><br />
<span style="font-family: "Courier New", Courier, monospace;"></span><br />
<span style="font-family: "Courier New", Courier, monospace;"> but.requestFocus();</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> }</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> public static void main( String[] args )</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> {</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> launch( args );</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> }</span><br />
<span style="font-family: "Courier New", Courier, monospace;">}</span></blockquote>
<div style="text-align: justify;">
Apparently this change is by design, see <a href="https://javafx-jira.kenai.com/browse/RT-28779" id="key-val" rel="78716" style="color: #326ca6; font-family: Arial, FreeSans, Helvetica, sans-serif; font-size: 15px; line-height: 1.2667; text-align: start; text-decoration: none;">RT-28779</a> Thankfully this isn't a trainsmash in my app, and where I wanted or needed Enter to work I simply added a key pressed handler, <span style="font-family: "Courier New", Courier, monospace;">button.setOnKeyPressed( enterAction );</span> or added the handler into my FXML with <span style="font-family: "Courier New", Courier, monospace;">onKeyPressed="#handelEnter"</span> where the handle method is implemented as:</div>
<span style="font-family: "Courier New", Courier, monospace;"></span><br />
<blockquote class="tr_bq">
<span style="font-family: "Courier New", Courier, monospace;">public void handle( KeyEvent KE )</span><br />
<span style="font-family: "Courier New", Courier, monospace;">{</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> if ( KE.getCode() == KeyCode.ENTER )</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> {</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> if ( ! button.isArmed() ) button.fire();</span><br />
<span style="font-family: "Courier New", Courier, monospace;"> }</span><br />
<span style="font-family: "Courier New", Courier, monospace;">}</span><br />
<span style="font-family: "Courier New", Courier, monospace;"><br /></span></blockquote>
<span style="font-family: "Courier New", Courier, monospace;">
</span><span style="font-family: inherit;">Note that the isArmed test is needed otherwise in FX 2.2 the action event will be executed twice.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Alternatively you can try </span><b><span style="color: orange; font-family: Courier New, Courier, monospace;">button.setDefaultButton( true )</span></b> instead of the above. Note however that the button style changes and that it responds to Enter even when not focused.<br />
<br />
Next up, two minor TabPane issues .... see part 9.<br />
<br />Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0tag:blogger.com,1999:blog-5356272673749085038.post-37346107162301983582014-04-09T04:35:00.000-07:002014-04-09T04:43:24.522-07:00FX 2.2 to FX 8.0 Part 9 (tabs & tabpane)<div style="text-align: justify;">
I have a calendar type control that has two vertical tab panes. The one has month tabs and the other day tabs, both on the left-hand side (none of the tabs have any content.) No preferred, min or max sizing was specified and this is how it looked in FX 2.2:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHHsGfXOXxYk6ZM8m28yiDucNb4039JDk2U76ojE_M-hqRGYRChtDMZ7TS37qBXH3hZHtb6sssB7U17wG2rGabGgWmYpDkiwYHjNTI4bRmAFNla2YwxCP1kL8_ry_ZCq9wnlQMW28hjw/s1600/FX+2.2+Planner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHHsGfXOXxYk6ZM8m28yiDucNb4039JDk2U76ojE_M-hqRGYRChtDMZ7TS37qBXH3hZHtb6sssB7U17wG2rGabGgWmYpDkiwYHjNTI4bRmAFNla2YwxCP1kL8_ry_ZCq9wnlQMW28hjw/s1600/FX+2.2+Planner.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
But in FX 8.0 the default calculated width of the tab panes differs from the above with a much more expanded result. (In the image below I've already started clamping the width so that I could show it here, otherwise it would have been too wide):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrHjlqw1-7Q3fuwlMiqkWkDpQ-XXWnc-jvWEjLsqWUG7gXp4LCEMseuBmCo-lhLgGyxNHxkLYtgj7RDRa1KwPxDiyFH7fQo5-nwTG5bHRrB1lTFMaefPpHK88d-buvsc1DTvpG3vTFw/s1600/FX+8+Planner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrHjlqw1-7Q3fuwlMiqkWkDpQ-XXWnc-jvWEjLsqWUG7gXp4LCEMseuBmCo-lhLgGyxNHxkLYtgj7RDRa1KwPxDiyFH7fQo5-nwTG5bHRrB1lTFMaefPpHK88d-buvsc1DTvpG3vTFw/s1600/FX+8+Planner.png" height="134" width="400" /></a></div>
<br />
<div style="text-align: justify;">
This seems to be related to <a href="https://javafx-jira.kenai.com/browse/RT-31744?focusedCommentId=350499&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-350499">RT-31744</a> (fixed for 8u20) where the width of the tabHeaderArea is included in the prefWidth calculation even when the tabs are vertical. I confirmed this by changing the number of month and day tabs to see if it affected the width, which it did. A temporary fix was to simply specify a maximum width for the two tab panes:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9fR77mlWs1MAE20BHo3WY8PnHL94g3IHktw0XMQizet9CV8YsOBI7fyIvxr-e2FLrU8I8xwORyBOCQ3NFJVlsKEGhB5shBBTqhOQCx6bMBtJ2GqUcDGUN9wkvdkMZwPaKrmgbn74Mng/s1600/FX+8+Planner+Fixed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9fR77mlWs1MAE20BHo3WY8PnHL94g3IHktw0XMQizet9CV8YsOBI7fyIvxr-e2FLrU8I8xwORyBOCQ3NFJVlsKEGhB5shBBTqhOQCx6bMBtJ2GqUcDGUN9wkvdkMZwPaKrmgbn74Mng/s1600/FX+8+Planner+Fixed.png" /></a></div>
<br />
<br />
Lastly while trying out FX 8.0 Caspian I noticed a cosmetic change from Caspian FX 2.2 in that a selected tab now has a dotted border when focused:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMuBICJwXcoo__spVpML0pu0LIE3aFu1TPXKSrMNkflc7XAsPBiz-1G046C6VxyPulo4wygAlHa1QcX1AZMVAYJdJp1A7a5xfeTQe3EWi_1QdtsVuf0i8FqRNnikZaVNMf-rguTgNeQ/s1600/FX+8+Tab+Focus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMuBICJwXcoo__spVpML0pu0LIE3aFu1TPXKSrMNkflc7XAsPBiz-1G046C6VxyPulo4wygAlHa1QcX1AZMVAYJdJp1A7a5xfeTQe3EWi_1QdtsVuf0i8FqRNnikZaVNMf-rguTgNeQ/s1600/FX+8+Tab+Focus.png" /></a></div>
<br />
If you don't like this, which I didn't, you can change it in your apps CSS file with the following entry:<br />
<blockquote class="tr_bq">
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator<br />
{<br />
-fx-border-style: solid;<br />
-fx-border-insets: -2 -2 -4 -3;<br />
-fx-border-width: 1 1 0 1;<br />
-fx-border-radius: 2 2 0 0;<br />
}</blockquote>
The above is a modified version from Modena, and results in the following in FX 8.0 Caspian:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzzsRXvtdtE_0LK8CiLqLIBVkTbsrHyxlCkdShgZyoHvgBGam9TZzmBKoB43OWx3Dv4Jt6XJUkK1n7FFiraWP3CmesUm8br7LHKrpka-gTEMIQL2vYHWQlFBN4niK6I7ght1reluh3Q/s1600/FX+8+Tab+Focus+Fixed.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzzsRXvtdtE_0LK8CiLqLIBVkTbsrHyxlCkdShgZyoHvgBGam9TZzmBKoB43OWx3Dv4Jt6XJUkK1n7FFiraWP3CmesUm8br7LHKrpka-gTEMIQL2vYHWQlFBN4niK6I7ght1reluh3Q/s1600/FX+8+Tab+Focus+Fixed.png" /></a></div>
<br />
And this is what is looks like when using Modena:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit1uplV1Ph_5BFs75WvF2GLvSCsdAsz74xX0b-gMAxyyp8liyb2-96d1QanuTJKShqgqSv5WWx86Gt6PTWuwBK1ruv7NUa4qTk5KvwRfDI5mdTPyq4a9_MzrfiYNbGyos5X6TJq-timw/s1600/FX+8+Tab+Focus+Modena.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit1uplV1Ph_5BFs75WvF2GLvSCsdAsz74xX0b-gMAxyyp8liyb2-96d1QanuTJKShqgqSv5WWx86Gt6PTWuwBK1ruv7NUa4qTk5KvwRfDI5mdTPyq4a9_MzrfiYNbGyos5X6TJq-timw/s1600/FX+8+Tab+Focus+Modena.png" /></a></div>
<br />
While this is the original Modena style:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIdEKOGwCohox_STrpNDr64jI6cPF6DQRgIQl_5r4HEe4KdPpRog8C46QrnXz28jK9RnEu33C6zJwwvph8VuCtF4-_AjDaBIdf7jIBbmsl-OQv1S0nUXW3i11KwzbFN95IW8WwmnQ-zQ/s1600/FX+8+Tab+Focus+Modena+Original.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIdEKOGwCohox_STrpNDr64jI6cPF6DQRgIQl_5r4HEe4KdPpRog8C46QrnXz28jK9RnEu33C6zJwwvph8VuCtF4-_AjDaBIdf7jIBbmsl-OQv1S0nUXW3i11KwzbFN95IW8WwmnQ-zQ/s1600/FX+8+Tab+Focus+Modena+Original.png" /></a></div>
<br />
<br />
Well that's it for now ....<br />
<br />Jurgenhttp://www.blogger.com/profile/02849864367424571963noreply@blogger.com0