Style Example

New Xephr® Repositories come with four styles, predefined.  In the following examples, we will be modifying existing styles and creating new styles that are needed for the entity examples.

See Also

Styles

Modifying Existing Default Style

Creating New Child Style

Creating New Parent Style Tree

Additional Styles Required for Examples

Modifying Existing Default Style

The default style will be blue bold text on a white background.

1. Click on the expand switch to the left of the Style Information object to expand it and display the existing styles
   

2. Double click on the DEFAULT_STYLE object to display the property sheet.
   

3. To select the text color, click on the Foreground property to display the color palette.
   

4. Click on the desired color swatch to view it in the preview section of the palette.
   

5. When you have selected the blue color, click on the Ok button.  The color will be returned to the Foreground property.
   

6. Set the Font Size property to 12 for this style.
   

7. Set the Bold property to true to have bold text for this style.

8. Press the Save button in the main toolbar to save the changes.

9. Click on the Preview button in the main toolbar to view your style.
   

Creating New Child Style

The child style will be dark red bold underlined text on the same background. Child styles inherit settings from the parent style.  This makes maintenance of the styles easier, allowing users to change one setting at the parent style level and have it cascade to the child styles.

1. Click on the DEFAULT_STYLE object.

2. Right click and select Create Style.
   

3. The new style will be created.

4. In the Property Sheet, in the Name property, enter LINK_STYLE.
   

5. In the Description property, enter the description for this style - Red, underlined text for links.
   

6. The Inherits From property displays the style's parent style, from which properties can be inherited.
   

7. The Background Inherited property is set to true.  Since we want the background for the style to be the same as the DEFAULT_STYLE, leave this property set to true.
   

8. The Foreground Inherited property is set to true, but we want the text color to be different for the style.  Set this property to false.
   

9. The Foreground property is now displayed to allow you to select the desired foreground color.  
   

10. To select the text color, click on the Foreground property to display the color palette.
    

11. Click on the desired color swatch to view it in the preview section of the palette.
    

12. When you have selected the dark red color, click on the Ok button.  The color will be returned to the Foreground property
    

13. The parent style does not have underlined text, so we need to modify the Underlined property.  Set the pop-list to true.
    

14. The remaining properties will be inherited from the parent style since we have no need for them to be different.

15. Press the Save button in the main toolbar to save the new style.

16. Click on the Preview button in the main toolbar to view your style.
    

Creating New Parent Style Tree

This example will created a new style for report objects with a white background and black bold text, and an additional child style for that parent that has a white background and dark red bold text.

1. Click on the Style Information object.

2. Right click and select Create Style.
   

3. The new style will be created.

4. In the Property Sheet, in the Name property, enter REPORT_STYLE.

5. In the Bold property, set the pop-list to true.
   

6. Press the Save button in the main toolbar to save the new style.

7. Click on the Preview button in the main toolbar to view your style.
   

8. Click on the REPORT_STYLE object.

9. Right click and select Create Style.
   

10. The new style will be created.

11. In the Property Sheet, in the Name property, enter REPORT_LINKS.

12. The Background Inherited property is set to true.  Since we want the background for the style to be the same as the REPORT_STYLE, leave this property set to true.

13. The Foreground Inherited property is set to true, but we want the text color to be different for the style.  Set this property to false.

14. The Foreground property is now displayed to allow you to select the desired foreground color.  

15. To select the text color, click on the Foreground property to display the color palette.
    

16. Click on the desired color swatch to view it in the preview section of the palette.
    

17. When you have selected the dark red color, click on the Ok button.  The color will be returned to the Foreground property.

18. The remaining properties will be inherited from the parent style since we have no need for them to be different.
    

19. Press the Save button in the main toolbar to save the new style.

20. Click on the Preview button in the main toolbar to view your style.
    

Additional Styles Required for Examples

Modifications to other Existing Styles Required for all Screen Examples

1. Expand the Style Information object.
   

2. Double click on the DEFAULT_BUTTON object to display the property sheet.
   

3. Set the Font Name property to Helvetica, so that it matches the other default styles.

4. Set the Font Size to 12.0, so that it matches the other default styles.
   

5. In the Explorer Tree, double click on the DEFAULT_DATA_ENTRY styles to display its property sheet.
   

6. Set the Font Name property to Helvetica, so that it matches the other default styles.

7. Set the Font Size to 12.0, so that it matches the other default styles.
   

8. Press the Save button in the main toolbar to save the changes.

