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 [2019/02/27 22:05]
robot
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 / 2019-02-27+Version: 5.1.2 / 2019-12-09
  
 ====== Introduction ====== ====== Introduction ======
  
-The objective of this tutorial is the creation of a modern web application with VisionX. It is assumed that a VisionX ​Project ​is already available.+The objective of this tutorial is the creation of a modern web application with VisionX. It is assumed that a VisionX ​project ​is already available.
  
-====== Creating a Work Screen ​======+====== Creating a Workscreen ​======
  
-First we need to create a WorkScreen ​in VisionX. Press the "New Screen" ​Button ​(1) fill in a Name and click "​Next"​ (2).+Firstwe need to create a workscreen ​in VisionX. Press the "New Screen" ​button ​(1) fill in a name and click "​Next"​ (2).
  
 {{:​visionx:​modern_web_application:​create-workscreen-step1.png?​nolink|Creating a workscreen}} {{:​visionx:​modern_web_application:​create-workscreen-step1.png?​nolink|Creating a workscreen}}
  
-In the following wizard select "Empty application screen"​ and press "​Finish"​ to create an empty Screen.+In the following wizardselect "Empty application screen"​ and press "​Finish"​ to create an empty screen.
  
 {{:​visionx:​modern_web_application:​create-workscreen-step2.png?​nolink|Selecting an empty layout}} {{:​visionx:​modern_web_application:​create-workscreen-step2.png?​nolink|Selecting an empty layout}}
Line 20: Line 19:
 ====== Changing the Layout ====== ====== Changing the Layout ======
  
-For our modern web application we use a so called "​Editing Panel" to edit customer data.+For our modern web applicationwe use a so-called "​Editing Panel" to edit customer data.
  
-In the "​Elements"​ area pick up an "​Editing Panel" (1) and drag it (2) into the Center ​of our newly created ​Screen.+In the "​Elements"​ areapick up an "​Editing Panel" (1) and drag it (2) into the center ​of our newly created ​screen.
  
 {{:​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. In the "Datasource Wizard" ​we therefore select the "Use existing data from database tables"​ option (2). Press next (3) to continue.+For our next stepwe need a table to store our customer data in. For this purposeclick the green plus in the bottom of your VisionX ​designer ​under the label "NEW Table" (1). For this tutoriallet'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 Wizardwethereforeselect 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}}
  
-The customer table is available in the applications database so we select the "Use Application Database User" option for the connection.+The customer table is available in the applications databaseso we select the "Use Application Database User" option for the connection.
  
 {{:​visionx:​modern_web_application:​create-table-step2.png?​nolink|Use the applications database user}} {{:​visionx:​modern_web_application:​create-table-step2.png?​nolink|Use the applications database user}}
  
-In the third step we select the company table in the table dropdown and finish the creation of the table with "​Finish"​.+In the third stepwe select the company table in the table dropdown and finish the creation of the table with "​Finish"​.
  
 {{:​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 tablewe can now start with the layout of our screen. In this stepwe add the table (1) to our panel. Furthermorewe 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}}
  
-This is how our Screen ​should look in the Designer ​by now:+This is how our screen ​should look in the designer ​by now:
  
 {{:​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 donewe 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}}
  
-After this our layout for the master screen is done.+After thisour layout for the master screen is done.
  
-Now we can start creating the form to manage the customer data. For this we select the "​Form"​ tab in our Editing Panel. Next we need to add a panel in the center of this tab. From the lower part of the Designer ​we can now select our unused editors (1) and drag them into our panel. After our editors are set in place we add some labels (2) and a panel with the three "Web Element"​ (3) buttons "​Save",​ "​Delete"​ and "​Cancel"​ on the bottom.+Now we can start creating the form to manage the customer data. For thiswe select the "​Form"​ tab in our editing panel. Nextwe need to add a panel in the center of this tab. From the lower part of the designer, ​we can now select our unused editors (1) and drag them into our panel. After our editors are set in placewe add some labels (2) and a panel with the three "Web Element"​ (3) buttons "​Save",​ "​Delete"​ and"​Cancel"​ on the bottom.
  
 {{:​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 againthis 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 placethis 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}}
  
-To give our application a nice and modern look we are going to change the design in VisionX. For this we select the Dropdown ​next to "​Settings"​ in the right VisionX ​Toolbar ​and press "​Web"​ (1).+To give our application a nice and modern lookwe are going to change the design in VisionX. For thiswe select the dropdown ​next to "​Settings"​ in the right VisionX ​toolbar ​and press "​Web"​ (1).
  
 {{:​visionx:​modern_web_application:​open-web-settings.png?​nolink|Opening the Web Settings}} {{:​visionx:​modern_web_application:​open-web-settings.png?​nolink|Opening the Web Settings}}
  
-In the following wizard change the "​Display mode" to "​Corporation"​.+In the following wizardchange the "​Display mode" to "​Corporation"​.
  
 {{:​visionx:​modern_web_application:​set-web-design.png?​nolink|Change Web Design}} {{:​visionx:​modern_web_application:​set-web-design.png?​nolink|Change Web Design}}
  
-This is how our Screen ​looks with the Corporation ​mode now:+This is how our screen ​looks with the corporation ​mode now:
  
 {{:​visionx:​modern_web_application:​layout-valo.png?​nolink|Change Web Design}} {{:​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 donewe 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. 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. The "​Cancel"​ button reverts the changes done to the currently selected Customer and selects the "​Table"​ tab.
  
-What we are going to need to do is to remove the navigation of the Editing Panel and set the Display Mode to "​Inline"​. ​For 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 thiswe have to select the editing panel and click on the edit icon (1). In the menuwe 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}} {{:​visionx:​modern_web_application:​remove-navigation.png?​nolink|Removing the Editing Panel navigation}}
  
-====== Giving the application ​the last touch ======+====== Giving the Application ​the Final Touch ======
  
-To give our modern web application the last touch we are going to have to make some changes in the source code itself. For this 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 this, we 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". 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