Friday Mar 13, 2015

Implementing the Tree Navigation Oracle Alta UI Design Pattern

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> 

Wednesday Feb 04, 2015

Developing On-Device Java Mobile Apps for iOS...and Android Too

At the last JavaOne conference I presented a session titled "Developing On-Device Java Mobile Apps for iOS...and Android Too"

The recording of this session just became available, and I wanted to share it with you.

This session should be a good introduction to how Oracle enables Java developers to take their skills to the mobile world.

The first 28 minutes provide the overview, but if you are not into slides fast forward to minute 29 and start watching the extensive demo of developing an iOS application with Java and Eclipse. 


Friday Jan 30, 2015

Getting started with iOS development using Eclipse and Java

Want to use Eclipse to build an on-device mobile application that runs on iOS devices (iPhones and iPads)?

No problem - here is a step by step demo on how to do this:

Oh, and by the way the same app will function also on Android without any changes to the code :-)  

This is an extract from an online seminar that I recorded for one of Oracle's Virtual Technology Summits - and I figured people who didn't sign up for that event might still benefit from having access to the demo part of the video.

In the demo I show how to build an on-device app that access local data as well as remote data through web services, and how easy it is to integrate device features too.

If you want to try this on your own, get a copy of the Oracle Enterprise Pack for Eclipse, and follow the setup steps in the tutorial here.

And then just follow the video steps.

The location of the web service I accessed is at: http://wsf.cdyne.com/WeatherWS/Weather.asmx?WSDL

And the Java classes I use to simulate local data are  here.



Wednesday Dec 31, 2014

Dynamcially add components to an Oracle MAF AMX page & show and hide components

A question I saw a couple of times about Oracle MAF AMX pages is "how can I add a component to the page at runtime?".

In this blog entry I'm going to show you a little trick that will allow you to dynamically "add" components to an AMX page at runtime, even though right now there is no API that allows you to add a component to an AMX page by coding.

Let's suppose you want to add a bunch of buttons to a page at runtime. All you'll need to have is an array that contain entries for every button you want to add to the page.

We are going to use the amx:iterator component that is bounded to the above array and simply goes over the records and renders a component for each one.

Going one step beyond that, I'm going to show how to control which components from that array actually shows up, based on another value in the array.

So this is another thing you get to see in this example and this is how to dynamically show or hide a component in an AMX page with conditional EL. Usually you'll use this EL in the rendered property of a component, but in the iterator situation we need to use another approach using the inlineStyle that you change dynamically.

You can further refine this approach to control which type of component you render - see for example this demo I did for regular ADF Faces apps and apply a similar approach. 

By the way - this demo is done with Eclipse using OEPE - but if you are using JDeveloper it should be just as easy :-) 

Here is the relevant code from the AMX page:

<amx:iterator value="#{bindings.emps1.collectionModel}" var="row" id="i2">

<amx:commandButton id="c1" text="#{row.name}" inlineStyle="#{row.salary >4000 ? 'display: none;' : 'display: inline;'}">

<amx:setPropertyListener id="s1" from="#{row.name}" to="#{viewScope.title}"/>

</amx:commandButton>

</amx:iterator> 

Wednesday Nov 19, 2014

Modifying the Oracle Alta Skin

In the previous blog entries I showed you how to create an ADF project that uses the new Alta UI and then showed you an example of implementing one of the design patterns for a flip card. In this blog/video I'm going to show you how you can further fine tune the look and feel of your Alta application by modifying and extending your skin with CSS.

At the end of the day, this is going to be done in a similar way to how you skinned previous ADF applications. (If you have never done this before, you might want to watch the videos in these two blog entries).

But since the skinning design time is not completely there for Alta in JDeveloper 12.1.3 there are a couple of tricks. Specifically when you create the new skin, you'll need to change the trinidad-skins.xml file to indicate it is extending the alta-v1 and not skyros-v1  - <extends>alta-v1.desktop</extends>

