How to make a multi-steps registration page with multi ContentView? - mvvm

In the app I'm working on, there's a multi-steps registration, 4 steps:
to accomplish it, I'm thinking to have a single page to host a content view of the registration step, when it passes the validation requirements I remove it and inject the next content view.
This is an example to simplify my need:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamApp"
x:Class="XamApp.MainPage">
<local:Register1/>
</ContentPage>
and the Register1 looks like this:
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamApp"
x:Class="XamApp.Register1">
<ContentView.Resources>
<ResourceDictionary>
<local:IntToBoolConverter x:Key="intToBool"/>
</ResourceDictionary>
</ContentView.Resources>
<ContentView.Content>
<StackLayout>
<Label Text="Page 1" FontSize="Large"/>
<Entry x:Name="txtName" Placeholder="Name"/>
<Button Text="Next" IsEnabled="{Binding Source={x:Reference txtName},
Path=Text.Length,
Converter={StaticResource intToBool}}"
Clicked="Button_Clicked"/>
</StackLayout>
</ContentView.Content>
</ContentView>
There are two problems:
1- I don't know how to handle the data (view model) between steps, to have only one object through all steps (Shall I use DI? if yes , then how in MVVMLight?)
2- How to to inject the content view into the main registration page dynamically in an MVVM fashion?

The solution I came up with, is creating an interface:
public interface INavigate
{
INavigate Next();
INavigate Previous();
}
all the ContentViews inherit from, for example the second ContentView implementation:
public INavigate Next()
=> new View3();
public INavigate Previous()
=> new View1();
the container page's Content property is bound to the view model's property CurrentView of type INavigate,
the command of the next button execute this:
CurrentView = CurrentView.Next();
and this is for the previous button:
CurrentView = CurrentView.Previous();

Related

How to pass objects to PopupPage using MAUI.Toolkit or Mopup plugins?

I have a Maui app where I use MVVM pattern with MAUI Toolkik and also trying with Mopup plugin but I haven't found how to pass objects to Popup pages combined with MVVM. At the moment, I have a page, which I use to navigate to the PopupPage successfully and also I am able to connect the PopupPage with its viewmodel. What I am unable to do is to pass any kind of object to the PopupPage.
I have tried to set the PopupPage constructor with parameters but the methods to navigate to the PopupPage only recognize parameters setted on the code behind.
Here is my code:
Popup
<mopup:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NewScholarApp.Views.MessagePopup"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:mopup="clr-namespace:Mopups.Pages;assembly=Mopups"
xmlns:viewmodels="clr-namespace:NewScholarApp.ViewModels"
x:DataType="viewmodels:MessagePopupViewModel">
<mopup:PopupPage.BindingContext>
<viewmodels:MessagePopupViewModel/>
</mopup:PopupPage.BindingContext>
<VerticalStackLayout BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="100" WidthRequest="100">
<Label
Text="{Binding Message}"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</mopup:PopupPage>
I use this to navigate from my page viewmodel
await _popupNavigation.PushAsync(new MessagePopup(string text = "tex"));
If I try to set a parameter, shows this error, even that in my PopupPage constructor I have setted a parameter
"MessagePopup does not contain a a constructor that contains 1 argument"
**MessagePopupViewModel **
public partial class MessagePopupViewModel : ObservableObject
{
#region AnP
[ObservableProperty]
private string message;
private readonly IApiService _apiService;
#endregion
public MessagePopupViewModel(string tex)
{
Message = tex;
}
}
you are navigating using this code
await _popupNavigation.PushAsync(new MessagePopup(string text = "tex"));
so MessagePopup MUST have a constructor that accepts a parameter
public MessagePopup(string somevalue)
if you also want to pass that value to your VM, then you can add
BindingContext = new MessagePopupViewModel(somevalue);
if you do this, then you should remove the BindingContext property from the XAML

Xamarin Forms Controls values not visible

