Search

 

Edition: Futurama Website/Futurama Export/Futurama Webservice

Module: Futurama Editor

User: Developer

Prerequisites

- Working with objects

 

Description

Objects that are displayed in a website have a number of properties that define where the Output object is placed on the website as well as how the Output object looks like. This includes not only straightforward properties like their height and width, but also properties like color, fonttype, background, margins and many others. On this page it is discussed where the layout specific properties of a Output object are defined, how it can be found out which properties apply to an Output object and how to verify the stylesheet that is used in the application.

Defining the layout of an Output object

In Futurama Documents the layout of any Output object is defined in a CSS-stylesheet. A stylesheet is a textfile that contains a number of classes (also known as 'selectors'). Every selector contains a number of layout properties (such as the height, width, position, margins etc.).

In the Futurama Editor every Output object has a property 'CssClass'. The Output object WebPage has, in addition, the property 'StyleSheet'. Here the stylesheet has to be selected that contains the selectors which will be used to define the layout of the Output objects in that WebPage. Once the stylesheet is selected every Output object in the WebPage can be assigned one or more selectors in the property 'CssClass'. When displaying the website in a browser every Output object will be rendered using the layout propert(y)(ies) that are defined in the selector(s) that are assigned to the Output object. Note that an Output object can have multiple selectors and that every selector can be used more than once. Also note that a WebPage can only have one Stylesheet.

Layout window

If an Output object is selected the Layout window will show the selectors that apply to the selected Output object. A division is made between the layout of the Output object itself and the layout of the parents of the Output object (Layout for parents). This is because the layout of an Output object can be influenced by the layout of its parents.

Example

Description

Download the example that is given in the exercise 'Adding CSS (Easy)'. See Related Topics below for the link.

Steps

  • Place the example in a valid Futurama (version 4.2.1.2 or later).
  • Open the website.

In the example we can see a blue screen containing a red WebPanel in the upper left and a yellow WebPanel in the upper right. The latter WebPanel also contains text.

  • Now open the example in the Futurama Editor.
  • Select the WebPage.

In the Properties Window it can be seen that the stylesheet used is the file CSSFILE.CSS. This file contains all selectors that are available for the Output objects in this WebPage.

  • Select the WebPanel 'Left'.

In the Property Window it can be seen that the selector 'left' is defined for this WebPanel.

  • Click on the tab Layout.

The selector 'left' can be seen in the Layout for Left part of the window. Furthermore it can be seen that the background-color is red, the width and height are 300px and that the WebPanel is placed on the left side of the WebPage. Note that this is indeed observed when looking at the browser. The Layout for parents part of the window shows all selectors of the Output objects that are parents of 'Left'. In this example this is only the WebPage itself. It can be seen that the background-color of the WebPage is blue, which is also observable in the browser.

The Layout window only shows the selectors that are defined in the property 'CssClass' as well as in the stylesheet. If the Output object is given a selector which does not exist in the stylesheet the selector would not be visible in the Layout Window.

Find Window Layout

The Find Window can be used to search for layout. It is possible to search in two ways:

  1. Given the name of a certain selector the Find Window will display all Output objects whose layout is determined by that particular selector. Note that the name has to be preceded by a point e.g. '.left'.
  2. Given the type of HTML-element (such as DIV, SPAN, INPUT), the Find Window will display all Output objects of that type.

A double click on the result in the Find Window will navigate directly to the specific object.

Checking the Layout

As mentioned above it is recommended to keep the stylesheet as compact as possible by cleverly defining classes that can be reused easily. Despite all good efforts it is, however, almost unavoidable that during development of the application classes are created which later turn out to be obsolete. It is of course best practice to remove these unused classes. However, because stylesheets can be very long and the number of Output objects can be large it is a extremely tedious work to check every class manually. Fortunately it is possible in the Futurama Editor to check the stylesheet(s) for whether the classes in the stylesheet are actually used.

Checking the stylesheet is done with the option Edit|CheckCSS. Selecting this option will result in an overview of all selectors die wel en niet gebruikt worden.

  • Select Edit | CheckCSS.

The Check layout window will appear showing only Used styles. BODY, left and right are indeed used by the WebPage and WebPanels. The stylesheet does not contain any other selectors. By double clicking on a selector in the Check layout window this selector is added to the Find Window. One can now search for the Output object(s) that have this particular selector listed in their CssClass property.

  • Open the stylesheet 'cssfile.css' in a texteditor (like Notepad).
  • Add the text '.middle{height:100px;}' to the stylesheet and save it.
  • In the Editor select again Edit | CheckCSS.

Notice that in addition to the same Used styles the Unused style 'middle' has, not surprisingly, appeared. Unused styles are defined in the stylesheet but are not used. These selectors can therefore be deleted from the stylesheet, without any consequences on the layout of the website.

Rendering Output objects

Characteristic for Output objects is that they are actually visible on the website which is displayed in a browser. Each Output object is 'rendered' by Futurama as an HTML Element. See the External Topic for a website with more information about HTML Elements. For example, a WebPanel is rendered as the HTML Element

The HTML Element corresponding with a specific Output object can be found in the support page dedicated to that Output object. When building up a website the browser combines every HTML Element with the style information for each object provided by the CSS stylesheet. The result then can be seen in the browser.

In the Find Window in the Editor the HTML Element can be filled in as a search term. The result will then be all Output objects that Futurama will render as the specified HTML Element. In the following example we will search for all Output objects which are rendered as a

This will result in all WebPanels in the Futurama Document.

Example

Description

Using the example given above it will be shown how to search for Output objects based on how they are rendered in the website.

Steps

  • Open the example in the Futurama Editor.
  • In the Find Window type 'div' in the search field.
  • Select Look in: 'Layout' and press Find.

The result of the search will be the two WebPanels 'Left' and 'Right'.

Related Topics

- Exercise 1: Adding CSS (Easy) : Tutorial in which a website is built using CSS.

External Links

- W3Schools.com HTML Elements: Contains information about HTML Elements as well as examples.

Feedback

If you have any questions about this subject or if you want to provide us feedback please send us an e-mail.

Updated: 2014-06-30