Different shapes of button in oracle ADF

Not long back, there was a craze to have 3D look & feel of  your websites but gradually people are again interested to see the flat UI of 2D.

Accordingly, oracle ADF was also having the 3D look & feel for its faces components with its in-built fusion skin. Fusion skin was created using probably with CSS 2.1 specification. And almost all the parts of faces component was implemented using images, and gradient to create 3D effect.

I guess, to meet the users expectation, oracle has come up with a latest skin called Skyros just couple of months ago and this is just CSS3 compliant specification. You can apply all the CSS3 features against each of pseudo-elements of the faces component.

But again, you don't have complex UI out-of-the-box from the Skyros skin, so you have to apply the CSS3 on pseudo-elements to achieve certain complex UI.

Here are the few sample buttons, I have created which are basically real in nature in the web application

There is no Jquery, no javascritp, only ADF faces and CSS3.

ADF faces component used is - <af:commandButton> and different CSS classes been created for different shapes.

1/ Next Button

<af:commandButton text="Next" id="cb1" styleClass="fancyArrowNext"/>

CSS -

.fancyArrowNext
{
        background :  rgb(115,115,115) !important;
height: 20px;
position: relative;
width: 100px;
        text-align: left;
         font: 10pt bold;
         color:white;
         border: thin solid rgb(99,99,99) ;
       

}

.fancyArrowNext:after
{
    content: ' ';
    height: 0px;
    width: 0px;
    border: 10px solid   rgb(82,82,82)    ;
    top: -1px;
    left: 85%;
    position: absolute;
    border-left-color: transparent ;
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;

}

2/ Previous Button

<af:commandButton text="Previous" id="cb2"  styleClass="fancyArrowPrev"/>

CSS-
.fancyArrowPrev
{
        background :  rgb(115,115,115) !important;
height: 20px;
position: relative;
width: 100px;
        text-align: right;
         font: 10pt bold;
         color:white;
         border: thin solid rgb(99,99,99) ;
}
.fancyArrowPrev:after
{
    content: ' ';
    height: 0px;
    width: 0px;
    border: 10px solid   rgb(82,82,82)    ;
    top: -1px;
    left: 0px;
    position: absolute;
    border-right-color: transparent ;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;

}

3/Close Button

<af:commandButton text="X" id="cb3"  styleClass="fancyButtonClose"/>

CSS-

af|commandButton.fancyButtonClose
{
        background :  rgb(49,49,49) !important;
height: 40px;
position: relative;
width: 40px;
        text-align: right;
         font: 14pt bold Verdana, Arial, Helvetica, sans-serif ;
         color:white;
         border: thin solid  rgb(214,214,214)   ;
         border-radius:20px 20px 20px 20px;
        text-align: center;
}

af|commandButton.fancyButtonClose:hover
{
    background: rgb(255,99,99) ;
    border: thick solid rgb(255,181,181) ;
    color:  Red;
    font: 10pt bold Verdana, Arial, Helvetica, sans-serif ;
}

4/ OK Button

<af:commandButton text="ok" id="cb4" styleClass="fancyButtonOK"/>

CSS - 

af|commandButton.fancyButtonOK

{

        background :  rgb(181,181,181)  !important;

height: 20px;

position: relative;

width: 100px;

        text-align: right;

         font: 10pt bold Verdana, Arial, Helvetica, sans-serif ;

         color:white;

         border: thin solid  rgb(214,214,214)   ;

         border-radius:10px 10px 10px 10px;

        text-align: center;

}

5/ top to right button

  <af:commandButton text="top to right" id="cb5" styleClass="fancyDoubleArrowTop2Right"/>

CSS - 

.fancyDoubleArrowTop2Right

{

       

        background :  rgb(115,115,115) !important;

height: 20px;

position: relative;

width: 100px;

        text-align: left;

         font: 10pt bold;

         color:white;

         border: thin solid rgb(99,99,99) ;

         

}

.fancyDoubleArrowTop2Right:after

{

  

  content: ' ';

    height: 0px; 

    width: 0px; 

    border: 10px solid transparent ; 

    top: -1px; 

    left: 100%; 

    position: absolute; 

    border-left-color: rgb(115,115,115); 

}

.fancyDoubleArrowTop2Right:before

{

    

    content: ' ';

    height: 0px; 

    width: 0px; 

    border: 10px solid transparent ; 

    top: -20px; 

    left: 0px; 

    position: absolute; 

    border-bottom-color: rgb(115,115,115); 

}

These CSS classes can be applied to any faces components to create different spaces.

Good luck and cheers for your implementation.

ADF and Its beauty

Oracle ADF is amazing. Do you know why ? Its becoz to engineer an web application, you need so many things, so many different components, so many integrations and then you create a solution with a popular architechture called MVC model. And this ADF is providing you with everytings to construct a solution so easily so quickly with so much less estimation.

It provides you whole framework to build a solution with different layers of MVC. At the model layer, you have ADF BC component and you do all your business logic and database interaction and business level validation. The layer Controller, which is provided with ADF taskflow and controller, that simplifies the application pages navigation so much so that you feel like you are playing tac-tac-toe. And the layer View which is the user interface and comes from ADF faces engined with AJAX for almost all the main UI components.

