JavaFX: Why JavaFX 2.0? Develop Hardware-Accelerated RIA using JAVA.

Why Use JavaFX?

JavaFX provides a powerful Java-based UI platform capable of handling large-scale data-driven business applications.
JavaFX applications are completely developed in Java, one of the most widely deployed technologies with one of the largest developer communities in the world, while leveraging the power of standards-based programming practices and design patterns.

JavaFX provides a rich set of UI controls, graphics and media API with high-performance hardware-accelerated graphics and media engines to simplify development of immersive visual applications.

JavaFX 2.0 is Java’s next generation graphical user interface (GUI) toolkit for developers to rapidly build rich cross-platform applications. Built from the ground up, JavaFX takes advantage of modern GPUs through hardware-accelerated graphics while providing well-designed programming interfaces enabling developers to combine graphics, animation, and UI controls. The new JavaFX 2.0 is a pure Java language application programming interface (API).

The key architectural strategies provided by JavaFX 2.0 API are the reuse of existing Java libraries and the bridging of communication between other languages that run on the JVM (Visage, Jython, Groovy, JRuby, and Scala).

Nandini Ramani of Oracle plainly states the intended direction of JavaFX the platform in the following excerpt from the screen-cast, Introducing JavaFX 2.0:

“The industry is moving toward multi-core/multi-threading [type] platforms with GPUs. JavaFX 2.0 leverages these attributes to improve execution efficiency and UI design flexibility. Our initial goal is to give architects and developers of enterprise applications a set of tools and APIs to help them build better data driven business applications.”

— Nandini Ramani - Oracle Corp, VP of Development, Java Client Platform.

Table of features and benefits:

Features	Benefits
Java APIs for JavaFX. JavaFX 2.0 applications are completely developed in Java	Developers can use their favorite Java development tools Leverage thousands of existing Java libraries Developers can use popular JVM-based scripting languages, such as Groovy, JRuby and Scala
FXML, a scriptable, XML-based markup language for defining user interfaces.	Develop and maintain complex user interfaces easily
Web rendering engine	Seamlessly mix and match native Java capabilities and the dynamic capabilities of web technologies in your applications
Seamless integration into Swing applications	Existing Swing applications can be updated easily with new JavaFX features, such as rich graphics API, media playback, and embedded Web content
High-performance hardware accelerated graphics pipeline	JavaFX applications featuring data visualizations and complex user interfaces can leverage modern graphics cards for optimal performance
High-performance media engine	Playback video and audio content in popular formats within your application
Over 50 charts, form and layout components, easily customizable through the use of Cascading Style Sheets (CSS).	JavaFX provides all the major UI controls required for the development of a full featured application. Components can be easily skinned using standard Web technologies such as CSS
Ubiquitous deployment via the Java Runtime Environment (JRE)	The JavaFX Runtime is installed with the Java Runtime Environment, ensuring its availability on more than 97% of enterprise desktops worldwide [Source: Forrester, November 2009: Enterprise Platform Trends, H1 2009]

If you plan to use and develop javaFX based GUI you will need the JavaFX SDK.
By the way now starting with Java SE 7 Update 2, the JDK includes the JavaFX SDK.

For more information & resources:

DOWNLOAD JavaFX NetBeans IDE JDK 7 START LEARNING Step 1: What is JavaFX Step 2: Install JavaFX SDK Step 3: Get Started with JavaFX Step 4: Learn More Flex&Java: Using Adobe Flex and JavaFX with JavaServer Faces 2.0

API DOCUMENTATION JavaFX APIs DISCUSSION FORUM JavaFX Forum OTHER RESOURCES JavaFX: is fully back to java, welcome back to java world JavaFX: JavaFX 2.0 Is Here! FAQ Roadmap Features overview (data sheet)

ADF: showPopupBehavior operation & load trigger

Sometimes I need to dual authenticate the entrance of a page that contains a very sensitive information such Payroll page.

In my old days I implement such a case by developing a page to open it as dialog and handle the load in page phase listener life cycle.

Now I will introduce a more easer and professional mechanism for such a case, by opening a popup in page load in a simple way.

Project structure is an ADF fusion application, and ADF web project as the following:

With ADF Faces it's so easy to open a popup on page load. All what I needs to do is to define af:showPopupBehavior operation for af:document tag.

Note: af:showPopupBehavior trigger type should be set to load.
There are a lot of triggers for this operation could be found in "Oracle® Fusion Middleware Web User Interface Developer's Guide for Oracle ADF 11g R2(11.1.2.1.0)" usage and implementation.

