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:first_application [2019/02/27 22:05]
robot
visionx:first_application [2022/03/31 07:17]
admin removed
Line 2: Line 2:
  
 ~~Title: First VisionX Application~~ ~~Title: First VisionX Application~~
-Version: 5.0 / 2019-02-27+Version: 5.0 / 2019-07-01
  
 ====== Introduction ====== ====== Introduction ======
Line 8: Line 8:
 This tutorial will now walk you through the process of creating your first application with VisionX. If you not have done so by now, please start VisionX. This tutorial will now walk you through the process of creating your first application with VisionX. If you not have done so by now, please start VisionX.
  
-====== Creating a new application ​======+====== Creating a New Application ​======
  
-A new application can be created by clicking the "​Custom Application"​ button (1) in the VisionX main viewor by clicking the "​Add"​ button (2).+A new application can be created by clicking the "​Custom Application"​ button (1) in the VisionX main view or by clicking the "​Add"​ button (2).
  
 {{:​visionx:​first_application:​visionx-main-window.png?​nolink|The VisionX main window.}} {{:​visionx:​first_application:​visionx-main-window.png?​nolink|The VisionX main window.}}
Line 18: Line 18:
 {{:​visionx:​first_application:​new-application-wizard.png?​nolink|The first step of the New Application Wizard.}} {{:​visionx:​first_application:​new-application-wizard.png?​nolink|The first step of the New Application Wizard.}}
  
-We will skip the remaining steps in the wizard by clicking the "​Finish"​ buttonbecause we do not need them right now. For this first application we will not change any of the other default values.+We will skip the remaining steps in the wizard by clicking the "​Finish"​ button because we do not need them right now. For this first applicationwe will not change any of the other default values.
  
-====== Creating a new workscreen ​======+====== Creating a New Workscreen ​======
  
-VisionX will now drop us into our new application. Because there are currently no workscreens in this application,​ VisionX automatically opens the Next Steps Wizard which allows to directly create a new workscreen.+VisionX will now drop us into our new application. Because there are currently no workscreens in this application,​ VisionX automatically opens the Next Steps Wizard which allows ​us to directly create a new workscreen.
  
 {{:​visionx:​first_application:​next-steps-wizard.png?​nolink|The first step of the Next Steps Wizard.}} {{:​visionx:​first_application:​next-steps-wizard.png?​nolink|The first step of the Next Steps Wizard.}}
  
-We will follow this wizard now to create a new workscreen which allows us to create, change and delete contact information of companies. This wizard does not only create the workscreen, but also the data model in the database required for it. Click "​Next"​ in the Next Steps Wizard to go to the step for creating a new workscreen. When prompted for the name of the new workscreen, name it "​Companies"​.+We will follow this wizard now to create a new workscreen which allows us to create, changeand delete contact information of companies. This wizard does not only create the workscreen, but also the data model in the database required for it. Click "​Next"​ in the Next Steps Wizard to go to the step for creating a new workscreen. When prompted for the name of the new workscreen, name it "​Companies"​.
  
 {{:​visionx:​first_application:​new-workscreen-wizard.png?​nolink|Setting the name of the new workscreen.}} {{:​visionx:​first_application:​new-workscreen-wizard.png?​nolink|Setting the name of the new workscreen.}}
  
-You can skip over the next few steps by clicking "​Next"​ and not changing the defaultsuntil you arrive the step for creating the model of the new workscreen.+You can skip over the next few steps by clicking "​Next"​ and not changing the defaults until you arrive the step for creating the model of the new workscreen.
  
 {{:​visionx:​first_application:​new-workscreen-wizard-model.png?​nolink|Creating the model for the new workscreen.}} {{:​visionx:​first_application:​new-workscreen-wizard-model.png?​nolink|Creating the model for the new workscreen.}}
  
-As we can see there are currently no columns in the data model. We will add several to be able to store further information about the companies. The data type will be chosen automatically based on the name of the column.+As we can seethere are currently no columns in the data model. We will add several to be able to store further information about the companies. The data type will be chosen automatically based on the name of the column.
  
   * Name   * Name
Line 51: Line 51:
 We can skip over the remaining steps and click "​Finish"​ to create the workscreen and its model at the same time. We can skip over the remaining steps and click "​Finish"​ to create the workscreen and its model at the same time.
  
