Cascading Style Sheets (CSS)

CSS is the language used to style web pages. It can be used to define fonts, colors, images, and spacing, but also behavior such as responsive layouts, showing and hiding content, and much more. Although Uniface provides some default style sheets, you will probably want to define your own.

Note: Knowledge of CSS is usually required to develop web applications. If you are unfamiliar with CSS, you can learn the language using one of the many useful web sites, tutorials, and books about the subject.

CSS enables you to define named style classes that can be applied to HTML elements, which then take on the styling attributes defined in those classes.

You can apply style information using CSS at various levels, allowing multiple styles to be cascaded. For example, you can define local CSS styles using <style> elements in the server page layout:

However, it is much more common to define styles in one or more external CSS files that are then referenced in the page layout. For example: 

<link rel="stylesheet" type="text/css" href=".../css/uniface.css">
<link rel="stylesheet" type="text/css" href=".../css/mystyles.css">

At runtime, Uniface adds its own style sheets to the HTML page. The order in which CSS files are loaded can affect the styes that are applied, because of dependencies or conflicts, so Uniface enables you to control the load order. For more information, see Controlling the Load Order of JavaScript and CSS .

Caution: Not all style sheets are supported by all browsers. Some browsers select the sections of the style sheet files with which they are compatible. It is therefore recommended that you test your style sheets for browser compatibility.

Uniface CSS Files

Uniface provides default CSS files for server page components to provide basic styling:

  • uniface.css—default style sheet for DSPs. It includes styles for common HTML elements, CSS classes applied by Uniface for errors, and optional style that is applied if the HTML body has a class=u. (It supersedes the udsp.css file provided in older versions of Uniface.)
  • applic.css—default style sheet for USPs. It includes styles for common HTML elements, and CSS classes applied by Uniface for errors.

By default, these files are located in the \uniface\webapps\uniface\css of the Uniface installation. They are referenced in the component templates used to create new DSPs and USPs, so they are automatically included in server pages created with these templates.

You can create your own CSS files and templates to ensure that all your web components use the same style sheets.

In addition, Uniface adds the following stylesheets (located in \uniface\webapps\uniface\common\css) to the HTML generated at runtime. They handle specific user interface elements used by the DSP framework:

  • uwindow.css—used to style messages initiated by the webmessage ProcScript command. This can be customized if needed.
  • ubusyindicator.css—used to style the busy indicator when the browser is waiting for a server response.
  • uapplayout.css—used to style header, body, and footer layout for use in mobile apps

Related Topics