Oracle ADF Components, Custom UI

ADF Faces Components

List View, List Item

ADF Faces > Data Views > af|listView

List View Expand responsive

.listViewExpand

Screenshot....
Iconic Listview

.listViewExpand

Screenshot....
Listview Cards

.AFListViewCard

Screenshot....

Panel Form Layout

ADF Faces > Layouts > af|panelFormLayout

Default

.default

....
Readonly PanelForm

.AFFormReadonly

....
PanelForm Smaller

.AFFormSmall

....

Panel Accordion

ADF Faces > Layouts > af|panelAccordion

Accordion Style 1

.AFAccordionFirst

....

Tree Table

ADF Faces > Data Views > af|treeTable

Tree Table Style 1

.default

....

SKH Custom Components

Using HTML, Bootstrap, CSS, may be ADF Faces
....
....

Usfel Articals

ADF Responsive Components Snippets
12 May 2022

Some placeholder content in a paragraph.
ADF Skin Setup
15 Mar 2022

Some placeholder content in a paragraph.

Comments

Post a Comment

Popular posts from this blog

Draw Vertical Tracker by html & java

Image
 See Full Article:  codeBook JSF <af:outputText id="" value="#{viewScope.bean.trackingHTML}" escape="false"/> css /*  * ------------------------------------------------------------------[Custom]---[CustYearlyTracker]--  * Customize view list  */ .tracking-detail { padding: 3rem 0 } #tracking { margin-bottom: 1rem } [class*=tracking-status-] p { margin: 0; font-size: 1.1rem; color: #fff; text-transform: uppercase; text-align: center } [class*=tracking-status-] { padding: 1.6rem 0 } .tracking-status-intransit { background-color: #65aee0 } .tracking-status-outfordelivery { background-color: #f5a551 } .tracking-status-deliveryoffice { background-color: #f7dc6f } .tracking-status-delivered { background-color: #4cbb87 } .tracking-status-attemptfail { background-color: #b789c7 } .tracking-status-error, .tracking-status-exception { background-color: #d26759 } .tracking-status-expired { backg...
Read more

SKH Custom ADF Component

Image
Tips Don't forget to... > Add meta to jspx/jsf for responsive mode activation <af:document> ... <f:facet name="metaContainer"> <f:verbatim> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/> </f:verbatim> </f:facet> </af:document> > Import bootstrap and fontawesome resources in jspx/jsf page download bootstrap 5 - download fontawesome 6 <af:resource type="css" source="/resources/vendors/bootstrap-5.0.2/css/bootstrap.min.css"/> <af:resource type="css" source="/resources/vendors/fontawesome6pro/css/all.css"/> Components depends on bootstrap 5 Add xmlns:skh="https://skhcodebook.com/snippetdetails/8mVsoSeHprPDLTxtiObH" to root tag. <f:view .. xmlns:skh="https://skhcodebook.com/snippetdetails/8mVsoSeHprPDLTxtiObH"> ADF Faces Components Enchance...
Read more