X

Shay Shmeltzer's Oracle Development Tools Tips

Developing Your First Oracle Alta UI page with Oracle ADF Faces

Shay Shmeltzer
Director of Product Management - Oracle

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... 

Join the discussion

Comments ( 32 )
  • guest Wednesday, October 29, 2014

    Good One. Thanks for share such a good demo.


  • Alejandro Friday, October 31, 2014

    Hi Shay,

    Thanks for the video. I wanted to ask you, how do I expand vertically the content in the Main facet for this tabletFirstTemplate? For example, if you use the standard oralce three columns template, in the main facet you can put a panelDashboard with parent dimension and it will fill up the whole page while if you do the same using the tabletFirstTemplate the panelDashboard wont expand.

    IS this an expected behaviour?

    Regards


  • Shay Friday, October 31, 2014

    Alejandro,

    The new template is focused on using flow layout rather than stretch layout - so the layout shouldn't be stretched to fill the page if there isn't a need for it. If you feel your dashboard with boxes it will continue to flow down as needed.


  • guest Tuesday, November 11, 2014

    Thanks for the demo video.

    Does the latest ADF tutorial explains the Alta UI implementation also?


  • Alexandru Wednesday, November 12, 2014

    What deployment options do we have ? Just WebLogic Server ? What about Wildfly or GlassFish 4 ?


  • Shay Wednesday, November 12, 2014

    Guest - the default ADF tutorial was written before Alta became available so it is not showing Alta UI - however everything it teaches you is still valid for an Alta apps.


  • Shay Wednesday, November 12, 2014

    Alexandru - Alta is also included in the ADF Essentials packaging of ADF Faces - so you should be able to deploy it to other servers. We specifically tested this with GlassFish 3.1.


  • Alexandru Thursday, November 13, 2014

    Good morning Shay,

    Could you please share with us your

    a) Integrated WebLogic server JVM memory settings

    b) fast swap settings

    I need help to make development/testing cycle much faster.....

    So far JDevelper is great except that the Integrated WebLogic server is too slow....

    Thanks !


  • Alexandru Thursday, November 13, 2014

    I tried three settings:

    1. Set fast-swap as indicated here

    http://technology.amis.nl/2009/06/26/fast-swap-in-weblogic-103-and-jdeveloper-11g-redeploy-after-compile-in-running-application/

    2. Increase Xmx and Xms memory in

    C:\Users\YourUserAccount\AppData\Roaming\JDeveloper\12.1.3.0.0\product.conf

    3. Set "USER_MEM_ARGS " variable in wlst.cmd

    C:\Oracle\Middleware\Oracle_Home213\oracle_common\common\bin\wlst.cmd

    @ECHO OFF

    SETLOCAL

    Rem added this line in order to create the domain

    SET USER_MEM_ARGS=-Xms256m -Xmx512m -XX:MaxPermSize=384m


  • Alexandru Thursday, November 13, 2014

    If classes change, there is something more useful that works for me

    Deployments are made in this folder

    C:\Users\YourUserAccount\AppData\Roaming\JDeveloper\system12.1.3.0.41.140521.1008\o.j2ee\drs

    then see the subfolder of the application we are interested in:

    e.g. TestAltaUI

    In my example the subfolder is

    TestAltaUI\ViewControllerWebApp.war\WEB-INF\classes

    From the context menu on the ViewController project, select Project Properties. Select the Project Source Paths node. At the bottom of the page you can set the Output Directory.

    So for my example, change Output Directory to

    C:\Users\YourUserAccount\AppData\Roaming\JDeveloper\system12.1.3.0.41.140521.1008\o.j2ee\drs\TestAltaUI\ViewControllerWebApp.war\WEB-INF\classes

    Then just compile the application and reload the browser.

    This saves a lot of time!


  • Alexandru Friday, November 21, 2014

    Hi Shay

    Where can we find sample source code for Alta UI applications ?

    I see the design explained here

    http://www.oracle.com/webfolder/ux/middleware/alta/patterns/PageDesign.html


  • Arj Thursday, March 12, 2015

    Hi Shay

    I very much enjoyed your tutorial on understanding the basics of Alta UI development, I was wondering if you could elaborate on a section I found on the UI Patterns site about simulated Tree navigation using lists (http://www.oracle.com/webfolder/ux/middleware/alta/patterns/PrimaryNavigation.html). Is there any possibility of you pointing me in the direction of an example application demonstrating this functionality?

    Many thanks!


  • Shay Friday, March 13, 2015

    Arj - this should get you started with the tree navigation pattern:

    https://blogs.oracle.com/shay/entry/implementing_the_tree_navigation_oracle


  • guest Thursday, March 26, 2015

    Image is not viewing in tabletfirsttemplate on running the page.What will be the reason.Please Help


  • Shay Thursday, March 26, 2015

    guest - use the browser's inspect functionality to see what src is assigned to the image in the produced HTML and make sure it is indeed the correct one.


  • NL Friday, April 17, 2015

    Where can I find the database schema (I think it's HR) to have some sample data to work with?

    PS: I plan to use MySql engine.


  • Shay Friday, April 17, 2015

    NL - the HR schema comes with the standard Oracle database (even Oracle XE).

    If you are planning to use MySQL - try out this script file I created https://blogs.oracle.com/shay/resource/HR-MySQL-Script.txt


  • Fede Wednesday, June 24, 2015

    Hi Shay,

    I tried to followed you example with my own application. I activated the selection listener from the list component on the Start facet (Departments) but it only affects Panel 1 (which shares the same Dept view with the list in the Start Facet) but not the Panels that show the children values (Employees) of Panel 1. As a result my other panels showing employees keep showing all the values and not just those depending on the current master record (Department), selected and active in Panel 1.

    Is this a faulty design of my AdfBC (Master/detail is working in my Applications Module, though) or something I'm missing at the View controller level that's not affecting the children panel boxes?.

    Thanks,

    Fede.


  • Shay Wednesday, June 24, 2015

    Fede, It would be hard to say without looking at your full project. Try defining the partialTrigger of the boxes that don't refresh to point to the list and see if this changes something. If not, it might be that your model is not correct or that you dragged the wrong viewObject onto your page.


  • Fede Sunday, June 28, 2015

    Hi Shay,

    Thanks for your reply. I actually dragged the wrong VO to populate the Panel Boxes. Now everything works fine except for the panel box that contains the chart. I need to refresh the page in order to get the chart updated. It won't change when I click on a different item in the list. After refreshing the page the chart is refreshed properly.

    How can I do to get the chart refreshed after clicking on any element of the list on the Start Facet?

    Thanks.

    Fede.


  • guest Friday, September 11, 2015

    Hi Shay,

    Thank you very much for the nice demo.

    I was wondering if there is anyway to change the Oracle logo in the template.

    Thanks,

    Panos


  • Shay Friday, September 11, 2015

    Panos - you can change the logo - it is one of the parameters of the template - logoImagePath - click the af:pageTemplate in the structure pane and use the properties editor.


  • Kim Gabrielsen Friday, December 18, 2015

    Hi Shay,

    another good demo. But i wonder why Oracle doesn't release more sample code to show Alta layouts.

    When i consult the Alta web site i see a lot of nice designs and layouts. But when i try to do it myself i end up tearing my hair out.

    Are there any plans to do more samples like the workbetter app?

    Kim


  • guest Thursday, February 18, 2016

    Hi Shay,

    We are creating application using ADF Alta UI. We are using ALta UI for responsiveness in page.I am using 12.1.3 jdeveloper. I have found some blog but all conflict with each other. I have few query:-

    1. Do we need CSS3 media query when using Alta UI for responsive web design or Alta is capable of making page responsive without media query(which i think not)?

    2. In demo code I have found two js file 'WBMediaQuery.js' & 'WBMediaQuery.js'. It is for demo only but do we need to add js file in our app(I am not clear about this two file)?

    Demo code link : Downloaded Demo Link

    3. Is it compulsory to use ADF CSS selector only or we can use normal CSS selector also? Can we fully ignore ADF selector write our own classes in skin (I think it is not good idea)?

    4. If we write media query then best practice is to write in skin CSS or in template?

    Any help or information regarding ADF Alta UI for frontend will really helpful.

    Thanks for reading. Please free to contact me if anyone interested in giving me some guidance or best practices.

    Regards,

    Mukesh


  • Shay Shmeltzer Thursday, February 18, 2016

    Mukesh,

    There is no such thing as automatic responsiveness - Oracle can't know how you

    would want your page to behave when the screen size changes and what changes

    you would want us to do. Each form is different in that sense - and what we do

    is give you the power to control the behavior you want to happen.

    With ADF 12.2.1 there are two new components that make building responsive

    layouts much easier see:

    https://blogs.oracle.com/shay/entry/responsive_ui_in_oracle_adf

    https://blogs.oracle.com/shay/entry/introducing_the_masonry_layout_in

    2. Depends on whether you want to use the specific things in those js files.

    3. You should still be using ADF CSS selectors if you want to change the look

    and feel of ADF components - Alta doesn't change this.

    4. This depends on whether the behavior you need is the same across multiple

    pages - if it is use the af:matchmediabehavior in the template. For specific

    page behavior use it in the page itself.


  • Mukesh Wednesday, March 2, 2016

    Thnx Shay,

    1. I will use purely CSS3 media query to make page responsive.Is this approach is right? Or do I need to use af:matchmediabehavior also? I am planning to use only CSS3 media query by defining own classes for responsive.

    2. I will add some 'Div' element in page wherever required apart from ADF component is it right to do?

    3. Does masonry layout have predefined classes like Oracle JET have?

    Thanks for reading.

    Regards,

    Mukesh


  • Shay Shmeltzer Thursday, March 3, 2016

    Mukesh,

    1 - you should be using the af:matchMediaBehavior to control ADF Faces rendering based on media queries. This will make sure you are not breaking the ADF control of the page.

    2 - not sure what you need it for.

    3 - there are styles that control the size of the tiles in the masonry layout see - https://blogs.oracle.com/data-visualizations/entry/customizing_tile_size_in_masonry


  • guest Monday, July 18, 2016

    I fully agree with @ Kim Gabrielsen arguments. The work better demo simply is not enough. Oracle give us a reference WHAT we should to do, but HOW to achieve all those layouts & look & feels - well, this remains mystery. This will discouraged a lot of developers


  • guest Friday, November 25, 2016

    hi shay,

    can i remove the page space in the buttom


  • lovy chauhan Tuesday, February 14, 2017

    Hi Shay,

    First of all thank you for such wonderful Post,but i have some issues regarding jdevloper

    Previously i used to work on Windows platform and jdevloper 12.2.1 works fine there but recently i shifted to Mac OS and i tried installing the jdevloper 12.2.1(Generic version),It was installed correctly but when i open any page whether it is JSPX or JSP it fails to render the design page & my system goes in dead state every time . Please help


  • taylor Thursday, November 9, 2017
    Great post, are there any examples of customers using alta in public facing sites / implementations ? WC Portals, etc. Thanks,
  • Shay Monday, November 13, 2017
    Taylor, we are not tracking all our users usage of Alta, but some examples I saw are the Oracle RDK - http://www.oracle.com/webfolder/ux/applications/successStories/oracleApplicationsCloudRelease8.html
    the UI for flexdeploy - http://flexagon.com/flexdeploy/
    The UI for CHB - http://www.redsamuraiconsulting.com/jet.html
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.