Then the rest of your tasks would be basically the same (although you won't see the overview tab in your skin editor).

So here we go:

Friday Nov 14, 2014

Card Flip Effect with Oracle Alta UI

The Oracle Alta UI focuses on reducing clatter in the user interface. So one of the first thing you'll try and do when creating an Alta UI is decide which information is not that important and can be removed from the page.

But what happens if you still have semi-important information that the user would like to see, but you don't want it to overcrowd the initial page UI? You can put it on the other side of the page - or in the Alta UI approach - create a flip card.

Think of a flip card as an area that switches the shown content to reveal more information - and with ADF's support for animation you can make a flip effect.

In the demo below I show you how to create this flip card effect using the new af:deck and af:transition components in ADF Faces. 

A few other minor things you can see here:

  • Use conditional ELs and viewScope variables - specifically the code I use is 
#{viewScope.box eq 'box2' ? 'box2' : 'box1'} 
  • Add additional field to a collection after you initially drag and dropped it onto a page - using the binding tab
  • Setting up partialSubmit and PartialTriggers for updates to the page without full refresh 

Monday Oct 27, 2014

Developing Your First Oracle Alta UI page with Oracle ADF Faces

At Oracle OpenWorld this year Oracle announced the new Oracle Alta UI - a set of UI guidelines that will help you create better looking and functioning applications. We use these guidelines to build all our modern cloud based applications and products - and you can use it too today if you are on JDeveloper 12.1.3. 

The Alta UI site is at http://bit.ly/oraclealta

Take a look for example at one page from the master details pattern page:

altapage

You might be wondering how do I go about starting to create such an Alta page layout?

Below is a quick video that shows you how to build such a page from scratch.


A few things you'll see during the demo:

  • Basic work with the panelGridLayout - for easier page structure
  • Working with the new tablet first page template 
  • Enabling selection on a listView component
  • Working with the circular status meter
  • The new AFAppNavbarButton style class
  •  Hot-swap usage to reduce page re-runs

One point to raise about this video is that it focuses more on getting the layout and look rather then the Alta way of designing an application flow and content. In a more complete Alta mind-set you'll also figure out things like fields that probably don't need to be shown (such as the employee_id), you'll think more about "why is the user on this page and what will he want to do here?" which might mean you'll add things like a way to see all the employees in a department in a hierarchy viewer rather than a form that scroll a record at a time.  There are more things you can do to this page to get even better functionality, but on those in future blog entries... 

Friday Oct 03, 2014

An OOW Summary from the ADF and MAF perspective

Another Oracle OpenWorld is behind us, and it was certainly a busy one for us. In case you didn't have a chance to attend, or follow the twitter frenzy during the week, here are the key take aways that you should be aware of if you are developing with either Oracle ADF or Oracle MAF.

 Oracle Alta UI

We released our design patterns for building modern applications for multiple channels. This include a new skin and many samples that show you how to create the type of UIs that we are now using for our modern cloud based interfaces.

All the resources are at http://bit.ly/oraclealta

The nice thing is that you can start using it today in both Oracle ADF Faces and Oracle MAF - just switch the skin to get the basic color scheme. Instructions here.

Note however that Alta is much more than just a color change, if you really want an Alta type UI you need to start designing your UI differently - take a look at some of the screen samples or our demo application for ideas.

Cloud Based Development

A few weeks before OOW we released our Developer Cloud Service in production, and our booth and sessions showing this were quite popular. For those who are not familiar, the Developer Cloud Service, gives you a hosted environment for managing your code life cycle (git version management, Hudson continuos integration, and easy cloud deployment), and it also gives you a way to track your requirements, and manage team work.

While this would be relevant to any Java developing team, for ADF developers there are specific templates in place to make things even easier.

You can get to experience this in a trial mode by getting a trial Java service account here.

Another developer oriented cloud service that got a lot of focus this year was on the upcoming Oracle Mobile Cloud Service - which includes everything your team will need in order to build mobile backends (APIs, Connectors, Notification, Storage and more). We ran multiple hands-on labs and sessions covering this, and it was featured in many keynotes too.

 In the Application development tools general session we also announced that in the future we'll provide a capability called Oracle Mobile Application Accelerator (which we call Oracle MAX for short) which will allow power users to build on device mobile applications easily through a web interface. The applications will leverage MAF as the framework, and as a MAF developer you'll be able to provide additional templates, components and functionality for those.

Another capability we showed in the same session was a cloud based development environment that we are planning to add to both the Developer Cloud Service and the Mobile Cloud Service - for developers to be able to code in the cloud with the usual functions that you would expect from a modern code editor.

dcs

The Developer Community is Alive and Kicking

The ADF and MAF sessions were quite full this year, and additional community activities were successful as well. Starting with a set of ADF/MAF session by users on the Sunday courtesy of ODTUG and the ADF EMG. In one of the sessions there members of the community announced a new ADF data control for XML. Check out the work they did!

ODTUG also hosted a nice meet up for ADF/MAF developers, and announced their upcoming mobile conference in December. They also have their upcoming KScope15 summer conference that is looking for your abstract right now!

Coding Competition

Want to earn some money on the side? Check out the Oracle MAF Developer Challenge - build a mobile app and you can earn prizes that range from $6,000 to $1,000.

Sessions

With so many events taking place it sometime hard to hit all the sessions that you are interested in. And while the best experience is to be in the room, you might get some mileage from just looking at the slides. You can find the slides for many sessions in the session catalog here. And a list of the ADF/MAF sessions here.

See you next year. 

Friday Aug 08, 2014

Required Field Validation in Oracle MAF

A short entry to explain how to do field validation in Oracle MAF. As an example let's suppose you want a field to have a value before someone clicks to do an operation.

To do that you can set the field's attribute for required and "show required" like this:

  <amx:inputText label="label1" id="it1" required="true" showRequired="true"/>

 Now if you run your page, leave the field empty and click a button that navigates to another page, you'll notice that there was no indication of an error. This is because you didn't tell the AMX page to actually do a validation. 

 To add validation you use an amx:validationGroup tag that will surround the fields you want to validate.

For example:

     <amx:validationGroup id="vg1">

    <amx:inputText label="label1" id="it1" required="true" showRequired="true"/>

    </amx:validationGroup>

Then you can add a amx:validateOperation tag to the button that does navigation and tell it to validate the group you defined before (vg1 in our example).

       <amx:commandButton id="cb2" text="go" action="gothere">

        <amx:validationBehavior id="vb1" group="vg1"/>

      </amx:commandButton>

Now when you run the page and try to navigate you'll get your validation error.

Monday Aug 04, 2014

Accessing remote databases from Oracle MAF with the TopLink/EclipseLink REST CRUD Services

In the last post I showed you how simple it is to expose CRUD REST operations on your database with TopLink/EclipseLink.

The next logical step is to then consume those with Oracle MAF to build a mobile application.

This is quite simple with the REST data control. All you need to do is just map the right URLs and create the operation.

Here is a quick demo:

One trick I show in the demo is how to delay the call to a REST service until the user actually provides a value to a parameter. A common issue people have when they have the parameter form and the results on the same page. The solution is easy using the refresh condition of the executables of the page and using the "ne null" check on the parameter value. 

Friday Aug 01, 2014

REST enable your Database for CRUD with TopLink/EclipseLink and JDeveloper

It seems that REST interfaces are all the rage now for accessing your backend data, this is especially true in the world of mobile development. In this blog I'm going to show you how easy it is to provide a complete REST interface for your database by leveraging TopLink/EclipseLink and JDeveloper.

This relies on a capability that is available in TopLink 12c where every JPA entity that you have created can be RESTified with a simple servlet that TopLink provides.

All you need to do is locate the file toplink-dataservices-web.jar on your machine (this is included in the JDeveloper install so you can just search that directory) and then package your project as a WAR.

At that point you'll be able to get a complete CRUD set of operation for this entity.

In the video below I'm to retrieving departments by their id using a URL like this:

http://127.0.0.1:7101/TLServices-Project1-context-root/persistence/v1.0/out/entity/Departments/30

(out - name of my persistence unit. Departments - name of my entity) 

A complete list of all the REST URL syntax is here part of the TopLink documentation on this feature.:

http://docs.oracle.com/middleware/1213/toplink/solutions/restful_jpa.htm#CHDEGJIG

Check out how easy the process is in this video (using MySQL database):

Here are some additional URL samples for getting other types of queries:

Get all the Employees -  http://127.0.0.1:7101/TLServices/persistence/v1.0/out/query/Employees.findAll

Get all the Employees in department 50 - http://127.0.0.1:7101/TLServices/persistence/v1.0/out/entity/Departments/50/employeesList

Executing a specific named query (@NamedQuery(name = "Employees.findByName", query = "select o from Employees o where o.first_name like :name order by o.last_name"))  -http://127.0.0.1:7101/TLServices/persistence/v1.0/out/query/Employees.findByName;name=John

Wednesday Jul 09, 2014

ADF Faces Responsive Design - 12.1.3 Update

I while back I blogged about a technique for doing responsive design with JDeveloper 12.1.2 using media queries and css, but it is time for a small update for those who are using 12.1.3 - since there are some new capabilities that you can leverage.  (I would still recommend watching the other video as it shows some other things you can do with the same technique like changing the size of icons/fonts).

The major change in 12.1.3 is that you can now include your media query and style classes inside the skin definition. When you combine this with page templates you get very clean pages that don't need to include code for responsiveness.

See the demo below for how it works.

One note - in the houses demo I actually used a region that is replicated on the left side and in the panel drawer. This way you only need to code that part once.

Here is the code for the skin's css file:

.wide {

    display: inline;

}


.narrow {

    display: none;

}

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

            .narrow {

                display: inline;

            }

            .wide {

                display: none;

            }

        }