The whole process of building the software, you might require none or very less essential coding as the IDE JDeveloper provides you the 4GL feature declarative programming. All thought you might create an application by drag and drop, but still you need bit of java coding.

Most interesting part of ADF is it's out-of-the-box skin called skyros (most recent with CSS3 support) that will give you the best application look & feel just like business formal.

But sometimes requirement is very complex and customers interest varies and then you might need some casual look & feel or very interesting to look into, So how do you achieve that ? Again those are not out-of-the-box from ADF. There comes ADF and CSS3 to make a super beautiful UI.

Next I 'll discuss How to create fancy box in ADF ? and then How to create different shapes of  button like arrow, circle, inside arrow etc in oracle ADF


So dear all, you might have seen so beautiful fancy box in the market and so many free plug-ins which are mostly created by using JQuery or Javascript. But oracle ADF has its own javascript engine and it's advised not to mixed up the ADF faces life cycle with so many custom javascript as ADF is server oriented architechture unlike to Javascript.

Coming to point - How you create a fancy box or popup window as shown below using oracle ADF ?

This is very easy comparatively in oracle ADF. Three main ADF faces components being used and then you need CSS3 that's all.

Each ADF faces component is collection of several small components, they call it Pseudo-code elements.
You need to understand the layout and position of each pseudo-code element in the ADF faces component,
Once identified, then its up to you how you articulate and apply the CSS.

Theses pseudo-codes elements are part of  CSS and probably created by using after & before elements and that produced the oracle ADF skin.

Here is the JSPX code snippet and 'l' discuss step by step to achieve the fancy box

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1">
      <af:form id="f1">
        <af:panelSplitter orientation="horizontal" splitterPosition="100"
                          id="ps1">
          <f:facet name="first"/>
          <f:facet name="second">
            <af:panelGroupLayout layout="scroll"
                                 xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                 id="pgl1">
              <af:navigationPane id="np1">
                <af:commandNavigationItem text="showPopup1" id="cni1"
                                          styleClass="nav">
                  <af:showPopupBehavior popupId="::p1" triggerType="mouseOver"
                                        align="afterStart"/>
                </af:commandNavigationItem>
                <af:commandNavigationItem text="showPopup2" id="cni2"
                                          styleClass="nav"/>
                <af:commandNavigationItem text="showPopup3" id="cni3"
                                          styleClass="nav"/>
                <af:commandNavigationItem text="showPopup4" id="cni4"
                                          styleClass="nav"/>
              </af:navigationPane>
              <af:popup id="p1">
                <af:panelWindow id="pw1" title="beautiful Singapore"
                                stretchChildren="first"
                                helpTopicId="showPopup1" shortDesc="showPopup1"
                                contentHeight="450" contentWidth="870"
                                modal="true" styleClass="fancywindow">
                  <af:activeImage source="/image1.jpg" id="ai1"
                                  styleClass="AFStretchWidth"/>
                </af:panelWindow>
              </af:popup>
              <af:popup id="p2"/>
            </af:panelGroupLayout>
            <!-- id="af_twocol_left_sidebar_split_stretched"   -->
            
          </f:facet>
        </af:panelSplitter>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

1/ Insert the popup component on page - <af:popup id="p1">
2/ Insert the panelwindow inside popup - <af:panelWindow>
3/Identify the pseudo-elements of panelwindow and apply the CSS in the skin file such as...
3.1/  This is for top header
af|panelWindow.fancywindow::title
{
color: white;
height:25px;
width:880px;
border-radius: 15px 15px 15px 15px;
font-size: 10pt;
background: rgb(82,82,82) ;
text-align: center;
 margin-left: 5.0px;
}

3.2/ This is for close button icon
af|panelWindow::close-icon
{
content:  url("../../closeIconBlackSmall.jpg");
}
3.3/ This is for circle shape of close button
af|panelWindow::close-icon-region
{
color:red;
font-weight:bold;
height: 30px;
width: 30px;
border: 1px solid white ;
top: -30px;
left: 98%;
position: absolute;
border-radius:15px 15px 15px 15px;
}

3.4/ This is for main content window where image is being shown.
af|panelWindow.fancywindow::content
{
 padding-left: 9px;
 height:450px ;
 width:870px;
}

3.5/ This is for fancy box popup window
af|panelWindow.fancywindow
{
width:900px;
height:500px;
background:white;
left: 20%;
top: 30%;
border:thin gray solid ;
opacity: 1;
appearance: window;
border-radius: 7px 7px 7px 7px;
box-shadow:   7px 7px 7px rgb(33,33,33);
position: relative;
}

4/Insert a button on page and associate the showpopupbehaviour to show the fancy box pop window.
<af:commandNavigationItem text="showPopup1" id="cni1"
                                          styleClass="nav">
                  <af:showPopupBehavior popupId="::p1" triggerType="mouseOver"
                                        align="afterStart"/>
</af:commandNavigationItem>

5/ Done and you will get a beautiful fancy window box once run.

See how cool is this in oracle ADF.