I have created a page that passes a value to a new page that will allow users to update the data. When the users selects the record to be updated the edit form opens but the data is not visible. If the value is changed and the edit button clicked it will update the value, but it is never visible. How can I show the data that is to be edited?
View Model
namespace QiApp.ViewModels
{
public class EditTodayCasesViewModel
{
private SxCaseDataService _sxCaseDataService = new SxCaseDataService();
public SxCase SelectedSxCase { get; set; }
public ICommand EditSxCaseCommand => new Command(async () =>
{
await _sxCaseDataService.PutSxCase(SelectedSxCase.SxCaseId, SelectedSxCase);
});
}
}
Edit Page xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:QiApp.ViewModels;assembly=QiApp.UWP"
x:Class="QiApp.Views.EditTodayCasePage">
<ContentPage.BindingContext>
<viewModels:EditTodayCasesViewModel/>
</ContentPage.BindingContext>
<StackLayout>
<Label Text="Surgery Case"/>
<Label Text="{Binding SelectedSxCase.SxCaseId}"/>
<Entry Text="{Binding SelectedSxCase.Record}"/>
<Switch IsToggled="{Binding SelectedSxCase.Complete}"/>
<Button Text="Edit Surgery Case"
Command="{Binding EditSxCaseCommand}"/>
</StackLayout>
</ContentPage>
Code behind
namespace QiApp.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class EditTodayCasePage : ContentPage
{
public EditTodayCasePage(SxCase sxCase)
{
InitializeComponent();
var editTodayCasesViewModel = BindingContext as EditTodayCasesViewModel;
editTodayCasesViewModel.SelectedSxCase = sxCase;
}
}
}
Everything is alright except that your view gets bound to a view model which stays silent if properties are changed. Your view cannot get any information on when it should update itself and hence the UI as soon as the property SelectedSxCase gets changed.
Thankfully this can be done very easily by simply implementing the common interface INotifyPropertyChanged and extending your bound properties with a code line raising the event the interface provides.
Basically it goes like this ...
private SxCase _case;
public SxCase SelectedSxCase
{
get => _case;
set
{
_case = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedSxCase)));
}
}
... but there are several implementations to do that more elegant like using the CallerMemberName or even weaving the getter and setter automatically with Fody.

Binding a View to my main window only shows me the type

I'm trying to bind a View to my ContentControl. Currently, it just shows me the type (eg NameSpace.ViewModel.MainWindowViewModel)
Although I will point out, I'm not sure if I'm approaching this correctly.
My simple set up is I have a View (UserControl) which is empty other than a single control (which has been placed just for the visual).
My MainWindow.xaml
<Window x:Class="DelegateGoodExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModel="clr-namespace:DelegateGoodExample.ViewModel"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<viewModel:MainWindowViewModel x:Key="Vm" />
</Window.Resources>
<Grid>
<ContentControl Height="147" Margin="53,132,60,0"
VerticalAlignment="Top"
Content="{StaticResource Vm}" />
</Grid>
</Window>
(There is nothing in the code behind).
My MainWindowViewModel.cs
namespace DelegateGoodExample.ViewModel
{
public class MainWindowViewModel
{
private object _currentView;
public object CurrentView
{
get { return new View.QuickView(); }
set { _currentView = value; }
}
}
}
So, my question is,
Do I have to set a datacontext in this instance (and even if I do add it the results persist)?
What have I done wrong?
You are putting a viewmodel inside the ContentControl, not a view. Since your viewmodel class is not a UIElement and there is no DataTemplate to determine how it should be rendered, what gets displayed is simply its .ToString() representation.
An immediate fix would be:
<ContentControl Height="147" Margin="53,132,60,0"
VerticalAlignment="Top"
Content="{Binding Source={StaticResource Vm}, Path=View}" />
However, instead of doing things this way you should be putting your view inside the Grid directly, and the viewmodel should not have any knowledge of the view.

I want to use the onSelect event of a ZK tree which is rendered through MVVM

