아발로니아 UI 예제 프로그램 리뷰 3 - ValidationSample

■ 목차

├ 1. ValidationSample 들어가기

├ 2. 프로그램 동작 및 구조

├ 3. UI 항목 검증 세 가지 방법

└ 4. 뷰와 아발로니아 요소들

 

1. ValidationSample 들어가기

크로스플랫폼 닷넷 UI 프레임워크인 아바로니아 맛보기를 넘어서서 본격적인 활용에 들어가기 위한 학습 방법으로 필자는 예제 프로그램 리뷰를 하나씩 수행하기로 했다. 기술 자료가 넉넉하고, 비주얼스튜디오의 WPF 디자이너와 같은 도구가 있다면 넘어갈 수도 있는 문제겠지만 지금까지 접하지 않았던 새로운 도구와 친숙해지는 방법은 역시 예제를 통하는 것이 아닌가 싶다. 공식 예제 코드는 깃허브 https://github.com/AvaloniaUI/Avalonia.Samples 에서 받을 수 있다. 커뮤니티에서 발굴해 놓은 예제와 참조 프로젝트도 있는데 깃허브 https://github.com/AvaloniaCommunity/awesome-avalonia 에서 확인할 수 있다.

 

 

ValidationSample은 MVVM(Models, Views, View Models) 패턴으로 개발 시 입력항목에 대한 검증과 검증 오류 출력이 필요한 경우 참조할만한 예제이다. 예제는 이메일 항목에 대한 검증과 오류 출력을 세 가지 형태로 제시하고 있다. 세 가지 뷰모델은 Reactive UI 프레임워크의 ReactiveObject를 상속받아서 작성되었다.

 

2. 프로그램 동작 및 구조

 

프로그램의 동작은 이메일 항목 내용이 입력되지 않았거나, 내용에 @ 문자가 없는 경우를 검증하는 것은 세 가지 방법 모두 동일하다. 단, 검증 결과 오류를 출력하는 방식이 ExceptionInsideSetter만 위의 그림처럼 예외처리하고 나머지는 항목 자체에 오류를 표시한다. 항목 자체에 대한 오류 표시는 프로그램에서 일일이 다루지 않고 데이터 어노테이션 설정이나 구현된 인터페이스를 통해 오류 여부와 내용만 알려주면 시스템 내부적으로 처리된다. 하나의 뷰에 하단 탭 세 개를 두고 각 탭에는 이메일을 입력할 수 있는 텍스트 박스를 두는데 각각 다른 뷰 모델의 속성을 바인딩하는 방식을 적용했다.

 

 

프로젝트는 MVVM 패턴에서 별도의 모델 없이 세 가지의 뷰모델과 한 개의 뷰로 구성된 형태이다. MainWindow 뷰에서는 DataContext로 MainWindowViewModel을 지정하고 개별 텍스트박스에는 다른 뷰모델의 속성을 바인딩하는 방법을 적용했다. MainWindowViewModel에 세 가지 뷰모델의 인스턴스를 정의하고 있다.

 

3. UI 항목 검증 세 가지 방법

private string? _EMail;

[Required]
[EmailAddress]
public string? EMail
{
	get { return _EMail; }
	set { this.RaiseAndSetIfChanged(ref _EMail, value); }
}

 

가장 단순한 검증 방법은 위와 같이 System.ComponentModel.DataAnnotations를 사용하는 것으로 속성에 데이터 어노테이션을 추가하는 것으로 적용할 수 있다. 위의 예제는 필수 항목과 이메일 아이디 필드임으로 지정하고 있다.

 

public ValidationUsingINotifyDataErrorInfoViewModel()
{
	this.WhenAnyValue(x => x.EMail).Subscribe(_ => Validate_EMail());
	Validate_EMail();
}

public event EventHandler<DataErrorsChangedEventArgs>? ErrorsChanged;
public bool HasErrors => errors.Count > 0;

public IEnumerable GetErrors(string? propertyName)
{
	if (string.IsNullOrEmpty(propertyName))
	{
		return errors.Values.SelectMany(static errors => errors);
	}
	if (this.errors.TryGetValue(propertyName!, out List<ValidationResult>? result))
	{
		return result;
	}
	return Array.Empty<ValidationResult>();
}

 

INotifyDataErrorInfo 인터페이스를 구현하는 방법은 위와 같이 ErrorsChanged, HasErrors, GetErrors를 구현해야 한다. 나름의 복잡한 검증이 필요한 경우 적절해 보인다. 실제 검증 작업은 Reactive UI의 WhenAnyValue()로 감시할 속성을 지정하고 검증 루틴을 Subscribe()로 등록하는 것으로 이루어진다. 검증 결과를 INotifyDataErrorInfo 인터페이스를 통해서 시스템에 통보한다.

 

private string? _EMail;
public string? EMail
{
	get { return _EMail; }
	set 
	{
		if (string.IsNullOrEmpty(value))
		{
			throw new ArgumentNullException(nameof(EMail), "This field is required");
		}
		else if (!value.Contains('@'))
		{
			throw new ArgumentException(nameof(EMail), "Not a valid E-Mail-Address");
		}
		else
		{ 
			this.RaiseAndSetIfChanged(ref _EMail, value); 
		} 
	}
}

 

매끄러운 UI 구현 방법은 아니지만 속성의 세터에 검증 루틴을 두고 항목 오류가 있으면 바로 예외를 발생시키는 단순한 방법이다.

 

4. 뷰와 아발로니아 요소들

<TabControl TabStripPlacement="Bottom">
  <TabItem Header="DataAnnotations">
    <TextBox Text="{Binding ValidationUsingDataAnnotationViewModel.EMail}" />
  </TabItem>
  <TabItem Header="INotifyDataErrorInfo">
    <TextBox Text="{Binding ValidationUsingINotifyDataErrorInfoViewModel.EMail}" />
  </TabItem>
  <TabItem Header="ExceptionInsideSetter">
    <TextBox Text="{Binding ValidationUsingExceptionInsideSetterViewModel.EMail}" />
  </TabItem>
</TabControl>

• TabControl :  https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TabControl
  내부에 TabItem 항목으로 탭 요소를 둔다. TabStripPlacement 속성을 "Bottom"으로 지정하면 탭을 하단에 표시한다.
• TabItem :  https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TabItem
  Header 속성으로 탭 제목 지정.
• TextBox : https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TextBox
  단순 텍스트 입출력에 사용. Text로 뷰모델의 속성 지정, Watermark, IsReadOnly, FontWeight, VerticalAlignment, FontSize, PasswordChar, Name, UseFloatingWatermark 등 사용