• Home
  • Events
  • About
  • JavaFX Abacus Tutorial, Part III

    January 21st, 2013

    This is the third part of a basic tutorial on JavaFX. The other parts can be found here and the code is on github. The running example of the tutorial is to build an abacus. If you are curious how the final solution will look like, please
    have look at this 7 min video.

    Today, we will enrich the current state of the project with animation.

    If you have done your homework – and I assume all of you have done so, right? –
    then you should have a solution like in the
    picture below where you can click on any ball and it will jump between its positions on the
    left and right hand side.

    circles with translations

    For moving the ball, we used a Translation, which as we learned is one of many possible
    Transformations.

    Now, our current balls move in a rather weird fashion: they disappear from one location
    to reappear in a different location. Until we have star-trek like teleportation,
    this is an unrealistic behavior – and not very pleasing for the human eye.

    JavaFX allows us to let the ball move in an animated fashion with a so-called Transition.
    A Transition is an animation of a Transformation, in our case
    the animation of a Translation.

    Transitions have another interesting quality: they animate the transformation in
    a “natural” way. A physical ball would never start with zero velocity, then suddenly
    move at 10 km/h, and then stop instantly. It would accelerate and decelerate.
    Transitions mimic this behavior by animating the underlying transformation
    with an “ease-in” and “ease-out” by default.

    Setting up a transition is easy since their are first-class objects in
    JavaFX and can even be constructed with a builder:

    In order to execute the move do:

    With all that knowledge applied to our abacus implementation, the solution now becomes:

    Homework

    Your homework assignment until next week is to also paint some rails where the balls can sit on.

    Next week we will start looking into JavaFX property binding.

    Have fun coding until then
    Dierk König

    P.S. the GroovyFX version by Tim Yates: here.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    NEW: JavaFX training with Gerrit Grunwald

    January 18th, 2013

    A new year, a new course! Canoo is expanding its training programme with tuition in JavaFX. The two day newcomer’s course is led by JavaFX-Guru Gerrit Grunwald in person. Our visualisation expert has already prepared slides for the first session on February 19, 2013 and divulges, “Our training course enables programmers interested in participating to gain a foothold in JavaFX. In addition to basic theory, we will also be doing a lot of coding, watching demos and discussing many practical examples.” And by the end of the seminar you will have the satisfaction of having programmed your own application, so demonstrating your newly acquired skills. Gerrit explains via a video clip what participants can further expect from the course. All you need to do now is simply register online in order to secure your place.

    JavaFX training courses take place on a three monthly basis at Canoo. Further dates may also be added as required.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    JavaFX Abacus Tutorial, Part II

    January 14th, 2013

    This is the second part of a basic tutorial on JavaFX. The first part can be found here and the code is on github. The running example of the tutorial is to build an abacus. If you are curious how the final solution will look like, please
    have look at this 7 min video.

    Your latest homework assignment was to extend the single-circle-version to a board of 10 * 10 circles.
    Have you done it? Cool.
    When starting you should now see something like
    10 X 10 circles.
    You should now be familiar with how to create a simple JavaFX application, how to use the SceneGraph, adding child nodes, and using builders.

    Today, we will introduce event handling and translation.

    Each node in the SceneGraph can be transformed in various ways by translation, rotation, scaling, and more.
    What we need for the movement is a translation, which is a transformation that displays the node at a given x/y offset from its original position.

    Setting the translation is easy. Simply change the translateX property of the node.

    will display the node 100 pixels to right from its original position.

    Unlike Swing, there is no need to clear the canvas and repaint all nodes on the new position! Changing the translateX property is all it takes. The SceneGraph takes care of proper repainting.

    Let’s say we want the circles in our abacus to move 100 pixel to the right when we click on it. This requires an event handler on the circle that changes the translateX value. Here is how you set such an event handler as an anonymous inner class:

    As an optimization of the above, you can share one event handler between all the circles. In this case use

    The full code now looks like so:

    Clicking on a circle now moves it to the right “on its rail”.
    circles with translations

    Homework

    Your homework assignment is to make the circle moving back to its
    original position (translateX becomes 0) when you click on a circle
    that has been moved before.

    Next week, we will animate the movements.

    Finally

    If you are committed to learn JavaFX, please consider joining one of our JavaFX workshops at Canoo.

    See you next time!
    Dierk König

    P.S. Tim Yates has posted a GroovyFX version.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    IMTF takes over the majority share of Canoo Engineering AG

    January 14th, 2013

    Givisiez/Basel, 14.01.2013. IMTF, market leader in Enterprise Content Management and Compliance Solutions for Financial Service Providers takes over the majority share of Canoo Engineering AG, one of the top end software and IT engineering companies in Switzerland. With this move solid business knowledge is joined with top-notch technological skills enabling both partners to further strengthen their leading role in implementing innovative software solutions and strategies in the field of data and document management.

    Mark Büsser, CEO IMTF Group, commented on the new partnership: “Today more than ever, our clients require solutions, which help them to manage the growing complexity of their processes in a more effective and efficient way – especially in the regulatory field. With this step we bundle experiences from a daily cooperation with 250 banks, insurance companies and public administrations in more than 30 countries. This will further strengthen our reliability and innovative power.”

    Hans-Dirk Walter, CEO of Canoo added: “We complement each other perfectly: Canoo as a technology company with numerous highly innovative software frameworks and components and as an experienced software service provider, IMTF with extensive and international business expertise. Successful and efficient projects are the result of highly educated and motivated people; software solutions depend on the people building them.”

    Canoo will remain an independent company, its culture and success factors will continue to make the difference.

    For more information regarding this transaction please visit http://www.imtf.com or http://www.canoo.com.

    About IMTF:
    IMTF, established in 1987, is a global leader in software and IT services for banks and financial institutions, offering a comprehensive portfolio of solutions for Enterprise Content Management (ECM), Anti Financial Crime, Compliance and Information Protection and has its headquarters in Givisiez/FR. IMTF is represented worldwide through a network of partners as well as own branches in Vienna, London, Singapore and Dubai. Business Experts, Project Manager and Integrators are providing high performance services to more than 200 banks globally.

    Informatique-MTF SA                                      Canoo Engineering AG
    Route du Bleuet 1                                                     Kirschgartenstrasse 5
    1762 Givisiez/Schweiz                                             4051 Basel/Schweiz
    Tel: 026 460 66 66                                                   Tel: 061 228 94 44
    marketing@imtf.com                                               info@canoo.com
    http://www.imtf.com                                               http://www.canoo.com

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Learning JavaFX by example

    January 8th, 2013

    It happened just recently that I prepared a small JavaFX application for a lecture on the topic.
    I’d like to share this experience with all of you in a small series of blog posts.

    The JavaFX application is about building an abacus and along the way we will cover the following topics:

    • getting started with using the JavaFX scenegraph and builders
    • transformations, translations and transitions
    • properties, binding, and event listeners
    • making styles and applying them
    • why you want a presentation model in your app (using dolphin).

    For starting, please have a look at this 7 min video to familiarize yourself with how our abacus will look like and how it works.

    The abacus is a major achievement of human culture when simple counting led to the concept of digits on a scale. It is still useful today for developing a sense and feeling for numbers as well as improving your mental arithmetic.

    Prerequisites

    Please make sure you have the latest JDK 7, which contains JavaFX, and your IDE of choice. That’s all it takes.
    Basic Java knowledge is required.

    Getting started

    All the example code resides on github.

    We start with a simple “Hello World” type of application that we will build upon later.
    The result will show a single black circle like so:
    Abacus_Hello_World

    Just create a single Abacus class like the one below

    A few things to consider about this code.

    You have to extend from Application.

    You need a main method for starting.

    You need to implement the start(stage) method, which will be called with the primary stage.
    The simplest way to think about a stage is to just work with it like a Swing JFrame. It is the outermost frame around your view.

    You need to set a scene for the stage. The scene holds the actual scenegraph that is to be displayed.

    The scene is created with the root node of the scenegraph.

    Note: in the code completion of your IDE you will see this node being called “parent”, which often misleads me into thinking that I have to provide the parent of the scene (the stage) but this is not meant here! You have to provide the “parent” of all scenegraph nodes!

    Our root (parent) is a simple Pane – a node that can have child nodes without caring about their placement.

    Now finally we create the circle by using a CircleBuilder with the “fluent-API” style.

    When adding the circle to the view, note that you cannot do this directly – there is no pane.add(circle).
    Instead, you have to first get the (observable) list of children and add the circle to it.

    Homework

    We need more than one circle. Extend the example such that we have 10 lines of 10 circles.

    The next post in this series will build on your homework.

    Finally

    If you are truly committed to learn JavaFX, please consider joining one of our JavaFX workshops at Canoo.

    See you next time!
    Dierk König

    Tutorial Part II

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    css.php