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:36]
cduncan [Continue styling the Application]
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 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