Trace:
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
visionx:modern_web_application [2020/06/08 10:51] cduncan [Giving the application the final touch] |
visionx:modern_web_application [2020/06/08 11:26] cduncan [Changing the Layout] |
||
---|---|---|---|
Line 38: | Line 38: | ||
{{: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 46: | ||
{{: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 56: | ||
{{: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 118: | Line 118: | ||
{{: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 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}} | {{:visionx:modern_web_application:master-screen.png?nolink|The master screen}} |