Skip navigation.

Shay Shmeltzer

Syndicate content
Tips and information about Oracle JDeveloper and Oracle ADF
Updated: 8 hours 4 min ago

Leveraging Oracle Developer Cloud Service in SQL and PL/SQL Projects - lifecycle and team collaboration

Tue, 2015-05-26 11:37

Usually my demos are targeted at Java developers, but I realize that a lot of developers out there are not using Java, for example in the Oracle install base there is a huge section of PLSQL developers. This however doesn't change their requirements from a development platform. They can still benefit from version management and code review functionality. They still need to track bugs/issues and requirements from their users, and they still need to collaborate in a team environment. 

So I decided to try out and see what would be the development lifecycle experience for a PL/SQL developer if they'll leverage the services provided by the Oracle Developer Cloud Service - here is a demo that shows a potential experience. 

What you'll see in the demo:

  • Using JDeveloper to create DB Diagrams, Tables and PL/SQL code
  • Version manage PL/SQL and SQL with Git
  • Defining a cloud project and adding users
  • Check code in, and branch PL/SQL functions
  • Tracking tasks for developers
  • Code review by team members
  • Build automation (with Ant) - and almost a deploy to the DB

As you can see it is quite a nice complete solution that is very quick to setup and use.

It seems that the concepts of continuous integration in the world of PL/SQL development are not yet a common thing. In the demo I use the Ant SQL command to show how you could run a SQL script you created to create the objects directly in the database - which is probably the equivalent of doing a deployment in the world of Java. However if you prefer you can use Ant for example to copy files, zip them, or do many other tasks such as run automated testing frameworks.

The Ant task I used is this:

  <path id="antclasspath">
    <fileset dir=".">
      <include name="ojdbc7.jar"/>
    </fileset>
  </path>
   <target name="deploy">
    <sql driver="oracle.jdbc.OracleDriver" userid="hr2" password="hr"
         url="jdbc:oracle:thin:@//server:1521/sid" src="./script1.sql" 
	classpathref="antclasspath"/>
  </target> 

I had both the ojdbc7.jar file and the script file at the root of the project for convenience. 

While my demo uses JDeveloper - you should be able to achieve similar functionality with any tool that supports Git. In fact if you rather not use a tool you can simply use command lines to check your files directly into the cloud.

Categories: Development

Leveraging Icon Fonts (Font Awesome) in Oracle ADF - 500 New Icons for your app

Thu, 2015-05-07 15:51

Icon fonts are a growing trend among web developers, they make it quite simple to add icons to your web site and resize them for better responsive design.

