1. Manufacturing
  2. Anywhere Mobility Studio
  3. Setting up and designing Anywhere mobility studio
  4. Set up general configuration

Set up appearance

Set up style sheets to define the appearance of:

  • Menus and processes on mobile devices.
  • Applications in the design previews of Mobility studio.
You can also set up CSS classes, to define the appearance of menus and form controls on mobile devices.


Administrator Administrator Start Start Set up style sheets Set up style sheets Style sheets are used to define the appearance of:Menus and processes on mobile devices.Applications in the design previews.Set up a reference to these style sheets in Mobility studio. Procedure 1. Click Mobility management. 2. Click Style sheets. 3. Click New. 4. In the Style sheet ID field, type the style sheet name to be used in your menus and applications. Note: Consider to exactly match the actual style sheet file name, without the extension (.css). 5. Click Upload style sheet. 6. On the dialog, browse for the style sheet and click OK. 7. The style sheet resource is used to get the actual style sheet file to be applied. On uploading a style sheet, this field is automatically filled. In the Style sheet resource field, you can change the actual style sheet name with extension. Note: Make sure, this name exactly matches the relevant style sheet file name. 8. Sub-task: Upload or link images. 9. On the Images tab, in the list, select an image reference record. 10. Click Upload. 11. On the Images tab, in the list, select an image reference record. 12. In the Filestore field, enter or select an image as available on the image share. 13. Close the page. 14. Close the page. Notes You can also import a style sheet configuration from another environment with a specific XML file. Do you need  device-specific layout  for form controls? Do you need  device-specific layout  for form controls? Set up CSS classes Set up CSS classes You can define a device-specific layout for a menu or form-control. For example, to apply a different design for a button or to apply a different font. For such a layout, a specific CSS class is required in the relevant style sheet file. To be able to use such a specific CSS class, in Mobility studio, set up a reference to the CSS class in the style sheet. You can link this CSS class reference to the relevant form control to get the required layout. For several application components, a default CSS class reference is pre-defined. These CSS class references are automatically added when you add a component of the related type to an application: Button CheckBox GridView Label TextBox Caption MenuButton FormTitle DropDown Procedure 1. Click Mobility management. 2. Click CSS classes. 3. Click New. 4. In the CSS class ID field, type a value. 5. In the CSS class field, type a value. Note: Make sure, this CSS class name matches exactly the related CSS class name in the style sheet file. 6. Close the page. 7. Close the page. Notes The CSS class that you define for the data grid is also used to determine which CSS class is to be used for the components of the data grid. For example, the highlighted row or the button bar. These grid-related CSS classes are not added to the CSS classes in Mobility Studio but must be available in the CSS file. For these data grid components, the CSS class is determined based on the CSS class as defined for the data grid (between brackets, an example with the default 'GridView' CSS class): Grid component - [CSSClassName] - (GridView) DIV surrounding grid - [CSSClassName]EnclosingDiv - (GridViewEnclosingDiv) Grid header - [CSSClassName]HeaderStyle - (GridViewHeaderStyle) Grid row - [CSSClassName]RowStyle - (GridViewRowStyle) Alternating row - [CSSClassName]AlternatingRowStyle - (GridViewAlternatingRowStyle) Selected row - [CSSClassName]SelectedRowStyle - (GridViewSelectedRowStyle) Pager (button bar) - [CSSClassName]PagerStyle - (GridViewPagerStyle) End End

Activities

Name Responsible Description

Set up style sheets

Administrator

 		Style sheets are used to define the appearance of:
  • Menus and processes on mobile devices.
  • Applications in the design previews.
Set up a reference to these style sheets in Mobility studio.

Set up CSS classes

Administrator
You can define a device-specific layout for a menu or form-control. For example, to apply a different design for a button or to apply a different font.
For such a layout, a specific CSS class is required in the relevant style sheet file. To be able to use such a specific CSS class, in Mobility studio, set up a reference to the CSS class in the style sheet. You can link this CSS class reference to the relevant form control to get the required layout.

For several application components, a default CSS class reference is pre-defined. These CSS class references are automatically added when you add a component of the related type to an application:
  • Button
  • CheckBox
  • GridView
  • Label
  • TextBox
  • Caption
  • MenuButton
  • FormTitle
  • DropDown

Provide feedback