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