Branding NBIA Classic
The NBIA Classic application is currently in production, primarily to provide administrative tools. The NBIA Client is the new search interface for NBIA and is also in production.
To brand the NBIA Classic application, the developer will need to download the code from GitHub https://github.com/CBIIT/national-biomedical-image-archive and build the application using the ant target build
:all. You will need to have the following required software:
Required Software Name and Version | Description |
---|---|
Java SE Development Kit 8 | The J2SE Development Kit (JDK) supports creating J2SE applications. |
Apache Ant 1.8.4 | Apache Ant is a Java-based build tool. |
Branding in NBIA is accomplished by editing and or replacing the objects in the branding folders found in /software/common/resources/branding. The nbia folder contained within is the default branding for NBIA. The subfolder called images contains the customizable images for the application; they include:
Name | Dimensions |
---|---|
FNLfCR-LOGO.png | 200 x 39 |
footer_usagov.gif | 127 x 31 |
Logo-NCIA.jpg | 500 x 53 |
nci-header.png | 300 x 38 |
nci-link.png | 300 x 38 |
NCI-logo-white.png | 54 x 32 |
NCICBLOGO.gif | 126 x 43 |
white-ncilogo.gif | 263 x 39 |
white-nciurl.gif | 99 x 39 |
white-nihtext.gif | 208 x 39 |
To use your own images, simply replace the image while keeping the same name as the original one in your new folder; the build will update it accordingly. At the base level of the folder are the XHTML/properties files that allow customization. Those files are listed in the following table.
Name | Purpose |
---|---|
appFooter.xhtml | The footer of the application |
appHeader.xhtml | The header of the application |
branding.properties | Contains the application name property |
ccHeader.xhtml | Legacy file for cancer center logos, to be removed |
footer.xhtml | Legacy file for footers, to me removed |
legalRules.xhtml | Legal rules when signing up |
mainLayout.xhtml | Layout with session timer |
mainLayoutTemplate.xhtml | Overall layout of the application |
mainLayoutWithoutSessionTimeout.xhtml | Layout without session timer |
mainMenu.xhtml | Top menu bar |
ncia_messages.properties | Various messages used in the application |
nciHeader.xhtml | Application header |
quickLinks.xhtml | External links |
sessionExpired.jsp | Page shown when session expires |
siteMap.xhtml | Site map at bottom of page |
slideshow.css | CSS for the slideshow page |
styleSheet.css | Main CSS for the application |
subMenu.xhtml | Sub menus in the menu bar |
welcome.xhtml | Main login page |
welcomeText.xhtml | Legacy welcome page, to be removed |
Building a Branded Version
To create and build a branded version copy the example nbia folder to a new folder. As an example, assume the copied folder is "ncia" and you plan to make a version named "NCIA". Copy and name the folder and edit accordingly. Note the ncia_messages.properties contains much of the applications textual information and branding.properties contains the application names. Once you have edited the files, edit the install.properties and the defaultAHP3.properties files in the /software/build directory. Specify the branding properties. An example for naming an application "NCIA" follows.
############################################## ### New Branding Properties ### ############################################## branding.appname=NCIA branding.folder=ncia
Once that is complete, execute the build:all ant target and the new war files in the directory (nbia-source-directory)/software/target/dist/exploded/nbia-wars/ will be properly branded. Replace the war files in tomcat\webapps with the branded ones, delete the nbia-api, ncia, and nbia-download and restart tomcat.
For the JNLP Download Manager to work correctly, a Java signing certificate must be used to sign the jar files used by Download Manager. If you do not have a signing certificate you can pull the following jar files from the NBIA install files ncia.war: ncia.war\NBIADownloadManager.jar and the folder ncia.war\download-mgr-dependencies and replace the files in your generated ncia.war.
XHTML/Facelets Basics
For all of the XHTML files that can be specified through the branding process, they MUST start with:
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets">
and they MUST finish up with:
</ui:composition>
Within the composition, almost any XHTML can be specified.
Entities
The one exception to watch out for are entities such as non-breaking spaces. Including these directly will cause the rendering of the page to fail, and users will see a big mess in their browser. In other words will break rendering. Instead, the entity must be enclosed in a "verbatim" tag. Please note that another namespace is defined in the composition tag (in red below).
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"> <f:verbatim>&nbsp;</f:verbatim> </ui:composition>
Quick Links XHTML
The Quick Links XHTML is imported into the scope of an XHTML table. Any XHTML specified here should be wrapped in a <tr> and at least one <td> element.
For an example see: https://github.com/CBIIT/national-biomedical-image-archive/blob/master/software/common/resources/branding/niams/quickLinks.xhtml
Other XHTML
There are no restrictions on XHTML for the welcome title/text or the footer.
Branding the NBIA Client
The NBIA Client is the new search interface for NBIA. Both the NBIA Client and the NBIA Classic interfaces are currently in production.
Branding files for the NBIA Client are in directories within the assets/brand directory. Each subdirectory represents one brand. Which brand directory to be used is determined by the content of the text file assets/brand/currentBrand, it should contain the name of a directory within assets/brand.
If there is no assets/brand/currentBrand file, or its contents don't point to a valid directory, the default brand "nbia" will be used.
If there are any files missing from the brand directory named in assets/brand/currentBrand, the file from the default directory will be used.
If you only want to change one aspect of a brand, only include that file. The default directory versions will be used for the others.
You can brand the following files.
Name | Purpose |
---|---|
logo.png | A logo (41 pixels high) |
footer.html | A snippet of HTML that is at the bottom. If included, %VERSION% will be replaced with the client version number (versionSuffix.txt, below), and %HOST_NAME% will be replaced with the server name. |
newAccountUrl.txt | URL for "New account" button on the login screen |
accountHelpUrl.txt | URL for "Account help" button on the login screen |
downloaderUrl.txt | URL for "Get Data Retriever" button in the Download popup |
versionSuffix.txt | An optional string that will be appended to the version number, if the version number is included in the footer. |
customMenu.json | This is the top horizontal menu. Look at the default (nbia) for an example. |
The customMenu.json is an array, with each top-level object representing one top-level menu item, as follows.
Name | Purpose |
---|---|
"entryTitle" | The text of the top level menu item |
"menuData" | "target" within "menuData" is the URL of the top-level menu item if you don't use a dropdown menu for this top-level item |
"menuDataDropdown"
| an array of dropdown menu items:
|
Example of Branded Properties
[ { "entryTitle": "Home", "menuData": { "target": "https://www.cancerimagingarchive.net" } }, { "entryTitle": "News", "menuData": { "target": "https://www.cancerimagingarchive.net/news/" } }, { "entryTitle": "About Us", "menuDataDropdown": [ { "menuText": "About The Cancer Imaging Archive (TCIA)", "target": "https://www.cancerimagingarchive.net/about-the-cancer-imaging-archive-tcia" }, { "menuText": "About the Cancer Imaging Program (CIP)", "target": "https://www.cancerimagingarchive.net/about-the-cancer-imaging-program-cip/" }, { "menuText": "About the University of Arkansas for Medical Sciences (UAMS)", "target": "https://www.cancerimagingarchive.net/about-the-university-of-arkansas-for-medical-sciences-uams/" } ] }, ...