Showing posts with label GUI. Show all posts
Showing posts with label GUI. Show all posts

Sunday, August 10, 2014

IDE: 5 most favorite NetBeans features

Development with pleasure....
NetBeans has many interesting features that make development very easy, with few steps, and makes for a very productive environment, in terms of getting your product to market very quickly.

It is very hard to limit my talking to only five features, while this IDE has tons of interesting features. But here I am going to mention my most favorite 5 features I am daily using in my development process on many platforms:

  1. It is the reference development implementation IDE:

    I am a JCP (Java Community Process), EC (Executive Committee), a JSRs (Java Specifications Request) adopter and FishCAT (Glassfish Community Acceptance Testing) contributor especially in Java, SE & EE world. While I am in early phases of testing the specifications, I need an IDE which support those technologies and made it easy to test and develop them, to report bugs, enhancements and confirms that JSRs Specs are valid against RIs, and with other JSRs on latest RI Application server like Glassfish.

    NetBeans offered all of this for us to streamline the process, with almost a nightly and weekly builds alongside JSRs RIs builds, which we use to test previously mentioned RIs betas.

    The most interesting part of the story here is when we released Java EE 7 on last Mid of June 2013; there was already NetBeans 7.4 was generally available released to fully support development of Java EE 7 technologies. And this happens also for JDK 8 when it released 18-March 2014, there was NetBeans 8.0 fully support Java SE 8.0.

  2. Android Mobile development made easy:

    NetBeans shipped with a very great support for mobile development either it was pure Android development in term of this is a Java Based IDE or Hybrid development in term of frontend technology support (HTML5, CSS3 and JavaScript).

    With a very productive plugin NBAndroid you can develop a pure Android project compatible with original ADT SDK (Android Development Toolkit) project structure, test, emulate and deploy on emulators as well as native devices at the same time. You should give it a try if you interested in mobile development.

    Create a new Project:
    Identify Properties:
    Created project:
    Runs On Android Emulator:
  3. Hybrid Mobile development support:

    Hybrid mobile development is never made easy as now in NetBeans nowadays, NetBeans introduced a hybrid mobile development based on Cordova open source mobile framework. Which is one of the most popular frameworks to develop hybrid mobile applications.

    While NetBeans gives a great and solid support for frontend engineering technologies like JavaScript, HTML5, CSS3, Frameworks like AngularJS, NodeJS, and jQuery core, mobile, and UI … etc.

    Which made it easy to develop a Hybrid based mobile applications for both Android and iOS in one shoot with few clicks. Without context-switching to other IDEs to accomplish the task.

    It has complete support for Apple iOS development toolkit and Android ADT SDK, therefore you can test your application locally for mobile web and on emulators/devices of both mobile OSs, then export final product either it was .apk binary for android or .ipa for iOS, for final deployment on Apple store or Google play store.

    Creating the project:
    Choosing template:
    Identifying project properties:
    Choosing deployment method:
    Deployed on iOS simulator:
  4. JavaScript libraries in one place:

    If you are a frontend engineer, then you got the right choice, yes this IDE is for you, I know you need to develop a modern web application, but wait this needs many JavaScript modules and libraries to do it.

    One among the very panic tasks in web development nowadays, is to search for JavaScript tools and setup your project for them, then download each JavaScript libs from different sites with there resources and support libs, in addition you have also to manage their updates to fix problems or get a new feature.

    NetBeans comes with a build in tool that allows you to get your JavaScript libraries in one shoot from the IDE directly and mange their updates from the same place.

    You will find almost all JavaScript libs you need, and you can filter your choice from the tool to pic up the right libs you need for your project, and where to put them in your project.

    As mentioned in first picture the libs were updated on Apr 26, 2014, just click and will updates all libs to today releases.

    It saves me a bunch of site visiting and worrying about updating them, and even adding new ones in future of the project.

    The JavaScript tool:
    Pickup and filter your choices:
  5. SOAP based client/Web Services in one click:

    I am working in government environment, which requires much integration between systems either directly or through a G2G (Government-to-Government) hub, each one needs a specific integration requirements.

    If it is directly, you have to define you web service annotations on interface based on your backend EJB session bean interface or separate endpoint interface to decouple your Endpoint from your façade, then generate WSDL to be consumed by others.

    Other scenarios is to go to a Top-Down approach, in developing WSDL first to be certified on G2G hub based on their standards, then generate service endpoint interface from them.

    Lately I have been asked to develop a Pension G2G WSDL definition and at the same time generate endpoint service interface to begun the testing in one week.

    I have accomplished this task in 3 days using NetBeans, it has a tremendous support for XML, XSD development, and after finishing the WSDL definition, I need to confirm a correct endpoint service creation, Before publishing service WSDLs to G2G authors.

    Okay from NetBeans I have created a Web Service from WSDL, passed the WSDL and click finish, that’s all.

    The surprise was it generates the service endpoint correctly as WSDL def. and at the same time created Service ports and client to test service in one shoot.

    All I have to do is to implements my service endpoint operations and huryaaaa finished my task.

    Adding WSDL and Identifies project attributes:
    Generated Service endpoint:

