Oracle APEX Cookbook : Second Edition: Get straight into developing modern web applications, including mobile, using the recipes in this brilliant cookbook for Oracle Application Express (APEX). From the basics to more advanced features, it's a reference book and guide in one.

Now that we have an application we would like to give it more looks. Maybe the application has to adhere to certain corporate layout standards. Or maybe you just want to add some more colors. Using themes and templates it is possible to give your application some cosmetic changes. A theme is a collection of templates and a template is a collection of components ranging from pages and reports to controls like calendars. A template consists of a header template, a body template, and a footer template. A template also contains some subtemplates, for example, for the success message.

In this chapter, we will present some recipes which will make your application look better.

When working with themes, there are some important things to know. First of all, there is the theme export SQL file in which all templates of the theme are included. Secondly, there are the images that belong to your theme. And thirdly, there are the .css files. CSS is an abbreviation of Cascading Style Sheet and describes the style of the elements in a web page. For example, the font of the text or the color of the background. In the stylesheet there are also references to images. It is important that the references in these files are correct, otherwise you will see no style at all, just plain text.

When you want to create your own theme you can do two things: start from scratch or copy an existing theme and adapt it. Starting from scratch is more work as you have to create all the templates as well. Copying and modifying an existing theme costs less time but if you have to change a lot in order to get the desired layout, you might as well start from scratch.

The themes that come with APEX offer enough different styles and layouts to give your application a unique and satisfying look. However, if your application must conform to a specific corporate layout or your application must look the same as another APEX application, you can import a theme. APEX offers an easy way to import and use a theme. You can find several themes (free or commercial) on the Internet.

When you create a theme from scratch, you also have to link the templates to the theme. You can copy templates from another theme to your newly created theme. But you can also create new templates from scratch. We will create a new template in this recipe.

A web application will look better when you use images. Of course, APEX 4.0 supports the use of images in web pages. You can easily upload images to the APEX host with your FTP client. To connect to the APEX host, see the description at the beginning of this chapter. You should copy your images to the images directory. APEX uses a shortcut or prefix for this path. Mostly it is /i/ but you can change that. Go to shared components and click on the edit definition link on the right side of the screen, under Application. In the name section you can find this image prefix text item where you can modify the prefix. It is advised to always use the substitution string #IMAGE_PREFIX# instead of /i/ when referring to images in templates or button images to safeguard the URI to the images when modifying the virtual directory on the HTTP server (EPG or Apache).

There is another way to upload images to the APEX environment. In the application builder, go to the application...

Cascading Stylesheets offer an easy way to quickly change the look and feel of a web application. They hold information about colors, sizes, borders, and fonts. Working with stylesheets is a good way to separate the style and the actual content of a webpage. The HTML document should only contain text and HTML tags.

In this recipe, we will make a simple stylesheet, upload it to the APEX environment, and use it in our application. We will change the buttons and the background of the region. All this is done by referencing classes in the stylesheet.

One of the most difficult tasks of web programing is the control of the layout. In previous versions of APEX, tables were used to place the items on the desired positions. You can use an HTML editor to see a preview of the layout. As from APEX 4.0, new themes are introduced that use divs to position the different components. Divs are almost necessary to be able to use dynamic actions layout. The biggest advantage from div-based layout over table-based layout is that you can precisely position components of the web page.

In this recipe, we will create a page with a report region showing the application users and a chart region with the number of roles used. The two regions will be displayed next to each other.