Creating an Application Layout with CSS/HTML Provided by a Designer
I recently started working on an XPages application for which the UI had already been designed by a visual designer. In this post, I’ll cover the steps I took to implement the provided design within the application.
I must admit, it was a pleasant surprise to discover that sample pages had already been created to define the UI of the application; the visual designer sent me a list of HTML files, images, and style sheets. In my experience, this has not been the norm, so I took a few minutes to think through how to make the best use of those files as efficiently as possible.
I was involved in a project awhile back where a UI was mocked up and CSS was provided, but it was left to the developers to get the XPages application looking just right. It can be a challenge to try to make sense of the massive style sheets that are generated by some UI design tools (which seem to add many levels of div tags to get everything just so). Fortunately, in this case, I was given not only CSS but also sample pages.
In short, my goal was (a) to get the static page and styles working in an XPages application, (b) to modularize the layout, and (c) make it dynamic one piece at a time.
Here is the approach that I took:
A. Implement Static HTML in XPages
- Import CSS and images into the application
- Account for everything included in the <head> section; create a Theme that includes the CSS in the application (and set the application to use the theme)
- Copy the HTML from a static page into a custom control called ccLayout
- Create an XPage that contains ccLayout
- Clean up the HTML in ccLayout as needed (adding closing tags where missing, etc)
- Test the page and fix CSS references as needed (many image references are looking for subfolders, but those directory paths can be modified once image resources are in the app)
At this point the goal is to have the XPage looking exactly like the sample page. Once you’ve achieved that, you’re ready to modularize it.
B. Modularize the Layout
- Break up the static html into logical chunks and move the chunks to separate custom controls for each component of the layout. Some examples:
- Title bar
- Top navigation
- Search bar
- Side navigation
- Replace those chunks of HTML with references to the layout component controls in the correct areas within the main layout control
- Move the main content HTML out to a separate control
- Put an Editable Area control in place of the main content area.
- The main content will change from page to page, so the editable area lets you keep the same general layout, but put different content in the layout on each page, all while reusing a single layout custom control
- If multiple areas of the layout change from page to page, then use more editable areas
Now, you have an application layout control and separate controls for components reused throughout the layout. You can now reuse the layout easily throughout the application.
Ultimately, this UI is not based on OneUI or Bootstrap or any other framework. It’s a fully-customized design. Some of the concepts that Paul Della-Nebbia and I covered at our MWLUG session and TLCC webinar on creating custom layouts are foundational to this approach of creating a custom application layout.
C. Make the Application Dynamic
- Go back through the layout controls and build in live links, etc as needed
- Build the content custom controls (forms, views, etc)
Now, for each form or view that you need to display, all you have to do is create an XPage, add the ccLayout control, and then drop in the form or view custom control into the editable area and you’ll have a consistent UI throughout the application.
It doesn’t seem very complicated looking back at the list of steps, but it was a good exercise to go through.
I’m curious — have you ever been provided a working static UI for a web application? If so, how did you go about using it?