Putting CA Plex applications on the web with Websydian WebClient i+ is straightforward, in most cases it is literally as simple as adding one triple “myfunction is a ~webshell”. However, without CSS/stylesheets and html formatting, the web page looks as basic as the original CA Plex function – which is often not visually appealing. For example, here is what a simple EditDialog function will look like out of the box:
Fortunately WebClient makes it easy to incorporate CSS and HTML techniques to create a more distinctive look. The look and feel can be incorporated throughout the application by using standard Plex inheritance. The rest of this post shows you the steps so you can do this yourself. The steps are applied against the example model supplied with WebClient.
First download this zip containing HTML and CSS. CSSTemplates.zip You will use these files in the exercise.
Steps
- Create a standard webshell function
Most Plex developers are familiar with this concept. Enter two triples like the screen print below.
2. Inherit from the new function
3. Create a web template file
Switch over to Eclipse/Rational and insert a new template into your project. For simplicity we will add directly to the WebClient template folder, but typically you will add this to a new project folder with your WebClient customizations. To add the new template, copy the StandardShell-page.wcli file into this folder. This template is very simple – it references a style sheet, and incorporates a logo and a banner.
4. Copy the supplied CSS files and Image files
Copy the supplied CSS files into a new folder in your web project. CSS supplies the look and feel of the web pages. Virtually all elements of the page are under style sheet control – including grids, buttons, fields, etc. You can dramatically change the look and feel of the page through some simple HTML – if you know what to do. CSS is beyond the scope of this blog, but there is a wealth of information out there on what can be done. Also copy the image files into the images folder.
5. Gen and build, and view results
Quite a dramatic result for very little work! For extra credit, change the logo in the template, and the background color. You can change the logo in the StandardShell template, and the color in the standardgeneral.css. Use the hex color code, for example ffff33 is canary yellow. Here are some color codes.