Thanks for NetBeans team for such support and made it a development with pleasure.



Wednesday, August 14, 2013

Why not jQuery? it is Fast, powerful, cross browsers and easy to use framework.

jQuery, jQuery then jQuery, yeah it simplifies the way you touch the HTML via JavaScript.

On jQuery site, its definition as the following:
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Yes, I agree totally with this statement, I make use of the JavaScript framework, jQuery. jQuery simplifies common tasks and provides a single interface to actions that are implemented inconsistently in different browsers. Perhaps the most common use of jQuery in my development is reading in files (XML, JSON, text …etc) or other data from web services, but it also make it easy for traversing the DOM and applying CCS to components in easy way.

The following section is meant to give a quick introduction to using jQuery, and making your hands dirty with code to get the idea. For advanced features of the framework, you can branch to jQuery documentation and API references.

But, wait here for a second, be patient, before you can use jQuery, you need to include it in your web page. You can do so by downloading the latest version at http://jquery.com/ or by grabbing a Google-hosted version by adding the following to the <head> section of your HTML file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
As of time of this writing, the latest version of jQuery is 2.0.3, and also there are Other CDNs could be used, and are listed on jQuery home page, I have used here Google one.

After adding the library to your page lets, get in touch with jQuery functionality and development.

Once you have included jQuery in your document, you can use its functions via two global variables: jQuery and its shorthand, $.

Demo page structure:
We will use this page in our journey, for the sake of clarity of how to use jQuery.
<head>

jQuery Example
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<style>
.content
{
 padding: 20px;
 width: 200px;
 height: 200px;
 background-color: #CCC;
}

#eventInfo
{
 width: 420px;
 height: 20px;
 background-color: #000;
 color: #CCC;
 font-weight: bold;
 margin-top: 10px;
}
</style>

</head>
<body>
</body>
Query Document Objects
Among its many uses, jQuery is very helpful at quickly and easily extracting elements from your HTML page into JavaScript code. You can query by id, tag name, CSS class, or combinations of these factors. jQuery makes this task easier, so you can focus on what you want to do with those elements.

To grab a single piece of the page, such as the content <div>, you call it by its id. Much of jQuery’s syntax is borrowed from CSS, which may look familiar.

Here is how you would call an object with an id of content:
Notice:
I am using the dollar-sign shorthand. Then I add parentheses because $ is a variable and a function (jQuery stretches the bounds of JavaScript in ways that you and I probably will not). Inside the function, we pass a string with the CSS we would use to style the map div, #content.

Let us see how to add a text to this div content, just use one of the following snippets of code:
Or simple chaining one
You have now used your first jQuery function to query for a specific element and add a text to it. You can achieve the same result with JavaScript’s standard document.getElementById function, but jQuery’s method is faster to type. Plus, the result using $ allows you to chain other jQuery functions, such as visual effects, binding events or applying values and css as we have made in the previous code.

Notice:
Every jQuery function returns a jQuery object wrapping the queried element(s). Therefore, we can use the functions call-chaining mechanism, this pattern is called builder design pattern.

jQuery can also do more than just query individual elements; it can gather multiple elements in a single call. Here are a few examples:
Each of these examples shows a different type of querying—and many more are possible. You can learn about what jQuery calls selectors at http://api.jquery.com/category/selectors/.

Use jQuery to fire browser events
jQuery provides a lean way to use and fires browser events, such as clicking, double clicking or dragging. You can also react to events anywhere in the browser, and jQuery makes reacting a simple process for us.

