Alta UI Responsive Design - ADF 12c

In this tutorial I'll explain in high level design how to apply the Alta Ui template with responsive navigation menu.

The final result it's something like this:

Narrow Layout:

Wide Layout:

The tutorial:

add "Oracle page Templates" jar in your libraries and classpath UI project. you can find in libraries of Jdeveloper:


In your welcome JSF page add this code:

As you can see in this JSF code, we have two different panelgroupayout at the navigation menu:

The first one is to desktop browsers:

The second one is to tablets/smartphones browsers:

And to this work, do you need to add this CSS in your adf skin:

 

.wide {
    display: inline;
}

.narrow {
    display: none;
}
@media screen and (max-width:950px) {
    .narrow {
        display: inline;
    }
    .wide {
        display: none;
    }
}

That's it!

You can find all features here: https://github.com/jtiagomp/ADF_POCs/tree/master/AltaUIResponsive

Cheers.

1 Tanggapan untuk "Alta UI Responsive Design - ADF 12c"

UnknownMarch 25, 2021 at 10:06 AM
My spouse and I love your blog and find almost all of your posts to be just what I’m looking for. Appreciating the persistence you put into your blog and the detailed information you provide. I found another one blog like you Oracle ADF.Actually I was looking for the same information on internet for Oracle Application Development Framework and came across your blog. I am impressed by the information that you have on this blog. Thanks once more for all the details.

Alta UI Responsive Design - ADF 12c

Related Posts:

1 Tanggapan untuk "Alta UI Responsive Design - ADF 12c"