This will ensure, it will be executed during document load and will call popup during page rendering phase:

The payroll.jsf page code is as the following:

When you run the application Popup is popped up on page load:

References:
1- Oracle® Fusion Middleware Web User Interface Developer's Guide for ADF 11g Release 2(11.1.2.1.0)
2- ADF Faces Cheat Sheets 11.1.2.1.0

ADF: Add locale aware CSS to an individual component

Some locales have a right to left layout orientation. When creating a skin in ADF Faces, it's (relatively) easy to add locale aware CSS using the :rtl psuedo-class on the end of a skinning key to indicate that the skinning key should be used when the renderer is rendering right to left.
Example:

In this example, we want some padding before the start of the text in the content element of the component. In right to left locales, the start of the text is on the right side by default, so we need to change the padding from the left to the right.

Let's say, however, that you want to specify a locale aware CSS style on an individual component using the contentStyle attribute. There is a handy ADF Faces EL function to help you out here: isRTL. For our example, let's say we want an inputText component whose text content is 'end' aligned. If you weren't considering RTL locales, you could code this as:

This, however, will be right aligned regardless of locale. This is where isRTL() comes to the rescue. This is how we would code this to be locale aware:

The af:isRTL() EL function returns true if we are rendering in RTL, so we can use it to pick the appropriate text alignment.

ADF: Creating and Using an ADF Declarative Component

This tutorial shows you how to create ADF declarative component metadata, add ADF Faces components that make up the composite component, and use the declarative component on a JSF page.

In this post ADF: About JSF fragments, ADF regions, declarative components …, i wrote about different declarative component in ADF faces.

You will use wizards to quickly create applications and projects, and a declarative component definition consisting of an attribute, a facet and a method.

The declarative component you will create is panel box containing one label, list of input text, and button. The metadata for the declarative component definition will allow page authors to set the label for a panel box, attach a method to the button to print the input lists after modification, and use built in controllerContext to view page viewId as default value.

To create the declarative component layout, you will use design tools such as the visual editor, Component Palette, and the Property Inspector. Then you will deploy the project to an ADF Library JAR file. For an application to consume the declarative component, you will use the Resource Palette to add the deployed JAR, and then add the deployed JAR to the project that contains JSF pages.

To make use of the declarative component, you will add it to a simple JSF page, edit the pre-defined attributes, create a method and attach it to the declarative component. When you run the application, the page will look similar to this:

Illustrator: adobe illustrator CS5.5 training notes

Illustrator is vector graphics drawing tool while Photoshop is pixel graphic drawing tool.

Resolution measurements:

DPI = Dot Per Inch

PPI = Pixel Per Inch

Resolution types:

When you create a picture 1" X 1" with PPI = 1000px then this is called high resolution document, but if the same image size created with PPI = 10px then this called low resolution image.

What is vector Graphics?

Vector Graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent image in computer graphics.

Illustrator uses anchor points and connects these anchors with lines called paths, which is re-calculated each time image is sized.

when drawing in illustrator the path connecting anchor points doesn't appears on final appearance of drown shape, it just a skeleton for the graphic shape while appearance is the glow of the shape.

Java: Improvements to the client and desktop parts of Java SE 6 and Java SE 7 !!!

Client-Side Improvements in Java 6 and Java 7

Learn about the improvements to the client and desktop parts of Java SE 6 and Java SE 7, including the new applet plug-in, the Java Deployment Toolkit, shaped and translucent windows, heavyweight-lightweight mixing, and Java Web Start.

Introduction

Since the release of Java Platform, Standard Edition 6 (Java SE 6) in December of 2006, a lot of improvements have been made to the client and desktop parts of Java. In this article, we take a tour of Swing, and then we dive into some of the support technologies that let developers make great client apps, such as installation, Java Web Start, applets, and graphics improvements. Then we will take a peek at Java 7.

JavaFX: is fully back to java, welcome back to java world

In contrary to JavaFX 1.X, JavaFX 2 is pure Java!!!!


Java FX 2 application can be compiled having jfxrt.jar in the classpath and launched like any other Java application:

Even in the case of the preview the startup performance is <1 sec and significantly faster, than 1.X version.

Flex4: Resize Effect

This example shows you how to use the resizeEffect along with a simple fade effect to make it look smooth!

The Resize Effect is pretty straight forward; there are just a few simple rules:

• Make sure the object you want to resize has a width and height of 100%.
• Create enough space within your application.

