The Oracle Alta UI is an all new UI system introduced from ADF 12.1.3. It's a big step for Oracle to embrace the modern UI design for mobile and browser applications. You can find more information by following links in the resources section below.
The Oracle Alta UI is meant for new development and is an opt-in. By default, the Skyros skin is still applied to the new fusion web application.
To use the Alta UI skin, simply change the <skin-family> value from skyros to alta in the trinidad-config.xml file of your fusion web application:
<?xml version="1.0" encoding="UTF-8"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>alta</skin-family>
<skin-version>v1</skin-version>
</trinidad-config>
You probably want to customize the Alta UI skin for your application. To create a customized ADF skin in JDeveloper, you can right-click your view controller project in the Applications window, choose New, select From Gallery... to bring out the New Gallery dialog. In the Web Tier category, select JSF/Facelets and then ADF Skin:
In the Skin File page of the Create ADF Skin dialog, fill up the information for your new skin.
In the Base Skin page, you need choose one of the ADF skins that Oracle ADF provides. In the current version of Developer 12.3.1, the Alta UI skin is not available in the list yet. Simply accept the recommended one (skyros-v1.desktop). JDeveloper will help us to create and modify the associated configuration files, then we will fix it.
In the trinidad-skins.xml file, you can find the metadata for the skin that you create. It shows that your skin extends from the ADF skin of Skyros family.
To make your skin to extend from the Alta UI skin instead, manually change the <extends> value from the skyros-v1.desktop to alta-v1.desktop as illustrated below:
<?xml version="1.0" encoding="UTF-8"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>myskin.desktop</id>
<family>myskin</family>
<extends>alta-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/myskin/myskin.css</style-sheet-name>
<bundle-name>org.javaplus.adfsamples.view.skinBundle</bundle-name>
</skin>
</skins>
Now, you have your customized skin extended from the Alta UI skin.
Chinese Summary:
如何启用在 ADF 12.1.3 中发布的新的 Oracle Alta UI 皮肤，以及如何基于 Alta UI 皮肤扩展自己的皮肤。
Environment:
The Oracle Alta UI is meant for new development and is an opt-in. By default, the Skyros skin is still applied to the new fusion web application.
To use the Alta UI skin, simply change the <skin-family> value from skyros to alta in the trinidad-config.xml file of your fusion web application:
<?xml version="1.0" encoding="UTF-8"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>alta</skin-family>
<skin-version>v1</skin-version>
</trinidad-config>
You probably want to customize the Alta UI skin for your application. To create a customized ADF skin in JDeveloper, you can right-click your view controller project in the Applications window, choose New, select From Gallery... to bring out the New Gallery dialog. In the Web Tier category, select JSF/Facelets and then ADF Skin:
In the Skin File page of the Create ADF Skin dialog, fill up the information for your new skin.
In the Base Skin page, you need choose one of the ADF skins that Oracle ADF provides. In the current version of Developer 12.3.1, the Alta UI skin is not available in the list yet. Simply accept the recommended one (skyros-v1.desktop). JDeveloper will help us to create and modify the associated configuration files, then we will fix it.
In the trinidad-skins.xml file, you can find the metadata for the skin that you create. It shows that your skin extends from the ADF skin of Skyros family.
To make your skin to extend from the Alta UI skin instead, manually change the <extends> value from the skyros-v1.desktop to alta-v1.desktop as illustrated below:
<?xml version="1.0" encoding="UTF-8"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>myskin.desktop</id>
<family>myskin</family>
<extends>alta-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/myskin/myskin.css</style-sheet-name>
<bundle-name>org.javaplus.adfsamples.view.skinBundle</bundle-name>
</skin>
</skins>
Now, you have your customized skin extended from the Alta UI skin.
Chinese Summary:
如何启用在 ADF 12.1.3 中发布的新的 Oracle Alta UI 皮肤，以及如何基于 Alta UI 皮肤扩展自己的皮肤。
Environment:
- JDeveloper Version 12.1.3.0.0 (Build JDEVADF_12.1.3.0.0_GENERIC_140521.1008.S)
- Mac OS X Version 10.9.5
- Oracle Alta UI
- Oracle Alta UI Patterns
- Using the Oracle Alta UI Skin for New Development
- Oracle Announces Alta UI
- Oracle Work Better Alta Demo Application
- How to Create an ADF Skin in JDeveloper
Sample Application:
Hi,
ReplyDeleteAfter reading your post I tried this new UI skin, but there are some difficulties (maybe they are common, but connected with Skins).
For example, my button consists only of icon, button`s container is adf toolbar. With previous skin button icon has been displayed with initial size, but with new it`s resized (initial size 32x32, but skin sets 16x16). I know how to fix it with inlineStyle using button image as a background, but I need to fix it using adf buttons properties "icon" and "disabledIcon". Is there any method to resize button icon using ADF CSS?
For the Alta UI skin, images of icon only buttons in a toolbar are fixed size as defined below:
Delete/* alta-v1-desktop.css (5577) */
af|toolbar af|commandToolbarButton::image,
af|toolbar af|button::image,
af|toolbar af|button:leading af|commandToolbarButton::image,
af|toolbar af|button:leading af|button::image,
af|toolbar af|button:trailing af|commandToolbarButton::image,
af|toolbar af|button:trailing af|button::image {
padding: 5px;
width: 16px;
height: 16px;
}
To change the size, simply override it in your skin CSS:
af|toolbar af|commandToolbarButton::image,
af|toolbar af|button::image,
af|toolbar af|button:leading af|commandToolbarButton::image,
af|toolbar af|button:leading af|button::image,
af|toolbar af|button:trailing af|commandToolbarButton::image,
af|toolbar af|button:trailing af|button::image {
padding: 5px;
width: 32px;
height: 32px;
}
More typically, if you don't want to apply it globally, you can define a style class:
.MYToolbar af|commandToolbarButton::image,
.MYToolbar af|button::image,
.MYToolbar af|button:leading af|commandToolbarButton::image,
.MYToolbar af|button:leading af|button::image,
.MYToolbar af|button:trailing af|commandToolbarButton::image,
.MYToolbar af|button:trailing af|button::image {
padding: 5px;
width: 32px;
height: 32px;
}
Then, apply the style class to the toolbar:
Hi,
ReplyDeleteI am using JDev 11.1.1.9.0
Is it possible to use alta ??