And here is the code for the page template:

 <?xml version='1.0' encoding='UTF-8'?>

<af:pageTemplateDef xmlns:af="http://xmlns.oracle.com/adf/faces/rich" var="attrs" definition="private"

                    xmlns:afc="http://xmlns.oracle.com/adf/faces/rich/component">

    <af:xmlContent>

        <afc:component>

            <afc:description/>

            <afc:display-name>collapseTemplate</afc:display-name>

            <afc:facet>

                <afc:facet-name>right</afc:facet-name>

            </afc:facet>

            <afc:facet>

                <afc:facet-name>drawer</afc:facet-name>

            </afc:facet>

            <afc:facet>

                <afc:facet-name>center</afc:facet-name>

            </afc:facet>

        </afc:component>

    </af:xmlContent>

    <af:panelGridLayout id="pt_pgl1">

        <af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="pt_gr1">

            <af:gridCell marginStart="5px" width="20%" id="pt_gc1" >

            <af:panelGroupLayout layout="vertical" styleClass="wide">

                <af:facetRef facetName="right"/>

                </af:panelGroupLayout>

            </af:gridCell>

            <af:gridCell marginStart="5px" marginEnd="5px" width="80%" id="pt_gc2">

                <af:facetRef facetName="center"/>

            </af:gridCell>

            <af:gridCell  halign="stretch" width="auto" id="pt_gc3" >

            <af:panelGroupLayout layout="vertical" styleClass="narrow">

                <af:panelDrawer  id="pt_pd1" height="500px">

                    <af:showDetailItem id="dr1" shortDesc="Drawer 1">

                        <af:facetRef facetName="drawer"/>

                    </af:showDetailItem>

                </af:panelDrawer>

                </af:panelGroupLayout>

            </af:gridCell>

        </af:gridRow>

    </af:panelGridLayout>

