tag:blogger.com,1999:blog-58699728130690217592024-03-06T09:08:30.397+01:00dooApp technical blog about JavadooApp technical blog about Java and JavaFXAntoine Mischlerhttp://www.blogger.com/profile/08502498568987679085noreply@blogger.comBlogger30125tag:blogger.com,1999:blog-5869972813069021759.post-43063950854974802722014-11-07T15:18:00.000+01:002014-11-07T15:18:42.316+01:00How to deploy wisdom application to AWS Beanstalk using Docker<div style="-webkit-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1; background-color: white; box-sizing: border-box; color: #373d49; font-family: Georgia, Cambria, serif; font-size: 14px; line-height: 28px; margin-bottom: 1.33999rem; padding-top: 0.66001rem;">
</div>
<div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 1.6; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-width: 960px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; padding-top: 20px;">
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<br />
<div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 1.6; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-width: 960px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; padding-top: 20px;">
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Today I'd like to demonstrate how to deploy a wisdom application on AWS BeanStalk using Docker. The goal is to be able to update your current deployed app in one maven command. Maybe you want first to check some points </div>
<ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; padding-top: 0px;">
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">What is <a href="http://wisdom-framework.org/" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #4183c4; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Wisdom</a> ?</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">What is <a href="http://aws.amazon.com/fr/elasticbeanstalk/" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #4183c4; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Beanstalk</a> ?</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">What is <a href="https://www.docker.com/" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #4183c4; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Docker</a> ?</li>
</ul>
<h3 style="-webkit-font-smoothing: antialiased; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 18px; font-weight: bold; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Create your Wisdom app</h3>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
In order to create a new app just do :</div>
<pre style="background-color: #f8f8f8; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: solid; border-top-width: 1px; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"><code style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: none; border-color: initial; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: none; border-width: initial; border-width: initial; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre;">mvn org.wisdom-framework:wisdom-maven-plugin:0.6.5:create \
-DgroupId=YOUR_GROUPID \
-DartifactId=YOUR_ARTIFACTID \
-Dversion=1.0-SNAPSHOT
</code></pre>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
congratulation you have now a cool app ! You can try it :</div>
<pre style="background-color: #f8f8f8; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: solid; border-top-width: 1px; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"><code style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: none; border-color: initial; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: none; border-width: initial; border-width: initial; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre;">mvn wisdom:run
</code></pre>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<a href="http://localhost:9000/" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #4183c4; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Open my app please</a></div>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
To package your application run :</div>
<pre style="background-color: #f8f8f8; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: solid; border-top-width: 1px; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"><code style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: none; border-color: initial; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: none; border-width: initial; border-width: initial; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre;">mvn clean package
</code></pre>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
It packages your app inside a zip into target/yourApp-version.zip, this is the zip to deploy in the server.</div>
<h3 style="-webkit-font-smoothing: antialiased; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 18px; font-weight: bold; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Add a Dockerfile</h3>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
If you want to use Docker, there is no magic trick, create a Dockerfile at the root directory of your app (next to your pom.xml).</div>
<pre style="background-color: #f8f8f8; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: solid; border-top-width: 1px; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"><code style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: none; border-color: initial; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: none; border-width: initial; border-width: initial; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre;">FROM dockerfile/java:oracle-java8
# Add the wisdom distribution
ADD . /root/wisdom
# Expose the port 9000
EXPOSE 9000
# Volumes
VOLUME /root/wisdom/logs
VOLUME /root/wisdom/application
# Change workdir.
WORKDIR /root/wisdom
RUN touch /root/wisdom.log
# For easier handling, we dump the log, so `docker logs containerId` displays
# the log.
CMD chmod +x chameleon.sh; ./chameleon.sh stop;./chameleon.sh start; tail -F logs/wisdom.log
</code></pre>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
To include the Dockerfile inside the .zip of your packaged app you have to add the following resources tag inside your pom.xml between the build tag :</div>
<pre style="background-color: #f8f8f8; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: solid; border-top-width: 1px; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"><code style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: none; border-color: initial; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: none; border-width: initial; border-width: initial; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre;"><build>
<resources>
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
</resource>
<resource>
<directory>${project.basedir}</directory>
<includes>
<include>Dockerfile</include>
</includes>
<targetPath>${project.build.directory}/wisdom</targetPath>
</resource>
</resources>
...
</build>
</code></pre>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
run again</div>
<pre style="background-color: #f8f8f8; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: solid; border-top-width: 1px; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"><code style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: none; border-color: initial; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: none; border-width: initial; border-width: initial; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre;">mvn clean package
</code></pre>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
If you open the zip file the Dockerfile is now present.</div>
<h3 style="-webkit-font-smoothing: antialiased; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 18px; font-weight: bold; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Create a cool Beanstalk application</h3>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
From here I suppose you already have a AWS access and you are able to create a BeanStalk app.</div>
<ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; padding-top: 0px;">
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">From AWS console go to Elastic Beanstalk</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Create a new application and fill the name and click next</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Environment type<ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; padding-top: 0px;">
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Environment tier > Web server</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Predefined configuration > Docker</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Environment type > single instance</li>
</ul>
</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Application version > Upload your own > select the zip file of your packaged app</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Environment information > put what you want</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Additional resources > just click next (or configure following your requierments)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Configuration details > just click next (or configure following your requierments)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Environment tags > just click next (or configure following your requierments)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">And LAUNCH</li>
</ul>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
That it ! Wait a moment while beanstalk creates your application. Once it's done just check your app and you should see the wisdom sample page ! If not... Sorry you probably missed something</div>
<h4 style="-webkit-font-smoothing: antialiased; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 16px; font-weight: bold; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
BUT WAIT !! I DON'T WANT TO UPLOAD MY ZIP BY HAND EACH TIME !!!</h4>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
I know ! As I promised, it's time to reduce the heavy uploading step by a single maven command. Take a look at <a href="https://github.com/ingenieux/beanstalker" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #4183c4; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Beanstalker maven plugin</a> it does all the boring part for you.</div>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
First, follow the <a href="http://docs.ingenieux.com.br/project/beanstalker/aws-config.html" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #4183c4; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Setting Up Credential</a> part to configue your access and secret key.</div>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
next add the following profile to your pom.xml</div>
<pre style="background-color: #f8f8f8; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: solid; border-top-width: 1px; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"><code style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: none; border-color: initial; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: none; border-width: initial; border-width: initial; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre;"><profiles>
<profile>
<id>deploy</id>
<properties>
<beanstalker-serverId>aws.amazon.com</beanstalker-serverId>
<beanstalker.region>eu-west-1</beanstalker.region>
<maven.install.skip>true</maven.install.skip>
<maven.deploy.skip>true</maven.deploy.skip>
<beanstalk.applicationName>test</beanstalk.applicationName>
<beanstalk.cnamePrefix>test-env</beanstalk.cnamePrefix> //This is the first part of your env url test-env.elasticbeanstalk.com
<beanstalk.environmentName>Test-env</beanstalk.environmentName>
<maven.build.timestamp.format>yyyyMMddHHmmss</maven.build.timestamp.format>
<beanstalk.s3Bucket>application-version</beanstalk.s3Bucket> // The name of your S3 bucket which will contain every version uploaded
<beanstalk.s3Key>${project.build.finalName}.zip</beanstalk.s3Key> //The name of the zip to upload
<beanstalk.multipartUpload>false</beanstalk.multipartUpload>
<beanstalk.useLatestVersion>false</beanstalk.useLatestVersion>
</properties>
<build>
<defaultGoal>deploy</defaultGoal>
<finalName>${project.name}-${project.version}</finalName>
<plugins>
<plugin>
<groupId>br.com.ingenieux</groupId>
<artifactId>beanstalk-maven-plugin</artifactId>
<version>1.3.5</version>
<executions>
<execution>
<id>default-deploy</id>
<phase>deploy</phase>
<goals>
<goal>upload-source-bundle</goal>
<goal>delete-application-version</goal> //delete the application version on beanstalk if it already exist (useful for snapshot)
<goal>create-application-version</goal>
<goal>update-environment</goal>
</goals>
<configuration>
<artifactFile>${project.build.directory}/${project.name}-${project.version}.zip
</artifactFile>
<skipExisting>false</skipExisting>
<environmentRef>cloudtest-env.elasticbeanstalk.com</environmentRef>
<optionSettings> //This part does nothing but I get NulPointer if I don't put anything here
<setting>
<namespace>aws:elasticbeanstalk:application</namespace>
<optionName>Application Healthcheck URL</optionName>
<value>/ping</value>
</setting>
</optionSettings>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
</profiles>
</code></pre>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Now you just have to run :</div>
<pre style="background-color: #f8f8f8; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: solid; border-top-width: 1px; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"><code style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-style: none; border-color: initial; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-style: none; border-width: initial; border-width: initial; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre;">mvn -Pdeploy
</code></pre>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 15px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Wait and... Voila !</div>
</div>
</div>
</div>
<h1 id="dillinger" style="color: #444444; font-family: Arvo, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 30px; line-height: 36px; margin: 0px; outline: 0px; text-rendering: optimizelegibility;">
</h1>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-45954268456707099732014-10-03T16:50:00.003+02:002014-10-03T17:18:34.976+02:00JavaFX persistence made easy with JCROMfx<span style="font-family: inherit;">Persisting model classes with JavaFX properties using hibernate is not impossible but requires some efforts. You can either use the "property access" (as described <a href="http://stackoverflow.com/questions/23187989/using-javafx-beans-properties-in-model-classes" target="_blank">here</a>) or map and bind all JavaFX fields to good old java fields. Both approaches have major drawbacks. Persisting JavaFX collections is almost impossible with the first approach and the second approach involve writing a lot a boiler code and to register tons of listeners to maintain the state between the JavaFX fields and their corresponding Java fields.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">We recently decided to test a new persistence solution: <a href="http://en.wikipedia.org/wiki/Content_repository_API_for_Java" target="_blank">Java Content Repository</a> and especially the <a href="http://modeshape.jboss.org/" target="_blank">ModeShape</a> implementation. Java Content Repository are designed to store content and metadata about this content. It looks like they are a good solution to persist application data, especially if you are manipulating lot of files and binary data.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="background-color: white; line-height: 16.399999618530273px;">The tree structure of a Java Content Repository allow a pretty simple mapping of graphs of Java objects. Mapping can be done either manually or using an object mapping framework. It looks like that one of the most used JCR mapping framework is <a href="https://code.google.com/p/jcrom/" target="_blank">JCROM</a>. </span><span style="font-family: inherit;">JCROM is described as <span style="background-color: white; line-height: 16.399999618530273px;">a lightweight framework for mapping Java objects to/from a Java Content Repository (JCR). </span></span><br />
<span style="font-family: inherit;"><span style="background-color: white; line-height: 16.399999618530273px;"><br /></span></span>
<span style="font-family: inherit;">
</span>
<span style="font-family: inherit;"><span style="background-color: white; line-height: 16.399999618530273px;">JCROM was initially designed to handle most basic Java types but it was in 2008 when JavaFX did not exist! So we forked this excellent project and tried to extend it to support JavaFX properties...and it turned out to be pretty easy, even for JavaFX collections.</span></span><br />
<span style="font-family: inherit;"><span style="background-color: white; line-height: 16.399999618530273px;"><br /></span></span>
<span style="font-family: inherit;"><span style="background-color: white; line-height: 16.399999618530273px;">So we are pleased to announce that you can use <a href="https://github.com/dooApp/jcromfx" target="_blank">JCROMfx</a> to map your Java objects with JavaFX properties directly to/from a JCR repository! </span></span><span style="background-color: white; line-height: 16.399999618530273px;">Just annotate your JavaFX properties and you are ready to persist them. This include all basic JavaFX properties (StringProperty, IntegerProperty,...), collections (ListProperty, MapProperty) and object properties of enum or of other objects (using @JcrChildNode)</span><br />
<span style="font-family: inherit;"><span style="background-color: white; line-height: 16.399999618530273px;"><br /></span></span>
<span style="font-family: inherit;"><span style="background-color: white; line-height: 16.399999618530273px;">Just to give you an overview of how a bean looks like with JCROM annotation & JavaFX properties : </span></span><br />
<br />
<script src="https://gist.github.com/amischler/2e62a8feb5f9d4da992d.js"></script>
Feedback is welcome :)
Antoine Mischlerhttp://www.blogger.com/profile/08502498568987679085noreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-47653307978387790882014-09-23T14:24:00.000+02:002014-09-24T22:48:37.531+02:00FXForm2 samplerWe are pleased to announce that we provide now some FXForm2 samples using the <a href="http://fxexperience.com/controlsfx/features/#fxsampler">FXSampler</a>.<br />
<br />
These samples were designed to help you using FXForm2 and to discover all of its features. FXForm2 can be highly customized to generate most of the forms you need; this sampler should help you to understand which features you need and how to configure your form.<br />
<br />
We have covered some frequent cases we use here at dooApp, but feel free to ask for more examples!<br />
<h3>
How to test it?</h3>
<div>
<ul>
<li>Clone the <a href="https://github.com/dooApp/FXForm2">FXForm2 repo</a></li>
<li>Run<b> mvn exec:java </b>in the samples directory</li>
<li>Enjoy</li>
</ul>
<div>
There is some capture</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-yRZS5naGaRI/VCMt49pa7UI/AAAAAAAAAKw/7qsPi_KcIeE/s1600/form_with_css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-yRZS5naGaRI/VCMt49pa7UI/AAAAAAAAAKw/7qsPi_KcIeE/s1600/form_with_css.png" height="307" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--UTf7HEansk/VCMt4wf5GpI/AAAAAAAAAKs/thGXotsbckg/s1600/Multiple_bean_form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/--UTf7HEansk/VCMt4wf5GpI/AAAAAAAAAKs/thGXotsbckg/s1600/Multiple_bean_form.png" height="308" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-nJso2EIAddI/VCMt4wJ561I/AAAAAAAAAKo/m7T2NqYt15k/s1600/validation_form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-nJso2EIAddI/VCMt4wJ561I/AAAAAAAAAKo/m7T2NqYt15k/s1600/validation_form.png" height="306" width="640" /></a></div>
<div>
<br /></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-90754500029571852322014-07-24T14:51:00.000+02:002014-07-24T14:51:04.344+02:00Wisdom framework with apache shiroToday, we'll see how to use Wisdom framework with apache shiro to manage users authentication.<br />
<br />
First, what is Wisdom ?<br />
<br />
Wisdom is a young but promising Java web framework, to develope quickcly modular and dynamic web applications. You can check <a href="http://wisdom-framework.org/">Wisdom website</a> for more informations.<br />
<br />
Unfortunaly it does not include yet users management. That's why I decided to try to embed <a href="http://shiro.apache.org/">apache shiro</a> inside my project.<br />
<br />
The goal is to manage multiple users with different roles and to be able to authenticate them and display different template according to their roles.<br />
<br />
In this example I create some users during shiro initialisation, but in the next article I'll use a real database.<br />
<br />
The sample project is available <a href="https://github.com/agonist/wisdom-shiro">here</a><br />
<br />
Now let's take a look at the code.<br />
<br />
First the ShiroActivator class used to initialize shiro<br />
<br />
<script src="https://gist.github.com/agonist/853acbd47f717d23f6ef.js"></script>
This is just basic stuff here, it create 2 roles and 2 users. Just with this, you're done ! you can use shiro now.<br />
<br />
Then when you submit your form login this route will be called.<br />
<br />
<script src="https://gist.github.com/agonist/cf3043944c43e734d7d0.js"></script>
As you can see it's really simple, in 3 lines of codes you're authenticated. The exceptions here will display a flash message on the view in case of error like wrong password.<br />
<br />
Once you're logged you'll be redirected to the protected page which displays different content whether you are admin or not.<br />
<br />
But how is the route protected if you're not logged ?<br />
Here I do a combination of wisdom and shiro features. This is my protected route :<br />
<br />
<script src="https://gist.github.com/agonist/8e68c9750f15a2e97c53.js"></script>
As you can see there is an annotation @Authenticated. It comes from wisdom. You have to specify the name of your authenticator implementation. This is mine<br />
<br />
<script src="https://gist.github.com/agonist/26bbf630f2200049a396.js"></script>
So in the getUsername() method, I simply use shiro to retrieve the current user, if it returns null, so you're not logged and the onUnauthorized method will be called. Otherwise the controller route will be executed correctly.<br />
<br />
Once you're logged, you'll have a different message if you're admin or guest. To achieve this I add some if statements in my template.<br />
<br />
As you can see on the ProtectedController, on method return we have a new UserHelper in our parameters. that mean you will be able to call methods of this class on our template to check the role of the current user.<br />
So your template will know which statement to use depending of the user role.<br />
<script src="https://gist.github.com/agonist/44babdb8e35752995f45.js"></script>
This is everything you need. I let you check by yourself <a href="https://github.com/agonist/wisdom-shiro">on the sample project</a> the logout method cause it's not really complicated.<br />
<br />
Have fun with this great framework !Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-38242684601896189202013-11-28T17:07:00.000+01:002013-12-02T09:36:31.433+01:00FXForm: two releases and a lot of new featuresWe have added a bunch of cool features to <a href="http://fxform2.com/" target="_blank">FXForm</a>, let's have a look!<br />
<h3>
Get ready for JavaFX 8</h3>
<div>
FXForm is now ready for JavaFX 8. We have adopted the following versioning conventions:<br />
<br />
<ul>
<li>FXForm 2.2.x for JavaFX 2.2 (latest version: 2.2.4)</li>
<li>FXForm 8.0.x for JavaFX 8.0 (latest version: 8.0.1)</li>
</ul>
<div>
The version 8.0 of FXForm comes with the support of new types: LocalDate and Color using the new <a href="http://download.java.net/jdk8/jfxdocs/javafx/scene/control/DatePicker.html" target="_blank">DatePicker</a> and <a href="http://docs.oracle.com/javafx/2/api/javafx/scene/control/ColorPicker.html" target="_blank">ColorPicker</a> controls.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJi0pTpG5PMa8kJdQilSvY_Eo3tC_renCF03VTSzWr-fqN-dPUB8ad64W9Xey6wxpsJ9zbffbEuq2rUx2ZLVNui8qoWOK47peSkyrnRHg05mbwWbnJalEcX6DEuKvClKp44uyqQepaLCIw/s1600/color+date.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJi0pTpG5PMa8kJdQilSvY_Eo3tC_renCF03VTSzWr-fqN-dPUB8ad64W9Xey6wxpsJ9zbffbEuq2rUx2ZLVNui8qoWOK47peSkyrnRHg05mbwWbnJalEcX6DEuKvClKp44uyqQepaLCIw/s320/color+date.jpg" width="320" /></a></div>
<div>
<br /></div>
<h3>
Improved data validation</h3>
<div>
We have improved the data validation layer of FXForm by adding the support of class level constraint and a finer granularity in constraint handling.</div>
<div>
<br /></div>
<h4>
Class level constraint validation</h4>
<div>
FXForm now support <a href="http://docs.jboss.org/hibernate/validator/4.1/reference/en-US/html/validator-usingvalidator.html#d0e326" target="_blank">class level constraints</a>. This can be used to specify cross-field constraints.</div>
<div>
The class level constraint violations are reported in the form. See below an example with the validation of a repeat password field:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-TPQhopkW-X6vtdbMYkH6mZ8BGZSTC0p7cmdk-l2a8XO6SAWnSgtondH8yIvpiVnvZQbQtYzz3mMs_nPMVrBYi41ob134mVetu_1eyonRgyakne6BOjpDiuzsTrjeEt6FSrA-aEauVOL/s1600/class-level-constraint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-TPQhopkW-X6vtdbMYkH6mZ8BGZSTC0p7cmdk-l2a8XO6SAWnSgtondH8yIvpiVnvZQbQtYzz3mMs_nPMVrBYi41ob134mVetu_1eyonRgyakne6BOjpDiuzsTrjeEt6FSrA-aEauVOL/s320/class-level-constraint.png" width="320" /></a></div>
<div>
<br /></div>
<div>
In this case, our bean was simply annotated with the @PasswordMatch annotation which is a custom constraint validating that both password fields are equals. See <a href="http://docs.jboss.org/hibernate/validator/4.1/reference/en-US/html/validator-customconstraints.html" target="_blank">Creating custom constraints</a> for more informations about this.</div>
<div>
<br /></div>
<h4>
Strict constraint versus warning constraint</h4>
<div>
<br /></div>
<div>
Sometimes you want a constraint to be strict, sometimes you want it to be just a warning. FXForms allows you to specify this in your constraint declaration by using the group attribute of the constraint. By default a constraint is considered as strict. If you want your constraint to be a warning, use the Warning group provided by FXForm: </div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/amischler/7693030.js"></script></div>
<div>
<br /></div>
<div>
In this case the @Max constraint will be treated as a warning. The main difference between a warning and a strict constraint is that with a warning, the model value will be updated even if the user input violates the constraint, which is not the case for as strict constraint.</div>
<div>
Elements in the form that violates a constraint get a different style class for strict constraints and warning, so that the user feedback can be different in both cases.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/amischler/7693117.js"></script></div>
<div>
<br /></div>
<div>
In this example, the element editor is red and its label is bold when a strict constraint is violated and the element editor is orange when a warning is violated.</div>
<div>
<br /></div>
<h3>
Multiple bean source</h3>
<div>
You can now edit multiple beans in the same form using the MultipleSourceBean</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/amischler/7693188.js"></script></div>
<div>
<br /></div>
<div>
All features work as for a simple bean, including filters (reorder, exclude,...) and custom factories.</div>
<div>
<br /></div>
<h3>
@Adapter</h3>
<div>
A custom adapter can now be specified directly on a field using the @Adapter annotation. If specified, FXForm will use the adapter provided by the annotation to bind the field property with the view property. See <a href="https://github.com/dooApp/FXForm2/wiki/Advanced-customization#adapters-customizing-bindings-in-fxform2" target="_blank">customizing bindings in FXForm2</a> for more informations about adapters.</div>
<div>
<br /></div>
<h3>
Better handling of bound and read-only properties</h3>
<div>
FXForm introduces a notion of "editable" on the Node (see <a href="https://github.com/dooApp/FXForm2/blob/master/core/src/main/java/com/dooapp/fxform/view/FXFormNode.java" target="_blank">FXFormNode</a>) which indicates whether a Node manipulated by FXForm allows the user to provide input.</div>
<div>
<br /></div>
<div>
FXForm now automatically disables editable nodes when bound to a property that is already bound or that is read-only. If the node is not editable (for example a Label), then it remains enabled.</div>
<div>
<br /></div>
<h3>
New NodeSkin</h3>
<div>
FXForm now provides a <a href="https://github.com/dooApp/FXForm2/blob/master/core/src/main/java/com/dooapp/fxform/view/skin/NodeSkin.java" target="_blank">NodeSkin</a>. This NodeSkin can be used if you want to be responsible for creating the view of your form. You can then give your Node to the NodeSkin and FXForm will lookup for the required nodes and bind them to your bean. The lookup is based on the node ids. See <a href="https://github.com/dooApp/FXForm2/wiki/Style-your-form-with-css#id" target="_blank">wiki</a> to understand how FXForm does the mapping between bean fields and nodes.</div>
<div>
<br /></div>
<div>
If your view is implemented in FXML, you can still use the <a href="https://github.com/dooApp/FXForm2/blob/master/core/src/main/java/com/dooapp/fxform/view/skin/FXMLSkin.java" target="_blank">FXMLSkin</a>.</div>
<div>
<br /></div>
<h3>
ListProperty support</h3>
<div>
Certainly one of the most funny (and useful!) feature of the latest release. FXForm now creates a TableView for ListProperty fields. Columns are populated automatically by analyzing the generic type of the ListProperty and extracting fields. When you click on a row, a popup shows, with -guess what- an FXForm :) This popup allows the edition of the selected item.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNWzEXvmrlVuboAnlFhQrBvP6C4bB_DKlXVgFOj75X5AUnZTS8YqFakDxfkqYxH9GxpLFx6MPIj4-YG9fG7FTyNrIODtQO77MqgqAB4tqooiPjz4ktVkZCWO5Rbh8Tci9wVcl8VXFO2SXQ/s1600/tableview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNWzEXvmrlVuboAnlFhQrBvP6C4bB_DKlXVgFOj75X5AUnZTS8YqFakDxfkqYxH9GxpLFx6MPIj4-YG9fG7FTyNrIODtQO77MqgqAB4tqooiPjz4ktVkZCWO5Rbh8Tci9wVcl8VXFO2SXQ/s320/tableview.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
This feature is pretty powerful, since you can now edit pretty much your whole tree of model objects using just an FXForm. We might also add a default support for SetProperty and MapProperty in the future.</div>
<div>
<br /></div>
<div>
You can find the full release notes <a href="https://github.com/dooApp/FXForm2/issues/milestones?state=closed" target="_blank">here</a>. Thanks to <a href="https://github.com/usander" target="_blank">usander</a>, <a href="https://github.com/peterbecker" target="_blank">peterbecker</a> and <a href="https://github.com/pjean" target="_blank">pjean</a> for their appreciated feedback on the project.</div>
<div>
<br /></div>
<div>
Have fun with FXForm :)</div>
</div>Antoine Mischlerhttp://www.blogger.com/profile/08502498568987679085noreply@blogger.com2tag:blogger.com,1999:blog-5869972813069021759.post-4191248520204578242013-07-17T17:23:00.001+02:002013-07-17T18:03:12.624+02:00Natural language search in FXMLI'm pleased to introduce "Natural Language Code Search", an IDE plugin straight out of our R&D lab that might be useful for you too!<br />
<br />
<h3>
Traceability</h3>
<div>
<br /></div>
This plugin is the result of a collaboration between dooApp and the INRIA (French public science and technology institution). We investigated a new way to automatically recover traceability links between specifications and code elements.
Establishing traceability links is very important for many reasons:<br />
<br />
<ul>
<li>program comprehension,</li>
<li>maintenance,</li>
<li>requirement tracing,</li>
<li>impact analysis,... </li>
</ul>
If you are not familiar with software traceability, have a look at this <a href="http://en.wikipedia.org/wiki/Requirements_traceability">introduction on Wikipedia</a> and at <a href="http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.181.1329">this excellent paper</a>.<br />
<br />
<h3>
Classical approach</h3>
<div>
<br /></div>
<div>
Most classical approaches to retrieve links between specifications (in natural language) and code involves analyzing code symbols (e.g. class names). It raises two issues:</div>
<div>
<ul>
<li>the developers might not always use the exact and precise domain terminology</li>
<li>the code and the specification (e.g. a regulation) might be in different languages</li>
</ul>
</div>
<h3>
Our approach</h3>
<div>
<br /></div>
<div>
In our work, we introduced a new approach based on the analyze of the UI labels. Our idea is that the specifications lead most of the time to texts displayed to the user in the user interface and that these texts will use a precise domain terminology. Then it's possible to retrieve the UI label usage in the code, to identify the pieces of code you are looking for !</div>
<div>
<br /></div>
<h3>
Process</h3>
<div>
<br /></div>
<div>
We designed a three-step process:</div>
<div>
<ul>
<li>Index resource bundles using <a href="https://lucene.apache.org/" target="_blank">Apache Lucene</a></li>
<li>Query the indexed bundles in natural language and retrieve the best matching labels and associated keys</li>
<li>Retrieve code elements by analyzing key usages (either statically by analyzing code or dynamically by registering stacktraces of calls to ResourceBundle.get())</li>
</ul>
<h3>
</h3>
<h3>
IntelliJ plugin</h3>
<div>
<br /></div>
<div>
We have tested and evaluated our approach; the promising results of the evaluation lead us to develop an IntelliJ plugin wrapping the whole process. Check it out directly from the <a href="http://plugins.jetbrains.com/plugin/7288?pr=idea" target="_blank">IntelliJ repository</a> if you want to give a try !</div>
<div>
<br /></div>
</div>
<h3>
And what about JavaFX?</h3>
<div>
<br /></div>
<div>
At this point, you might wonder why we published this article under the JavaFX category? </div>
<div>
Actually, when you are developing a JavaFX application, your bundle keys are not used directly in the code but rather in FXML files. So, our plugin also lookup for key usage in the FXML file.<br />
<br />
So, we realized that our plugin can also be used to easily retrieve FXML files associated to user interface labels, even if the query is approximate !<br />
<b>Don't lose time anymore trying to identify which FXML file to open when you want to modify the user interface ! Type in what you are looking for (e.g. some words that you see in the user interface) and let the plugin find it for you!</b><br />
This is really handy for developers starting working on an existing project or for maintenance.<br />
<br />
<h3>
Try it yourself</h3>
<div>
<br /></div>
<div>
The best way to understand how this plugin can help you is to try it on your own codebase:</div>
<div>
<ul>
<li>Install the plugin from IntelliJ</li>
<li>Type "Ctrl+Shit+S" to open the input dialog</li>
<li>Type your query in natural language</li>
<li>Explore the results !</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYYmsM9m0YCcz9VfkUGc8hsEbKkQNNjdEAb4UwTlSQqz-M5RDBQ8QJQ4CGBq6VS6OSu6i-6e2T9_iGIq5PJbFups7PSXrCwvmC34uShYxdubdFds-52oM1L8wAylOZC10D7HUF6jwQNf7/s1600/capture-nlcs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYYmsM9m0YCcz9VfkUGc8hsEbKkQNNjdEAb4UwTlSQqz-M5RDBQ8QJQ4CGBq6VS6OSu6i-6e2T9_iGIq5PJbFups7PSXrCwvmC34uShYxdubdFds-52oM1L8wAylOZC10D7HUF6jwQNf7/s320/capture-nlcs.png" width="320" /></a></div>
<div>
<br /></div>
</div>
<div>
<br /></div>
<br />
<br /></div>
Antoine Mischlerhttp://www.blogger.com/profile/08502498568987679085noreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-62881146304732976122013-06-27T11:44:00.001+02:002013-06-27T16:13:40.765+02:00FXBinding, the binding you needJavaFX 2 brings the Properties and Bindings concepts. If you don't know what I am talking about, I suggest you to have a look here : <a href="http://docs.oracle.com/javafx/2/binding/jfxpub-binding.htm" target="_blank">binding</a><br />
<p>I have an List <code>ObservableList<XYChart.Data<Number, Number>></code>. I want to compute the average value of XValueProprerty for all Data contained into the list : </p>
<br/>
<h1>Without <b>FXBinding</b> : </h1>
<script src="https://gist.github.com/christophe-dooapp/5822644.js"></script>
See full code <a href="https://gist.github.com/christophe-dooapp/5822656" target="_blank">here</a>
<p>As you can see, <b><span style="color:red;">it doesn't work :/</span></b></p>
<p>The binding is invalid only when the list changes, so when the XValue of a Data changes, nothing append.</p>
<p>I have to register every <code>XValueProperty()</code> into the <code>bind()</code> method : </p>
<script src="https://gist.github.com/christophe-dooapp/49ab433ea5cd1c3c3855.js"></script>
See full code <a href="https://gist.github.com/christophe-dooapp/5823215" target="_blank">here</a>
<p>Now it works for all Data that was into the list at the beginning, but not for all added (or removed) Data after the init of the Binding</p>
<p>Let's make it work : </p>
<script src="https://gist.github.com/christophe-dooapp/5830145.js"></script>
See full code <a href="https://gist.github.com/christophe-dooapp/5830151" target="_blank">here</a>
<p>While the complexity of your model is growing, you will have to register many listeners and <b><span style="color:red;">the code is going to be less readable, less maintainable and less bug proof.</span></b></p>
<br />
<h1><a href="https://github.com/dooApp/FXBinding">With <b>FXBinding</b></a></h1>
<p>Now let's replace our DoubleBinding by a magical FXDoubleBinding, it's 4 time step : </p>
<ul>
<li>Replace <code>new DoubleBinding()</code> by <code>new FXDoubleBinding()</code></li>
<li>Change the method name from <code>computeValue()</code> to <code>compute()</code></li>
<li>Remove <code>{bind(...)}</code> and replace it by the <code>configure()</code> method</li>
<li>In the <code>configure()</code> method call <code>addObservable()</code> instead of <code>bind()</code></li>
</ul>
<script src="https://gist.github.com/christophe-dooapp/5830193.js"></script>
See full code <a href="https://gist.github.com/christophe-dooapp/5830210" target="_blank">here</a>
<br/>
<p>Every time the binding is becoming invalid, we will reconfigure it, so it's always a cool binding.</p>
<p>We will never have to add a listener even in a very complex model</p>
<p>An other example : </p>
<script src="https://gist.github.com/christophe-dooapp/5859630.js"></script>
See full code <a href="https://gist.github.com/christophe-dooapp/5859633" target="_blank">here</a>
<br />
<h1><a href="http://dooapp.github.io/FXBinding/" target="_blank">Get FXBinding here</a></h1>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-58155072102714982072013-06-20T10:12:00.000+02:002013-06-20T10:12:12.376+02:00ListProperty vs ObjectProperty<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
In the world of JavaFX, when you need to use an <a href="http://docs.oracle.com/javafx/2/api/javafx/collections/ObservableList.html">ObservableList </a>with the Property pattern, you write the following :<br />
<br />
ObjectProperty<span style="color: #333333; font-family: Arial, sans-serif; font-size: x-small;"><span style="line-height: 20px;"><</span></span>ObservableList<T>><br />
<br />
To be notified when the list content is modified, you can register a ListChangeListener on the ObservableList referenced by the ObjectProperty using the getter.<br />
You can also register a ChangeListener on the ObjectProperty to be notified when the instance of ObservableList referenced by the ObjectProperty is modified.<br />
<div>
<br /></div>
<div>
You will end up with something like that :<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-YxLn03YJNdw/UcFuLJ24OmI/AAAAAAAAAFk/s1Ekpxruqq0/s1600/Dessin+sans+titre+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-YxLn03YJNdw/UcFuLJ24OmI/AAAAAAAAAFk/s1Ekpxruqq0/s1600/Dessin+sans+titre+%25281%2529.png" height="220" width="400" /></a></div>
<div>
<br />
<br />
<br />
<ul>
<li>If you add an element or more, your ListChangeListener will be notified.</li>
<li>If you change your ObservableList instance, your ChangeListener will be called.</li>
</ul>
<div>
<div>
But if the ObservableList instance referenced by the ObjectProperty has changed, and you try to add some elements to the new list instance, you won't be notified. This is because your ListChangeListener is still registered on the previous ObservableList instance. So in your ChangeListener you have to unregister your ListChangeListener from the old ObservableList instance and register it to the new one. It's a little bit boring to do each time...<br />
<br />
<script src="https://gist.github.com/agonist/5820891.js"></script><br />
<br /></div>
<div>
A major issue we discovered, is that if you replace an empty ObservableList by an other empty ObservableList, the ChangeListener is not notified, as we can see on this unit test, so that you can't correctly re-register the ListChangeListener on the new instance:</div>
</div>
<div>
<br /></div>
<div>
</div>
<script src="https://gist.github.com/agonist/5820938.js"></script><br />
<br />
Why ? cause the equals method implementation return <b>true </b>between the two ObservableList.<br />
<br />
So as you see... using an ObservableList with the Property pattern, is not really cool.<br />
<br />
This is a problem, isn't it ??</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-t7Ubjnhj8E0/UcKx069pAHI/AAAAAAAAAHg/fiNE6WZjHh4/s1600/legoeyes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-t7Ubjnhj8E0/UcKx069pAHI/AAAAAAAAAHg/fiNE6WZjHh4/s1600/legoeyes.png" /></a></div>
<br /></div>
<div>
<br />
Oh Legolas wants to help us. So listen what he says:<br />
<br />
Replace our ObjectProperty<span style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 13px; line-height: 20.796875px;"><</span>ObservableList<T> by a <a href="http://docs.oracle.com/javafx/2/api/javafx/beans/property/ListProperty.html" target="_blank">ListProperty</a><span style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 13px; line-height: 20.796875px;"><</span>T>. ListProperty implements both Property<ObservableList> and ObservableList and makes the whole wrapping really transparent for the developer, taking care of the previous ListChangeListener manipulation automatically !</div>
<div>
With that, if you want to be notified when the content of the List is modified, you just need to register the ListChangeListener once.</div>
<div>
<br /></div>
<div>
Like that :</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ub3zShmpGrI/UcGBTIgIOOI/AAAAAAAAAGE/0s3N7W0np6s/s1600/Dessin+sans+titre+%25282%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-ub3zShmpGrI/UcGBTIgIOOI/AAAAAAAAAGE/0s3N7W0np6s/s1600/Dessin+sans+titre+%25282%2529.png" height="176" width="320" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br />
<br />
<br />
<br />
When you do this, adding an element will notify the listener, and changing the ObservableList instance will call the listener to. And if you add an element after changing the list instance, no problem! the listener will also be notified of the change in the new list instance. No need to register a new Listener on the new List, the ListProperty manages it for you !</div>
</div>
<div>
<br /></div>
<div>
This unit test show us the ListChangeListener is called 5 times, once on each change.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/agonist/5820846.js"></script></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Now you are ready to replace your ObjectProperty<ObservableList> by ListProperty ! Have fun</div>
<div>
<br /></div>
<div>
<br /></div>
Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-5869972813069021759.post-64614090063241727002013-04-01T10:31:00.000+02:002013-06-22T00:37:42.442+02:00FXML + FXForm2 = Developing forms has never been so easy!<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-HxfZGtzqYwI/UcFsH25w9MI/AAAAAAAAAFQ/ALxxXExakA0/s1600/fxfor2-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-HxfZGtzqYwI/UcFsH25w9MI/AAAAAAAAAFQ/ALxxXExakA0/s1600/fxfor2-2.jpg" height="265" width="400" /></a></div>
<span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">We just released a major version of </span><a href="http://www.fxform2.com/" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">FXForm2</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> (0.2.0) that includes </span><b style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">FXML support</b><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">.</span><br />
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br />
<div style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
This new version introduces the brand new <b>FXMLSkin</b>:</div>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">write your model bean</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">design your form in FXML</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">FXForm2 do the rest!</li>
</ul>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<b>How does it work?</b> The FXMLSkin lookups all required nodes in the FXML file using their id and bind them automatically to the model bean. This skin offers a new flexible way to create complex forms without the pain of writing all the controllers logic. See <a href="https://github.com/dooApp/FXForm2/wiki/Style-your-form-with-css" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">wiki</a> to know how to construct node ids.</div>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<b>How do I use it? </b>form.setSkin(new FXMLSkin(form, my_file.fxml));</div>
</div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<b>What about the original skins? </b>Don’t worry, the original Default and Inline skins are still here and will still build the whole form for you! They are still very useful if you don’t need to customize your form too much and allow you to get quickly a functional form.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Feel free to give us feedback about this new feature!</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<i>Note: This release implied some architectural refactorings in FXForm2 and the form API has been slightly modified. If you have developed custom skins or custom node factories for a previous FXForm2 version, you will need to migrate them. An article will be published soon to help you do this very easily.</i></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-59220351103096071542012-06-19T10:29:00.000+02:002013-06-22T01:00:03.190+02:00Logarithmic scale strikes back in JavaFX 2.0<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
JavaFX provides an impressive chart API that allows to draw a wide range of charts. Unfortunately the only available scale for XY charts is a linear implementation.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://blog.dooapp.com/javafx-chart-api-and-logarithmic-scale-tag-ja" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">As we did it two years ago for javafx 1</a>, we defined the logarithmic axis for javafx 2.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
We received some requests of developpers who need to use a logarithmic axis but thay are confronted to the understanding of how axis works in javafx 2 and the impossibility to extend the NumberAxis, since it’s final in the API. So the only way to have a logarithmic axis is to extend directly the ValueAxis abstract class. Below, we’ll see how to implement all required methods to make it works. At the end you’ll be able to have this kind of chart :</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
So let’s create our LogarithmicAxis class that extends ValueAxis<number> and define two properties that will represent the log lower and upper bounds of our axis. </number></div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3218247.js"></script></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">Then we bind our properties with the default bounds of the value axis. But before, we should verify the given range according to the mathematic logarithmic interval definition.</span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3225604.js"></script></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Now we have to implement all abstract methods of the ValueAxis class.</div>
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
The first one, calculateMinorTickMarks is used to get the list of minor tick marks position that you want to display on the axis. You could find my definition below. It’s based on the number of minor tick and the logarithmic formula.</div>
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3226464.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">Then, the calculateTickValues method is used to calculate a list of all the data values for each tick mark in range, represented by the second parameter. The formula is the same than previously but here we want to display one tick each power of 10.</span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3226509.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">The getRange provides the current range of the axis. A basic implementation is to return an array of the lowerBound and upperBound properties defined into the ValueAxis class.</span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3218403.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">The getTickMarkLabel is only used to convert the number value to a string that will be displayed under the tickMark. Here I choose to use a number formatter.</span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3218380.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">The method setRange is used to update the range when data are added into the chart. There is two possibilities, the axis is animated or not. The simplest case is to set the lower and upper bound properties directly with the new values.</span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3226620.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">In order to have an animated axis, we should declare two timelines that will set progressively the range and use them if the animate parameter is true.</span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3226631.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3226543.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">We are almost done but we forgot to override 3 important methods that are used to perform auto-ranging and the matching between data and the axis (and the reverse).</span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3226659.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Well it’s done! I hope that this article will help you to define your own logarithmic axis and don’t hesitate to give me your feedback on this implementation.</div>
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Full code is available here :</div>
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3227204.js"></script></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/kevinsdooapp/3227300.js"></script></span></span></div>
</div>
</div>
Anonymousnoreply@blogger.com5tag:blogger.com,1999:blog-5869972813069021759.post-61106194157490815822012-06-19T10:26:00.000+02:002013-06-22T01:00:17.999+02:00JavaFX 2.0, Forms and Bean Validation: FXForm2 is here!<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-zY2BOn1pARc/UcFrGhNscjI/AAAAAAAAAFA/gTqmyXEHqbU/s1600/fxform.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-zY2BOn1pARc/UcFrGhNscjI/AAAAAAAAAFA/gTqmyXEHqbU/s1600/fxform.png" height="400" width="351" /></a></div>
<br />
...and we are back on our technical blog!</div>
<span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">We started </span><a href="http://blog.dooapp.com/dude-where-is-my-form" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">last year </a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">a project called </span><a href="https://bitbucket.org/dooapp/fxform/wiki/Home" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">FXForm</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> providing automatic form generation in JavaFX 1.3. We have been using this library intensively in some of our applications. </span><a href="http://javafx.com/" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">JavaFX 2.0</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> is now a public beta. It did not took too much time until we decided to migrate FXForm to this exciting new version of the JavaFX technology.</span><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> Actually, it was not really relevant to convert the old code to JavaFX 2.0 code. Most FXForm code was about binding and this part of the API has be heavily modified in JavaFX 2.0 to fit the constraints of the Java langage. So we decided to write it again from scratch — and you know what? This was quicker than expected to achieve! The new JavaFX 2.0 API is intuitive and clear. By the way, some features of the Java ecosystem where much more easier to integrate such as the </span><a href="http://www.jcp.org/en/jsr/detail?id=303" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">JSR 303 Bean Validation</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> support. So we are proud to announce </span><a href="http://dooapp.github.com/FXForm2/" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">FXForm2</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">. Check our </span><a href="https://github.com/dooApp/FXForm2/wiki/Get-started" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Get Started</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> page to create your first form! Many features and default controls are still coming, but any help is welcome! Feel free to </span><a href="http://www.dooapp.com/fr/contacts/new" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">contact us</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">.</span>Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-5869972813069021759.post-83138321346425441072012-06-19T10:24:00.000+02:002013-06-22T01:01:04.023+02:00Netbeans JavaFX Composer: Designing a CustomNode<span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">The JavaFX composer is a powerful tool to design interfaces but at first it’s not really obvious how to split a complex interface into several pieces and how to handle custom nodes. In this article I’ll present the approach that turned out to be the most efficient from my own experience after some months of work with this composer.</span><br />
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; color: #4c4c4c; font-family: inherit; font-style: inherit; line-height: 24px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Create a new desktop design file called Main.fx that contains the common design parts of your application.</li>
</ul>
<div class="separator" style="clear: both; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; text-align: center;">
<a href="http://2.bp.blogspot.com/-ewLNNNNRSq0/UcFqN1DAasI/AAAAAAAAAEo/jKUVmMoJaNw/s1600/netbeans1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-ewLNNNNRSq0/UcFqN1DAasI/AAAAAAAAAEo/jKUVmMoJaNw/s1600/netbeans1.jpg" height="254" width="400" /></a></div>
<div style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">
<br /></div>
<div>
<ul style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Now let’s say we have the following model object and its manager:</li>
</ul>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/anonymous/512630.js"></script></span></span></div>
</div>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/anonymous/512632.js"></script></span></span></div>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div>
<ul style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Next step is to design the node responsible for rendering a Doo instance in the interface. Select New File > JavaFX Fragment Design File to create a DooNode.fx design file. This will create a design fragment that you can edit visually with the JavaFX composer. Let’s switch to the “Source” view and add a field to this class that will contain the Doo instance edited/rendered in our node.</li>
</ul>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/anonymous/512636.js"></script></span></span></div>
</div>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div>
<ul style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">We can now design this node and bind it to the rendered object.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-FC6u9M250UY/UcFqg6OEoII/AAAAAAAAAEw/ZsoyVO4jgs8/s1600/netbeans2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-FC6u9M250UY/UcFqg6OEoII/AAAAAAAAAEw/ZsoyVO4jgs8/s1600/netbeans2.jpg" height="253" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<ul style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Now the question is how to use this design file in the main interface? The composer generates a method called getDesignRootNodes() that gives you access to the parent nodes of the design file. Using this method to handle this node is not really handy since it’s not defined in any interface and it won’t be easy to switch from a renderer to another one. JavaFX define the concept of custom node through the CustomNode class. Why not using this class as parent class for our design file? Switch back to the source view and let DooNode extends CustomNode. Now just define the postinit method and insert the root nodes into the children of the custom node. Your class should look like this now:</li>
</ul>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/anonymous/512651.js"></script></span></span></div>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div>
<ul style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Our DesignNode class is now a classical CustomNode and can be manipulated in a transparent way in the main design file. Let’s insert a flow layout into the Main design class and bind it’s content to a sequence of DooNode associated to the doo’s defined in the manager:</li>
</ul>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/anonymous/512655.js"></script></span></span></div>
</div>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div>
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
And that’s it! If you run the application you should see something like this:</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-fCJAguUWQ4I/UcFqw5EAatI/AAAAAAAAAE4/TnOkLkBCIX0/s1600/netbeans3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-fCJAguUWQ4I/UcFqw5EAatI/AAAAAAAAAE4/TnOkLkBCIX0/s1600/netbeans3.jpg" height="228" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
This approach provides a handy way to split the interface into several small pieces in a transparent way and to take advantage of the composer features.</div>
<div style="border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<i>Note: the Netbeans project is available in the CustomNodeDesign file attached to this post</i></div>
<div>
<i><br /></i></div>
<div>
<br /></div>
<div>
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="font-size: 15px; line-height: 24px;"><br /></span></span></div>
</div>
</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-59881778739578687572012-06-19T10:21:00.000+02:002013-06-22T01:01:18.571+02:00Dude, Where is my form?<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Building UI forms for editing model objects is a repetitive task. That’s why we have started a small project called <a href="http://bitbucket.org/dooapp/fxform" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">FXForm</a> to provide automatic form generation for JavaFX objects. The goal of this library is to easily create customizable forms for any JavaFX object.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
A small example might be more talkative. Let’s imagine you have the following model class:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/anonymous/478151.js"></script></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">and you need a form to edit an instance of this class. FXForm allows you to generate this form with a few lines of code:</span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><script src="https://gist.github.com/anonymous/478153.js"></script></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="line-height: 24px;"><br /></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">and you will get something like this:</span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-YhP4r_bRtlU/UcFptib5ZoI/AAAAAAAAAEc/uRt55Uporkg/s1600/dude-where-is-my-form-0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-YhP4r_bRtlU/UcFptib5ZoI/AAAAAAAAAEc/uRt55Uporkg/s1600/dude-where-is-my-form-0.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; text-align: left;">Checkout the </span><a href="http://bitbucket.org/dooapp/fxform/wiki/Usage" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-align: left; text-decoration: none; vertical-align: baseline;">Usage</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; text-align: left;"> page of the project wiki for more information!</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-y8q3E3ZVifE/UcFptl0JUyI/AAAAAAAAAEg/AY7pmfDIzyU/s1600/dude-where-is-my-form-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-y8q3E3ZVifE/UcFptl0JUyI/AAAAAAAAAEg/AY7pmfDIzyU/s1600/dude-where-is-my-form-1.jpg" height="124" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; text-align: left;"><br /></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;"><br /></span></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-4814167243781372702012-06-19T10:18:00.001+02:002013-06-22T01:01:43.024+02:00JavaFX composer, dynamic layout and XScene<span style="background-color: white; color: #4c4c4c; font-family: arial, sans-serif; line-height: 24px;">As I mentioned in a </span><a href="http://blog.dooapp.com/developing-a-business-application-with-javafx" style="background-color: white; border: 0px; color: #2a5db0; font-family: arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">previous post</a><span style="background-color: white; color: #4c4c4c; font-family: arial, sans-serif; line-height: 24px;">, I was quite unsuccessful developing a resizable application with dynamic layout behavior using the beta release of the Netbeans composer. An Amy Fowler’s post about </span><a href="http://amyfowlersblog.wordpress.com/2010/05/26/javafx-1-3-growing-shrinking-and-filling/" style="background-color: white; border: 0px; color: #2a5db0; font-family: arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">Growing, Shrinking and Filling</a><span style="background-color: white; color: #4c4c4c; font-family: arial, sans-serif; line-height: 24px;"> reminded me that I should give another try - dynamic sizing behavior is a great thing.</span><br />
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Moreover, some interesting <a href="http://wiki.netbeans.org/JavaFXComposerNewIn69FCS" style="border: 0px; color: #2a5db0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">changes</a> have been introduced in the RC1 version of Netbeans. Let’s see how to do this:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 0px 15px; outline: 0px; padding: 0px; vertical-align: baseline;">Create a new design file. By default the design file creates a <a href="http://java.sun.com/javafx/1.3/docs/api/javafx.scene/javafx.scene.Scene.html" style="border: 0px; color: #2a5db0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">javafx.scene.Scene</a>. Unfortunately, this scene does not dynamically resize it’s child nodes to it’s current size. This is exactly what the <a href="http://jfxtras.googlecode.com/svn/site/javadoc/release-0.6/org.jfxtras.scene/org.jfxtras.scene.XScene.html" style="border: 0px; color: #2a5db0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">org.jfxtras.scene.XScene</a> does. However, in the beta version of Netbeans Composer it was not possible to replace the default Scene by the one provided by JFXtras. Netbeans RC1 has introduced a cool feature: the <a href="http://wiki.netbeans.org/JavaFXComposerNewIn69FCS#Class_Name_Property" style="border: 0px; color: #2a5db0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">Class Name Property</a>. This allows to customize the class used in the generated code for a given component. This is a very interesting feature, bringing flexibility without overloading the composer’s interface. This way you can customize any component handled by the composer (as long as it’s using the same properties). In our case, just set “org.jfxtras.scene.XScene” as class scene for the scene component.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 0px 15px; outline: 0px; padding: 0px; vertical-align: baseline;">Next step is to add a layout manager to the scene. Let’s use the <a href="http://java.sun.com/javafx/1.3/docs/api/com.javafx.preview.layout/com.javafx.preview.layout.Grid.html" style="border: 0px; color: #2a5db0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">Grid</a> container, which is <a href="http://wiki.netbeans.org/JavaFXComposerNewIn69FCS#Grid_Container" style="border: 0px; color: #2a5db0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">now supported</a> by the RC1 version of the Composer! You can then add components to the layout and manage the number of rows and columns of the Grid layout. Notice that a new property has been introduced in the layout properties of the components: “Grid Hor. Span”. This allows to control the spanning of a component over multiple columns. For example, in the attached screenshots, the bottom button is spanned over two columns. The left button switches it’s Vertical Fill property, automatically adapting it’s size to the new constraints.</li>
</ul>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
You can now start building your application with dynamic sizing and layout using the JavaFX Composer - a big step forward!</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-X3LziEzLfsE/UcFpAiamtFI/AAAAAAAAAD8/8JZ4MA_UWJY/s1600/xsene.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-X3LziEzLfsE/UcFpAiamtFI/AAAAAAAAAD8/8JZ4MA_UWJY/s1600/xsene.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-LSk1WC4LDlU/UcFpAgeucuI/AAAAAAAAAEQ/elAmPZqgxe4/s1600/xscene2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-LSk1WC4LDlU/UcFpAgeucuI/AAAAAAAAAEQ/elAmPZqgxe4/s1600/xscene2.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-UdQhOOJ_G8k/UcFpAtionmI/AAAAAAAAAEM/3llTbPK8Mq4/s1600/xscene3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-UdQhOOJ_G8k/UcFpAtionmI/AAAAAAAAAEM/3llTbPK8Mq4/s1600/xscene3.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-45268205128128594612012-06-19T10:18:00.000+02:002013-06-22T01:01:31.021+02:00IoC in JavaFX<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://stackoverflow.com/questions/3058/what-is-inversion-of-control" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">loC</a> frameworks are very useful when you develop modular applications. I’ve been working with <a href="http://code.google.com/p/google-guice/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Guice</a> and <a href="http://tapestry.apache.org/tapestry5/tapestry-ioc/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Tapestry IoC</a> (which is an independent module of the Tapestry project) in the past, but I had to abandon them when I switched to JavaFX since none of them seemed to be compatible with JavaFX.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
The main issue was about the use of annotations. They are both heavily depending on annotations to define the injection mechanisms - and JavaFX unfortunately does not allow us to use annotations…</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
However, the Tapestry framework provides another way to access services by requesting them directly to a registry without using annotations. (I didn’t find something similar in Guice, but it doesn’t mean that there is no way to get Guice working with JavaFX).</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
To play with tapestry injection, the first thing you need is to define an interface describing your injected service, let’s call it TestInterface:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/420814" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/420814" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/420814</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
(<em style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">actually it’s an abstract class, since JavaFX does not use interfaces, but it doesn’t matter</em>)</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Next step is to define a concrete implementation of this interface that will be injected, for example TestInterfaceImpl:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/420816" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/420816" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/420816</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
The core concept of Taspestry IoC framework are the <a href="http://tapestry.apache.org/tapestry5/tapestry-ioc/module.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">modules</a>. Basically a module define some bindings between interfaces and their implementations. Let’s define a pure JavaFX module binding our injected service:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/420820" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/420820" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/420820</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
(<em style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Note that the concept of “<a href="http://tapestry.apache.org/tapestry5/tapestry-ioc/service.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">autobuilding</a>” will not be working, since it requires to define a “bind” method, which is a reserved keyword in JavaFX - not idea how to fix this for the moment</em>)</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
We can now set up a registry with the defined module:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/420821" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/420821" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/420821</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Well, we are now ready to request the service corresponding to the TestInterface simply by asking it directly to the registry:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/420822" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/420822" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/420822</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
And you should get the instance of TestInterface you defined in the corresponding module!</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Finally, to get things a bit cleaner you can move all the registry stuff the a separate class:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/420844" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/420844" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/420844</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
This way, <em style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">IoC.registry</em> will give you an access to your registry in your application. Just make a call at <em style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">IoC.init</em>() before using it. This is not as “beautiful” as annotations, but still much better than no IoC. Let me know if you get a more elegant solution!</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Note</strong>: This article is not intended to be a tutorial for taspestry-ioc, you will find more documentation about it in this <a href="http://wiki.apache.org/tapestry/Tapestry5HowToIocOnly" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">howto</a> and on the official <a href="http://tapestry.apache.org/tapestry5/tapestry-ioc/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">website</a>. Moreover, there might be other IoC frameworks that work with JavaFX, just let me know if you are successfully using another one!</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Note 2</strong>: Tapestry IoC is following a strict “fail-fast” policy and building the registry will fail if your module contains unrecognized methods. This is a bit problematic with JavaFX modules. Actually, all JavaFX classes implements the com.sun.javafx.runtime.FXObject interface. So a JavaFX class contains systematically a bunch of methods inherited from this interface, that tapestry does not recognize. This will lead to an error message like this when you try to register your JavaFX module into the registry: “java.lang.RuntimeException: Module class injectiontest.services.TestModule contains unrecognized public methods: public boolean com.sun.javafx.runtime.FXBase.getAsBoolean$(int,int),[…]”. There is a corresponding <a href="https://issues.apache.org/jira/browse/TAP5-1171" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">jira entry</a>. You can get the patch from this ticket to solve this issue for the moment.</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-34486731537035380712012-06-19T10:16:00.000+02:002013-06-22T01:01:55.729+02:00Developing a business application with JavaFX Composer<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
When we started developing our first business application, I’ve hesitated a long time whether we should give a try to the <a href="http://wiki.netbeans.org/JavaFXComposer" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Netbeans JavaFX composer</a>. I am not a big fan of such gui design tools, especially because you usually get stuck sooner or later as your application grows. But I decided to give a chance to this new tool and got really convinced by the <a href="http://wiki.netbeans.org/JavaFXComposer#Tutorials_and_Guides" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">tutorials</a>. So we started developing our application with this tool and we have now reached our first release. So let’s have a review:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">The first main question is about resizable layout. You can edit all the required layout information using the composer, but for the moment it’s clearly more oriented for static layouts. So we decided to develop a fixed-size application. I hope future releases of JavaFX and of the composer will facilitate the development of resizable applications (for example by providing a resizable scene like the JFxtras’ <a href="http://jfxtras.googlecode.com/svn/site/javadoc/release-0.6/org.jfxtras.scene/org.jfxtras.scene.XScene.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">XScene</a>)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">The composer is designed to work with a single design file, i.e., your whole interface code is stored in a single JavaFX class. We quickly reached a point were we got a “<a href="https://mix.oracle.com/questions/135007-code-too-large-in-design-class-developed-with-netbeans-composer" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">code too large</a>” error, due to the size of the class which is limited by the compiler. At this point I really thought I would stop using the composer, since I couldn’t figure out how to split the design file without loosing the advantages of the composer. I have finally found an approach which proved to be quite handy using placeholders panels to integrate the nodes of separate design files. I’ll post a separate blog article about this.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Another big drawback of the Composer is that you can’t work with custom nodes (for examples with <a href="http://jfxtras.org/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">JFXtras</a> controls). It would be really interesting to be able to manipulate custom nodes with the composer. For the moment the solution is to use a placeholder and to insert your component manually. As long as you use mostly standard JavaFX components this is not too annoying, but it can be quickly annoying if you work with many custom nodes or controls.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">The state system is robust and provides a very nice way to manage the view according to the logic of the application. It’s very easy and powerful to work with the states. The only point that was sometimes problematic is that you often edit some properties unintentionally in a specific state instead of in the master state. The “set to master” button is then really helpful.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Some minor features are still buggy. For example the edition of the Tooltip of a node does not work for the moment, clicking on the add button just lead to some Netbeans errors. However, this can still be done manually.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">The auto-completion is unfortunately not provided when you edit the code of a binding through the property dialog, that would be handy.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Refactoring does not work in the code managed by the composer. So if your gui is bound to a model object and that you refactor the name of this object, the managed code won’t be updated and you will have to do it manually through the composer gui.</li>
</ul>
To conclude I must admit that I’ve been really impressed by the Composer tool. It’s stable and robust. The resulting JavaFX code is clear and remains clean even after hours playing with the composer. Some of the drawbacks and limitations I’ve enumerated are clearly annoying, but finally the composer is very very promising. I wouldn’t have bet one month ago that we would have developed a business application with this tool. Now it’s done, and I’m not sure I would be able to give up this composer so easily.</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-16357432588509607192012-06-19T10:15:00.000+02:002013-06-22T01:02:53.983+02:00JavaFX chart API and logarithmic scale<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-IBRoU070XFc/UcFoW6bHvwI/AAAAAAAAAD0/CFceySehxEE/s1600/log.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-IBRoU070XFc/UcFoW6bHvwI/AAAAAAAAAD0/CFceySehxEE/s1600/log.jpg" /></a></div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
JavaFX provides an impressive chart API that allow to draw a wide range of charts. Unfortunately the only scale that is available for XY charts is a linear implementation. Since the javadoc of the API is sometimes a bit rough it took me some times to get figure out how to get a logarithmic scale. After a discussion on <a href="https://mix.oracle.com/questions/135325-custom-chart-axis-and-tickmark" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">mix.oracle.com</a> it turned out that there where to approaches: </div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">the first one is to transform your data with the logarithmic function before injecting it into the chart and to adjust the formatting of the labels to “simulate” a logarithmic scale. Since I don’t really like the idea of manipulating the data to get the expected representation I prefer the second approach:</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">the second one is to provide your own implementation of a logarithmic <a href="http://java.sun.com/javafx/1.3/docs/api/javafx.scene.chart.part/javafx.scene.chart.part.Axis.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Axis</a>. Let’s see how to do this:</li>
</ul>
Extend the <a href="http://java.sun.com/javafx/1.3/docs/api/javafx.scene.chart.part/javafx.scene.chart.part.ValueAxis.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">ValueAxis</a> class. There are two methods to implement:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: Arial; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><em class="modifiers" style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">public</em> <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getDisplayPosition</strong>(<em class="parameters" style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">value</strong>: <a href="https://www.blogger.com/blogger.g?blogID=5869972813069021759" style="border: 0px; color: #098cec; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;"><em style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">java.lang.Object</em></a></em>) : <a href="https://www.blogger.com/blogger.g?blogID=5869972813069021759" style="border: 0px; color: #098cec; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;"><em style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Number </em></a><em style="border: 0px; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="https://www.blogger.com/blogger.g?blogID=5869972813069021759" style="border: 0px; color: #098cec; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;"><span style="border: 0px; color: black; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span></a></em></span></div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="https://www.blogger.com/blogger.g?blogID=5869972813069021759" style="border: 0px; color: #098cec; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;"><span style="border: 0px; color: black; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span></span></a></span><span style="border: 0px; font-family: arial, helvetica, sans-serif; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">will do the mapping between a data value and its visual position. For a log axis, the implementation will look like this:</span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #4c4c4c; font-family: arial, helvetica, sans-serif;"><script src="https://gist.github.com/anonymous/387818.js"></script></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><em class="modifiers" style="border: 0px; color: #4c4c4c; font-family: Arial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">protected abstract</em><span style="color: #4c4c4c; font-family: Arial;"> </span><strong style="border: 0px; color: #4c4c4c; font-family: Arial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">updateTickMarks</strong><span style="color: #4c4c4c; font-family: Arial;">() : </span><em style="border: 0px; color: #4c4c4c; font-family: Arial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Void </em><span style="border: 0px; color: #4c4c4c; font-family: Arial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">will define which tick marks should be displayed. The javadoc does not say much about this function. It looks like the main idea is to update the <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">tickMarks </strong>sequence of <a href="http://java.sun.com/javafx/1.3/docs/api/javafx.scene.chart.part/javafx.scene.chart.part.Axis.TickMark.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">TickMark</a>. The fields of TickMark are weirdly flagged as public-read package, so in oder to instantiate TickMark for our implementation we first need to define a class extending TickMark, let’s say CustomTickMark, and to put it in the package <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">javafx.scene.chart.part </strong>in order to be able to set the required fields. After that you just need to update the sequence of tick marks with the marks you want to see on your chart, which can look like this:</span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #4c4c4c; font-family: Arial;"><script src="https://gist.github.com/anonymous/387822.js"></script></span></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">Well, you’re now ready to use this LogAxis with your chart. The following example demonstrate the use of this LogAxis as x-scale of a chart.</span></span></span></div>
<div style="background-color: white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #4c4c4c; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><script src="https://gist.github.com/anonymous/387824.js"></script></span></span></span></div>
Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-5869972813069021759.post-27830910397855612282012-06-19T10:12:00.001+02:002013-06-22T01:03:16.059+02:00Draggable nodes in XTreeView<span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">I recently played around with </span><a href="http://jfxtras.googlecode.com/svn/site/javadoc/release-0.6/org.jfxtras.scene.control/org.jfxtras.scene.control.XTreeView.html" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">XTreeView</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> the tree component of </span><a href="http://jfxtras.org/" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">JFXtras</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">. It’s a nice component with a clean boundary between control and view so that was quiet easy to add a draggable behaviour to the nodes. By the way I’m really grateful to Rakesh Menon for his clear post about </span><a href="http://blogs.sun.com/rakeshmenonp/entry/javafx_drag_and_drop" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">Drag and Drop in JavaFX</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">.</span><br />
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
The main idea is to wrap a renderer into a draggable wrapper that will encapsulate the created nodes into a <a href="http://code.google.com/p/javafxdemos/source/browse/DragNDrop/src/dragndrop/dnd/SwingDragSource.fx" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;" target="_blank">SwingDragSource</a>.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Checkout the demo: </div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://joe.dooapp.com/demoDnDTreeView/DraggableTreeViewDemo.jnlp" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a></div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
You will find the source and the eclipse project in the attached zip.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
[[posterous-content:AEJvlcJRhkIFG0D5yfRT]]</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-81494268880260348302012-06-19T10:12:00.000+02:002013-06-22T01:03:05.097+02:00JFXtras available in Sonatype OSS Repository<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
We have recently worked on a mavenization process of the <a href="http://jfxtras.org/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">JFXtras project</a> to make it easily usable in a maven project. The project now has a pom and the current version (0.7-SNAPSHOT) is hosted at the <a href="http://oss.sonatype.org/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Sonatype OSS repository</a>.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
To use JFXtras in your maven project, make sure that your maven environment has access to the Sonatype repository and just add the following dependencies to your pom:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
EDIT: artifacts names have changed, they are now prepended with “jfxtras-“</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/372473" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/372473" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/372473</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/372475" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/372475" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/372475</a></div>
<br />
Hope this helps using this great lib!</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-31206681914801991462012-06-19T10:11:00.000+02:002013-06-22T01:03:29.514+02:00Just bind it<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
The javafx <a href="http://java.sun.com/javafx/1/tutorials/core/dataBinding/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">binding concept</a> is nice and powerful. But sometimes it might be a bit difficult to figure out how to use it.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Let’s assume you have the following bean</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/337407" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/337407" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/337407</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
and you need a variable bound to the sum of x*y for a sequence of those beans. Actually this problem can be expressed more generally: how to bind a variable to the result of a function applied to a sequence of elements (i.e. have it updated each time the sequence is modified or a field of a bean is modified). In java you would required tons of <a href="http://java.sun.com/j2se/1.4.2/docs/api/java/beans/PropertyChangeListener.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">PropertyChangeListener</a> registered correctly. With javafx you can write it in a more concise way using the <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">bind</strong> keyword and<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">bounded</strong> functions. But the first time I wanted to write it, I had to fight a little bit with the syntax. So I wanted to share this small unit test demonstrating a way to achieve this:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: inherit;"><span style="font-style: inherit;"><a href="https://gist.github.com/337408" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a></span></span><a href="https://gist.github.com/337408" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/337408</a></div>
</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-84339635956699737752012-06-19T10:10:00.001+02:002013-06-22T01:04:19.598+02:00Unit testing your javafx application<span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">In my </span><a href="http://blog.dooapp.com/spice-up-your-javafx-project-with-maven" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">last post</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> I described how to set up a maven-javafx project using the </span><a href="http://wiki.jfrog.org/confluence/display/JP/JavaFX+Maven+Plugin" style="background-color: white; border: 0px; color: #4ea3d0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">jfrog-javafx</a><span style="background-color: white; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;"> plugin. One essential point was still missing in the configuration: the execution of javafx unit tests. By default, the jfrog-javafx plugin is not configured to handle a test folder. So let’s see how to do that:</span><br />
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Create a src/test/javafx folder in your project</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Put a unit test in this folder. Note that javafx does not support annotations, so the test must be written according to junit 3 rules. (however, you can use junit 4 in your dependencies, since it’s backward compatible)</li>
</ul>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/332948" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/332948" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/332948</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Update the configuration of the jfrog-javafx plugin to compile both the main and the test javafx folders. We define two executions for this plugin. The<b>main</b> execution will process the javafx resources and compile the javafx code in src/main/javafx during the compile phase. The <b>test </b>will compile the javafx code in src/test/javafx during the test-compile phase. <i>You might also notice that junit is declared as a dependency of the plugin to fix a classpath issue since the jfrog-javafx plugin does not include the dependencies with test scope during compilation</i></li>
</ul>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/332954" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/332954" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/332954</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Now your javafx test should be executed during the test phase of the maven lifecycle like a regular java unit test. You can now let <a href="https://hudson.dev.java.net/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">hudson</a> run your javafx unit tests at each build!</li>
</ul>
</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-68109169744390451762012-06-19T10:10:00.000+02:002013-06-22T01:03:41.202+02:00MediaPlayer keeping quiet<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
According to the javafx media <a href="http://www.javafx.com/docs/tutorials/mediabrowser/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">tutorial</a>, playing a sound is simple. <a href="http://www.javafx.com/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">JavaFX</a> provides a <a href="http://java.sun.com/javafx/1.2/docs/api/javafx.scene.media/javafx.scene.media.MediaPlayer.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">MediaPlayer</a> to easily play any media source. You just need to define your <a href="http://java.sun.com/javafx/1.2/docs/api/javafx.scene.media/javafx.scene.media.Media.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Media</a> by it’s URI, so this should looks like:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/336526" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/336526" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/336526</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
This seems very easy, but if you tries this, you might here nothing!</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Then you are certainly in one of the two following cases:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Your sound resource is packaged within your jar. This is not supported for the moment, see <a href="http://javafx.com/faq/#5.3" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">javafx faq</a></li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">You are trying to play a short sound sample. The first time I tried to play a 2s sound sample, my speakers kept desperately quiet. So what happened? A look at the <a href="http://www.javafx.com/docs/articles/media/performance.jsp" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Improve Media Performance</a> tutorial put me on the way to the solution: according to this article, “f<span style="border: 0px; font-family: inherit; font-style: inherit; line-height: 17px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">or faster playback of a streaming media that is progressively downloaded,<span style="border: 0px; font-family: Arial, Helvetica, sans-serif; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> it helps to initialize the engine first by using the same media behind the scenes<span style="border: 0px; font-family: arial, helvetica, sans-serif; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">”. So, when you call the play function of the MediaPlayer, that playback engines “crunches” the first seconds of the sound sample during it’s initialization. For a long sound, you just almost don’t notice it, but a short sound sample might totally vanish. Unfortunately the MediaPlayer does not provides an init method, and the only way you can do it for the moment is to set your player to mute, play your media once and then rewind and unmute. It’s quiet ugly, but it’s the “official” solution proposed in the previous article. If you have a better solution, I’d be happy to hear it. Or just hope that javafx 1.3 will add an init method to the MediaPlayer.</span></span></span></li>
</ul>
</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-84735786669893391062012-06-19T10:09:00.000+02:002013-06-22T01:04:30.046+02:00Spice up your JavaFX project with maven<h2 style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: inherit; line-height: 33px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="p_embed p_file_embed" style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="p_embed_description" style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-size: small;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">MavenFX.zip</strong> <a href="http://getfile0.posterous.com/getfile/files.posterous.com/dooapp/r7k1nyBAuoRxj0hk2NwAx9W1qqmr7BoUfgjJd1tLvJ5RXjJo5zt0gY7mksWU/MavenFX.zip" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Download this file</a></span></div>
</div>
<div style="border: 0px; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-size: small;"><a href="http://www.javafx.com/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">JavaFX</a> is a promising technology for nice Rich Internet Applications (RIA). However this is a quiet recent product (it was introduced by Sun at JavaOne, May 2007) and still lacks at integration with continuous development environments like <a href="https://hudson.dev.java.net/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">hudson</a>. <a href="http://en.wikipedia.org/wiki/Continuous_integration" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Continuous integration</a> is great because it reduces the gap between the development process and the release phase. With continuous integration, the work made by the developers is continuously compiled and tested against unit tests. This helps detecting many problems very early and simplifies the whole development process.</span></div>
<div style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-size: small;">Hudson is an integration server that works very nicely with <a href="http://maven.apache.org/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">maven</a> projects. So the first step to integrate a JavaFX project into our continuous integration environment was to “mavenize” the project. <a href="http://www.jfrog.org/" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">Jfrog</a> has developed a <a href="http://wiki.jfrog.org/confluence/display/JP/JavaFX+Maven+Plugin" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">javafx plugin</a>for maven that integrates the compilation of the javafx sources into the maven lifecycle. Moreover it can generate a jnlp to launch the project. </span></div>
<div style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-size: small;">However, this plugin is by default configured to work with <a href="http://www.jfrog.org/products.php" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">artifactory</a>. For some reasons you might want to use it without artifactory, and that’s possible. Just checkout the attached project to see how to configure it. Since artifactory takes care of some jnlp deployment issues, some additionnal plugins are required in this case: the <a href="http://maven.apache.org/plugins/maven-dependency-plugin/copy-mojo.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">dependency-plugin</a> will copy the dependencies at the codebase directory of the jnlp and the <a href="http://maven.apache.org/plugins/maven-jar-plugin/sign-mojo.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">jar-signer</a> plugin will sign these jars.</span></div>
<div style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-size: small;">At this step your project is fully integrated in the maven world. The last step is to deploy automatically the jnlp and required jars on a server to test your project. This can be achieved with the wagon plugin and its ftp extension (see attached project for an example of configuration). Then hudson can automatically deploy your application after each build by calling the mvn:deploy target. Enjoy!</span></div>
<div style="border: 0px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-size: small;">Note: in the attached project, we use profiles (see profiles.xml) to configure the project dynamically whether this is intended to be run locally or deployed on a remote server. The “dev” profile allow you to run the project locally (using mvn clean package jfrog-javafx:excute) and the “prod” profile if for deployment (mvn -P-dev,prod deploy)</span></div>
</h2>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-37467478937019929262012-06-19T10:08:00.000+02:002013-06-22T01:04:52.225+02:00Unit testing pages with Tapestry and Gaedo<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Today we added our first page unit test using tapestry. Tapestry offer some nice mechanisms to easily test the rendered pages (see the <a href="http://tapestry.apache.org/tapestry5/guide/unit-testing-pages.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">tutorial</a>); however some steps can be a bit tricky (essentially if you want to use the <a href="http://www.ohloh.net/p/gaedo" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">gaedo</a>persistence layer in your tests) so I’ll give a few hints here.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Tapestry provides a <a href="http://tapestry.apache.org/tapestry5/apidocs/org/apache/tapestry5/test/PageTester.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">PageTester</a> object that takes care about injection registry loading and page rendering.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
The PageTester takes an app package name and app name as parameters in its constructor. Make sure you don’t make a mistake in them, because you won’t get any error even if the package or app module don’t exist, so check it twice if your test is failing without evident reason.</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
To use the gaedo module, load it by adding it to the PageTester constructor. Moreover some configuration is required to work with a local database environment. All those steps can be done in an extension of the PageTester:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/295767" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/295767" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/295767</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
You can now use the render method of the GaedoPageTester to get the Document corresponding to a page and check it’s content!</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/295783" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/295783" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/295783</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Last point: in the tapestry documentation you’ll see that you must use the invoke method of the PageTester with a ComponentInvocation instance to provide a context to a given page. But if you use this, you’ll get a compilation error, since the invoke method doesn’t seem to exist yet/anymore (?). As explained in <a href="http://old.nabble.com/How-do-you-pass-a-context-to-PageTester--td25274401.html" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">this thread</a>, you can use the url passed to the render method to set the context. In the second test you can see we pass “John” as context to the “People” page by requesting the “People/John”. Easy, isn’t it? Happy testing with gaedo and tapestry!</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-5869972813069021759.post-79438614269411475632012-06-19T10:07:00.000+02:002013-06-22T01:05:38.296+02:00Gaedo on Ohloh<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
The open source project Gaedo that we use as persistence layer for our project is now on Ohloh.com!</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Gaedo is a persistence library providing dynamic code generation for your queries with strong typing. It’s quick and easy to use. And dynamic code generation is awesome. Let’s assume you need to retrieve your Users using their login field, you just need to define the following interface:</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://gist.github.com/293805" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;"></a><a href="https://gist.github.com/293805" style="border: 0px; color: #4ea3d0; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px 1px; text-decoration: none; vertical-align: baseline;">https://gist.github.com/293805</a></div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
and gaedo will do the rest for you, using the method and fields types and names! It couldn’t be easier to use!</div>
Anonymousnoreply@blogger.com1