자마린 스튜디오(Xamarin Studio)를 사용한 리스트뷰 데모

간단한 리스트뷰 데모코드입니다.

아이폰에서는 테이블뷰를 통해서 리스트를 출력하는 경우가 많은데 이런 경우 사용됩니다. 

<?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:DemoMyCollection"        x:Class="DemoMyCollection.DemoMyCollectionPage">
        <ContentPage.Padding>            <OnPlatform x:TypeArguments="Thickness"                iOS="10, 20, 10, 0"                Android="10, 0"                WinPhone="10, 0" />        </ContentPage.Padding>
        <ListView x:Name="listView" />    </ContentPage>

코드비하인드 클래스는 아래와 같습니다. using System;
using System.Collections.Generic; 
namespace DemoMyCollection
{
    public partial class DemoMyCollectionPage : ContentPage
    {
        public DemoMyCollectionPage()
        {
            InitializeComponent();
            listView.ItemsSource = new List<Color>
            {
                Color.Aqua, Color.Black, Color.Blue, Color.Fuchsia,
                Color.Gray, Color.Green, Color.Lime, Color.Maroon,
                Color.Navy, Color.Olive, Color.Pink, Color.Purple,
                Color.Red, Color.Silver, Color.Teal, Color.White, Color.Yellow
            };
        }
    }
}

 실행하면 아래와 같이 실행됩니다.

구분자를 보이지 않도록 변경할 경우

        <ListView x:Name="listView" 
            SeparatorVisibility="None" />

다음과 같이 수정하면 구분자가 붉은 색으로 변경됩니다. 

        <ListView x:Name="listView" 
            SeparatorColor="Red" />

선택된 아이템과 바인딩되는 데모는 다음과 같이 작성합니다.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="DemoMyCollection.ListViewArrayPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                iOS="10, 20, 10, 0"
                Android="10,0"
                WinPhone="10, 0" />
    </ContentPage.Padding>

     <StackLayout>
         <ListView x:Name="listView"
             SelectedItem="{Binding Source={x:Reference boxView},
                    Path=Color, Mode=TwoWay}">
             <ListView.ItemsSource>
                  <x:Array Type="{x:Type Color}">
                    <x:Static Member="Color.Aqua" />
                    <x:Static Member="Color.Black" />
                    <x:Static Member="Color.Blue" />
                    <x:Static Member="Color.Fuchsia" />
                    <x:Static Member="Color.Gray" />
                    <x:Static Member="Color.Green" />
                    <x:Static Member="Color.Lime" />
                    <x:Static Member="Color.Maroon" />
                    <Color>Navy</Color>
                    <Color>Olive</Color>
                    <Color>Pink</Color>
                    <Color>Purple</Color>
                    <Color>Red</Color>
                    <Color>Silver</Color>
                    <Color>Teal</Color>
                    <Color>White</Color>
                    <Color>Yellow</Color>
                </x:Array>
            </ListView.ItemsSource>
            </ListView>
         <BoxView x:Name="boxView" Color="Lime" HeightRequest="100" />
     </StackLayout>
</ContentPage>

MS Azure기반의 Mobile App Service에 대한 정리

자마린 스튜디오를 테스트 하면서 흥미로운 부분중에 하나가 바로 MS Azure Mobile App Service입니다. 이 부분을 한번도 정리를 하지 않아서 시간을 내서 정리해야 할 것 같습니다.
요즘 Paas(Platform as a Service)에 대한 내용들이 많이 올라옵니다. 개발자와 운영자가 신경써야 할 부분이 많아지고 있어서 거의 앱개발에 필수로 고민해야 할 서버측 코드 개발과 운영을 아예 클라우드로 올려버리면 1인 개발자 입장에서는 무척 고맙죠.

아래는 오늘 보고 있는 문서들의 링크 입니다.
https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-value-prop

이런 부분들이 서비스 됩니다.

친절하게도 따라하기 튜토리얼이 있습니다. 무료 계정을 하나 생성해서 테스트 하면 됩니다.
https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-ios-get-started
MCT의  경우 한달에 200불 정도 매번 크레딧이 생성됩니다.

