내급여 UWP 앱 개발 part6

Part1

Part2

Part3

Part4

Part5

 

내급여 앱의 마지막 포스트 입니다. 이번에 다루는 내용은 두가지로, 블로그에 리플 남겨주신 분이 문의 주신 내용으로 한글 처리에 대한 내용과 내용을 파일로 저장하는 부분입니다.

 

 

1. 한글 처리..

 

원래 UWP 앱은 한글이 잘 표현 되는 데..이상하게 Windows Template Studio로 템플릿을 생성하면, 한글이 깨져서 나오네요..

 

저는 RadDataGrid에 들어간 내용만 그런 줄 알았는데, 일반 버튼에 들어간 한글도 바로 깨져서 약간 당황했습니다.

 

문제는 파일을 저장할 때 사용하는 코드 페이지 문제인데요.. 비주얼 스튜디오의 Blank 템플릿으로 UWP앱을 생성하고, MainPage.xaml을 연 후 file -> Save MainPage.xaml as ... -> Save 옆에 역 삼각형 클릭 -> Save With Encoding... 을 선택 -> Encoding 항목에 Unicode (UTF-8 with signature) - Codepage 65001이라고 되어 있습니다.

 

이상태에서 한글을 입력하고 실행을 해도 전혀 문제가 없죠, 그런데, Windows Template Studio의 탬플릿들은 코드 페이지가 Korean - Codepgae 949로 생성이 됩니다. 그래서, 실행을 하면 한글이 깨져서 출력됩니다.

 

 

 

* 해결 방법

 

1) 템플릿에서 만들어진 페이지들을 Save as 를 이용해서 Unicode (UTF-8 with signature) - Codepage 65001로 변경해 준다. 다행이 새 페이지를 만들때는 Unicode로 만들어 지고 있습니다.

 

2) 택스트를 Resource를 이용하도록 변경한다.

 

택스트의 다국어 지원을 위해, Resource 파일을 이용하도록 되어 있는데, 여기에 그냥 한글을 입력해 놓으면, 정상 적으로 한글이 출력됩니다. 물론, 제대로 만들기 위해서는 ko-kr 폴더를 생성하고, 그 아래 Resources.resw 파일을 넣어서 한글화를 하는 것이 가장 정상적인 방법입니다.

 

 

 

 

 

2. 저장 버튼 작업 마무리

 

Save CSV 버튼을 클릭했을 때 우리는 GridViewModel에 있는 SaveExcelCommand를 실행 하도록 바인딩을 걸어야 합니다.

 

앱바가 PivotPage.xaml에 있으니, 해당 페이지를 열고,

 

AppBarButton을 선택 -> Command 옆 네모 선택 -> Binding type : ElementName -> GridPage(gridPage는 x:Name) -> ViewModel -> SaveExcelCommand -> OK

 

 

그렇게 하면, 아래와 같은 바인딩이 생성 됩니다.

 

            <AppBarButton Icon="Save" Label="Save CSV" Command="{Binding ViewModel.SaveExcelCommand, ElementName=gridPage}" />

 

바인딩 자체는 이렇게 하면되는데... 문제는 버튼을 눌러도 뷰모델에서 아무런 반응이 없다는 것입니다. 예상 이유는 PivotPage가 생성 시점, GridPage 생성 시점이 서로 달라서 바인딩을 연결하지 못한 것이 아닌가 생각합니다.

 

과거에는 앱바와 뷰가 서로 따로 놀아서 바인딩을 할려면, StaticResource를 이용해야 했는데, 지금은 그정도는 아니지만, 다른 뷰의 뷰모델에 있는 커맨드를 바인딩으로 연결할 수는 없는 것 같습니다. 머, 찾아보면 좋은 해결책이 있을 것 같지만, 일단 여기서는 이렇게 바인딩을하지 않고, PivotViewModel에 커맨드를 실행 시키고, 그 커맨드에서 뷰모델의 커맨드를 실행 시키도록 코드를 작성 합니다.

 

 

PivotGrid.xaml

 

            <AppBarButton Icon="Save" Label="Save CSV" Command="{Binding SaveExcelCommand}" />

 

 

PivotViewModel.cs

 

        /// <summary>
        ///     기본 생성자
        /// </summary>
        public PivotViewModel()
        {
            PropertyChanged += (s, e) =>
            {
                if (e.PropertyName != nameof(SelectedView)
                    || SelectedView == null) return;
                ShowAppBar = SelectedView.Content is GridPage;
            };

            SaveExcelCommand = new RelayCommand(ExecuteSaveExcelCommand);
        }

 

        /// <summary>
        ///     엑셀 저장 커맨드
        /// </summary>
        public ICommand SaveExcelCommand { get; set; }

 

        private void ExecuteSaveExcelCommand()
        {
            var view = SelectedView?.Content as GridPage;
            view?.ViewModel.SaveExcelCommand.Execute(null);
        }

 

파일 저장 피커를 이용해서 폴더와 파일을 선택하고,

 

LINQ를 이용해서 저장할 데이터와 합계데이터를 CSV 형태 택스트로 만들고, 두개의 결과를 Union으로 합쳐서 최종 문자열로 만든 후 저장 합니다. 참! item.ToList()는 모델에 각 프로퍼티를 IList<object> 형태로 반환하도록 만들어 놓은 함수 입니다. 하지만, 좀더 신경을 써서 확장 메소드를 만들어 사용하는 것이 더 좋습니다.

 

옛날에는 catch {}에서 await를 사용할 수 없었는데, 이제는 사용이 가능합니다.

 

GridViewModel.cs

 

        private async void ExecuteSaveExcelCommand()
        {
            var savePicker = new FileSavePicker
            {
                SuggestedStartLocation = PickerLocationId.DocumentsLibrary
            };
            // Dropdown of file types the user can save the file as
            savePicker.FileTypeChoices.Add("CSV", new List<string> {".csv"});
            // Default file name if the user does not type one in or select a file to replace
            savePicker.SuggestedFileName = "MyPay" + BaseMonth;
            var result = await savePicker.PickSaveFileAsync();
            if (string.IsNullOrEmpty(result?.Name)) return;

            var saveDatas = from item in Works
                let itemText = string.Join(",", item.ToList())
                select itemText;

            var totalDatas = from item in TotalWorks
                let itemText = string.Join(",", item.ToList())
                select itemText;

            try
            {
                await FileIO.WriteTextAsync(result, string.Join("\n", saveDatas.Union(totalDatas)));
                await StaticCommonHelper.ShowMessageBoxAsync("작업을 완료 했습니다.");
            }
            catch (Exception e)
            {
                await StaticCommonHelper.ShowMessageBoxAsync(e.Message);
            }
        }

 

 

3. 한국어로 지정

 

생각해보니, 한국어로 지정을 하면, 입력 형식이나, 기본 포멧이 한국어로 변경되기 때문에 더 편한 것 같습니다. 아래 코드를 추가하면, 화면에 출력되는 내용들이 변경됩니다.

 

App.xaml.cs

 

        }
        {
            InitializeComponent();

            ApplicationLanguages.PrimaryLanguageOverride = "ko-KR";
           

            //Deferred execution until used. Check https://msdn.microsoft.com/library/dd642331(v=vs.110).aspx for further info on Lazy<T> class.
            _activationService = new Lazy<ActivationService>(CreateActivationService);
        }

 

 

 

4. 소스

 

몇가지 버그가 있기는 하지만, 간단하게 만들어 본 소스이니 개발하실 때 참고하시면 될 것 같습니다.

 

MyPay_part6.zip