Font Awesome is a popular open source icon font - providing over 500 icons that you can add to your application. I got several questions over the past couple of weeks about using these icons in ADF applications, so here is a short video showing you how to set this up with ADF 12.1.3 and using skins. (Quick note - before 12.1.3 you couldn't include these type of font in the skin css file - and you would have needed to directly refer to the CSS file from each page in your app - one more reason to upgrade your application to 12.1.3).

The basic steps:

  • Create a new skin for your ADF application (if you don't know how to do this, see this blog entry).
  • Download font awesome and copy the font-awesome-4.3.0 directory into your new skin directory
  • Copy the @font-face entry from the font-awesome.min.css file into your new skin.css file
  • Update the path in the various URI entries so it reflects the new relative location of the font files
  • Create class entries in your skin CSS for the icons you want to use - remember to add a font-family: FontAwesome; to make sure they use the new font.
  • Assign the classes to the styleclass property of your ADF Faces components.

Here is a demo showing how it is set up and how it works:

The skin1.css in the video is this:

@charset "UTF-8";

/**ADFFaces_Skin_File / DO NOT REMOVE**/

@namespace af "http://xmlns.oracle.com/adf/faces/rich";

@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

@font-face {

    font-family: 'FontAwesome';

    src: url('font-awesome-4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0');

    src: url('font-awesome-4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0')format('embedded-opentype'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0')format('woff2'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0')format('woff'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0')format('truetype'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')format('svg');

    font-weight: normal;

    font-style: normal;

}

.heart:before {

    content: "\f004";

    font-family: FontAwesome;

}

.mail:before {

    content: "\f003";

    font-family: FontAwesome;

If you want to see how this could help with responsive design try this in your CSS as an example. Then resize the width of the browser window to see how the icons will change their size dynamically:

.heart:before {

    content: "\f004";

    font-family: FontAwesome;

    font-size: x-large;

}

.mail:before {

    content: "\f003";

    font-family: FontAwesome;

    font-size: x-large;

}

@media screen and (max-width:950px) {

    .heart:before {

        content: "\f004";

        font-family: FontAwesome;

        font-size: small;

    }

    .mail:before {

        content: "\f003";

        font-family: FontAwesome;

        font-size: small;

    }

Categories: Development

Oracle Developer Cloud Service - Automating Builds for Oracle ADF Applications

Tue, 2015-04-28 11:49

Following up on the previous blog that showed how to get your ADF application into the Developer Cloud Service git repository, this entry will show you the next step in the lifecycle - executing builds.

The Oracle Developer Cloud Service (DevCS) supports build automation with both Maven and Ant scripts - and in this demo I'm showing you how to use the Ant option. One of the unique aspects of DevCS for customers who are  using Oracle ADF and JDeveloper is that the cloud comes pre-configured with the ADF libraries needed to compile your code, and also with support for OJDeploy so you can leverage deployment profiles that you defined for your application.

In fact DevCS comes with support for two ADF versions - 11.1.1.7.1 and 12.1.3 (as of the time of this blog).

In the video below you'll see

  • How to add a build file for your ADF application
  • How to  configure the build file to work in the cloud environment
  • How to define a build job and execute it
  • How to look at the log files for the build job
  • How to automate the build execution to happen when changes are committed to the git repository

The build in the example above just does the packaging, but in more realistic scenarios you can use similar build processes to create ADF libraries from projects, automate testing, modify configuration and more.

There are a couple of files that are used in the demo that you might want to use in your implementation:

The build.xml file: 

  <property environment="env" /> 
  <property file="build.properties"/>
    <target name="deploy" description="Deploy JDeveloper profiles">
    <taskdef name="ojdeploy"
             classname="oracle.jdeveloper.deploy.ant.OJDeployAntTask"
             uri="oraclelib:OJDeployAntTask"
             classpath="${oracle.jdeveloper.ant.library}"/>
    <ora:ojdeploy xmlns:ora="oraclelib:OJDeployAntTask"
                  executable="${oracle.jdeveloper.ojdeploy.path}"
                  ora:buildscript="${oracle.jdeveloper.deploy.dir}/ojdeploy-build.xml"
                  ora:statuslog="${oracle.jdeveloper.deploy.dir}/ojdeploy-statuslog.xml">
      <ora:deploy>
        <ora:parameter name="workspace"
                       value="${oracle.jdeveloper.workspace.path}"/>
        <ora:parameter name="profile"
                       value="${oracle.jdeveloper.deploy.profile.name}"/>
        <ora:parameter name="nocompile" value="false"/>
        <ora:parameter name="outputfile"
                       value="${oracle.jdeveloper.deploy.outputfile}"/>
      </ora:deploy>
    </ora:ojdeploy>
  </target>

The build.properties file I used can be found here.

The mask for the build automatic execution is */1 * * * *

Note that in the properties file there are references to environment variables that you will need to change if you are looking to deploy an 11.1.1.* app - specifically the options for 12 and 11 are:

WLS_HOME_12C3=/opt/Oracle/Middleware12c3/wlserver
WLS_HOME_11G=/opt/Oracle/Middleware/wlserver_10.3
MIDDLEWARE_HOME_12C3=/opt/Oracle/Middleware12c3
MIDDLEWARE_HOME_11G=/opt/Oracle/Middleware
ORACLE_HOME_12C3=/opt/Oracle/Middleware12c3/jdeveloper
ORACLE_HOME_11G=/opt/Oracle/Middleware/jdeveloper
Categories: Development

Using the Oracle Developer Cloud Service for Git version management for JDeveloper/ADF apps

Thu, 2015-04-23 10:35

The Oracle Developer Cloud Service (DevCS for short) provides a complete cloud-hosted development platform for your team. This makes it very easy to start adopting development best practices for your team, and adopt a more agile development approach.

If you haven't tried it yet, you should!

It's simple to get a free trial instance - just sign up for a trial of the Java cloud service (which, by the way, will take you through anOracle ADF based registration wizard) and an instance of the Developer cloud service will be provisioned for you as part of the trial. No need for any additional machines or installations on your side.

I'm going to write a couple of blogs about the various features that DevCS provides such as build and continuous integration, but let's start with the very basic feature we all should be using - source code management.

Every project needs to do version management - even if you are a single developer - and with DevCS there is no server and network setup required. Create a new DevCS project and 10 seconds later you have your git server accessible from any computer that has internet access.

The demo below is using JDeveloper 12.1.3 and the sample summit ADF application that you can get from OTN. 

In the demo I start from scratch and demo how to

  • create a new DevCS project
  • check code into the git repository
  • branch my code to work on fixes
  • submit the changes back
  • how to do code review by team members
  • merge fixes to the master branch

 

Go ahead try it out with your project and your team.

If you are new to git (which has quickly became the new standard for source management) - check out the Oracle A-Team blog entry that explains a good workflow for team work with git that you can adopt. 

Have any further questions about using the Developer Cloud Service? Ask them on the DevCS community page

Categories: Development

Dynamically refresh a part of a page (PPR) in Oracle MAF

Wed, 2015-04-22 10:23

A common question for developers who are just starting with Oracle MAF, especially if they have a background in Oracle ADF, is how do you do a partial page refresh in Oracle MAF.

Partial Page Refresh basically means that I want to change something in my UI based on another event in the UI - for example hide or show a section of the page. (In ADF there is a partialTrigger property for components which is not there in MAF).

In MAF the UI behaves differently - it is not based on JSF after all - the UI directly reflects changes in managed beans as long as it knows about changes there. How does it know about changes? For this you need to enable firing change event notifications. This is actually quite easy to do - just turn on the checkbox in JDeveloper's accessors generation and it will do the job for you.

Here is a quick demo showing you how to achieve  this:

Here is the code used.

in AMX page:

     <amx:tableLayout id="tl1">

      <amx:rowLayout id="rl1">

        <amx:cellFormat id="cf2">

          <amx:listView var="row" showMoreStrategy="autoScroll" bufferStrategy="viewport" id="lv1">

            <amx:listItem id="li1">

              <amx:outputText value="ListItem Text" id="ot2"/>

              <amx:setPropertyListener id="spl1" from="#{'true'}" to="#{viewScope.backingPPR.showIt}"

                                       type="swipeRight"/>

              <amx:setPropertyListener id="spl2" from="#{'false'}" to="#{viewScope.backingPPR.showIt}"

                                       type="swipeLeft"/>

            </amx:listItem>

          </amx:listView>

        </amx:cellFormat>

      </amx:rowLayout>

      <amx:rowLayout id="rl2" rendered="#{viewScope.backingPPR.showIt}">

        <amx:cellFormat id="cf1">

          <amx:commandButton text="commandButton1" id="cb3"/>

        </amx:cellFormat>

      </amx:rowLayout>

    </amx:tableLayout>


in managed bean:

     boolean showIt = false;


    public void setShowIt(boolean showIt) {

        boolean oldShowIt = this.showIt;

        this.showIt = showIt;

        propertyChangeSupport.firePropertyChange("showIt", oldShowIt, showIt);

    }


    public boolean isShowIt() {

        return showIt;

    }


    public void addPropertyChangeListener(PropertyChangeListener l) {

        propertyChangeSupport.addPropertyChangeListener(l);

    }


    public void removePropertyChangeListener(PropertyChangeListener l) {

        propertyChangeSupport.removePropertyChangeListener(l);

    }


Categories: Development

Implementing the Tree Navigation Oracle Alta UI Design Pattern

Fri, 2015-03-13 15:10

The Oracle Alta UI design patterns offer many new approaches for navigation in your application as you can see in the navigation patterns section. One of those is the Tree Navigation pattern - which is an updated approach to the way that many applications display menus today.

While the "old" way of building these menus was using the tree component, the new design uses an interface that works better on mobile devices and is easier on the eyes. It uses animation to do in-place replacement of one level in the menu with the next one. 

old new img

You could also use this approach to represent other types of hierarchical/master-detail relationships. 

In the demo below I show you how to quickly implement such navigation pattern with ADF Faces and a combination of af:listView components along with the af:deck component.

There are a bunch of further things you might want to do in your actual application beyond what the demo does.

One is to show on the right side of the page the information on the object you select on the left side. Using a deck component there you can also switch that section to show either Dept or Emp data in the same area. You'll already have the actionListener in place to do the switch of display, and ADF already has the right record selected - so just dropping the same data control on the right as a form will be enough.

Another nice enhancement would be to condition the showing of the right caret to be based on whether there are actually details. This should be easy to achieve with a calculated attribute using groovy - as shown here

In the demo I also show how to invoke the makeCurrent row selection functionality from a managed bean, this allows me to do two operations when a menu option is selected. The code I use ,which is based on code I found on Ashish's blog, is:

public void deptSelect(SelectionEvent selectionEvent) {
        ELContext elcontext = FacesContext.getCurrentInstance().getELContext();
        MethodExpression methodExpression =
            FacesContext.getCurrentInstance().getApplication().getExpressionFactory().createMethodExpression(elcontext,
                                                "#{bindings.DepartmentsView1.treeModel.makeCurrent}",
                                                                                                             Object.class, new Class[] {
                                                                                                             SelectionEvent.class });
        methodExpression.invoke(elcontext, new Object[] { selectionEvent });
        deck.setDisplayedChild("pgl2");
        AdfFacesContext.getCurrentInstance().addPartialTarget(deck);
    } 

I also use styleClass="AFAppNavbarButton" for the "back" button to make it look a bit better. 

The full source of the JSF page is:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <af:document title="untitled3.jsf" id="d1">
        <af:messages id="m1"/>
        <af:form id="f1">
            <af:pageTemplate viewId="/oracle/templates/tabletFirstTemplate.jspx" id="pt1">
                <f:facet name="header"/>
                <f:facet name="status"/>
                <f:facet name="appNav"/>
                <f:facet name="globalLinks"/>
                <f:facet name="footer"/>
                <f:facet name="center"/>
                <f:facet name="start">
                    <af:deck id="d2" binding="#{mb3.deck}" displayedChild="pgl1">
                        <af:panelGroupLayout id="pgl1">
                            <af:listView value="#{bindings.DepartmentsView1.collectionModel}" var="item"
                                         emptyText="#{bindings.DepartmentsView1.viewable ? 'No data to display.' : 'Access Denied.'}"
                                         fetchSize="#{bindings.DepartmentsView1.rangeSize}" id="lv1" selection="single"
                                         selectionListener="#{mb3.deptSelect}">
                                <af:listItem id="li1">
                                    <af:panelGridLayout id="pgl3">
                                        <af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr1">
                                            <af:gridCell marginStart="5px" width="80%" id="gc1">
                                                <af:outputFormatted value="#{item.bindings.DepartmentName.inputValue}"
                                                                    id="of1"/>
                                            </af:gridCell>
                                            <af:gridCell marginStart="5px" width="20%" marginEnd="5px" id="gc2">
                                                <af:image source="func_caretright_16_ena.png" id="i1"/>
                                            </af:gridCell>
                                        </af:gridRow>
                                    </af:panelGridLayout>
                                </af:listItem>
                            </af:listView>
                        </af:panelGroupLayout>
                        <af:panelGroupLayout id="pgl2">
                            <af:button text="#{bindings.DepartmentName.inputValue}" id="b1"
                                       actionListener="#{mb3.backToDept}" styleClass="AFAppNavbarButton"
                                       icon="/func_caretleft_16_ena.png"/>
                            <af:listView value="#{bindings.EmployeesView4.collectionModel}" var="item"
                                         emptyText="#{bindings.EmployeesView4.viewable ? 'No data to display.' : 'Access Denied.'}"
                                         fetchSize="#{bindings.EmployeesView4.rangeSize}" id="lv2">
                                <af:listItem id="li2">
                                    <af:panelGridLayout id="pgl4">
                                        <af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr2">
                                            <af:gridCell marginStart="5px" width="80%" id="gc3">
                                                <af:outputFormatted value="#{item.bindings.LastName.inputValue}"
                                                                    id="of2"/>
                                            </af:gridCell>
                                            <af:gridCell marginStart="5px" width="20%" marginEnd="5px" id="gc4">
                                                <af:image source="func_caretright_16_ena.png" id="i2"/>
                                            </af:gridCell>
                                        </af:gridRow>
                                    </af:panelGridLayout>
                                </af:listItem>
                            </af:listView>
                        </af:panelGroupLayout>
                        <af:transition triggerType="forwardNavigate" transition="slideLeft"/>
                        <af:transition triggerType="backNavigate" transition="slideRight"/>
                    </af:deck>
                </f:facet>
                <f:facet name="end"/>
                <f:attribute name="endWidth" value="0px"/>
                <f:attribute name="startWidth" value="200px"/>
            </af:pageTemplate>
        </af:form>
    </af:document>
</f:view> 

Categories: Development