UX Component - Videos
- D1 - Overview
- D2 - Creating
- D3 - Editing in Tree and Wyswyig Mode - Setting Properties in Multiple Controls at Once
- D4 - Complex Layout Using Frames, Containers, Tabs and Accordions
- D5 - Copying Controls from one Component to Another
- D6 - Repeating Sections
- D7 - Submitting Data
- D8 - Validating Data
- D9 - Genie Style
- D10 - Data Binding - Creating Tables to Match the UX Layout
- D11 - Data Binding - Binding to Existing Tables
- D12 - Creating Multiple Tables to match the Structure of a UX Component that has one or more Repeating Section
- D13 - Repeating Sections - Scrollable Containers
- D14 - Eye candy - Adding free-form text to the UX
- D15 - Grid Component - Calling a UX component from a Grid and then Passing Information from the UX to the Grid
- D16 - Setting Multiple Properties at Once Using Xbasic
- D17 - Adding a Row Number to Each Row in a Repeating Section
- D18 - Button Styling Options
- D19 - Field Level Validation in the DialogValidate Event
- D20 - Populating a UX Component with Data from one or more Tables
- D21 - Creating a Button to Make a Callback to the Server and Populate the UX Component with Data for a Specified Record
- D22 - Sending E-mail From a UX component
- D23 - Understanding the 'Prevent Container Float' Property on a Container Control
- D24 - Using a UX component to Edit a Record in a Grid Component, or Enter a new Record into a Grid Component
- D25 - Placing Grid Lines on the UX Component Background in Preview Mode to Help Set Control Sizes
- D28 - Using a UX component as an Alternate Editing View of a Record in a Grid
- D29 - Creating a New UX Component From a Template
- D30 - Understanding How Data From Repeating Sections is Submitted
- D31 - Edit-Combo - AfterSelect Event - AjaxCallback
- D32 - Embedding a Grid Component inside a UX component and Executing Methods on the Grid from the UX
- D33 - Duplicate and Copy Rows in a Repeating Section
- D34 - Extended Demo Showing How Tables Can be Created from the UX Component Definition, and Data Can Be Entered into Repeating Sections
- D35 - Moving Rows in a Repeating Section Up or Down and Swapping Rows in a Repeating Section
- D36 - Sorting Data in a Repeating Section
- D38 - Using Hidden Fields in a Repeating Section
- D39 - Understanding what's in the e.dataSubmitted and e.oldDataSubmitted Objects when the UX Component is Submitted.
- D40 - Processing JSON Data to Display Feeds from Twitter in Alpha Anywhere.
- D41 - Dynamically Re-populate a DropdownBox Control in a UX or Grid Component.
- D43 - Hiding Controls on a UX and then Showing Them in a Pop-up Window.
- D44 - Working with an IFrame on a UX
- D45 - Add a File Download Feature to a UX component
Over 40 videos describing how to create, manipulate, and improve a UX component.
Number D1. Overview of the UX Component - This video gives an overview of the UX component and contrasts it with the Grid Component
Number D2. Creating a new UX - This video shows how to create a new UX component. You can create controls one by one, or use one of several shortcut methods. You can also insert controls from a 'Control Library', and you can add your own controls to the Control Library.
Number D3. This video shows how you can edit the UX component properties in either Tree View or Wyswyig Mode. You can change multiple properties at once by pasting a property value from one control to multiple controls and you can also edit in the Xbasic view.
Number D4. This video shows how you use different types of containers - simple containers, frames, tabs and accordions to control the layout of a UX. By wrapping controls in containers and then turning on/off the breaks between containers, you can achieve complex UX layouts.
Number D5. This video shows how you can copy controls from one UX component to another.
Number D6. The UX Component can be used for 'Master-Detail' style forms. This is done by putting a 'Repeating Section' on the UX. Any controls that are inside the 'Repeating Section' will repeat as many times as you specify. At runtime, when the user is filling in the form, they can click a button to add a new row to the Repeating Section if they need more rows.
This video shows how you can create a simple invoice form with a Repeating Section. The video then shows how you can define client-side calculated fields to show the extended total (Price * Quantity) for each row as data is entered and also client-side summary fields that sum the extended total for all of the rows in the Repeating Section.
Number D7. This video shows how you can put a button on the UX to submit the data in the UX component to the server and then how the AfterDialogValidate event is fired where your Xbasic code can handle the event.
Typically, your Xbasic event handler would save the submitted data to a table. You are free to write your own code to perform this task, or you can use Server-Side Action Scripting to write the code for you (as shown in a subsequent video)
These videos discuss the various validation options in the UX component.
- Watch Video - Part 1
- Watch Video - Part 2
- Watch Video - Part 3
- Watch Video - Part 4
- Watch Video - Part 5
- Watch Video - Part 6
- Watch Video - Part 7
Validating data in a Repeating Section
In this video we show how the visual effects used in the examples shown in the above videos were created.
Number D9. When building UX Components that have a large number of fields, it is common to present the controls to the user in 'genie' or 'wizard' style. In this style 'page 1' of the UX is shown, with a next button at the bottom of the UX. When the user has entered data into the controls on page 1, pressing Next moves to page 2, and so on.
Typically, the user cannot move to the next page until the data on the current page has been validated.
This video shows how easy it is to create 'Genie' style UX components.
Number D10. When you create a UX component, you will often want to store the data the user submits in a table. In some cases, when you design the UX, you will already have an existing table. However, there may be cases where you design the UX first, and only then create the table into which the data will be stored.
These videos show how you can design a UX component, and then automatically create one or more tables to match the structure of your UX component.
Entering data into the newly created table
Number D11. After you create a UX component, you may want to 'bind' the controls in the UX to one or more existing tables so that you can use Server-side Action Scripting to automatically enter data into tables.
(You can't use Server-side Action Scripting until you have first 'bound' the UX to tables).
In this video we show how you can bind the controls in a UX to a table.
Once the controls have been bound, we then show how you can use Server-side Action Scripting to enter or edit records in the table.
D12 - Creating Multiple Tables to match the Structure of a UX Component that has one or more Repeating Section
Number D12. These next set of videos show how, if the UX has Repeating Sections, when you can create both the Master and Detail tables automatically. Alpha Anywhere analyzes the structure of your UX Component and lets you create multiple tables, linked in either one-to-one, or one-to-many relationships.
Next, the videos also show how Server Side action scripting can be used to insert, update and delete records in the tables. In the case where the UX is bound to a SQL database, all of the SQL statements can be wrapped in a single transaction.
Number D13. If you have a Repeating Section in a UX, you can put buttons below the Repeating Section to add or remove rows from the Repeating Section. When you add or remove rows, all of the controls on the UX that are below the Repeating Section will move up and down as the size of the Repeating Section changes. You might prefer to put the Repeating Section in a fixed size, scrollable container. When you scroll this container however, you want the titles for each column in the Repeating Section to remain fixed.
This video shows how this is easily done.
>Number D14. In this video we show how some nice visual effects can be added to a UX component.
D15 - Grid Component - Calling a UX component from a Grid and then Passing Information from the UX to the Grid
Number D15. A common design pattern is to open a UX component from a button on a Grid and then pass information from the UX back to the parent Grid. This video shows how this can be done.
Number D16. This video shows how you can use an Xbasic function when you are setting properties in multiple controls at once. For example, assume that you have built a component with many controls and you would like to wrap all of the control labels in language tags ( and ), so that you can internationalize your component.
In the video we show how this is easily done
Number D17. This video shows how you can add a row number to each row in a UX Repeating Section.
Number D18. This video shows you how you can make the buttons on the UX Component look more interesting by including images on the buttons. (Requires build 3811 or above)
Number D19. By default, when you execute validation code in the DialogValidate event and you want to display a validation error to the user, the error text is displayed in a message area above the UX. This is different than Field Level validation errors, which are displayed next to the field in error. Field Level validation rules are defined at the Control level in the UX Builder.
Howerver, in some cases it is more convenient to put all of your validation logic in the DialogValidate event, but still be able to show errors next to the fields in error, rather than in the message area at the top of the UX.
This video shows how you can defined field level validation in the DialogValidate event.
Number D20. When a UX component is first opened, you might want to automatically populate the UX with data from one or more tables. This video shows how you can use Server Side Action Scripting to automatically populate a UX with a Repeating Section with data.
- Watch Video - Part 1
- Watch Video - Part 2
- Download component used in video https://www.ajaxvideotutorials.com/V11Videos/alphasports_invoice_dialogComponent.zip
D21 - Creating a Button to Make a Callback to the Server and Populate the UX Component with Data for a Specified Record
Number D22. A very common pattern in Web Applications is to display a form to capture some information (for example, name and address information), and then when the user clicks on the Submit button, store the submitted data in a table and then send an e-mail confirmation to the user.
This can be easily done with the UX component. Using Server-side Action Scripting, the entire process can be handled without having to write any code. The Alpha Anywhere Genies will write all of the code for you.
The videos show how the email message can be sent immediately, or queued in a 'WorkQueue' table.
How to Eliminate Unwanted Vertical Space when a Client-side Show/Hide Expression Hides a Control.
Number D23. (This video is aimed at advanced developers). When you use a client-side show/hide expression to show or hide a container, not all of the vertical space that is consumed by the container is removed when the container is hidden. This video explains how the Container's 'Prevent container float' property can be used to solve this problem.
D24 - Using a UX component to Edit a Record in a Grid Component, or Enter a new Record into a Grid Component
(Contrast this action with the action shown in D28 in which the UX Component is merely an alternate view of the record you are editing)
Number D25. When you layout out a UX component, getting the right edge to controls that are on different lines to be right aligned can involve quite a bit of trial and error. This video shows how you can make the process easier by displaying grid lines as a background to the UX when you are in Working or Live Preview.
Number D26. In Video D20 we show how you can populate a UX with data from one or more tables when it is first opened. In this video we show how you can create an event handler (for a UX or Grid) to open a UX component and populate the UX with data from a table. The primary key of the record to load can be read from controls in the current Component (a Grid or UX), or specified by a session variables.
Number D27. A common requirement in Ajax applications is to 'lock' the screen, or a portion of the screen, for the duration of the callback. This prevents the user from performing some action that is not appropriate during a callback. A transparent overlay is displayed over the screen or element to 'lock' it.
Number D28. If you have a lot of columns in an updateable Grid, it can be cumbersome to scroll horizontally when editing data in the Grid. In this video we show how a UX component can be used to edit the data in the Grid row. A button can be inserted into the Grid row. When the button is clicked, the UX component is opened and the current data in the Grid row is filled into the UX Component. The user can then continue editing in the UX, and then click an Update button, which closes the UX and fills in the controls in the row in the Grid that is being edited. You can toggle instantly between the Grid view and the UX view of the data.
(Contrast the behavior in this video with that of video D24. In D24, the UX Component is more than just an alternate editing view - it is responsible for saving the edits to the database. In this video, the UX is not responsible for saving data to the database - it is merely an alternate view of the data you are editing).
Number D29. Video shows how you can use a template to get a quick start when creating a new UX. You can easily create your own templates as well.
Number D30. This video is aimed at advanced developers who are writing their own event handlers for the DialogValidate or AfterDialogValidate events. It explains how the data from the RepeatingSections is represented in the e.datasubmitted object that is passed to the event handlers.
Number D31. This video discusses firing an AjaxCallback in the AfterSelect event in an edit-combo control.
This video applies to both a Grid and UX component. (This is the same as video M39)
D32 - Embedding a Grid Component inside a UX component and Executing Methods on the Grid from the UX
Number D32. In this video we show how a UX component can 'host' a Grid component (i.e. a Grid can be embedded inside a UX Component) and how the UX can call methods of the embedded Grid component.
Number D33. This video shows how methods of UX component can be used to duplicate a row in a Repeating Section or to copy a row in a Repeating Section.
D34 - Extended Demo Showing How Tables Can be Created from the UX Component Definition, and Data Can Be Entered into Repeating Sections
Number D34. A comprehensive demo showing how a UX Component with a Repeating Section can be used to create database tables and then enter data into the database.
Number D35. This video shows how you can add buttons to a UX component to move rows in a Repeating Section up or down, or swap rows in a Repeating Section. In the video we show how to use the methods that the UX component exposes for changing the order of rows in a Repeating Section. (Requires build 3852 or above)
Number D36. This video shows how you can add buttons or event handlers to a UX component to sort the data in a Repeating Section. You can sort by any column in the Repeating Section, and you can specify an ascending or descending sort. (Requires build 3854 or above)
These videos show a technique that you can use to work around the asynchronous nature of Ajax callbacks.
Number D38. When you want to hide a fields in a Repeating Section, it is not as simple as hiding a field that is in the main section of the UX Component. This video shows the extra steps that you must follow in order to hide a fields in a Repeating Section.
D39 - Understanding what's in the e.dataSubmitted and e.oldDataSubmitted Objects when the UX Component is Submitted.
Number D39. When a UX is submitted, the data in the component are submitted in the e.dataSubmitted object. In addition, the original data that was in the UX Component when the UX was originally opened are in the e.oldDataSubmitted objected. In some cases the developer will allow the UX Component to be submitted multiple times and might want to re-initialize the UX so that each time the UX is submitted, the data in the e.oldDataSubmitted object are the data that was in the UX the previous time it was submitted, and not when the UX was initially displayed.
To download the components used in these videos click here.
Applies to both UX and Grid. Complex
Number D43. This video shows how you can take certain cotrols on a UX Component that would normally be visible when the UX was run and hide them. When the user clicks a button to show the controls, the hidden controls are shown in a pop-up window.
As shown in the video, all of the controls in a specified Container control are automatically hidden and only shown in the pop-up window on demand.
Number D45. This video shows how you can add a file download feature to a UX component.