Overview

Stylesheets are the building blocks to any template. This also means that there are a great number of these and they have many categories. You are even free to add to the list of categories (which you do in the "Save Stylesheet as..." dilaog shown below).

 

Stylesheets can be simple where they specify a few properties for a single element type on a form, for example a "rounded button".

 

They also can be compounded, built out of a set of simple stylesheets.

 

In Composer, all styles. whether simple or compound, are defined by a stylesheet. These are sometimes called "styles".

 

Typed Styles

A typed style is a style that applies to all objects of a particular type. For example, by default, all Buttons in your form have the same background color because there is a Typed Style for Button that defines the foreground and background colors for all Buttons. The same applies to all object types.

 

Note: Composer uses a fully object-oriented type hierarchy. Some styles apply to "base" objects in the type hierarchy. For example, a Text Field is a sub-class of Field. Properties can be styled at either the base-class level (in which case it applies to all objects of that base-type) or at the sub-class level (in which case it applies only to objects of that sub-class). This is the reason for the chains of names separate by dots. Even if you do not grasp this concept, you will still find styles useful.

 

Normally, every object you may use in your forms will already have a typed style associated with it, which was created by the person who designed your organizational stylesheet.

 

There are many typed styles needed for any template, be it designed by Avoka Technologies for your organization or for one of the standard libraries that ship with the product. In either case, a full set of typed styles becomes available to an Organization after a library is assigned to the organization. These are read-only.

 

Named Styles

In most cases you want all fields of a particular type to always look the same on all forms. (And that is why we set up typed styles for each field type.) But occasionally, you will want to override some of the styling for a particular type of field. For example, there are two ways to represent a Button on a form — either as a traditional push-button, or as a flat mobile-friendly style of a text-only button. Though they are just two slightly different styles of buttons they have different foreground and background colors, fonts and so on.

 

You select these named styles for a form object by "Edit Properties -> Styling -> Style sets". The available stylesets and their choices (for example, "Button Sizes", "Button Shapes" and so forth) are determined by the Named Styles associated with the Typed Style of the object.

 

Tip: It's generally a much better idea to define and use a named style, rather than explicitly setting "magic values" that you have to remember, such as sizes, colors and other properties. Not only does this mean you don't need to remember the values, but also, if you ever want to change the values, you can do so in one place.

 

Another example of using named styles is sizing of fields. Rather than explicitly setting widths in inches or mm, you can create named styles such as "large", "medium", and "small".

 

 

Stylesheet Categories

Stylesheets can now be categorized (either for convenience or for template choices, as we will see). You can use the already-existing categories or create your own.

 

Under the covers, you can define any number of stylesheet categories, and apply them in any order. Each category can define any number of styles sheets, each of which will appear in the drop down lists. Avoka has defined a standard set of stylesheet categories that work for many customers. you can define your own using the "Save Stylesheet as...." dialog shown below,

 

The standard stylesheet categories that Avoka has defined go from the most general (overall form structure) to the most specific (colours and locale). However, it possible to define other stylesheet categorization schemes for organizations based on their needs. For example, it is possible to define an organization’s template with no stylesheet categories at all – all forms would look exactly the same. Or perhaps with a choice of only two stylesheets in a single category. Or on the other extreme, you could potentially define a different stylesheet category for each different type of component.

 

The standard stylesheets provided by Avoka in the default templates are more to show the capabilities of the system – most organizations will only define a very small number of stylesheet combinations that represent the styles of forms in their organizations. On the other hand, some organizations, particularly those that “white label” their forms, may define a very large number of different stylesheets for each of the sub-organizations that they represent.

 

You then can, if you want, associate these categories with the Style Choosers of the template.

 

Editing Stylesheets

Location: Worksheet -> <Organization> -> Stylesheets tab

or

Location: Worksheet -> <Library> Stylesheets tab

 

By default, an Organization can access the Account's stylesheets. These are all read-only. You can perform a "Save as..." on each of these so in that you can edit the new versions and also assign them to nominated libraries.

 

This is the way to populate both Libraries and Organizations with bespoke stylesheets.

 

So, you can replace a standard-issue stylesheet (from the release, say) with your own in the library by saving the stylesheet with the same name. For example, if I edit "Theme-Blue" and give it the name "Blue" and keep the category "Theme", my modifications are saved as Theme-Blue (but only in this particular library) and will affect all form elements that use the "Theme-Blue" stylesheet from this library in the stack. The entry in the Stylesheet tab for the Library shows the source of the style:

 

 

Once you have saved a stylesheet, you can edit its properties (double-click on item in the list or use the edit Action):

 

 

All of the values of the Properties of the Named Styles and Typed Styles are clickable and editable. You can also add and delete styles and properties and even edit the XML (though do not attempt to do so unless you know what you are doing). The Edit Stylesheet function is therefore very powerful.

 

Customizing Stylesheets

The ability to customize stylesheets is one of the most powerful features in Composer, for several reasons:

 

•You can make global changes to your forms in a single place, and this will be automatically applied to all the forms that use that stylesheet.
 

•You can control the scope of the changes by being careful about which library's stylesheets you change. For example, changes to the internal library of the Organization will affect the whole Organization. You can alter the scope of changes to other libraries by altering the Search Path and the Search Order for Organizations.
 

•Even so, the scope Stylesheet changes seem to naturally affect Organizations. Trying to have Projects in the one Organization pick up different stylesheet versions is complicated and difficult.
 

•Stylesheets hide (or encapsulate) a lot of the advanced properties associated with individual widgets. These advanced properties don't even appear in the Composer by default (you can turn on Advanced Properties in the Property Dialog), which means that you don't have to worry about them. You just get on with the job of designing your form.
 

•The stylesheet embodies your organizational style guide, ensuring all your forms conform to the style guide. Just use the standard stylesheet, and let Composer do the rest. If you organizational style changes, simply change the stylesheet, regenerate all your forms, and you're done.

 

Tip: While stylesheets and their close relative, Templates, are very important, they are also moderately complex. We strongly suggest that you contact Avoka if you require either a custom stylesheet, or a modification to one of the standard stylesheets. We can either develop the stylesheet for you, or provide some customized training to enable you to make your own stylesheet changes.