Tab Styles Required for Screen Entity Examples - Screen with Tabs

1. Expand the Style Information object.

2. Click on the DEFAULT_STYLE object.

3. Right click and select Create Style.
   

4. The new style will be created.

5. In the Property Sheet, in the Name property, enter TAB_SELECT.

6. The Background Inherited property is set to true, but we want the background color to be different for the style.  Set this property to false.

7. The Background property is now displayed to allow you to select the desired background color.

8. To select the text color, click on the Background property to display the color palette.

9. Click on the desired color swatch to view it in the preview section of the palette.
   

10. When you have selected the dark blue color, click on the Ok button.  The color will be returned to the Background property.

11. The Foreground Inherited property is set to true, but we want the text color to be different for the style.  Set this property to false.

12. The Foreground property is now displayed to allow you to select the desired foreground color.  

13. To select the text color, click on the Foreground property to display the color palette.

14. Click on the desired color swatch to view it in the preview section of the palette.
    

15. When you have selected white, click on the Ok button.  The color will be returned to the Foreground property.

16. The remaining properties will be inherited from the parent style since we have no need for them to be different.
    

17. Press the Save button in the main toolbar to save the new style.

18. Click on the Preview button in the main toolbar to view your style.
    

19. Expand the Style Information object.

20. Click on the DEFAULT_STYLE object.

21. Right click and select Create Style.
    

22. The new style will be created.

23. In the Property Sheet, in the Name property, enter TAB_UNSELECT.

24. The Background Inherited property is set to true, but we want the background color to be different for the style.  Set this property to false.

25. The Background property is now displayed to allow you to select the desired background color.

26. To select the text color, click on the Background property to display the color palette.

27. Click on the desired color swatch to view it in the preview section of the palette.
    

28. When you have selected the dark blue color, click on the Ok button.  The color will be returned to the Background property.

29. The Foreground Inherited property is set to true, but we want the text color to be different for the style.  Set this property to false.

30. The Foreground property is now displayed to allow you to select the desired foreground color.  

31. To select the text color, click on the Foreground property to display the color palette.

32. Click on the desired color swatch to view it in the preview section of the palette.
    

33. When you have selected white, click on the Ok button.  The color will be returned to the Foreground property.

34. The remaining properties will be inherited from the parent style since we have no need for them to be different.
    

35. Press the Save button in the main toolbar to save the new style.

36. Click on the Preview button in the main toolbar to view your style.
    

Cascading Menu Styles Required for Cascading Menu Example

1. Right click on the Style Information object and select Create Style.
   

2. The new style will be created.

3. In the Property Sheet, in the Name property, enter CASCADE.

4. Leave the Background property set to white..

5. Leave the Foreground set to black.

6. Set the Font Name property to Helvetica.

7. Set the Border Type property to Solid Line, since we want the cascading menus to have a line around each entry.

8. Leave the Border Color property set to black.

9. Set the Border Size property to 1 Pixel.
   

10. Press the Save button in the main toolbar to save the new style.

11. Click on the Preview button in the main toolbar to view your style.
    

12. Right click on the newly created CASCADE style and select Create Style.
    

13. The new style will be created.

14. In the Property Sheet, in the Name property, enter CASCADE_BLACK.

15. The parent style does not have bold text, so we need to modify the Bold property.  Set the pop-list to true.
    

16. he remaining properties will be inherited from the parent style since we have no need for them to be different.
    

17. Press the Save button in the main toolbar to save the new style.

18. Click on the Preview button in the main toolbar to view your style.
    

19. Right click on the newly created CASCADE style and select Create Style.
    

20. The new style will be created.

21. In the Property Sheet, in the Name property, enter CASCADE_RED.

22. The Foreground Inherited property is set to true, but we want the text color to be different for the style.  Set this property to false.
    

23. The Foreground property is now displayed to allow you to select the desired foreground color.  
    

24. To select the text color, click on the Foreground property to display the color palette.
    

25. Click on the desired color swatch to view it in the preview section of the palette.
    

26. When you have selected the dark red color, click on the Ok button.  The color will be returned to the Foreground property
    

27. The parent style does not have bold text, so we need to modify the Bold property.  Set the pop-list to true.
    

28. The parent style does not have underlined text, so we need to modify the Underlined property.  Set the pop-list to true.
    

29. The remaining properties will be inherited from the parent style since we have no need for them to be different.
    

30. Press the Save button in the main toolbar to save the new style.

31. Click on the Preview button in the main toolbar to view your style.
    

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.