FontAwesome integration with JDeveloper 12.2.13 for Icon, hoverIcon, depressedIcon and disabledIcon

Bilal · Sep 18, 2020 6:57AM

Hi All,

Oracle Jdeveloper 12.2.13.

I am finding my way around the FontAwesome integration to see if it can fully be utilised for all icons-related needs in the Oracle ADF application.

Thanks to authors of the blogs shared below where I was able to learn its integration.

I am using the approach mentioned in blog 2 for the FontAwesome library integration which uses the af:script tab, instead of downloading it and copying it in the Skins folder. See the code below:

<af:resource type="css" source="https://use.fontawesome.com/releases/v5.14.0/css/all.css"/>

I have the following code snippet for a button that works fine except when mouse hover the icon disappears. Besides, it is quite difficult to align the icon and button text in the middle:

<af:button id="b3" styleClass="fas fa-toggle-off fa-2x"/>

Surprisingly, when I use FontAwesome classes into icon-specific properties of the ADF button but it is not working. The output shows a small rectangle which means no icon is found during page rendering.

<af:button id="b3" icon="fas fa-toggle-off fa-2x"/>

Is there a way to use FontAwesome icons with Icon, hoverIcon, depressedIcon and disabledIcon properties of the ADF components like button, showDetailItem, etc?

I will greatly appreciate your guidance.

Many Thanks and

Kind Regards,

Bilal

Timo Hahn · Nov 11, 2020 5:08PM

https://community.oracle.com/tech/developers/discussion/comment/16770853#Comment_16770853

Bilal,

