Stretch ADF Faces Components to fit browser width (Show as row-column layout- inline block )

Recently i have seen a thread in OTN about layout of components (How to use components to show a particular layout)
ADF layout for showing email recipients

Requirement was simple, user want to show components up to maximum available width (browser window width) first and then move to next line and show other components
So i thought to document it here :)

Suppose i have to show 6 images on page (horizontally) , so for that i have used 6 group layout
one for each image and button



See xml source-

<af:panelGroupLayout id="pgl1" layout="horizontal">
                    <af:panelGroupLayout id="pgl2" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:a_hobbit_house-wallpaper-1280x800.jpg']}"
                                  shortDesc="Hobbit House" id="i1" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b1"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl3" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:beach_at_sunset_3-wallpaper-1440x900.jpg']}"
                                  shortDesc="Sunset at Beach" id="i2" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b2"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl4" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:icelands_ring_road-wide.jpg']}" shortDesc="Ring Road"
                                  id="i3" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b3"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl5" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:road_to_mount_cook-wallpaper-1280x800.jpg']}"
                                  shortDesc="Road To Mount Cook" id="i4" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b4"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl6" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:skyscrapers_reflections-wallpaper-1280x800.jpg']}"
                                  shortDesc="Skycrappers " id="i5" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b5"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl7" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:tufandisli_1387241118_57.jpg']}" shortDesc="Tufan"
                                  id="i6" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b6"/>
                    </af:panelGroupLayout>
                </af:panelGroupLayout>

 and how it looks on page-

You can see here last image is not appearing properly because total width of all images has crossed maximum available width of browser window
Now i want to show last image on next line
So to do this set parent panel group layout to default layout and set display:inline-block for all child panel group layout

<af:panelGroupLayout id="pgl1">
                    <af:panelGroupLayout id="pgl2" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:a_hobbit_house-wallpaper-1280x800.jpg']}"
                                  shortDesc="Hobbit House" id="i1" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b1"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl3" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:beach_at_sunset_3-wallpaper-1440x900.jpg']}"
                                  shortDesc="Sunset at Beach" id="i2" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b2"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl4" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:icelands_ring_road-wide.jpg']}" shortDesc="Ring Road"
                                  id="i3" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b3"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl5" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:road_to_mount_cook-wallpaper-1280x800.jpg']}"
                                  shortDesc="Road To Mount Cook" id="i4" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b4"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl6" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:skyscrapers_reflections-wallpaper-1280x800.jpg']}"
                                  shortDesc="Skycrappers " id="i5" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b5"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl7" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:tufandisli_1387241118_57.jpg']}" shortDesc="Tufan"
                                  id="i6" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b6"/>
                    </af:panelGroupLayout>
                </af:panelGroupLayout>

Now it appears like this -

now again test it by increasing and decreasing browser window width , images and group layout are adjusted as per screen size automatically like a grid view (row and columns)

Thanks , Happy Learning :)
Sample ADF Application- Download

ADF Basics: Apply and Change WHERE Clause of ViewObject at runtime programmatically

This post is about applying or changing WHERE clause of ViewObject programmatically, it can be also used in case we need a specific data(row) from database, suppose you are using Department table of HR Schema and on a button click you need to show records of department id 5

It means you want to filter viewObject on that particular event, you can do this using setWhereClause mehtod of ViewObjectImpl class.
See the image below , all rows shown in this

Now when we click the button, it will filter (apply WHERE Clause in Departments ViewObject) rows and refresh ViewObject , returns desired rows.




For Department_Id 4-

For Department_Id 5-

To apply WHERE Clause , see this simple snippet of code

ViewObject v1 = am.getDepartment1();

v1.setWhereClause("DEPARTMENT_ID=4"); // Pass Where Clause String as Method Parameter

v1.executeQuery();

This code snippet fetch the Row with Deprartment_id=4 and returns back to page. setWhereClause sets the Query's (SQL) Where Clause and doesn't take effect until executeQuery method of ViewObjectImpl is called

To reset Where Clause we have to set null value in method used

ViewObject v1 = am.getDepartment1();

v1.setWhereClause(null); // To Remove Where Clause

v1.executeQuery();

Thanks , Happy Learning :)

Java Database Connectivity- JDBC Tutorial, PreparedStatement, ResultSet

JDBC is java based API or technology to access data from database and use in Java Desktop or Enterprize application. In short we can say JDBC is an interface between Java and Database, using JDBC you can interact with any of database as Oracle, MySQL, Access.
JDBC is released with JDK(Java Development Kit)1.1 on 19 Feb 1997 and It is a part of Java Standard Edition. if you know about DBMS(Database Management Systems) then you should know about Database Drivers, drivers are of 4 types.

1. Type 1 Driver - JDBC-ODBC bridge
2. Type 2 Driver - Native-API Driver
3. Type 3 Driver - Network-Protocol Driver(MiddleWare Driver)
4. Type 4 Driver - Native-Protocol Driver(Pure Java Driver)-Thin Driver

If you don't have java installed , follow the link below to donload it

JDK1.7- Download jdk1.7
Now we will learn that how to implement Database connection in Java. To start with JDBC you must have a little knowledge of DBMS and SQL(Structured Query Language) to interact with Database
here i will show you that how to connect with Oracle Database
Follow these steps to connect with Oracle Database

1. Load Driver (Thin Driver)

The very first step towards database connection is Loading Driver, as discussed we use pure java driver in JDBC connectivity there are two steps to load driver for connection

A. Using DriverManager class
The syntax is - DriverManager.registerDriver(DriverName);

1.         try {
2.             DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
3.            
4.         } catch (SQLException e) {
5.         }
6.        

B. Using Class.Forname class
The syntax is - Class.forName(”DriverName”);

1.         try {
2.              Class.forName("oracle.jdbc.driver.OracleDriver");
3.            
4.         } catch (SQLException e) {
5.         }
6.        

2. Create Connection

Connection interface is inside java.sql package and extends Wrapper interface. now to create Connection we register driver with DriverManager class.
Syntax is- DriverManager.getConnection("url string", "username", "password");

1. Connection con;
2.  try {
3.      DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
4.      con=DriverManager.getConnection(
5.      "jdbc:oracle:thin:@192.168.1.234:1521:XE", "hr", "hr");
6.  } catch (SQLException e) {
7.  }

You have to change url string with your ip address and SID according to your database setting

3. Execute PreparedStatement and return Resultset

Now we see that how to execute SQL query using PreparedStatement and store its result in ResultSet object
Here i am getting username and password from LOGIN_DET table (you can use your own query here)

1.         Connection con;
2.         try {
3.             DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
4.             con = DriverManager.getConnection("
5.            jdbc:oracle:thin:@192.168.1.241:1521:eadf", "hr", "hr");
6.             PreparedStatement psmt = con.prepareStatement("SELECT * FROM LOGIN_DET");
7.             ResultSet rs = psmt.executeQuery();
8.             if (rs.next()) {
9.                 while (rs.next()) {
10.                 System.out.println("Username is--" + rs.getString(1)
11.                + "and Password is-->" + rs.getString(2) +
12.                "Email Id is--->" + rs.getString("E_ID"));
13.                 }
14.             }
15.             psmt.close();
16.             con.close();
17.         } catch (SQLException e) {
18.         }

This is the brief overview of using JDBC with Oracle Database, For others you have to change only DriverName respectively
Happy Learning :)