Search
  • Daniel Díaz

ADF integration with Google Icons.


These blog is meant to ADF developers which have at least basic knowledge of the framework, for example on how to integrate the css through the resource component or through "trinidad-skins.xml / trinidad-config.xml" files.

We are going to see how to get the next interface.

Now on days is vital to any modern front-end development framework to integrate with the new tendencies of development, one of them constantly asked by clients is the google icons.

In this tutorial it will be done in a ADF template because it is used to have the icons in all the JSF pages that are implemented with that template.

Here are the steps:

1. In the template or page add a html link reference that aim to the Google Icons CSS presented in the cloud.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

Note: If you do not know how to create a template go to: http://www.catgovind.com/adf/create-adf-template-example/

2. It is time to go the google icons link: https://material.io/tools/icons/ and look for the icon that you want to display. For example, the “Home” image I want to use the following icon as describe in the image below:

Once you find your image you have to copy exactly the same name of the image that you see in the image. In this case it would be “home”, (It is capital sensitive).

Then this google icon name is the one that you are going to use as value in the “text” attribute in the af:link. In addition to render the icon you have to use the value "material-icons” in the styleClass attribute as show below:

<af:link id="of21" text="home" styleClass="material-icons”/>

3. Later the icon look and feel can be checked out in the preview view as you can see in the google taskbar so you you wrap up the link component in a panelGroupLayout component with the attribute layout value as “vertical”.

<af:panelGroupLayout id="pglBotonesNavegacionHome" styleClass="pglBotonesMenuNavegacionCabeceras botonMenu" shortDesc="Daniel Diaz" layout="vertical">

<af:link id="of21" text="home" styleClass="material-icons botonMenu" actionListener="#{MbTemplate.irAInicio}"/>

<af:outputText id="ot_ini" value="Inicio" styleClass="textosBotonesNavegacion"/>

</af:panelGroupLayout>

Now there is the output element that is added below the link to describe the image and all the css classes needed to have the required style.

Below we can see how the taskbar is shown in a responsive layout in the preview view.

It can be notice how the responsive design works.

In this way with google icon implementations it can be done great and flexibles interface designs.

The best of this implementation is the maintainability of the icons font, because to change the color or size of the icon the only that have to be done is a change on the css file on the CSS class of the font-icon as follow.

Once it is located the icon and the css class that give the style to it. The changes in the class need to be done to look at how it display.

Here is the CSS class and the attributevalue that will be changed in this case are "color" and "font-size".

The changes here are in the color attribute setting it to blue and the font-size setting it to 40 px. This in effect will make the icon bigger and blue.

Here is how the effect on the class can be notice on all the icons that go to that class.

It is worthy to mention that one of the common worry in this implementation is that is googled change the link "https://fonts.googleapis.com/icon?family=Material+Icons" but it has stayed the same for years. In case that happens the link can be gotten from database attribute so in case it changes the url it can be change in the database parameter, then reloading the app there will be no problem.

This solution was implemented one year and a half ago and it has been quite steady in a production environment. "No hair pulling, no problems at long term". Best of all the app look quite nice and moderm.

Note: To make this solution works the first time the browser must have internet connection “Indispensable now on days” then the goggle icons get store in the cache memory.

The project can be downloaded in the next link:

https://drive.google.com/open?id=1hbYEAQ7IpK6YFDqISb9iv3_peQhw651M

PD: I will upload most interesting posts pretty soon.

#googleicons #fonticonsadf #cssstyleadf #iconsadf #adficon #OracleADFfonticons #googleiconsintegrationADF

298 views

©2018 by ITEvol7777.