Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
visionx:style_invoice_application [2020/06/08 11:31]
cduncan [Color the Menu Items and Buttons]
visionx:style_invoice_application [2020/06/10 10:38] (current)
cduncan
Line 1: Line 1:
 ~~NOTRANS~~ ~~NOTRANS~~
  
-~~Title: Style Invoice ​application~~+~~Title: Style Invoice ​Application~~
 Version: 1.1 / 2019-07-01 Version: 1.1 / 2019-07-01
  
 ====== Introduction ====== ====== Introduction ======
  
-The objective of this tutorial is changing the look and feel of the invoice web application (from a former example) with VisionX. You can download the example from the VisionX Solution Store. Refer to [[:​visionx:​invoice_application|the VisionX documentation "​Create an Invoice ​application"]] where the example and its purpose are described in detail.+The objective of this tutorial is changing the look and feel of the invoice web application (from a former example) with VisionX. You can download the example from the VisionX Solution Store. Refer to [[:​visionx:​invoice_application|the VisionX documentation "​Create an Invoice ​Application"]] where the example and its purpose are described in detail.
  
 ====== Start Live Preview ====== ====== Start Live Preview ======
Line 99: Line 99:
 {{:​visionx:​style_invoice_application:​header-step2.png?​nolink|Color the menu items and buttons}} {{:​visionx:​style_invoice_application:​header-step2.png?​nolink|Color the menu items and buttons}}
  
-===== Change the logo =====+===== Change the Logo =====
  
 To change the logo in the header'​s top left corner, we have to create a folder ''​%%/​WebContent/​images%%''​ and copy the [[https://​doc.sibvisions.com/​_media/​visionx/​style_invoice_application/​logo.png|new logo]] into it. We append the name of the logo and its position as a small addition to the style sheet: To change the logo in the header'​s top left corner, we have to create a folder ''​%%/​WebContent/​images%%''​ and copy the [[https://​doc.sibvisions.com/​_media/​visionx/​style_invoice_application/​logo.png|new logo]] into it. We append the name of the logo and its position as a small addition to the style sheet:
Line 114: Line 114:
 {{:​visionx:​style_invoice_application:​header-step3.png?​nolink|Change the logo}} {{:​visionx:​style_invoice_application:​header-step3.png?​nolink|Change the logo}}
  
-===== Color the menu pop-ups =====+===== Color the Menu Pop-Ups =====
  
-Looks good so far, but what if we click on a menu item? We have to change that color too according to our scheme:+Looks good so far, but what if we click on a menu item? We have to change that colortooaccording to our scheme:
  
 <code css> <code css>
Line 151: Line 151:
 } }
 </​code>​ </​code>​
-Press "​Apply"​ to update the Live Preview in your Browser ​window:+Press "​Apply"​ to update the Live Preview in your browser ​window:
  
 {{:​visionx:​style_invoice_application:​header-step4.png?​nolink|Color the menu popups}} {{:​visionx:​style_invoice_application:​header-step4.png?​nolink|Color the menu popups}}
  
-====== Styling the Invoice ​WorkScreen ​======+====== Styling the Invoice ​Workscreen ​======
  
-Unfortunately the original styling of the Invoice WorkScreen ​does not match our new requirements. Let's improve the layout and apply our color scheme using the built-in VisionX tools.+Unfortunatelythe original styling of the invoice workscreen ​does not match our new requirements. Let's improve the layout and apply our color scheme using the built-in VisionX tools.
  
-===== Compact the list of invoice items =====+===== Compact the List of Invoice Items =====
  
-First we will reduce the margins of the invoice items in the component table to give it a more compact look: Open the WorkScreen ​"​Invoice"​ in Design-Mode ​and right-click on any of the editors in the component table, such as the "​Article"​ combobox (1). Reduce the surrounding margins in the properties-popup to "​Left=0,​ Top=3, Right=0, Bottom=3"​ (2).+Firstwe will reduce the margins of the invoice items in the component table to give it a more compact look: open the workscreen ​"​Invoice"​ in design mode and right click on any of the editors in the component table, such as the "​Article"​ combobox (1). Reduce the surrounding margins in the properties-popup to "​Left=0,​ Top=3, Right=0, Bottom=3"​ (2).
  
 {{:​visionx:​style_invoice_application:​invoice-margins.png?​nolink|Reduce margins}} {{:​visionx:​style_invoice_application:​invoice-margins.png?​nolink|Reduce margins}}
  