</af:pageTemplateDef>

As before you should also be setting the web.xml contextual parameter org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION  =  true

Thursday Jun 26, 2014

ADF Faces 12.1.3 Features Demo - Partial

The new Oracle ADF and JDeveloper 12.1.3 is out and it comes with a bunch of new features, especially in the UI layer - ADF Faces.

You can read the new features document on OTN, and you should also look into the new components demo for some inspiration.

For a quick overview of some of the new UI capabilities check out this quick video that shows some of the key new features.

Friday Jun 20, 2014

Resolving Problems with the Embedded WebLogic in JDeveloper on Mac

Just a quick entry about something that I ran into in the past with JDeveloper 11.1.2.4, and that some of you who are using Mac might run into.

When you try and run your web application and the embedded WebLogic tries to start you might run into an error like:

Unrecognized option: -jrockit
Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit. 

This is most likely due to the fact that JDeveloper is trying to use the wrong JVM to run your WebLogic.

To solve this - go into the system11.1.2.4.39.64.36.1/DefaultDomain/bin directory and locate the setDefaultDomain.sh file.

Edit this file and add the following lines:

JAVA_VENDOR="Sun"

export JAVA_VENDOR 

By doing this you'll instruct WebLogic to start with a regular JVM and not the JRockit variant which isn't on your mac. 

Friday May 16, 2014

Book Review - Oracle ADF Enterprise Application Development Made Simple (Second Edition)

I got a copy of the new edition of Sten Vesterli's book about enterprise development with ADF, so I wanted to give a quick review update. I reviewed the first edition three years ago - and you can read that review here.

The second edition is not drastically different from the first one, and it shouldn't be. Most of the best practices that Sten pointed out in his original book still apply today. What might have changed a bit over the years are some of the tools used by enterprises to manage their application - and this is what some of  the updates are about - for example in addition to covering Subversion there is a Git section now. In addition Sten incorporate a few more architectural and conceptual bits and pieces that he collected over the past three years working with various customers. 

If you want to get a video summary of the type of topics Sten covers in this books you can watch this seminar he recorded for one of our virtual developer days

This is definitely a book that should be part of the reading material for groups about to embark on Oracle ADF development project - it will save them from some common mistakes and will put them on the right track to a well structured project and team.

It is worthwhile mentioning also that over the past year we at Oracle have been quite actively increasing the amount of material we are producing around those aspects and we centralize them in our ADF Architecture Square on OTN.

If you haven't visited that site or subscribed to the ADF Architecture YouTube channel - it's time you'll do this to. 

About

me
I'm a Director of Product Management for the Oracle Mobile and Development Tools.
Follow me:
Search

Archives
« March 2015
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today