CODE ROAR

How to style a commandButton in Oracle ADF Normally buttons looks like below in the alta-ui skin If you want to style your button to look like bootstap buttons (most of the morder sites use bootstrap like buttons nowadays), you can use component selectors to skin af:commandButton component. Example style classes are below /***************** Button style start **********/ af|commandButton.success{     background-color: #4dbd74;     background-image: none;     border-radius : 5px;     border : 1px solid #3ea863;     color: white;     text-shadow : none; } af|commandButton.success:hover{     background-color: #3ea863;     background-image: none;     border-radius : 5px;     border : 1px solid #3ea863;     color: white;      text-shadow : none; } af|commandButton.warning{     background-color: #ffc107;     background-im...

Most of us would have tried to implement pagination on af:table From Jdeveloper 11.1.1.7, pagination feature is directly available for af:table with a property called "scrollPolicy". We need to have two properties in af:table scrollPolicy="page" autoHeightRows="0" Once this is set the pagination feature should be shown.But table pagination does not show up, until unless we have a floating layout around the table. When we try this, we will get a message in the log saying below falling back to scrolling mode since we need parent component to flow and authHeightRows=0 Logs looks as below This is because of the layout around the table. The table should be in a container in flow mode. For example panelGroupLayout or showDetailHeader. So the af:table should be surrounded with a panelGroupLayout When you surround table with panelGroupLayout, set the layout to "horizontal",or "vertical",or "scroll" . Because w...

When we try to run TestNG or JUnit tests with maven, we usually face this exception saying java.lang.RuntimeException:java.lang.IllegalStateException: The path to the driver executable must be set by the webdiver.chrome.driver system property For this the chrome executable driver file should be available in the classpath. You can add the chrome driver to the classpath of the current project. But if you want to configure the same in a maven pom file, you should do the following. To execute TestNG or JUnit test cases, we use maven-surefire-plugin. We can configure the path to the chrome driver as a configuration parameter in this plugin as shown below <build>         <!-- Source directory configuration -->         <sourceDirectory>src</sourceDirectory>         <plugins>             <!-- Following plugin executes the testng tests -->     ...

Objective here is to open popup from backing bean . You can bind the af:popup like below     <af:popup id="p1" contentDelivery="immediate"               clientComponent="true"               binding="#{backingBeanScope.employee.myPopup}" > Then in java you can use the myPopup to hide and show the popup  private RichPopup myPopup ;//bound to the UI component  public void showOrHidePopup(RichPopup popup,Boolean visible){  if(visible){  RichPopup.PopupHints hints = new RichPopup.PopupHints();    myPopup.show(hints);  }  else{   myPopup.hide();  } That's all, Now you can call this method from any events like actionListener of a commandLink

Let's see how to style menu in oracle adf I assume that you have a page with menus like below The default style for the menu with alta ui theme looks like below If you want to change the look and feel of the menu, then we need to add few component level style selectors. I assume that you have a css file ready to put the custom styles that we are going to use.With the below seectors you can play around to change the look and feel /*menu hover*/ af|menu:hover{ border : 1px solid rgb(0,198,198) ; background-color: white; } /*menu hover --> menu text hover*/ af|menu:hover af|menu::bar-item-text:hover{     color: rgb(0,205,205);   } /*menu pressed*/ af|menu:depressed{ border : 1px solid rgb(0,198,198) ; background-color: rgb(0,205,205); color: White; } /*menu pressed and hover --> menu text hover, menu pressed --> menu text*/ af|menu:depressed:hover-target af|menu::bar-item-text, af|menu:depressed af|menu::bar...

Let's see how to use Take photo action in an action chain.It's a mobile application, and let's assume that you want to take photo, while clicking on a button. We are going to use "Take Photo" action for this. I have a page with a button called "Take Photo" in it. Lets add an event for this button click. When you create an event an action chain is created. Go to the action chain, and drag and drop the "Take Photo" action You can change the source for the "Take Photo" action. It has options as "Camera","photoLibrary","savedPhotoAlbum". Let's go with "camera" option. Explore the other options and change as you need. This action returns the file path of the captured photo. You are free to play around with that file path. You can use it to show the captured image, or use it to process the image. We are going to use the filepath and show the image For that let us create ...

Oracle Visual Builder Cloud Service . Let's see how to to change the menu button icon in a mobile application in Oracle VBCS Assuming that you have an application and have added a menu button in your page. The default menu button will look like below when Menu Button is configured with icons. Now how to change this icon to a hamburger 3 line menu icon ? Many elements support defining style class for startIcon and endIcon slots. <oj-menu-button> have startIcon, endIcon slots Reference for this can be found here.  http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojMenuButton.html So we are going to use endIcon slot, as the arrow icon sits in endIcon slot. We need to give a style class here in the place of "myIconClass". Oracle JET provides many framework icons. Reference for that can be found here http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=imagefwk&demo=fwk&mode=and_port We are going to...

Lets quickly see, how to use a switch case in action chain Consider that we are going to have a menu with items saying "Create Note", "Export Notes","More Settings". When each menu item is clicked or chosen, we need to do certain action / action chain. For this, first let's create a page and drag and drop the "Menu Button". When you drop it in the title secion you will get options to choose where you want to place the menu "startControl","endControl","Default". Let's choose it as end control to place it at the end of the title bar. In the page structure choose the "Menu" and go the "Data" tab. Add and Edit the menu items (oj-option). here we have the menu item id's ad "newNote","export","settings" When the menu is selected we need to do some action. For that we need to map an action to the menu. In the page structure choose the "Menu...

In the last blog Custom Autosuggest / typeahead we saw how to construct a custom typeahead / autosuggest using an input text box and a popup with select items. If the list to be filtered is smaller we wouldn't need to show a loading symbol to the user, while doing the filter process in the backing bean. But what if the the list too big to filter and the filtering process would take some time like 3 to 4 seconds. Or what if the result of search need to be fetched from an external rest end point or from an external soap service ? It would take some considerable amount of time to fetch the data. User's expect some quick response from the page, when they try to do something. So it's better to show them that the process is happening at the back end. A simple way to do that is to have loading gif image ready, and show it when the popup opens and before triggering the server event to filter the list. Once the filtered items are ready and about to be returned to the client then ...