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.
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>
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.
No comments:
Post a Comment