자마린 구조에 대한 설명 #3

최근에 올라온 영상 중에 하나 입니다. 1시간 정도의 영상을 보시면 정리가 될겁니다.

https://www.youtube.com/watch?v=wRfBwRQC5SU

앱을 만들 때 항상 고민되는 부분이 웹서버와의 연동입니다.
개인 개발자인 경우 직접 서버측 작업을 하려면 손이 많이 가는 작업입니다.
MS진영에는 에저가 있죠.

앱은 단일언어인 C#으로 작성하고 서버측도 node.js, asp.net mvc... 등등 다양한 기술들로 작업을 할 수 있습니다.

기성품 옷을 구매해서 입는 것처럼 술술 엮어서 서버측 코드들을 작성합니다.

에저는 제 개인적으로는 경험이 많지 않아서 매번 어렵게 느껴지는데 화면이 자주 변경되서 다시 들여다 봐야 할 것 같습니다. ㅋㅋ

자마린 구조에 대한 설명 #2

성능에 대한 이슈가 항상 있습니다. 아직 테스트중이긴 한데 웹기반이 아닌 네이티브 기반이여서 성능은 상당히 빠르게 앱이 생성됩니다. 

비주얼스튜디오 2015 커뮤니티 에디션과 같은 무료 툴을 통해서 상당히 다양한 템플릿들이 제공됩니다. 셋팅도 무지 쉽습니다. ^^ 원래는 맥에서 가상 윈도우를 실행해서 개발하는 구조였는데 최근에 자마린 폼즈 프리뷰가 나오면서 iOS에뮬레이터를 윈도우에서 바로 실행할 수 있습니다.

언제 비주얼스튜디오에 이런 템플릿들이 들어왔는지 ㅋㅋ 놀랍네요. 

다양한 안드로이드 에뮬레이터를 실행할 수 있습니다.

아이폰 앱을 만들어본 개발자들은 스토리보드에 익숙할 겁니다.  Main.Storyboard가 그대로 편집됩니다.

최근 버전에 아래와 같이 실행이 됩니다.

Xamarin.Forms를 테스트해 보니 UI도 공통단을 만들어서 재사용할 수 있습니다.

레이아웃에 대한 부분은 페춀드 책에 자세하게 설명이 나옵니다.

크로스 플랫폼 개발을 위한 자마린 구조에 대한 설명입니다.

작년 여름에 MS세미나에 참석하면서 음.. 멋진 기술인데 하면서 감탄했던 기억이 납니다. 강의에 치여서 여태 들여다 보지 못하고 있다가 연말, 연초에 열심히 동영상과 책을 보고 있습니다.
오픈SG의 송기수 상무의 발표를 보면서 멋진 아키텍쳐라고 생각했었습니다. 약간읜 미심쩍인 눈으로 살펴보면서 C#으로 공통의 UI와 로직을 구현해서 75%정도의 공통단을 만들 수 있으면 나쁘지 않다고 개인적으로 생각됩니다. 아래와 같이 C#이라는 하나의 언어로 구현합니다. 원소스로 아이폰앱, 안드로이드앱, 윈도우앱을 생성합니다. 제 경우는 맥에서 맥용 자마린 스튜디오로 테스트하고 있는데 향후에는 맥용 비주얼스튜디오로 통합되는 분위기 입니다.

 물론 웹기반으로 접근해서 하이브리드앱으로 가는 것도 상당히 좋은 접근이라고 보여집니다. 아이폰 수업을 하다보면 상당히 많은 개발자들이 하이브리드 앱을 먼저 경험하고 네이티브 수업에 들어오는 것을 많이 봅니다.

 공통단을 적게는 75%정도 작업하고 많으면 90%까지 끌어 올릴 수 있습니다.

닷넷 네임스페이스와 아이폰 프레임워크가 같이 보입니다. ^^ 신기

 닷넷과 안드로이드가 공존

 윈도우폰은 망했지만 타블릿은 윈도우 10용 API가 이제 자리를 잡고 있습니다.

이런 멋진 앱을 만들 수 있습니다. ^^ 공부할만한 가치가 있죠.