To respond to an event, you first need to be listening for it. To do so when your page first loads, you register your intention to react to an event. You can do this by adding a JavaScript function to the onload attribute of your <body> tag. Or you can do this with a special jQuery ready event.

Although creating an event to register other events may seem counterintuitive, but believe me it works. Here is an example that waits until the page is ready:
Notice:
That the element we are querying for is a little different from in the past. Instead of a string inside the parentheses, we have inserted a standard JavaScript object, document. When enough of the page has loaded that the browser knows all the objects it contains, we call the register_events function.

That register_events function does not exist, however, so we need to write it. Or, instead, we could react to the same event with an anonymous function:
As with most anonymous functions, you usually want to keep it to just a few lines. If you have many events to register, you are probably best served with a named function.

Note
A big difference exists between using your browser’s onload attribute and jQuery’s ready event. With onload, you wait until the entire page is loaded, including images and other external files. With $(document).ready, you can run code, such as registering events and hiding objects, the moment the browser is ready. Using jQuery here often translates to a better user experience.
Now that you have waited for the browser to be ready to register other events, let us register them. Here is the basic pattern for jQuery events:
The element portion is usually a selector, such as an element’s id (though it can also be any browser object, as shown in the ready example). The event piece is the name of the function, as declared by jQuery. Finally, function is the function reference, either an anonymous function or the name of the function to call.

Here is how you would listen for a particular element to be double clicked:
If you are familiar with JavaScript events included in HTML, you might be wondering where the on, as in onDblClick, went. In jQuery, events are referenced with only the action so it is dblclick.

You can also get additional information about the event. The information available may be a little different depending on the event. Here is how you find out where the user has double-clicked on a page:
I used a dblclick event. Because we want more information about the event, I included an optional parameter e to the anonymous function. Within the function, I can use that variable to get information, such as where the user double clicked. This data comes in two pieces:

The number of pixels from the left side of the page X and the number from the top of the page Y. You can see a sampling of available events in Table 1, along with the additional information that is passed in the optional parameter to each event.

Tip: Try also to double click inside content1 div, at different location and watch how X and Y
value changes.
Table 1: Some Useful jQuery Events

Event Name

Objects Available

Additional Information

click

Any


Page location: pageX, pageY

dblclick

Any

Page location: pageX, pageY

mousemove

Any

Page location: pageX, pageY

keydown

document, window

Key code

focus

Form elements

 
Events will make your web pages much more interactive. For a full list of events (and additional event information available), see jQuery’s documentation at http://api.jquery.com/category/events/.

Insert and Hide Content

Once you have one or more elements from the page using jQuery, you need to do something to them. Here, I will show you a way to add or replace the content inside a page element. In addition, I will also demonstrate an effect that will hide the content, so later, you can make it reappear.

Let us say you want an element on your page where you can show the event information raised from previous double click event such as event type and the event source id. You can add the element with HTML using something like this:
When you are ready to add the event information, you can use jQuery to find the element and then display the event information. If you want to display the content of a variable called info, you could use this single line of jQuery:
This line will find the element on the page with the id of eventInfo and then replace its inner HTML with the value in the info variable. If you just want to add additional content to the element, use this line instead:
Alternatively, use can use chaining feature as the following.
Now the eventInfo div content will look something like this:

Event Info: Event type is: dblclick, raised from: content1

You have seen how to insert content, but what about making that same content disappear? For example, before adding the event Information, a page with just Results: without anything after it looks a bit funny. So when the page loads, run the following code to hide the results element:
Moreover, when you are ready to display the results to the user, include this code:
On the other hand, append it to the last of your chaining command as the following:
These two functions are simple (and very useful) examples of jQuery effects. Many more effects are listed on the jQuery website at http://api.jquery.com/category/effects/.

Final code


jQuery Example
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<style>
.content
{
 padding: 20px;
 width: 200px;
 height: 200px;
 background-color: #CCC;
}