-===== Color buttons with VisionX =====+===== Color Buttons With VisionX =====
  
-Let's change the button'​s colors next. Right-click the "​Export Invoice" ​Button ​(1) and click on "​Background..."​ (2) to open the color picker. Enter the RGB-Code ''​%%#​464646%%''​ (dark grey) of and press the "​Finish" ​Button ​(3) to apply the new color of the button.+Let's change the button'​s colors next. Right click the "​Export Invoice" ​button ​(1) and click on "​Background..."​ (2) to open the color picker. Enter the RGB code ''​%%#​464646%%''​ (dark grey) of and press the "​Finish" ​button ​(3) to apply the new color of the button.
  
 {{:​visionx:​style_invoice_application:​invoice-step1-howto.png?​nolink|Color buttons}} {{:​visionx:​style_invoice_application:​invoice-step1-howto.png?​nolink|Color buttons}}
  
-Now apply the same steps for the "​Add" ​Buttons. Set the background color of the "​Delete" ​Button ​to ''​%%#​FF8C00%%''​ (dark orange). Finally change the foreground color of the "Add new item" and the "​Delete Item" buttons to ''​%%#​FF8C00%%''​ (dark orange).+Now apply the same steps for the "​Add" ​buttons. Set the background color of the "​Delete" ​button ​to ''​%%#​FF8C00%%''​ (dark orange). Finallychange the foreground color of the "Add new item" and the "​Delete Item" buttons to ''​%%#​FF8C00%%''​ (dark orange).
  
-All changes are immediately displayed in your Live Preview ​Browser Window:+All changes are immediately displayed in your Live Preview ​browser window:
  
 {{:​visionx:​style_invoice_application:​invoice-step1.png?​nolink|Color buttons}} {{:​visionx:​style_invoice_application:​invoice-step1.png?​nolink|Color buttons}}
  
-===== Style the table =====+===== Style the Table =====
  
-Next we address the table. We want the selected row to be highlighted in light orange and without the blue border. Moreover, the selected row's text as well as the header'​s text shall be bold.+Nextwe address the table. We want the selected row to be highlighted in light orange and without the blue border. Moreover, the selected row's text as well as the header'​s text shall be bold.
  
-Let's open the "Web Application Settings / Styles"​ window again and append the following styles to our application'​s ​Style Sheet:+Let's open the "Web Application Settings / Styles"​ window again and append the following styles to our application'​s ​style sheet:
  
 <code css> <code css>
Line 210: Line 210:
 {{:​visionx:​style_invoice_application:​invoice-step2.png?​nolink|Style table}} {{:​visionx:​style_invoice_application:​invoice-step2.png?​nolink|Style table}}
  
-===== Style the editors ​=====+===== Style the Editors ​=====
  
-Finally the border and highlight color of all focused editors and their currently selected content must be adapted to the new color scheme:+Finallythe border and highlight color of all focused editors and their currently selected content must be adapted to the new color scheme:
  
 <code css> <code css>
Line 244: Line 244:
 } }
 </​code>​ </​code>​
-Press "​Apply"​ to review the change in the Live Preview in your Browser ​window:+Press "​Apply"​ to review the change in the Live Preview in your browser ​window:
  
 {{:​visionx:​style_invoice_application:​invoice-step3.png?​nolink|Style editors}} {{:​visionx:​style_invoice_application:​invoice-step3.png?​nolink|Style editors}}
Line 250: Line 250:
 The new style not only applies to textboxes but to other editors as well (such as comboboxes, textareas, datefields). The new style not only applies to textboxes but to other editors as well (such as comboboxes, textareas, datefields).
  
