Parent | Child | Previous | Next
 

UX Component - Videos

IN THIS PAGE

Description

Over 40 videos describing how to create, manipulate, and improve a UX component.

D1 - Overview

Number D1. Overview of the UX Component - This video gives an overview of the UX component and contrasts it with the Grid Component

D2 - Creating

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.

D3 - Editing in Tree and Wyswyig Mode - Setting Properties in Multiple Controls at Once

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.

D4 - Complex Layout Using Frames, Containers, Tabs and Accordions

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.

D5 - Copying Controls from one Component to Another

Number D5. This video shows how you can copy controls from one UX component to another.

D6 - Repeating Sections

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.

D7 - Submitting Data

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)

D8 - Validating Data

Number D8. The UX component has an extremely rich set of features for validating data in the component. Validation rules can be defined declaratively, or using code (either Javascript for client-side, or Xbasic for server-side). Validation rules are evaluated on the client where possible (thus eliminating the need for an Ajax callback). Validation rules can be set to fire when the component is submitted, or immediately, when the user tabs out of a field.

These videos discuss the various validation options in the UX component.

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.

D9 - Genie Style

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.

D10 - Data Binding - Creating Tables to Match the UX Layout

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

D11 - Data Binding - Binding to Existing Tables

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.

D13 - Repeating Sections - Scrollable Containers

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.

D14 - Eye candy - Adding free-form text to the UX

>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.

D16 - Setting Multiple Properties at Once Using Xbasic

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

The feature shown here in the UX Component also applies to the Grid component.

D17 - Adding a Row Number to Each Row in a Repeating Section

Number D17. This video shows how you can add a row number to each row in a UX Repeating Section.

D18 - Button Styling Options

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)

D19 - Field Level Validation in the DialogValidate Event

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.

D20 - Populating a UX Component with Data from one or more Tables

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.

D21 - Creating a Button to Make a Callback to the Server and Populate the UX Component with Data for a Specified Record

Number D21. After a UX component has been opened, you might want to have a button that does an Ajax callback to populate the UX with data for a specific record. This video shows how you can use Action Javascript to define the code for a button that will populate the UX. The primary key of the record you want to retrieve is read from a control on the UX.

D22 - Sending E-mail From a UX component

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.

D23 - Understanding the 'Prevent Container Float' Property on a Container Control

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

Number D24. This video shows how you can use a UX component in conjunction with a Grid component. The UX component can be used to edit existing records in the Grid, and to enter new records. No programming is required. All code is automatically generated using Action Javascript and Server-side Action Scripting.

(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)

D25 - Placing Grid Lines on the UX Component Background in Preview Mode to Help Set Control Sizes

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.

D26 - Using Action Javascript to Open a UX Component and Populate it with Data from a Table

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.

D27 - Using Action Javascript to Lock the Page, or a Portion of the Page During an Ajax Callback

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.

In this video we show how you can use Action Javascript to lock either the entire screen, or a portion of the screen.

The video shows how this is done in a UX component, but the technique applies equally well to a Grid component.

D28 - Using a UX component as an Alternate Editing View of a Record in a Grid

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).

D29 - Creating a New UX Component From a Template

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.

D30 - Understanding How Data From Repeating Sections is Submitted

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.

D31 - Edit-Combo - AfterSelect Event - AjaxCallback

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.

D33 - Duplicate and Copy Rows in a Repeating Section

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.

D35 - Moving Rows in a Repeating Section Up or Down and Swapping Rows in a Repeating Section

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)

D36 - Sorting Data in a Repeating Section

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)

D37 - Opening a Component and then Executing Javascript Code in the Target Component - Circumventing the Asynchronous Nature of Ajax Callbacks.

Number D37. Often, when using Action Javascript, you might define an action to open a component (say a Grid or a UX Component) and then you might define a subsequent action to perform some command on the component you just opened. This does not work because the second action executes before the first action has completed - since the first action is an Ajax callback, and it is therefore asynchronous.

These videos show a technique that you can use to work around the asynchronous nature of Ajax callbacks.

Watching video M43 first might be helpful.

D38 - Using Hidden Fields in a Repeating Section

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.

D40 - Processing JSON Data to Display Feeds from Twitter in Alpha Anywhere.

Number D40. These videos provide a detailed overview of consuming and processing the JSON results from the Twitter Search API. A client side example using JavaScript and jQuery is included as well as a server side example using Xbasic. The data from Twitter are displayed in UX components.

To download the components used in these videos click here.

D41 - Dynamically Re-populate a DropdownBox Control in a UX or Grid Component.

Number D41. This video shows how you can make an Ajax callback to get a new set of choices to display in a Dropdownbox in either a Grid or UX component and then send back the necessary Javascript code to repopulate the choices that are shown in the Dropdownbox control.

D42 - Evaluating Javascript contained in tags in an Ajax response

Number D42. When you make an Ajax callback to populate an element on a page with some content, any Javascript that is contained in tags in the content you are populating the element with is not executed. Here is how you can find any code within tags and execute it.

Applies to both UX and Grid. Complex

D43 - Hiding Controls on a UX and then Showing Them in a Pop-up Window.

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.

D44 - Working with an IFrame on a UX

Number D44. This video shows how you use Javascript to set the properties of an IFrame control in a UX component.

D45 - Add a File Download Feature to a UX component

Number D45. This video shows how you can add a file download feature to a UX component.