#eventInfo
{
 width: 420px;
 height: 20px;
 background-color: #000;
 color: #CCC;
 font-weight: bold;
 margin-top: 10px;
}
</style>
<script type="text/javascript" language="javascript">
   //Use ready function to execute all code after browser parse and build DOM tree.
   $(document).ready(function(e) {
     
  // Hideing div with id eventInfo
  $('#eventInfo').hide(); 
  
  // Setting dive text and applying css value for the text to be of color red
  $('#content').text('My name is Mohamed Taman').css('color','red').append('

');
  
   //Get the first span wrapped inside the div with css class 'content' and set its text 
  $('.content span:first').text('Number of divs in the document are: ' + $('div').length);
  
  
  // Register div with id content1 to double click event
  $('#content1').dblclick(function(e) {
        alert('I am double clicked with and event location at, X: '+ e.pageX +', and Y: '+ e.pageY);
 
  var info = 'Event type is: '+ e.type +', raised from: '+ e.target.id;

  $('#eventInfo').html('Event Info: ').append(info).show();
    });
});
</script>

<body>
</body>
Let's wrap up

By now, we have reached to the end of the article, and I hope you enjoyed and find it useful.

In the next part, I will demonstrate an important issue, which is loading and reading data files using jQuery either it is JSON or XML data files. So If you want to interact with data outside of your current HTML file, jQuery has some excellent tools for doing these sorts of Ajax calls. Though Ajax is short for Asynchronous JavaScript And XML, you can access any type of data with Ajax.

Saturday, December 8, 2012

Glassfish3+ & ADF 11g: Developing ADF apps on Glassfish using Jdeveloper 11g

There was no opportunity before to develop an Oracle ADF (Application Development Framework) applications on any open source application server such as Tomcat, or Glassfish, while Glassfish is the Oracle reference implementation now for JEE specifications. The only way is to develop on Oracle Weblogic application server. Even using oracle enterprise pack (OEPE) for development on eclipse IDE.

Nowadays oracle releases the ADF essentials.With the new Oracle ADF Essentials which is offering you now the ability to deploy applications that leverage Oracle ADF on the open source Glassfish 3.1 server.

At Oracle ADF Essentials home page you can check what are supported in comparison with the full ADF library, and also there are a lot of tutorials for learning the framework.

Now will get an introduction on how to setup the development environment, then we will develop a small application using Jdeveloper 11g and deploy it on the Glassfish 3.1.2.2 application server.

  • Setting up the environment:

    1. Download the following if you don’t have any of them:ADF essential library (11.1.2.3), JDeveloper 11g (11.1.2.3.0) and Glassfish 3.1.2.2.
    2. Install Jdeveloper 11g and Glassfish server and check that everything is up and running.
    3. Once ADF essential library downloaded, we need to unzip it inside the lib folder of Glassfish domain1 (or any domain you have created) this will get you an adf-essentials.zip file.

    4. To install ADF essentials:

      1. Copy the adf-essentials.zip file into the lib(on a default windows install this would be: "C:\glassfish3\glassfish\domains\domain1\lib\ext") folder of your glassfish domain.
      2. In lib folder open command window and issue a "unzip -j adf_essentials.zip"


      3. Note: you should use "-j" option with unzip (JDK program) command or you will ends up with folders not the jar files, try it and you will see.

    5. After successful extraction of the ADF libraries to the directory. Now you can start the Glassfish server (you can start your domain by the following command inside "bin" folder of your "domain" "asadmin start-domain domain1" from command line console, wait for domain to start then you should ends up with message "Command start-domain executed successfully.").

    6. We need to configure the glassfish to work with application of ADF type:
      1. Invoke the admin console of glassfish (http://localhost:4848) and log into your admin account.
      2. Go to Configurations->Server-config->JVM Settings and choose the JVM Options tab
      3. Add the following entries:
        1. -XX:MaxPermSize=512m (note this entry should already exist so just make sure it has a big enough value)
        2. -Doracle.mds.cache=simple
    7. There is a new extension ("Glassfish 1.3" as time of writing) that allows you to start and stop an external GlassFish instance, as well as start it in debug mode (which will allow JDeveloper to remotely debug your application as it runs on the server. Also a button that will invoke the web admin console of Glassfish.

    8. After installing Jdeveloper, open it, the extension is available from help->check for updates, or you can download it directly from here, and then use help->check for updates pointing to the local zip file (Thanks Shay Shmeltzer's who developed this extension).

    9. After the Jdeveloper finished download and the installation of the extension, you should find 4 glassfish buttons in the menu.


    10. Go to Tools -> Preferences -> Glassfish Preferences, here you can configure the glassfish paths and configurations you like.

  • Developing and deploying the ADF application:

    1. Creating and configuring the application to work with Glassfish:

      1. In JDeveloper choose File -> new, the New Gallery window will pop up, from right hand menu choose General-> Applications, and then from left hand choose Fusion Web Application.


      2. After successful application creation.
      3. Go into the project properties of your viewController project, under the deployment section click to edit the deployment profile that is defined there.
      4. Go to Platform and choose Glassfish 3.1 from the drop down list. Click ok to go back to your project properties.
      5. Under Java EE Application section in project properties change the Java EE web application name and context to the same value "ADFGF" (for ease of access when deploy the application).
      6. Go to Application -> Application Properties-> Deployment
      7. Go to Platform and choose Glassfish 3.1 from the drop down list. Click ok to go back to your project.
      8. This step will make sure that JDeveloper will automatically add the necessary ADF libraries to the EAR file that is being generated for deployment on Glassfish.

    2. Developing and Deploying the application:

      1. Right click on viewController project and choose new.
      2. Under Web Tier -> JSF/Facelets -> Page -> Ok.
      3. File name: TestADFGF.jsf, under the managed bean tab name: testADFGF leave the others with default values. Click ok.
      4. The page will be opened in visual editor.
      5. Drag and drop any components you like as a command button, check box, choose date and choose color component.
      6. We need to create application server connection.
      7. Start the application server from glassfish start icon in the JDeveloper menu.
      8. From Application servers Navigator, right click on application servers -> new. From New Gallery windows choose General-> Connections -> Application Server Connection -> ok.
      9. In the new windows Connection name: Glassfish3122, type: Glassfish 3.1 next.
      10. Provide your application server username and password then next.
      11. Configure your ports and host name, next.
      12. In the final step with glassfish running hit test connection button and the four testing steps should succeed.
      13. Go to your Application->Deploy and deploy either to an EAR file or directly to a Glassfish server connection that you created.
      14. After successful deployment you should get the following message:
      15. Open you browser and type the following URL (http://localhost:9090/ADFGF/faces/TestADFGF.jsf), you should see the following result:
      16. Things should just work, but if they don't then look up the server.log in the log directory and check out what error is in there.

Congratulations, you did it, now you are have the capabilities to develop any JSF/ADF applications from JDeveloper and host it on Glassfish 3.1.2.2.

Wednesday, July 11, 2012

ADF: ADF & JSF Object Scope Lifecycles

At runtime, you pass data to pages by storing the needed data in an object scope where the page can access it. The scope determines the lifespan of an object. Once you place an object in a scope, it can be accessed from the scope using an EL expression.

For example, you might create a managed bean named foo, and define the bean to live in the Request scope. To access that bean, you would use the expression #{requestScope.varName}.

There are three types of scopes in a standard JSF application:
  • applicationScope: The object is available for the duration of the application.

  • sessionScope: The object is available for the duration of the session.

  • requestScope: The object is available for the duration between the time an HTTP request is sent until a response is sent back to the client.

In addition to the standard JSF scopes, ADF Faces provides the following scopes:
  • pageFlowScope: The object is available as long as the user continues navigating from one page to another. If the user opens a new browser window and begins navigating, that series of windows will have its own pageFlowScope scope.

  • viewScope: The object is available until the ID for the current view changes. Use viewScope scope to hold values for a given page.

  • backingBeanScope: Used for managed beans for page fragments and declarative components only. The object is available for the duration between the time an HTTP request is sent until a response is sent back to the client. This scope is needed because there may be more than one page fragment or declarative component on a page, and to avoid collisions between values, any values must be kept in separate scope instances. Use backingBeanScope scope for any managed bean created for a page fragment or declarative component.
Note:
--------
Because these are not standard JSF scopes, EL expressions must explicitly include the scope to reference the bean. For example, to reference theMyBean managed bean from the pageFlowScope scope, your expression would be #{pageFlowScope.MyBean}.

Object scopes are analogous to global and local variable scopes in programming languages. The wider the scope, the higher the availability of an object.

During their lifespan, these objects may expose certain interfaces, hold information, or pass variables and parameters to other objects.

For example, a managed bean defined in sessionScope scope will be available for use during multiple page requests. However, a managed bean defined in requestScope scope will be available only for the duration of one page request.

Finally:
-----------
When determining what scope to register a managed bean with or to store a value in, always try to use the narrowest scope possible. Use the sessionScope scope only for information that is relevant to the whole session, such as user or context information. Avoid using the sessionScope scope to pass values from one page to another.


Tuesday, March 27, 2012

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
START LEARNING
API DOCUMENTATION
DISCUSSION FORUM
OTHER RESOURCES

Monday, March 12, 2012

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.

Friday, March 9, 2012

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:



Thursday, March 1, 2012

App. Server: GlassFish 3.1.2 Released

Oracle GlassFish Server 3.1.2 has just been released and is ready to download.

Oracle GlassFish Server 3.1.2 improves upon its ease-of use features, flexibility and improved developer productivity with several enhancements. Do you want an application server that's both state-of-the-art and production-ready? Johan Vos, CTO at LodgON, says GlassFish is his favorite application server because: 

"GlassFish contains the most advanced, state-of-the art technology that is seen in similar products a few years later and the quality of GlassFish is very high, the software is ready to be used in production."
Here are the highlights of the Oracle GlassFish Server 3.1.2 release:
  • Improved console startup time over previous versions of Oracle GlassFish Server.
  • Enhanced configuration of Java Message Service (JMS) clusters for fault tolerance and failover capabilities.
  • Easier Load Balancer configuration for faster throughput and reduced latenc.
  • Enhanced security with SSL Encrypted traffic between the Domain Administration Server and remote instances.

  • Support for the WebSocket Protocol RFC 6445, enabling bi-directional communication between a client and server, adding a web-origin based security model for browsers
.
  • New DCOM support. Windows users now have the flexibility to administer Glassfish clusters and instances remotely using SSH or DCOM.

  • New Support for non-Multicast clustering. GlassFish High-Availability clustering is now possible in environments where multicast is disabled.

  • Improved EclipseLink integration to enable data binding with JAX-WS. EclipseLink integration provides TopLink Grid support for using Coherence as a 2nd level data cache.
Learn the differences between Oracle GlassFish Server and GlassFish Server Open Source Edition at glassfish.java.net.

You can download GlassFish 3.1.2 from the Oracle Technology Network.

Sunday, February 12, 2012

Glassfish: How to create lookups resources (simple & JavaBean Object)

It is a good idea to make your code modular and maintainable (less code modifications) when depending on resources.

To create a resource in application server so that all deployed applications can look them up, and make your application is loosely coupled on the resource it lookups, and be more dynamic.

The resource types can be object, string, boolean, number, or any custom java bean types.

In Glassfish 3+ CLI (Command Line Interface), they are created and managed with a set of generic commands:

asadmin create-custom-resource ...
asadmin list-custom-resources ...
asadmin delete-custom-resource ...
asadmin get 'resources.custom-resource.*'
asadmin set ...


GlassFish admin console provides GUI (Graphical User Interface) way of doing things but I found using CLI (Command line Interface) is a lot faster.

Saturday, February 11, 2012

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.

Saturday, January 28, 2012

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.

Tuesday, December 13, 2011

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.


Monday, May 30, 2011

Flex: What is Flex?

Flex is a developer toolkit for building exceptional rich Internet applications on the Flash platform.
Efficient Programming Model
Developers write Object Oriented code using the ActionScript 3, MXML, and CSS languages. These languages are easily learned by programmers from many different backgrounds such as Java, PHP, C#, HTML, and JavaScript. Flex supports a component-oriented programming model that allows developers to easily assemble applications from hundreds of components and extend base components to create custom interactions.
Developer Tools
The Flex SDK includes a compiler, debugger, and hundreds of out of the box components. Using these tools from IDEs, the command line, or from build tools like Ant, code is compiled into cross-platform applications.
In addition to the free SDK, Flex developers can use Flash Builder to build applications. Flash Builder is an IDE for Flex development built on top of Eclipse. It includes a Design View and a sophisticated code view featuring code completion, smart editing and code refactoring. Flash Builder also includes a visual debugger, a visual profiler, a network monitor, and a Services view with service introspection.
Server Integration
Flex applications run on the client either in a browser with Flash Player, on the desktop with Adobe AIR, or on mobile devices. To access back-end databases and other systems Flex has numerous networking APIs supporting everything from plain XML, JSON, SOAP Web Services, and optimized protocols like AMF.
Runtime Consistency
The Flex source code (.mxml and .as files) is compiled into Flash bytecode (.swf) that is executed at the client side by the ActionScript Virtual Machine in Flash Player or Adobe AIR.
The Flash Platform runtimes, Flash Player and Adobe AIR, are cross-platform runtimes that work consistently on a variety of hardware, operating systems, and browsers.
Plentiful Components
The Flex SDK contains hundreds of out-of-the-box components. DataGrids, Charts, Formatters, Validators, and numerous other UI controls are the building blocks for applications of all sizes. Components can be styled and skinned to fit the look and feel you want. There are also hundreds of third party open source and commercial components available for Flex. Mapping APIs, Data Visualization libraries, and Cloud APIs provide the building blocks for assembling great applications. Check out Tour de Flex to see many of the available components for Flex.
Outstanding Performance
By doing data visualization and UI interactions on the client-side less time is spent waiting for a server to respond. This offloading and client-side state handling makes back-ends more scalable and efficient. Interactions like filtering and sorting no longer need to round-trip all the way to the server or database. This makes software more responsive and easier to use.

Saturday, May 28, 2011

CSS: Box Model Visualization

Since the way web browsers deal with width and height is so non-intuitive, I’ve created this a handy guide showing how the CSS (Cascading Style Sheets) box model applies widths and heights when scrolling, margins, borders, and padding are involved:


Box Model

Wednesday, April 20, 2011

ADF: About JSF fragments, ADF regions, declarative components …

Starting application development with Oracle ADF and ADF Faces, some concepts may be hard to grasp at the beginning. Using Oracle ADF and ADF Faces, the following terminologies are used in the context of reuse of components and processes
JSF fragments
JSF page fragments are page definitions that run embedded in another JSF page. Fragments are like page includes in JavaServer Pages, with the difference that in Oracle ADF Faces they are usually used in the context of ADF regions or dynamic declarative components. You can also reference page fragments directly from a JSP includes tag added to a JavaServer Faces document (JSPX). However, in this case, and only if a page fragment has ADF bound content, you need to make sure the content of the page fragments ADF binding file (PageDef) is copied to the PageDef file of the parent page. Otherwise ADF queried data will not show.
ADF regions
ADF regions consist of an ADF Faces af:region tag, an ADF bounded task flow and page fragments. Page fragments that are used in a bounded task flow don't need to copy their ADF binding references to the parent container, which is a huge difference between JSP includes and ADF regions. ADF regions define an interactive area on a view, a JSF document or another JSF page fragment, that developers use to show a single view or a complete, multi-step, process. ADF regions can be statically or dynamically defined. In either way they require a PageDef file and a bounded task flow to reference. ADF regions help building desktop like web applications in which users stay for long on a single page while working on a business task.
Declarative components
Declarative components allow developers to build a composite component out of existing ADF Faces components. Declarative components exist in two flavors: library driven and dynamic declarative components (ddc). The tag library driven components are declaratively built from the File | New menu option. In the JSF view option you find a declarative component menu option that steps you through building your own ADF F aces component from existing ADF Faces components. You use tag library driven declarative components to build custom components with behavior, like a tool bar or a custom file-upload handler. The goal of building declarative components is to build re-usable components that simplify development and administration by avoiding duplicate page codes. Dynamic declarative components (DDC) are used within the scope of the web application they are defined in and cannot be re-used across applications. Their main usage is to build reusable layout artifacts or page area components. For example, a custom tab canvas is what you would build using DDC components.  
Page templates
Page templates are layout definitions that you use as a starter when building new pages to enforce consistent page layouts throughout applications and enterprises. Best practices are to build a page template using the ADF Faces Quick start templates. You cannot nest page templates, but you can use page templates on parent and child views (page fragments). A page template is the page level equivalent to a DDC component.
ADF Library
ADF libraries are special Oracle ADF archive files that you use to reuse bounded task flows (regions), page templates and declarative components. They are standard JAR files with extra information in the archive manifest file that allows you to import the library files into the Oracle JDeveloper Resource Palette for declarative reuse.
When designing an application you best start planning reuse of components and page segments. If you have an application wide look and feel that you can define as page template(s) then do this first. If you can identify areas within pages that you may need more often on other pages as well, without the pages to be identical from their layout, you use dynamic declarative components. For functionality like global toolbars or common and composite user interface logic, you build tag library based declarative components, which then can be used across applications too. An ADF region is an interactive and optionally also data centric page are that you use to show complete business processes in place. ADF regions are a friend for building rich Internet application interfaces and business centric web desktops. ADF libraries are the vehicle to deploy your reusable work.
Read more:
DDC
Reuse
Fragments, Templates, Declarative Components