• Home
  • Events
  • About
  • Workshop – Enterprise Mobile Apps with Sencha Touch 2

    July 26th, 2012

    /ch/open/
    This years /ch/open workshop days will take place from September 4-6th.

    Canoo will hold a workshop about Enterprise Mobile App development with Sencha Touch 2. Come and participate!

    In the area of business applications web based, cross-plattform mobile apps make perfectly sense. Cost efficient multi-plattform development, flexible deployment, leveraging of existing knowledge are the top reasons why companies choose this approach.

    html5HTML5, modern JavaScript frameworks and CSS3 provide everything a mobile developer requires. In addition frameworks like PhoneGap (aka Apache Cordova) provide access to native functionality if needed.
    In order to efficiently develop demanding applications good framework and tool support is mandatory. The Widespread Sencha Touch 2 framework provides a robust basis for that.

    The workshop guides you through all the bits and pieces you need if you want to go beyond toy mobile applications and do real business. Modular architecture and testability are key in that area.

    Workshop topics

    • Sencha Touch 2 MVC architecture
    • REST-Services, Proxies and Stores
    • Handling relational data
    • Dependency injection
    • Testing
    • outlook into offline support, custom components and PhoneGap

    We are also planing to hold this workshop this autumn in Basel. Please leave a comment or contact us directly if you are interested.
    By the way, did you know Canoo is offering a wide range of mobile services? Have a look at www.canoo.com/services/mobile/

    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 recipes "CSS vs. Code"

    July 10th, 2012

    In JavaFX you could style controls by using different ways, two possible solutions are

    • cascading stylesheets (CSS)
    • code (like you know it from Java Swing

    This blogpost is no advice on what is the better approach but only shows a little example of things I came across when using both approaches.

    So let’s take a look at those approaches and compare them on an example image.

    As an example I will take the following image that I have created in Adobe Fireworks

    120710 0004

    As you could see we have a circle with a linear gradient from top to bottom, the circle seems to be raised and has a drop shadow. The raised effect comes from adding two inner shadows to the circle, one with a black color and one with a white color. That means we have to apply one gradient and three different effects to the shape. So let’s check if this is possible…

     

    Using CSS:

    Using CSS is the preferred solution to style controls if you ask Oracle. And I have to agree that it has it’s advantages. Each control has either it’s own our one shared css file where all the style definitions are stored. In this case I have created a little control that only contains the circle and this is the css file for this control…

        .drop {

            -fx-skin: “DropSkin”;

        }


        .drop .circle {

            -fx-fill  : linear-gradient(from 50% 0% to 50% 100%,

                                        rgb(207, 0, 58) 0%,

                                        rgb(129, 0, 33) 100%);

            -fx-stroke: transparent;

            -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.65), 10, 0.5, 0.0, 0.0);

            -fx-effect: innershadow(gaussian, rgba(1, 1, 1, 0.65), 10, 0.5, 0.0, 5.0);

            -fx-effect: innershadow(gaussian, rgba(0, 0, 0, 0.65), 10, 0.5, 0.0, -5.0);

        }

    The -fx-skin variable defines the location of the Skin class that will be used to visualize the control. The variables in the .drop .circle class are defining the linear gradient of the circle and the effects. The java code that is needed to create the result is the following…

        final Circle circle = new Circle(64, 64, 48);

        circle.getStyleClass().add(“circle”);

    As you could see that’s only 2 lines of code which is really nice. Well at the moment it is not possible to chain effects in CSS which means we only could apply one of the needed effects which would lead to the following result for the code above…

    120710 0006

    One of the big advantages when using css (for me) is that you don’t have to take care about the start and stop positions of gradients.

    You just could type

        from 0%  0% to 0% 100%

    and that’s it, which is really nice. Another advantage is that you could apply a complete style by just writing

        shape.getStyleClass().add(“circle”);

    That’s really cool because it makes to change the style of a shape in your code. It’s also neat that you are able to define your own css stylesheet and apply it to your control. This makes it possible to change the complete styling of a control with one line of code. The JavaFX team added a lot of css features that you could use to style your shapes, for more information you should take a look at the official documentation that you could find here.

    But there are also drawbacks, Strings as method parameters could always lead to errors that you won’t see at compile time but only at runtime. The same is true for the style class defintion in the css file itself, where also a typo is enough to give you a runtime error.

    The other main problem is that it’s just not everything possible in css that is possible in code. Of course you could mix both approaches but to be honest this is also not very good to support afterwards.

    So let’s take a look at the code approach…

     

    Using Code:

    Using code offers you all possibilities, even if it feels a bit like Java Swing programming. The code to produce the expected image looks like follows…

        Circle circle = new Circle(64, 64, 48);    

        Paint fill = new LinearGradient(0, 18, 0, 110, 

                                        false, CycleMethod.NO_CYCLE,

                                        new Stop(0.0, Color.rgb(207, 0, 58)),

                                        new Stop(1.0, Color.rgb(129, 0, 33)));

        circle.setFill(fill);

        circle.setStroke(null);


        // Create the dark inner shadow on the bottom

        InnerShadow innerShadow = InnerShadowBuilder.create()

                                                    .offsetY(5)

                                                    .radius(5)

                                                    .color(Color.color(0, 0, 0, 0.65))

                                                    .blurType(BlurType.GAUSSIAN)

                                                    .build();


         // Create the bright inner glow on the top

        InnerShadow innerGlow = InnerShadowBuilder.create()

                                                  .offsetY(5)

                                                  .radius(5)

                                                  .color(Color.color(1, 1, 1, 0.65))

                                                  .blurType(BlurType.GAUSSIAN)

                                                  .input(innerShadow)

                                                  .build();


        // Create the drop shadow on the outside

        DropShadow dropShadow = DropShadowBuilder.create()

                                                 .radius(5)

                                                 .color(Color.color(0, 0, 0, 0.65))

                                                 .blurType(BlurType.GAUSSIAN)

                                                 .input(innerGlow)

                                                 .build();


        // Apply the chained effects to the shape

        circle.setEffect(dropShadow);

    The main difference between the code and the css approach is the possibility to chain effects in code and of course the amount of code you have to write. This means you could define an effect and use this effect as an input to another effect. With this solution we are able to add two inner shadows and a dropshadow to one shape. The result of this codes looks like this…

    120710 0005

    As you could see the result is very close to the source image. 

     

    Conclusion:

    There is no simple answer to the question which way you should choose because it really depends on the usecase. For standard styling where you only use a single effect or no effect at all the CSS approach absolutely makes sense but for more complex graphics with multiple effects it might be easier to choose the code approach. At the moment it’s also faster if you apply colors and gradients by using the code approach instead of the CSS approach but this might change in the future.

    I personally like the code approach more because of the “compile time safety” and the total control but I have to admit that the CSS approach is also really nice and I use both.

    So as always it’s up to you…so keep coding…

     

    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 – Canoo offers ULC Platinum Support

    July 10th, 2012
    Canoo logo
    Dear Reader

    Magicians, conjurers or illusionists – there are many designations for this most ingenious of professions which have one common hallmark. Namely, a baffled and amazed audience is frantically left asking “How do they do that?” Likewise, during software development, engineers like to take a look behind the scenes of utilized libraries and gain an insight into the how, what and why. But surely the entire source code – rather than a binary file – at one’s disposal must be unaffordable? Or perhaps not!

    Good advice need not cost the earth
    Using Canoo RIA Suite you can develop attractive web-based business applications in next to no time. Furthermore, you can make use of our wide range of support services. We have now enhanced this support with the new ULC Core Platinum Support. Customers with our ULC Core Premium Support can benefit from the license upgrade with immediate effect. This offer provides many advantages, likewise to new customers.
    cylinder

    Exclusively for you

    The new Platinum Support includes all the services of the Premium Support. When you purchase a Platinum Support license we additionally provide you with the ULC Core Source Code as unobfuscated binary and source JAR Files*). For you this means first and foremost simpler and more rapid development. You obtain a deep insight into the workings of RIA Suite and can integrate this know-how into your own development. This represents an enormous benefit for you.Take advantage of your new opportunities
    You can find all the necessary information regarding Platinum Support on our website. We would be pleased to prepare a non-binding quotation for you. Call us or simply send us an email at ulc-sales@canoo.com.We wish you every success with your Platinum Support license!
    Your Canoo Team

    *) A license for ULC Core Platinum Support costs 1’750 EUR, while the upgrade from Premium Support to Platinum Support costs 1’000 EUR. Both licenses are acquired for a term of 12 months. Please note that the delivered JAR Files may only be integrated in the development projects of the respective licensee. It is not permitted to unpack, modify, reuse, rebuild or redistribute the JAR Files containing the source code together with derivative work. These JAR Files are intellectual property of Canoo. As a licensee you agree to protect the source code from any unauthorized third party access.

    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 recipes "Dynamic shadows"

    July 4th, 2012

    This is the first blogpost of a series about JavaFX related tips and tricks that I came across.

    Today I would like to explain how to add a dynamic shadow to a node. So first of all let me tell you what I mean with dynamic shadow.

    If you take a dial with some kind of pointer it will definitely look better when the pointer has a drop shadow. As an example let me show you two radial gauges.

     

    120705 0002

     

    As you could see on the left dial the pointer has no dropshadow which looks unrealistic whereas the pointer on the right dial has a drop shadow.

    Because the shadow is a result of the light that shines from the top of the dial, it should point always to the bottom of the dial because the position of the light won’t change.

     

    Adding a drop shadow

    Adding a DropShadow to a node in JavaFX is as easy as the following code snippet shows…

     

        Shape shape = new Rectangle(10, 100);

        shape.setEffect(new DropShadow());

     

    This will work but to make it more realistic we will also need to define the lighting that leads to the drop shadow and this could be done like follows…

     

        Light.Distant light = new Light.Distant();

        light.setAzimuth(270);

        Lighting lighting = new Lighting();

        lighting.setLight(light);

        DropShadow shadow = new DropShadow();

        shadow.setInput(lighting);

        shadow.setOffsetX(5);

        shadow.setOffsetY(5);

        shadow.setRadius(5);

        shadow.setBlurType(BlurType.GAUSSIAN);

        shadow.setColor(Color.color(0, 0, 0, 0.45);

        Shape shape = new Rectangle(10, 100);

        shape.setEffect(shadow);

     

    With this code we are able to create a drop shadow that is a result of a semitransparent white light that is placed over the dial.

    So we now know how to create a drop shadow in JavaFX and apply it to a node (e.g. a shape).

     

    Adding a dynamic drop shadow

    The pointer in the dial above is part of a group which will be rotated dependend on the current value of the dial. This could be done by apply a Rotate to the Transform of the pointer group. 

    Let’s take a look at some code to explain the problem…

     

         // create the lighting

        Light.Distant light = new Light.Distant();

        light.setAzimuth(270);

        light.setElevation(50);

        Lighting lighting = new Lighting();

        lighting.setLight(light);


        // create the drop shadow

        DropShadow dropShadow = new DropShadow();

        dropShadow.setInput(lighting);

        dropShadow.setOffsetX(5);

        dropShadow.setOffsetY(5);

        dropShadow.setRadius(5);

        dropShadow.setBlurType(BlurType.GAUSSIAN);

        dropShadow.setColor(Color.color(0, 0, 0, 0.45));


        // define the Rotate transformation

        rotate.setPivotX(100);

        rotate.setPivotY(100);

        rotate.setAngle(90);


        // create the pointer group with the pointer rectangle

        Group pointerGroup = new Group();

        Rectangle iBounds = new Rectangle(200, 200);

        iBounds.setOpacity(0.0);

        Rectangle pointer = new Rectangle(96, 20, 8, 80);

        pointer.setFill(new LinearGradient(96, 0, 104, 0,

                                           false, CycleMethod.NO_CYCLE,

                                           new Stop(0.0, Color.rgb(100, 0, 0)),

                                           new Stop(0.5, Color.rgb(255, 0, 0)),

                                           new Stop(1.0, Color.rgb(100, 0, 0))));

        pointer.setStroke(null);

        pointer.setEffect(dropShadow);

        pointerGroup.getChildren().addAll(iBounds, pointer);

        pointerGroup.getTransforms().add(rotate);

       

        // add the pointer group to a pane and add the pane to the scene

        StackPane pane = new StackPane();

        pane.setPadding(new Insets(5, 5, 5, 5));

        pane.getChildren().add(pointerGroup);

        final Scene scene = new Scene(pane, 200, 200, Color.rgb(250, 250, 250));

        stage.setTitle(“JavaFX recipes”);

        stage.setScene(scene);

        stage.show();

     

    The code above will create a simple rectangle (the pointer) which will be rotated around the center by 90 degrees which will look like this…

    120704 0009

    So far this looks ok, the shadow is at least below the pointer, but if we apply a rotation around 270 degrees you will see the following result…

    120704 0010

    So now it’s clear…the shadow will be rotated in the same way as the pointer which is wrong. The problem is that we apply a rotation to the transformation of the whole group which will also affect the drop shadow of the pointer.

    The solution is really easy, you just have to add another group that contains the pointer group and where we could apply the drop shadow to. You have to modify the code like follows…

     

        // create the lighting

        Light.Distant light = new Light.Distant();

        light.setAzimuth(270);

        light.setElevation(50);

        Lighting lighting = new Lighting();

        lighting.setLight(light);

       

        // create the drop shadow

        DropShadow dropShadow = new DropShadow();

        dropShadow.setInput(lighting);

        dropShadow.setOffsetX(5);

        dropShadow.setOffsetY(5);

        dropShadow.setRadius(5);

        dropShadow.setBlurType(BlurType.GAUSSIAN);

        dropShadow.setColor(Color.color(0, 0, 0, 0.45));

       

        // define the Rotate transformation

        rotate.setPivotX(100);

        rotate.setPivotY(100);

        rotate.setAngle(90);


        // create the pointer group with the pointer rectangle

        Group pointerGroup = new Group();

        Rectangle iBounds = new Rectangle(200, 200);

        iBounds.setOpacity(0.0);

        Rectangle pointer = new Rectangle(96, 20, 8, 80);

        pointer.setFill(new LinearGradient(96, 0, 104, 0,

                                           false, CycleMethod.NO_CYCLE,

                                           new Stop(0.0, Color.rgb(100, 0, 0)),

                                           new Stop(0.5, Color.rgb(255, 0, 0)),

                                           new Stop(1.0, Color.rgb(100, 0, 0))));

        pointer.setStroke(null);    

        pointerGroup.getChildren().addAll(iBounds, pointer);

        pointerGroup.getTransforms().add(rotate);

       

        // add an extra group for the pointer shadow

        Group pointerShadowGroup = new Group(pointerGroup);

        pointerShadowGroup.setEffect(dropShadow);


        // add the pointer shadow group to a pane and add the pane to the scene

        StackPane pane = new StackPane();

        pane.setPadding(new Insets(5, 5, 5, 5));

        pane.getChildren().add(pointerShadowGroup);

        final Scene scene = new Scene(pane, 200, 200, Color.rgb(250, 250, 250));

        stage.setTitle(“JavaFX recipes”);

        stage.setScene(scene);

        stage.show();


    As you could see we only removed the drop shadow from the pointer rectangle, added a new group that contains the pointerGroup and applied the drop shadow to this new group. Because the new group contains the pointer group already, we only have to add the new pointerShadowGroup to the pane.

    The result for 90 degrees now looks like this…

    120704 0011

    As you could see now it looks much better and for the 270 degree rotation it looks like this…

    120704 0012

    This might be a nothing special but if you have the ability to do it right…you should do it right.

    If you have questions or a special problem, please do not hesitate to contact me on gerrit DOT grunwald AT canoo DOT com

     

    I hope this post is useful for one or the other, so keep coding…

     

    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