Differences

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

--- visionx:modern_web_application [2020/06/08 10:47]
cduncan [Changing the Layout]
+++ visionx:modern_web_application [2021/11/18 11:29] (current)
admin
@@ Line 1: / Line 1: @@
 ~~NOTRANS~~
 ~~Title: Modern web application~~
 Version: 5.1.2 / 2019-12-09
@@ Line 26: / Line 25: @@
 {{: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}}
@@ Line 38: / Line 37: @@
 {{: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}}
@@ Line 46: / Line 45: @@
 {{: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}}
@@ Line 56: / Line 55: @@
 {{: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}}
-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}}
@@ Line 76: / Line 75: @@
 {{:visionx:modern_web_application:layout-valo.png?nolink|Change Web Design}}
-====== Adding some Functionality ======
+====== Adding Some Functionality ======
-Now that we have the layouts done we can start to implement some functionality for our application. Most of this is done implicitly by the "Web Elements" buttons we added.
+Now that we have the layouts done, we can start to implement some functionality for our application. Most of this is done implicitly by the "Web Elements" buttons we added.
 The "New" button adds a new Customer and selects the "Form" tab to edit it.
@@ Line 88: / Line 87: @@
 The "Cancel" button reverts the changes done to the currently selected Customer and selects the "Table" tab.
-As the next step we have to remove the navigation of the Editing Panel and set the Display Mode to "Inline". This settings will change the layout of the Panel from Tabset to Panel without Tabs. Every click in the table will show the Form. To do this, we have to select the Editing Panel and click on the edit icon (1). In the menu we deselect "Show Navigation" (2) and change the "Display Mode" to "Inline" and "Navigation Mode" to "Single Click" (3).
+As the next step, we have to remove the navigation of the editing panel and set the display mode to "Inline". This settings will change the layout of the panel from Tabset to Panel without Tabs. Every click in the table will show the Form. To do this, we have to select the editing panel and click on the edit icon (1). In the menu, we deselect "Show Navigation" (2) and change the "Display Mode" to "Inline" and "Navigation Mode" to "Single Click" (3).
 {{: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 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.
 <code java>
@@ Line 101: / Line 100: @@
 tableCustomer.setEditable(false);
 </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 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 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 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".
 <code css>
@@ Line 114: / Line 113: @@
 {{: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 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.
 {{: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 done, let's look at 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 that shows our finished application:
 {{:visionx:modern_web_application:master-screen.png?nolink|The master screen}}