-====== Continue ​styling ​the Application ======+====== Continue ​Styling ​the Application ======
  
 Of course, to apply the new look and feel to the entire application and all its workscreens,​ further style adaptations are necessary. Of course, to apply the new look and feel to the entire application and all its workscreens,​ further style adaptations are necessary.
  
-To identify the .css selectors you need to overwrite, inspect the underlying style sheet using your browsers ​developer tools. Press ''​%%[F12]%%''​ in your browser window to open the developer tools. You can find more detailed information here:+To identify the .css selectors you need to overwrite, inspect the underlying style sheet using your browser'​s ​developer tools. Press ''​%%[F12]%%''​ in your browser window to open the developer tools. You can find more detailed information here:
  
   * [[https://​developers.google.com/​web/​tools/​chrome-devtools/​css/​|Chrome]]   * [[https://​developers.google.com/​web/​tools/​chrome-devtools/​css/​|Chrome]]
Line 260: Line 260:
   * [[https://​docs.microsoft.com/​de-de/​microsoft-edge/​devtools-guide/​elements|Microsoft Edge]]   * [[https://​docs.microsoft.com/​de-de/​microsoft-edge/​devtools-guide/​elements|Microsoft Edge]]
  
-====== Apply user-defined styles ​to individual controls ​======+====== Apply User-Defined Styles ​to Individual Controls ​======
  
-Moreover, VisionX also offers you the possibility to define you own styles and apply them to individual controls. Let's give an example: ​We want the "​Export Invoice" ​Button ​to blink twice when we hover over it with the mouse. To achieve that, copy the following ​Style information to your "Web Application Settings / Styles"​ window:+Moreover, VisionX also offers you the possibility to define you own styles and apply them to individual controls. Let's give an example: ​we want the "​Export Invoice" ​button ​to blink twice when we hover over it with the mouse. To achieve that, copy the following ​style information to your "Web Application Settings / Styles"​ window:
  
 <code css> <code css>
Line 275: Line 275:
 } }
 </​code>​ </​code>​
-We use VisionX to apply the new Style "​blinker"​ on our button. Open the WorkScreen ​"​Invoice"​ in Design Mode, right-click the "​Export Invoice" ​Button ​(1) and enter the class name "​blinker"​ in the "​Style"​ textbox (2). You can also add multiple style classes separated by a blank.+We use VisionX to apply the new style "​blinker"​ on our button. Open the workscreen ​"​Invoice"​ in design mode, right click the "​Export Invoice" ​button ​(1)and enter the class name "​blinker"​ in the "​Style"​ textbox (2). You can also add multiple style classes separated by a blank.
  
 {{:​visionx:​style_invoice_application:​style-howto.png?​nolink|Style editors}} {{:​visionx:​style_invoice_application:​style-howto.png?​nolink|Style editors}}
  
-The change is immediately visible in the Live Previewjust move your mouse over the button to see the animation.+The change is immediately visible in the Live Previewjust move your mouse over the button to see the animation.
  
-====== The styled application ​======+====== The Styled Application ​======
  
-With just a view clicks and some Style Sheet additions we gave our Invoice Application ​a new look and feel. Let's see the result of our effort:+With just a view clicks and some style sheet additionswe gave our invoice application ​a new look and feel. Let's see the result of our effort:
  
 {{:​visionx:​style_invoice_application:​result.png?​nolink|Result}} {{:​visionx:​style_invoice_application:​result.png?​nolink|Result}}
  
-You may not like the grey orange color scheme nor blinking buttons, but you will definitely like the straight-forward ​styling features of VisionX.+You may not like the grey and orange color scheme nor blinking buttons, but you will definitely like the straightforward ​styling features of VisionX.
  
 ===== Download ===== ===== Download =====
  
-You can download the entire example application from the VisionX Solution Store. The Style Sheet we created during this tutorial is available in the [[https://​doc.sibvisions.com/​_media/​visionx/​style_invoice_application/​application.css|application.css]].+You can download the entire example application from the VisionX Solution Store. The style sheet we created during this tutorial is available in the [[https://​doc.sibvisions.com/​_media/​visionx/​style_invoice_application/​application.css|application.css]].
  
  
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information