How Dialog Forms Work
This page documents how the Dialog Forms in Truxton work, or forms that pop up in a modal window work.
UI Guide Menu
Overview
- In the Truxton Analyst App, there are a few pages that have forms to add or update data related to that page. A few examples include: Subjects, Media, and Investigator.
- Generally, to change data related to those models, you would go to that page, click a button that opens a form, change the data, and click the button when you are done. When this happens, there are a lot of things happening behind the scenes. A lot of it abstracted out so that there is a centralized code for the common functionality.
- For each model, there is a "-PageViewModel", "-Form", "-ViewModel", "-.xaml".
Resource Summary PageViewModel.cs This class loads and manages the data on the page, the view that you look at when you navigate using the navigation menu. The page will contain a form but the form's logic and UI is stored elsewhere. Form.cs This class loads and manages the data on the Dialog Form, the form that you see when you're on the page and you click the "add" or "new" button. The xaml bindings are here mostly. The FormItems properties are loaded here but they are not defined here. This class also converts the FormItem model to the main Model. ViewModel.cs This class defines the Model for the FormItem. The FormItem is the model loaded by -Form.cs that contains all the data from the UI. .xaml Found in Templates/Forms, this xaml defines the form UI. Not to be confused with the View's xaml which may be later added into this wiki.
Creating a New Form
If you need to create a new form, you need to create the appropriate xamls and classes from above and then register them in Templates.xaml.
In addition, for the FormDialog to find the correct FormTemplate, the following need to match:
Resource Code Media.xaml <DataTemplate x:Key="MediaForm">
MediaForm.cs public override IFormDialogSettings GetFormDialogSettings(FormMode mode) { var settings = new TruxtonClientFormDialogSettings() { NegativeButtonText = "Cancel", FormTemplateName = "MediaForm" };Templates.xaml <pc:SharedResourceDictionary Source="/Truxton Analyst;component/Templates/Forms/Media.xaml" />
As seen above, the Template source registers the Media.xaml page as a resource that can be searched. The Key and FormTemplateName must match for the proper form to be loaded into the dialog.
How the FormDialog loads the templates
A FormDialogViewModel takes two Generic parameters that determine which form to use.
FormDialogViewModel<TForm, TFormItem>
In the intended View/ViewModel, a FormDialog parameter is loaded via dependency injection. The proper generics are inserted in the View/ViewModel.
public FormDialogViewModel<MediaForm, MediaViewModel> FormDialog { get; set; }
public MediaMenuViewModel(FormDialogViewModel<MediaForm, MediaViewModel> formDialog)
{ FormDialog = formDialog; }
The Generic determine which form to use. Above we've used MediaForm and MediaViewModel.
The MediaForm class extends BaseFormViewModel, which also contain generics for the Form's ViewModel and the Model that the form is using/updating.
abstract class BaseFormViewModel<TFormItem, TModel>
In this MediaForm/BaseFormViewModel, this class will contain all the code that occurs when the form is New(Instantiated)/Updated/Saved/Deleted.
Since MediaForm extends the abstract class BaseFormViewModel, it'll need the generics defined.
public class MediaForm : BaseFormViewModel<MediaViewModel, MediaModel>
The TFormItem, or in this case MediaViewModel, will contain the data presented to the form or UI.
The TModel, or in this case the MediaModel, will contain the data stored in the database
