Genie Skin Lab
Task
Copy an existing skin and familiarize yourself with the files involved. Implement simple CSS styling changes. Write custom JavaScript to manipulate screen elements.
Concepts
This lab is designed to introduce basic Genie skin concepts:
· Editing Genie skin files
· Finding CSS classes using the browser’s developer tools
· Add JavaScript code to transform an output field into an image
Initial Setup
1. Find the shortcut on the desktop of your lab machine to open the Profound UI Welcome Page and double click.
2. If asked to log in, use the sign on credentials provided to you by the Lab instructor.
3. Once logged in, you will see the Welcome Screen of Profound UI.
4. Select “Start Genie Administrator” from the center section.
5. Select the “Hybrid Skin” from the accordion panel on the right.
6. Once selected, click the “Copy Skin” button in the top toolbar.
7. When prompted, give your Genie Skin a unique name.
8. Now select your skin from the accordion panel.
9. Launch your new skin using the “Launch” button at the top left of the Genie Administrator page.
You now have a Genie Skin to experiment with during this lab.
10. Log in using the same credentials as used before.
Procedure
1. You should be at the IBM i main menu.
2. Let’s assume we would like to change the blue headings of our Genie skin. The styling is controlled by CSS, but how do we know what CSS is being applied and what file it comes from? Right click on the upper blue portion of the heading in the center. Depending on the browser, there will be an option to “Inspect” or “Inspect Element”. Choose this option.
3. You should now see the browser’s development tools. The screenshot above is from the Microsoft Edge browser, but others will be similar. You will notice that the div element for the heading is highlighted in the “DOM Explorer” panel and to the right is a list of all styles being applied to this div.
4. Notice that under “.hybrid-heading1” there is a background-image attribute set to point to background.gif. Let’s get rid of this background image in favor of a flatter style. To preview what this would look like, simply uncheck the box next to background-image.
5. We can see in the developer tools that the .hybrid-heading1 CSS class is defined in the profoundui.css file. This is the Profound UI suites default CSS file. You should never modify this file. Instead, we will override this class in our Genie Skin’s CSS file.
6. Switch back to the browser tab where the Genie Administrator console is open. Under the skin you created you will find an option to “Edit yourskinname.css”. Select it.
7. Now add the following CSS to the top of the file:
.hybrid-heading1 {
background-image: none;
}
8. Now press the “Save File” button in Genie Administrator. Return to the browser tab where Genie is running and press “Refresh” on the Genie “Design Toolbar”. DO NOT PRESS THE BROWSER REFRESH BUTTON.
9. You should now see the change to the heading. You will also see your CSS rule listed in the styles panel if you inspect the heading area again.
10. Let’s repeat the process for the second blue bar. Right click and inspect it to find the class name. Let’s change this bar to orange. We will need to remove the background image and add a background color. We can do this by adding the following code to the Genie skin CSS file.
.hybrid-heading2{
background-image: none;
background-color: orange;
}
11. Save the file and refresh your Genie page. You should now see this:
12. Now let’s add some customization to an application using JavaScript. Here is our goal. We want to eliminate any program names, dates, times, etc. from the top right and left hand corners of our application. We know that these elements are always on the first two rows and are positioned either before column 5 or after column 60. So how do we programmatically identify these fields and hide them?
13. From the command line, add the PLUSLABS library to your library list and CALL PRODMNTR.
14. Notice the “PRODCTL” in the left-hand corner and the time on the right. Let’s get rid of those.
15. Go to the Genie Administrator, find your skin on the left side and choose “Edit custom.js”.
16. There is a lot of code already in custom.js that was copied from the Hybrid skin. For now, let’s just add the needed code to our customize() function. This is the most common place to add code. Add the following code just before the closing curly brace of the customize() function:
var fields = getOutputFields();
for (var i=0; i < fields.length; i++) {
if (fields[i].id.substr(0,4) == "D_1_" || fields[i].id.substr(0,4) == "D_2_") {
if (fields[i].id.substr(4) < 5 || fields[i].id.substr(4) > 60) {
fields[i].style.visibility = "hidden";
}
}
}
The placement of the code should look like this:
This code starts by retrieving the list of all output fields using the getOutputFields() API and stores them in an array called “fields”. The code then loops through the list of output fields and examines the id of each field. Since Genie puts the row and column numbers in the automatically generated id of each field, we can simply use substrings to check for fields on the first two rows and in the first five or last 20 columns.
17. Now refresh your Genie session using the button in the Design Toolbar.
18. Press the F3 key to exit the program and you will see that the menu name and system name are also removed from the IBM i main menu.
19. Before leaving the lab, please go to the Genie Administrator, select the “Configuration” option under your Genie skin, and then press “Delete Skin” in the toolbar to remove your skin from our system.
Conclusion
That’s it! You’ve now customized a Genie skin. Obviously, we have only scratched the surface of what is possible with Genie skins, but this exercise should have made you familiar with the files and languages involved in customizing a skin.
6 | PLUS 2016 Genie Skin Lab