Here is the full source:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 

               width="500" height="300">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function addImage(event:MouseEvent):void
            {
                myImage.visible = true;
                myImage.includeInLayout = true;
            }

            protected function removeImage(event:MouseEvent):void
            {
                myImage.visible = false;
                myImage.includeInLayout = false;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:Fade duration="2000" alphaFrom="0" alphaTo="1" id="fadeIn" />    
        <s:Fade duration="100" alphaFrom="1" alphaTo="0" id="fadeOut" />        
    </fx:Declarations>

    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" />
    </s:layout>

    <s:VGroup verticalAlign="middle" horizontalAlign="center" paddingTop="10">
        <s:HGroup verticalAlign="middle" horizontalAlign="center" paddingLeft="10" paddingRight="10">
            <s:Button label="Add image!" click="addImage(event)"/>
            <s:Button label="Remove image!" click="removeImage(event)"/>
        </s:HGroup>
        <s:HGroup verticalAlign="middle" horizontalAlign="center">
            <s:Panel width="100%" height="100%" title="I'm a resizable Panel!" resizeEffect="Resize">
                <mx:Image id="myImage" source="<your image path>/images/header.png" 

                          visible="false" includeInLayout="false"
                          showEffect="{fadeIn}" hideEffect="{fadeOut}" />
            </s:Panel>
        </s:HGroup>
    </s:VGroup>
</s:Application>

Flex: Building Custom Event (an example)

Events are a real powerful tool inside every programming language that has them. In ActionScript, there are a lot of standard events that you are probably already using (e.g. the click event).

But what if you want to do something custom with an event inside your flex application? Let’s say you have created a custom component and you want to dispatch an event from that component with some additional data? Check out this example to see how you can achieve this.

Although I may not make any sense, let’s say I want to do the following:

• Have a component that gets data when a button is pressed.
• Have an Application that’s using this component and reacts when the data is loaded inside the component mentioned above.

I’ll need three things for this:

1. A custom event that transports the data and lets my application know that the data is loaded.
2. The component.
3. The Application.

Step 1: Create the custom Event:

 package com.tm.examples.events

{
    import flash.events.Event;
    import mx.collections.ArrayCollection;
    
    public class CustomEvent extends Event
    {
        
        public static var DATA_LOADED:String = "dataLoaded";
        
        private var _data:ArrayCollection;
        
        public function CustomEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, data:ArrayCollection=null)
        {
            super(type, bubbles, cancelable);
            _data = data;
        }
        
        override public function clone():Event
        {
            return new CustomEvent(type, bubbles, cancelable, data);
        }
        
        public function get data():ArrayCollection
        {
            return _data;
        }
    }
}

Step 2: Create the component that gets some data and dispatches this event:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="300" backgroundAlpha="0">
    <mx:Metadata>
        [Event(type="com.tm.examples.events.CustomEvent", name="dataLoaded")]
    </mx:Metadata>
    <mx:Script>
        <![CDATA[
            import com.tm.examples.events.CustomEvent;
            import mx.collections.ArrayCollection;
            
            private function handleClick():void
            {
                var data:ArrayCollection = getData();
                dispatchEvent( new CustomEvent( CustomEvent.DATA_LOADED, false, false, data ) );
            }
            
            private function getData():ArrayCollection
            {
                var obj:Object;
                var dataCollection:ArrayCollection = new ArrayCollection();
                for( var i:int=0; i < 10; i++ )
                {
                    obj = new Object();
                    obj.index = i;
                    obj.value = Math.round(Math.random() * 100);
                    dataCollection.addItem(obj);
                }
                return dataCollection;
            }
        ]]>
    </mx:Script>
    <mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
        <mx:Button label="Get Data and Dispatch Event!" click="handleClick()"/>
    </mx:VBox>
</mx:Canvas>

Step 3: Create the application that reacts to the event and does something with the data:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                xmlns:components="com.tm.examples.components.*">
    <mx:Script>
        <![CDATA[
            import com.flexblog.examples.events.CustomEvent;

            private function handleDataLoaded(event:CustomEvent):void
            {
                dg.dataProvider=event.data;
            }
        ]]>
    </mx:Script>

    <mx:VBox width="100%"
             height="100%"
             backgroundColor="#FFFFFF"
             horizontalAlign="center">
        <components:ExampleComponent width="300"
                                     height="100"
                                     dataLoaded="handleDataLoaded(event)"/>
        <mx:DataGrid id="dg"
                     width="300"
                     height="200"
                     visible="{dg.dataProvider != null}">
            <mx:columns>
                <mx:DataGridColumn dataField="index"
                                   headerText="Index"/>
                <mx:DataGridColumn dataField="value"
                                   headerText="Value"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
</mx:Application>