Tuesday, 9 June 2015

ADFUtils and JSFUtils

  • JSFUtils



  • JSFUtils



Monday, 8 June 2015

How to implement CSS in ADF

Hello all,

This is a small post regarding "Implementation of CSS in ADF". Implementation of CSS in ADF application is very common and is also very useful as well, as it enhance the User Interface (UI) of Application.

JDeveloper supports two options for applying style information to your ADF Faces components:
  • Build a skin and a cascading style sheet (CSS) using defined style selectors and configure your ADF application to use the skin and style sheet.
  • Use style properties to override the style information from the skin CSS to set specific instances of component display.
Here, we are going to use a CSS file to change the look and feel of ADF components.

Steps are as follows:

 1) First, create a Fusion Web Application (ADF). I have created CssInAdf.


Then, create a *.jspx page as showing above.

2) Now, you can add ADF faces components on your *.jspx page, so that we could apply CSS on those components. I have used ADF's outputtext component for the same.

Type outputtext in component palette (appears right side of your screen by default) &
Drag & drop Output Text (ADF Faces.Common Components) from component palette to your *.jspx page.


To provide space between two outputtext or any other components, you may use Spacer (ADF Faces.Layout) and can set its width or height as shown in the following image.



Here I haven't applied any panel or from on this *.jspx page. However, you may use PanelGroupLayout or PanelFormLayout to customize your page as per your requirement.

3) Now, right click on ViewController and go to New option. Create CSS file and give a name to it.


Now, there will be a CSS file under your Web Content section on your Application Navigator (left side of your screen). This CSS file comes up with some default text which you can delete if you do not need that.

Here, I have created 3 new CSS classes mycss1, mycss2 & mycss3 respectively. See below:



4) Now, create trinidad-skins.xml file. Right click on WEB-INF & choose New option. Now, select  XML Document (XML) from the list.




Now, paste the following code in trinidad-skins.xml file:


**Note: Please note one thing that skin-family should be same in both XML file (trinidad-config.xml & trinidad-skins.xml). Like I have used skyros in both the files.



In above image style.css (text in red circle) is the name of the CSS file which we had created earlier and css is the name of the directory under which it exists.

5) Now, go to your *.jspx page and find resource component in your component palette. Drag & drop it on form of your *.jspx page and select type as CSS.



6) Now, select resource component from you *.jspx's Structure panel and go to its Property Inspector. Provide the source of your CSS file as shown below :-




After clicking on Edit button you can choose your style.css file and press OK. Now, you would be able to see something like below:


7) Now, select the the OutputText component from your *.jspx page and go to its Property Inspector and provide the CSS class name in StyleClass section. Changes will be shown on your JSPX page. Like below:


Repeat the same thing for next two OutputText component & run your JSPX page. JOB DONE...!!
Here is the final screen....


--> You can download the sample application from here


Here we done....Thanks , Happy Learning :)

Friday, 5 June 2015

ADF Business Components

Hello friends, before diving into ADF Business Component I would like to share some basic knowledge about it. Coming few lines explain what ADF Business Components is all about and its features. Here it is:

The prime goal of ADF Business Components is to make the business services developer more productive.

ADF BUSINESS COMPONENT:

ADF Business Components and JDeveloper simplify the development, delivery, and customization of business applications for the Java EE platform. With ADF Business Components, developers aren't required to write the application infrastructure code required by the typical Java EE application to:
  • Connect to the database
  • Retrieve data
  • Lock database records
  • Manage transactions

ADF BUSINESS COMPONENT FEATURES: 
  • Simplifying Data Access
  • Enforcing Business Domain Validation and Business Logic
  • Supporting Sophisticated UIs with Multipage Units of Work
  • Implementing High-Performance Service-Oriented Architecture
  • Streamlining Application Customization
Detailed information about ADF Business Components can be found here.

Now, lets see how we can create ADF Business Components in ADF:

1) First, create a Fusion Web Applicaiton (ADF) in JDeveloper.


2) Once, you create an Fusion Web Application, you would on following screen.


3) Simply right click on model (showing under red circle) & choose New option. Following window will appear in your screen.


You need to opt Business Components from Tables option. This will create you Entity object and View Object at the same time.  You can also create Entity Object & View Object explicitly (by using the option showing under red rectangle). But for the time being just use Business Components from Tables option.

4) After this you need to specify a database connection. If you have already integrated your application with a DB connection then it is just fine. Otherwise, you need to specify one like this:



You can test your connect by clicking on Test Connection button, if it returns success then your connection is fine. Finally, click on OK button.

5) Now, create your Entity Object & View Object as follows:


Click on this Query button (indicated by a red arrow) to get the tables listed on your Database.


Entity Object:
Now, choose desired table to create Entity Object from the table list shown in left side and shuttle it to right side by choosing shift option (indicated by a red arrow). Here, I did this with Employee table. You can also give name to your Entity object using Entity Name field.



View Object:
Now, again shift the available object from left to right to create your "Updatable View Object".

Now, click next button until you got the final finish button. Once you click on Finish button something like following will appear in your Application Navigator panel:



Here, we done.....!!

Thank you :)