-====== Editing the workscreen ​======+====== Editing the Workscreen ​======
  
-VisionX will now switch to the Design Mode with our new workscreen open.+VisionX will now switch to the design mode with our new workscreen open.
  
 {{:​visionx:​first_application:​design-mode.png?​nolink|The new workscreen in Design Mode.}} {{:​visionx:​first_application:​design-mode.png?​nolink|The new workscreen in Design Mode.}}
  
-In this mode we can change the screen interactively. We can drag components, add new ones or edit the model. The Design Mode can be toggled any time by pressing the "​Design"​ button in the upper right corner.+In this mode we can change the screen interactively. We can drag components, add new onesor edit the model. The design mode can be toggled any time by pressing the "​Design"​ button in the upper right corner.
  
-We will now edit the screen and add a generic search field to it. For this drag the search field (1) from the model pane into the screen to the top edge of the table (2).+We will now edit the screen and add a generic search field to it. In order to do thisdrag the search field (1) from the model pane into the screen to the top edge of the table (2).
  
 {{:​visionx:​first_application:​design-mode-2.png?​nolink|The new workscreen in Design Mode with an added search filter.}} {{:​visionx:​first_application:​design-mode-2.png?​nolink|The new workscreen in Design Mode with an added search filter.}}
  
-Also we do not need all columns in the table view. Open the customizer with a right click on the table and uncheck the columns that are not needed.+Additionally, ​we do not need all columns in the table view. Open the customizer with a right click on the table and uncheck the columns that are not needed.
  
 {{:​visionx:​first_application:​design-mode-3.png?​nolink|The new workscreen in Design Mode with the customizer open.}} {{:​visionx:​first_application:​design-mode-3.png?​nolink|The new workscreen in Design Mode with the customizer open.}}
Line 69: Line 69:
 Now that we have the screen ready, we can switch to Runtime Mode by pressing the "​Finish"​ button in the top right corner. Now that we have the screen ready, we can switch to Runtime Mode by pressing the "​Finish"​ button in the top right corner.
  
-====== Adding ​data ======+====== Adding ​Data ======
  
-In Runtime Mode we see the screen in all its glory.+In runtime mode we see the screen in all its glory.
  
 {{:​visionx:​first_application:​first-application.png?​nolink|The new workscreen in Runtime Mode.}} {{:​visionx:​first_application:​first-application.png?​nolink|The new workscreen in Runtime Mode.}}
Line 79: Line 79:
 {{:​visionx:​first_application:​first-application-2.png?​nolink|The new workscreen in Runtime Mode with data.}} {{:​visionx:​first_application:​first-application-2.png?​nolink|The new workscreen in Runtime Mode with data.}}
  
-====== Taking a test drive ======+====== Taking a Test Drive ======
  
-Our new application is now ready to be taken on a test drive. You can start the Live Web Preview ​by clicking the "​Preview"​ button in the toolbar.+Our new application is now ready to be taken on a test drive. You can start the live web preview ​by clicking the "​Preview"​ button in the toolbar.
  
 {{:​visionx:​first_application:​first-application-3.png?​nolink|The new workscreen in Runtime Mode with data.}} {{:​visionx:​first_application:​first-application-3.png?​nolink|The new workscreen in Runtime Mode with data.}}
  
-Your default browser will be opened with the Live Web Preview ​of your application. You can log into it by using the default credentials"​admin"​ as username and "​admin"​ as password.+Your default browser will be opened with the live web preview ​of your application. You can log into it by using the default credentials"​admin"​ as username and "​admin"​ as password.
  
 {{:​visionx:​first_application:​first-application-web.png?​nolink|The application in the Live Web Preview.}} {{:​visionx:​first_application:​first-application-web.png?​nolink|The application in the Live Web Preview.}}
Line 93: Line 93:
 {{:​visionx:​first_application:​first-application-web-2.png?​nolink|The application in the Live Web Preview.}} {{:​visionx:​first_application:​first-application-web-2.png?​nolink|The application in the Live Web Preview.}}
  
-And we've built a complete application in mere minutes with VisionX.+And we've built a complete application in mere minutes with VisionX!
  
  
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information