Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Card Flip Effect with Oracle Alta UI

DZone's Guide to

Card Flip Effect with Oracle Alta UI

· Java Zone
Free Resource

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

The Oracle Alta UI focuses on reducing clutter 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

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Shay Shmeltzer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}