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:modern_web_application [2020/06/08 10:49]
cduncan [Adding some Functionality]
visionx:modern_web_application [2021/11/18 11:29] (current)
admin
Line 1: Line 1:
 ~~NOTRANS~~ ~~NOTRANS~~
- 
 ~~Title: Modern web application~~ ~~Title: Modern web application~~
 Version: 5.1.2 / 2019-12-09 Version: 5.1.2 / 2019-12-09
Line 26: Line 25:
 {{:​visionx:​modern_web_application:​add-morphpanel.png?​nolink|Adding an Editing Panel}} {{:​visionx:​modern_web_application:​add-morphpanel.png?​nolink|Adding an Editing Panel}}
  
-For our next step, we need a table to store our customer data in. For this purpose, click the green plus in the bottom of your VisionX designer under the label "NEW Table" (1). For this tutorial, let's assume we already have a customer table available in our database. If you don't have an existing customer table, simply create a new screen with demo customers from [[https://​doc.sibvisions.com/​_media/​visionx/​modern_web_application/​customers.csv|this]] spreadsheet. In the "Datasource Wizard", we, therefore, select the "Use existing data from database tables"​ option (2). Press next (3) to continue.+For our next step, we need a table to store our customer data in. For this purpose, click the green plus in the bottom of your VisionX designer under the label "NEW Table" (1). For this tutorial, let's assume we already have a customer table available in our database. If you don't have an existing customer table, simply create a new screen with demo customers from [[https://​doc.sibvisions.com/​_media/​visionx/​modern_web_application/​customers.csv|this]] spreadsheet. In the Datasource Wizard, we, therefore, select the "Use existing data from database tables"​ option (2). Press next (3) to continue.
  
 {{:​visionx:​modern_web_application:​create-table-step1.png?​nolink|Creating a table from an existing table}} {{:​visionx:​modern_web_application:​create-table-step1.png?​nolink|Creating a table from an existing table}}
Line 38: Line 37:
 {{:​visionx:​modern_web_application:​create-table-step3.png?​nolink|Select the database table}} {{:​visionx:​modern_web_application:​create-table-step3.png?​nolink|Select the database table}}
  
-Having created the table, we can now start with the layout of our screen. In this step, we add the table (1) to our panel. Furthermore,​ we are adding ​a search bar (2) and an insert button from the "Web Elements"​ (3) to create a new customer.+Having created the table, we can now start with the layout of our screen. In this step, we add the table (1) to our panel. Furthermore,​ we add a search bar (2) and an insert button from the "Web Elements"​ (3) to create a new customer.
  
 {{:​visionx:​modern_web_application:​create-table-layout.png?​nolink|Layouting our table}} {{:​visionx:​modern_web_application:​create-table-layout.png?​nolink|Layouting our table}}
Line 46: Line 45:
 {{:​visionx:​modern_web_application:​create-table-layout-designer.png?​nolink|The finished layout}} {{:​visionx:​modern_web_application:​create-table-layout-designer.png?​nolink|The finished layout}}
  
-With this being done, we can now look what our application looks like via the VisionX Live Preview:+With this being done, we can now see what our application looks like via the VisionX Live Preview:
  
 {{:​visionx:​modern_web_application:​create-table-layout-done.png?​nolink|The finished layout}} {{:​visionx:​modern_web_application:​create-table-layout-done.png?​nolink|The finished layout}}
Line 56: Line 55:
 {{:​visionx:​modern_web_application:​create-form-layout.png?​nolink|Starting on our form layout}} {{:​visionx:​modern_web_application:​create-form-layout.png?​nolink|Starting on our form layout}}
  
-Once again, this is how it should look in the designer ​now:+Once again, this is how it should look in the designer:
  
 {{:​visionx:​modern_web_application:​create-form-layout-designer.png?​nolink|The finished layout}} {{:​visionx:​modern_web_application:​create-form-layout-designer.png?​nolink|The finished layout}}
  
-After having set everything in place, this is how our form is looking ​in the Live Preview:+After having set everything in place, this is how our form looks in the Live Preview:
  
 {{:​visionx:​modern_web_application:​create-form-layout-done.png?​nolink|Starting on our form layout}} {{:​visionx:​modern_web_application:​create-form-layout-done.png?​nolink|Starting on our form layout}}
Line 92: Line 91:
 {{:​visionx:​modern_web_application:​remove-navigation.png?​nolink|Removing the Editing Panel navigation}} {{:​visionx:​modern_web_application:​remove-navigation.png?​nolink|Removing the Editing Panel navigation}}
  
-====== Giving the application ​the final touch ======+====== Giving the Application ​the Final Touch ======
  
-To give our modern web application the final touch we have to make some changes in the source code itself. For this we are going to make the table readonly. Most web applications don't show the selected row in a table so we are going to disable that as well.+To give our modern web application the final touchwe have to make some changes in the source code itself. For thiswe are going to make the table readonly. Most web applications don't show the selected row in a tableso we are going to disable that as well.
  
 <code java> <code java>
Line 101: Line 100:
 tableCustomer.setEditable(false);​ tableCustomer.setEditable(false);​
 </​code>​ </​code>​
-We are also going to add a menu button next to the "​New"​ button ​which lets us delete a row and export the table. For this we grab the "Menu Button"​ from the "Web Elements"​ and position where we want it to be. Additionally we are going to add some margins between the searchbar ​and the buttons.+We are also going to add a menu button next to the "​New"​ button ​that lets us delete a row and export the table. For thiswe grab the "Menu Button"​ from the "Web Elements"​ and position where we want it to be. Additionallywe are going to add some margins between the search bar and the buttons.
  
-To change up the design a bit we are going to add edit the stylesheet of this application in order to style the title of our form. For this we once again open the "​Web"​-Settings ​in VisionX like we did when changing the "​Display mode" (Settings -> Web). In the following ​Wizard ​we select the "​Style" ​Tab and set the font-size to 20px and the font to OpenSans.+To change up the design a bitwe are going to add edit the stylesheet of this application in order to style the title of our form. For thiswe once again open the "​Web"​settings ​in VisionX like we did when changing the "​Display mode" (Settings -> Web). In the following ​wizard, ​we select the "​Style" ​tab and set the font-size to 20px and the font to "OpenSans".
  
 <code css> <code css>
Line 114: Line 113:
 {{:​visionx:​modern_web_application:​change-stylesheet.png?​nolink|Chainging the stylesheet}} {{:​visionx:​modern_web_application:​change-stylesheet.png?​nolink|Chainging the stylesheet}}
  
-To set the style we have to edit the label (1) which is once again done by pressing the edit button. Set the style to "​company-edit"​ (2) and we are done.+To set the stylewe have to edit the label (1)which isonce againdone by pressing the edit button. Set the style to "​company-edit"​ (2)and we are done.
  
 {{:​visionx:​modern_web_application:​set-style.png?​nolink|Setting the style}} {{:​visionx:​modern_web_application:​set-style.png?​nolink|Setting the style}}
  
-====== The finished application ​======+====== The Finished Application ​======
  
-With this done this let's look how our application is looking in a web environment. For this we once again use the "​Preview" ​Button ​in VisionX. This will start a browser window ​which shows our finished application:​+With this donelet's look at how our application is looking in a web environment. For thisweonce againuse the "​Preview" ​button ​in VisionX. This will start a browser window ​that shows our finished application:​
  
 {{:​visionx:​modern_web_application:​master-screen.png?​nolink|The master screen}} {{:​visionx:​modern_web_application:​master-screen.png?​nolink|The master screen}}
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information