Differences

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

--- visionx:first_application [2018/02/06 21:46]
robot
+++ — (current)
@@ Line 1: / Line 1: @@
-~~NOTRANS~~
-~~Title: First VisionX Application~~
-Version: 5.0 / 2018-02-06
-====== Introduction ======
-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 ======
-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.}}
-The New Application Wizard will open and lead you through the necessary steps of creating an application from scratch. In this case we will name the application "First Application".
-{{: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" button, because we do not need them right now. For this first application we will not change any of the other default values.
-====== 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: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".
-{{: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 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.}}
-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.
-  * Name
-  * Email
-  * Phone
-  * Website
-  * Contact - Name
-  * Contact - Phone
-{{:visionx:first_application:new-workscreen-wizard-model-2.png?nolink|The model with added columns.}}
-With these columns added, we will also take the opportunity and mark multiple columns as "Mandatory". Mandatory columns must be filled out when a new record is created.
-{{:visionx:first_application:new-workscreen-wizard-model-3.png?nolink|The model with added columns.}}
-We can skip over the remaining steps and click "Finish" to create the workscreen and its model at the same time.
-====== Editing the workscreen ======
-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.}}
-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.
-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).
-{{: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.
-{{:visionx:first_application:design-mode-3.png?nolink|The new workscreen in Design Mode with the customizer open.}}
-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 ======
-In Runtime Mode we see the screen in all its glory.
-{{:visionx:first_application:first-application.png?nolink|The new workscreen in Runtime Mode.}}
-We can now start adding data to the database. Pressing the "Add" button of the table will give us a new record which we can enter data into.
-{{:visionx:first_application:first-application-2.png?nolink|The new workscreen in Runtime Mode with data.}}
-====== 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.
-{{: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.
-{{:visionx:first_application:first-application-web.png?nolink|The application in the Live Web Preview.}}
-Now open the workscreen we've created from the left hand panel.
-{{: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.