Using Colors

Designer 10.5 | webMethods Mobile Development | Building the User Interface for a Mobile Application | Using Colors, Sizes, Styles and Themes | Using Colors

Using Colors

An easy way to define commonly used colors is to add a new color entry in the styles category. A defined color element can then be referenced everywhere in the model instead of directly specifying a color. The advantage is that you can easily change the color that is used in several elements within the model.

To define a color for a mobile application

1. Ensure the mobile project is open in the Outline Editor. For instructions, see Displaying a Mobile Project in the Outline Editor.

2. In the Model section of the Outline Editor, expand the outline so that you view the Styles node.

3. Expand the Styles node, select the Values node, and select New Child > Color.

4. In the Properties section of the Outline Editor, define a unique name in the Name field (e.g., Background Color) and a color value in the Value field (e.g., 0xFF880E4F).

Note:
If you press CTRL + SPACE in the Value field, a list of all defined colors is shown. You can also click the pencil icon in the Outline view and use the available color palettes to define a color.

5. Save the Ouline Editor.

Note:
(Android only) All defined color values will be saved in a colors.xml resource file to be used in your Android project, e.g. for native code injections. For more information, refer to https://developer.android.com/guide/topics/resources/more-resources.html#Color.

You can easily use the color in the user interface. Open a model element that contains a color property (background color, font color, etc.), e.g. a TextField. In that property, specify the name of the previously defined color object. If you press CTRL + SPACE, a list of all selectable defined color objects is shown.