Here is the zul file for reference
<?page title="MVVM Tree POC"?>
<zk>
<borderlayout height="800px">
<west size="25%"></west>
<center>
<window apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.nagarro.viewmodel.TreeViewModel')"
title="Dynamic Tree" border="normal">
<tree checkmark="true" model="#bind(vm.treeModel)"
onSelect="#command('select')" >
<template name="model" var="node" status="s">
<treeitem checkable="#load(node.checkable)"
open="true">
<treerow style="text-align:center;">
<treecell
label="#bind(node.data.firstName)" style="text-align:left;">
</treecell>
</treerow>
</treeitem>
</template>
</tree>
</window>
</center>
</borderlayout>
</zk>
There is a "onSelect" event in the tree tag and there are checkboxes for some treeItems only. Now, I want to create certain components like a combobox for the corresponding tree row when its checkbox is selected. I am trying to do it with the onSelect event of the tree but the problem is I need to pass the reference of the selected checkbox which I am unable to pass as the onSelect event is kept outside the scope of the template through which treeItems are getting rendered.
Is there any other way out to do what I want
This is the page which I get through the above zul file.
I want to know which checkbox is selected ?
You can pass any parameter on every event like that (from ZK docs):
<button label="Delete" onClick="#command('delete', item=item)"/>
and use this parameter in your java code:
#Command
public void delete(#BindingParam("item") Item item ) {
//do some stuff based on what item you've picked
}
In your case I would move onSelect-Event from Tree-Component to Treeitem, like this:
<tree checkmark="true" model="#bind(vm.treeModel)">
<template name="model" var="node" status="s">
<treeitem checkable="#load(node.checkable)"
open="true" onSelect="#command('select', nameParameter=node.data.firstName">
<treerow style="text-align:center;">
<treecell
label="#bind(node.data.firstName)" style="text-align:left;">
</treecell>
</treerow>
</treeitem>
</template>
</tree>
and use parameter in your #Command-method:
#Command
public void select(#BindingParam("nameParameter") String nameParameter ) {
System.out.println(nameParameter + " selected");
}
See ZK MVVM > Advance > Parameter Docs for more information
This is an issue I often run into. My solution has always been to attach data to the component itself; keep a database entity's id or an object itself on the checkbox for retrieval during the event.
checkbox.setAttribute("myAttributeName", myAttributeValue);
This requires a cast to retrieve, which is unfortunate, but with some best practices you can do so confidently.

Silverlight DataForm+ChildWindows+MVVM: ComboBox's DataField dont get populated

i have my View Page with a GridView control. Items in the Grid are edited using a popup Childwindows with the following xaml:
<toolkit:DataForm.EditTemplate>
<DataTemplate>
<StackPanel>
<toolkit:DataField Label="Avisar a: ">
<ComboBox ItemsSource="{Binding Path=Sucursales}"/>
</toolkit:DataField>
<toolkit:DataField Label="Mensaje:">
<TextBox Text="{Binding mensaje, Mode=TwoWay}"/>
</toolkit:DataField>
<toolkit:DataField Label="Estado: ">
<ComboBox ItemsSource="{Binding Path=EstadosMensaje}"/>
</toolkit:DataField>
</StackPanel>
</DataTemplate>
</toolkit:DataForm.EditTemplate>
</toolkit:DataForm>
DataContext to this popup is injected view constructor from the parent view as follow:
AlertaForm frm = new AlertaForm(DataContext as AlertasViewModel);
frm.Show();
//ChildWindows constructor
public AlertaForm(AlertasViewModel viewModel){
InitializeComponent();
DataContext = viewModel;
}
As you can see, ChildWindows and parent view share the same ViewModel.
The problem is that ComboBox controls dont get populated. TextBox field are binded correctly,they display values from DataContext property, that is confusing because that prove that the DataForm recognize the ViewModel passed to the ChildWindows AlertaForm.
Obviously i'm missing something here but cannot figure out what is.
Thanks
I end up throwing away the User control with the DataForm together
sticking in ChildWindows with common controls. It seems that DataForm is not sweet to
complex scenarios