NIH | National Cancer Institute | NCI Wiki  

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
titleContents of this page

Table of Contents

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 applicationIn order to brand NBIA, 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

Multiexcerpt include
MultiExcerptNameExitDisclaimer
nopaneltrue
PageWithExcerptwikicontent:Exit Disclaimer to Include

Be sure to download the correct Java SDK for your operating environment. For example, for Linux AMD 64, you would download jdk-8u101-linux-x64.tar.gz and for Windows, jdk-8u101-windows-x64.exe. You must also factor in if the system is 32 or 64-bit. A 32-bit system cannot install 64-bit software. It is recommended that you install 32-bit Java SDK in a Windows environment even if your system is 64-bit because generating CTP thumbnail image only works properly with the 32-bit JDK in Windows.   

The J2SE Development Kit (JDK) supports creating J2SE applications.

Apache Ant 1.8.4
http://archive.apache.org/dist/ant/binaries/

Multiexcerpt include
MultiExcerptNameExitDisclaimer
nopaneltrue
PageWithExcerptwikicontent:Exit Disclaimer to Include

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 sub folder subfolder called images contains the customizable images for the application, ; they include:

NameDimensions
FNLfCR-LOGO.png 200 x 39
footer_usagov.gif127 x 31
Logo-NCIA.jpg500 x  53
nci-header.png300 x 38
nci-link.png300 x 38
NCI-logo-white.png54 x 32
NCICBLOGO.gif126 x 43
white-ncilogo.gif263 x 39
white-nciurl.gif99 x 39
white-nihtext.gif208 x 39

To use your own images, simply replace the image while keeping the same name as the original one in your new folder, and ; 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.

NamePurpose
appFooter.xhtmlThe footer of the application
appHeader.xhtmlThe header of the application
branding.propertiesContains the application name property
ccHeader.xhtmlLegacy file for cancer center logos, to be removed
footer.xhtmlLegacy file for footers, to me removed
legalRules.xhtmlLegal rules when signing up
mainLayout.xhtmlLayout with session timer
mainLayoutTemplate.xhtmlOverall layout of the application
mainLayoutWithoutSessionTimeout.xhtmlLayout without session timer
mainMenu.xhtmlTop menu bar
ncia_messages.propertiesVarious messages used in the application
nciHeader.xhtmlApplication header
quickLinks.xhtmlExternal links
sessionExpired.jspPage shown when session expires
siteMap.xhtmlSite map at bottom of page
slideshow.cssCSS for the slideshow page
styleSheet.cssMain CSS for the application
subMenu.xhtmlSub menus in the menu bar
welcome.xhtmlMain login page
welcomeText.xhtmlLegacy 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 edit install.properties and the defaultAHP3.properties files in the /software/build directory. Specifically Specify the branding properties need to be specified, here is an . An example for naming an application "NCIA" follows.

Code Block
##############################################
### New Branding Properties ###
##############################################
branding.appname=NCIA
branding.folder=ncia

...

NamePurpose
logo.pngA logo (41 pixels high)
footer.htmlA 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.txtURL for "New account" button on the login screen
accountHelpUrl.txtURL for "Account help" button on the login screen
downloaderUrl.txtURL for "Get Data Retriever" button in the Download popup
versionSuffix.txtAn optional string that will be appended to the version number, if the version number is included in the footer.
customMenu.jsonThis is the top horizontal menu. Look at the default (nbia) for an example.

...

NamePurpose
"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"

  • "menuText"
  • "target"

an array of dropdown menu items:

  • the text for the dropdown menu item
  • the URL for the dropdown menu item

Example of Branded Properties

Code Block
[
    {
        "entryTitle": "Home",
        "menuData": {
            "target": "httphttps://www.cancerimagingarchive.net"
        }
    },
    {
        "entryTitle": "News",
        "menuData": {
            "target": "httphttps://www.cancerimagingarchive.net/news/"
        }
    },
    {
        "entryTitle": "About Us",
        "menuDataDropdown": [
            {
                "menuText": "About The Cancer Imaging Archive (TCIA)",
                "target": "httphttps://www.cancerimagingarchive.net/about-the-cancer-imaging-archive-tcia"
            },
            {
                "menuText": "About the Cancer Imaging Program (CIP)",
                "target": "httphttps://www.cancerimagingarchive.net/about-the-cancer-imaging-program-cip/"
            },
            {
                "menuText": "About the University of Arkansas for Medical Sciences (UAMS)",
                "target": "httphttps://www.cancerimagingarchive.net/about-the-university-of-arkansas-for-medical-sciences-uams/"
            }
        ]
    },
...