I finally found some time to look into this issue. The summary is that I did manage to make some things work. However, af:panelDrawer, I did not :(

The problem is that this component can be skinned only by the drawer itself, but not by each showDetailItem. This means that you can show a FontAwesome icon on each drawer, but they all show the same. The only thing you can change is the URL to an icon to show. The URL can#t be used to show a FontAwesome icon. The only thing you can do is address the drawer directly by specifying the detailed path, but I don't call that a solution as it isn't portable. You have to know the drawers' generated ids and change the skin by specifying them in the skin. This isn't a good idea as you have to do it every time you use it.

In this case, using an icon is easier and better.

You can look at what I did accomplish at

https://blog.virtual7.de/jdeveloper-12-2-1-4-adf-fontawesome-integration/

Timo

Timo Hahn · Sep 20, 2020 7:29AM

Sure there is. In the first link you shared the solution is outlined.

Putting css in the icon property can't work. There you need to specify an icon file, not css as you did.

The best solution would be to copy the FontAwesome css to the right ADF skin seletors.

Timo

dvohra21 · Sep 20, 2020 6:44PM

FontAwesome is a CSS styles library, not actual icon images that could be used in icon attribute.

Bilal · Sep 22, 2020 5:34PM

Hi Timo,

Thanks for the reply.

I configured FontAwesome locally inside Skins folders as suggested in the first approach but still couldn't figure out using Font Icons using the icon properties.

I tried the following CSS definitions:

.TestFontIconButton af|button::link:active {    content: "\f065";    font-family: FontAwesome;      font-size:x-large;}.TestFontIconButton af|button::link:hover{    content: "\f065";    font-family: FontAwesome;      font-size:x-large;}.TestFontIconButton af|button::link:depressed {    content: "\f065";    font-family: FontAwesome;      font-size:x-large;}

Any suggestions on what is wrong with this code?

Any help will be greatly appreciated.

Many Thanks and

Kind Regards,

Bilal

dvohra21 · Sep 22, 2020 11:44PM

As mentioned before, these aren't icons at all; not icon image files. These are just CSS styles, and should be applied as style class, not with icon attribute.

Timo Hahn · Sep 23, 2020 2:42AM

From what I see I can only say that there are some parts missing (which you might have, but did not disclose here). As usual, a full working sample would help here.

Have you tried the exact usage Shay showed in his video?

If this runs you know that the FontAwsome integration is working. The problem then is your skin or your selectors.

Timo

Bilal · Sep 23, 2020 4:16AM

Hey Dvohra,

You are right that font awesome are not icons but what I believe that there will be a workaround to use CSS to populate icon-related propoerties of the ADF components using CSS selector.

Thanks for the suggestions. I appreciate your input.

Many Thanks and

Kind Regards,

Bilal

Bilal · Sep 23, 2020 5:56AM

Hi Timo,

I created a sample ADF application with the necessary resources to experiment with FontAwesome integration. You can download it from https://github.com/bilalcodehub/FontAwesomeIntegrationWS.

I want to apply the font icons on the button icon properties as well as that of the panel drawer's showdetailitem. When you run the application, you will see the following user interface.

Screen Shot 2020-09-23 at 10.45.00.png

The button next to Rollup label is using Font Awesome Icon. It has conditional formatting and can be toggled on and off which looks incredible.

It would be great to see if icons for Show trends button and panelDrawer's showDetailItem can be read from the font awesome.

You are right about the Skin selector. It might be the right selector which I couldn't figure out yet.

Any help will be much appreciated.

Many Thanks and

Kind Regards,

Bilal

Timo Hahn · Sep 24, 2020 2:58AM

OK, the FontAwesome integration in the app works.

I'll need to make some tests if it'S possible to inject the right css to the panelDrawer icon. This will take some time.

Timo

Bilal · Oct 8, 2020 10:45AM

Hey Timo,

You would be quite busy but I am wondering if you get any opportunity of working on the application?

Thanks in advance

Timo Hahn · Oct 8, 2020 12:09PM

Sorry, no. It's still on my list.

I can tell that there isn't an easy solution for the panelTabbed as the tabs only display icons, and FontAwesome is css and not an icon. However, I hope to find a solution but no guarantee.

Timo

Timo Hahn · Nov 11, 2020 5:08PM

https://community.oracle.com/tech/developers/discussion/comment/16770853#Comment_16770853

Bilal,

I finally found some time to look into this issue. The summary is that I did manage to make some things work. However, af:panelDrawer, I did not :(

The problem is that this component can be skinned only by the drawer itself, but not by each showDetailItem. This means that you can show a FontAwesome icon on each drawer, but they all show the same. The only thing you can change is the URL to an icon to show. The URL can#t be used to show a FontAwesome icon. The only thing you can do is address the drawer directly by specifying the detailed path, but I don't call that a solution as it isn't portable. You have to know the drawers' generated ids and change the skin by specifying them in the skin. This isn't a good idea as you have to do it every time you use it.

In this case, using an icon is easier and better.

You can look at what I did accomplish at

https://blog.virtual7.de/jdeveloper-12-2-1-4-adf-fontawesome-integration/

Timo

Bilal · Nov 12, 2020 9:00AM

Hi Timo,

Thanks. This is a lot of nice work.

You demonstrated the use of icons on buttons. Did you try something to change the depressedIcon, hoverIcon and disabledIcon properties for ADF button component? Can these properties be changed using CSS?

Many Thanks and

Kind Regards,

Bilal

dvohra21 · Nov 14, 2020 12:21AM

Predefined style selectors could be used; refer https://docs.oracle.com/middleware/1221/adf/tag-reference-skin-selectors/toc.htm#Component_Group__Button

Timo Hahn · Nov 14, 2020 9:53AM

https://community.oracle.com/tech/developers/discussion/comment/16775248#Comment_16775248

@dvohra21 Do you ever read a question and the already present answers?

If the skin selectors work, how about you tell us how?

dvohra21 · Nov 15, 2020 3:05AM

Haven't tested but the following selectors could be used. Global and component Style selectors are available for hover,depressed,disabled state.

.AFButtonForegroundHover:alias {color:#035D5C;}

.AFButtonForegroundDepressed:alias {color:Purple;}

.AFButtonForegroundDisabled:alias {color:#333333;}

These styles are applied to the button, and not to any icons.

af|button:hover {

foreground-color:Purple;

}

af|button:depressed {

foreground-color:#035D5C;

}

af|button:disabled {

foreground-color:#333333;

}

Timo Hahn · Nov 15, 2020 2:27PM

https://community.oracle.com/tech/developers/discussion/comment/16775288#Comment_16775288

Even after asking you to read the question, you don't :(

The question is about FontAwesone integration not some styles to skin the button itself. If you don't know anything about hte topic, don't answer. Copying something from the doc without detailed description how this should help solving hte problem isn't helpful.

dvohra21 · Nov 15, 2020 4:01PM

By the way the style code snippet isn't copied. I know the question is about FontAwesone integration, but FontAwesone could be mixed with ADF Style selectors.

Timo Hahn · Nov 15, 2020 4:08PM

https://community.oracle.com/tech/developers/discussion/comment/16774974#Comment_16774974

Bilal, adding a FontAwesome icon to the button in normla, hover isn't problematic. You can add this

.abc af|button::link:hover:before {
    content: "\f205";
    font-family: FontAwesome;
    text-align: center;
    font-size: xx-large;
    color: blue;
    vertical-align: middle;
    padding-right: 5px;
}


.abc af|button::link:before {
    content: "\f204";
    font-family: FontAwesome;
    text-align: center;
    font-size: xx-large;
    color: blue;
    vertical-align: middle;
    padding-right: 5px;
}

f

and add the style class 'abc' to a button to get

https://drive.google.com/file/d/12nDOLgDzmMqPvF4REimwXI8HZMrmLH18/view?usp=sharing

However, this doesn't work for the depressed state. I'm not sure why, but from the look at the rendered HTML the hover state and the active state overrule the depressed state.

Timo

Timo Hahn · Nov 15, 2020 4:18PM

https://community.oracle.com/tech/developers/discussion/comment/16775325#Comment_16775325

As long as you don't show us how to ntegrate FontAwesone with the selectors you posted, this answer isn't helpful.

So, where did you get the selectors?

I did not find any property ' foreground-color' at all.

Timo

Bilal · Nov 16, 2020 9:29AM

Hi Timo,

Thanks a lot for the time and support.

Forum Stats

Howdy, Stranger!

Quick Links

Categories

FontAwesome integration with JDeveloper 12.2.13 for Icon, hoverIcon, depressedIcon and disabledIcon

Best Answer

Answers

Data

Databases

Development

Development Tools

Open Source

Programs

Forum Stats

Howdy, Stranger!

Categories

FontAwesome integration with JDeveloper 12.2.13 for Icon, hoverIcon, depressedIcon and disabledIcon

Best Answer

Answers