LOVAPI

Windows Phone 7 SDK 사용을 해봅시다

오늘 해볼 것은 모든 랭귀지의 기본 Hello World !!!

그럼 Windows Phone 7  SDK용 개발 툴 Microsoft™ Visual Studio® 2010 Express for Windows Phone를 실행하시고

조금 눈썰미가 있으신 분들은 다 눈치 챘을 듯. 우리는 차려진 밥상에 밥 & 반찬만 떠먹기만 하면 되는 시츄에이숀!

내가 초보고 시간이 많이 남는다면 우측의 최 상단

Getting Startd with Microsoft Visual Studyo 2010 Express for Windows Phone …

어느 정도 문법에 익숙해졌다 싶은데 아직 어떻게 짜야 잘 짰다고 소문이 날지 몰라 남의 코드를 보고 싶다면  우측 중간

Get Windows Phone 7 Code Samples and More …

나는 내가 짠 프로그램을 한번 배포 해보고 싶다면 우측 젤 아래 있는

Publish Your App and Game …

을 한번 보고 하시는 것도 나쁘지 않겠습니다.

하지만 우리는 귀차니즘 속에 살고 있죠.

그래서 차려진 밥상에 밥과 반찬을 떠 먹는 것 마져 귀찮죠.

그래서 하나씩 씹어서 먹여 드리겠습니다.

실은 제가 공부하기 위해서 차려진 밥과 반찬을 씹는 겁니다.  다 씹고 안 줄 겁니다. 이 컨텐츠는 재 배포 금지거든요.

 

자 그럼 하나씩 해보도록 하죠.

새로운 프로젝트 만들기 (New Project)

좌측 상단에 이 개발 툴의 명칭 아래 보시면 3가지 항목이 보입니다.

* New Project (새로운 프로젝트)

* Open Project (프로젝트 열기)

* Recent Projects ---------- (최근 프로젝트)

    blah.. blah..

프로젝트(Project)는 Microsoft 개발 툴에서 다루는 단위로 최소의 구성 가능한 프로그램 단위가 됩니다.

그 프로젝트들이 모여서 솔루션Solution이 되지요(VS.NET 사용 해 보신 분들은 쉽게 이해하리라 믿습니다.)

당연히 프로젝트 단위 이상은 배포도 가능하죠. 방법이야 각각 다르거나 차이가 날 뿐이지… (뭐 이건 논외)

New Project를 클릭해보십시다. 씽~ 나네요 고고싱

 

MS의 IDE들 어느 하나 빠짐없이 이 모양 이죠잉~

개발하기 위한 템플릿입니다.

어렵게 이야기하지도 복잡하게 설명하지도 않습니다. 그리고 어렵게 알고 있어봐야 면접 볼 때만 도움이 될 뿐.

템플릿이란 그냥 뼈대라고 생각하시면 됩니다.

C++의 그 템플릿과도 비슷하다 보셔도 되고, VS나 VS.NET에서 팀 개발환경에서의 템플릿 그 녀석입니다.

한번도 겪어보신 적 없으시면 Pass! 나중 팀 프로젝트를 하다 보면 쉽게 가르쳐드리고 필요하면 배우게 됩니다.

우리가 원하는 템플릿을 선택하면 됩니다.

Installed Templates

네 맞습니다. 기본으로 설치된 템플릿을 고를 수 있습니다.

Visual C# 이하 항목으로 존재하죠? 아마 비하인드 코드나 개발언어를 C#으로 하나 봅니다.

(저는 이미 봤으니 이런 가치도 없는 말을 내 뱉는거시져~)

오호라 XNA Game Studio 4.0 템플릿도 있군요. XBOX게임도 만들 수 있겠근영.

일단 우리가 원하는 것부터 이루도록 합시다.

우리의 목적은 Hello World

그럼 가장 기본적인 개발 형 템플릿을 열어야겠습니다.

Win32, Windows.NET IDE에서 가장 기본은?  네 맞습니다 Win32(Window.NET) Console Application 이죠

그럼 Window Phone SDK에서 가장 기본은? 네 위에 있는 녀석 Windows Phone Application 입니다.

Windows Phone Application을 선택한 후에 아래를 보세요.

Name: 프로젝트 명 을 지정할 수 있습니다.

Location: 해당 프로젝트가 저장 될 PATH를 선택할 수 있습니다. Browse..버튼으로 찾아서 지정 할 수도 있네요.

Solution name: 해당 프로젝트를 솔루션으로 감싸게 됩니다. 그 명명을 하라는 것이죠. Create directory for solution 이 기본 체크가 되어있습니다. 따라서 모든 프로젝트는 같은 명칭의 솔루션 폴더 안에 존재하게 되겠죠? 그렇습니다 뭐 흠흠..

아래를 따라 해보세요~  쉽게 쉽게 가봅시다.

그리고 OK 고고고 ~

 

 

이런 화면으로 바뀌게 되네요

 

 

아마 ASP.NET 개발 해보신 분들은 자주 보던 토 쏠리는 화면이 되겠습니다.

웹폼(WebForm) 디자이너 모드 !!! .NET 이하 다른 개발IDE모드에서 가지는 윈폼(WinForm) 디자이너모드와도 같습니다.

SDE(Smart Device Environment – PPC, Windows mobile  프로그램 개발용)의 모습과도 비슷합니다.

네 맞습니다. 제가 찾아본 결과 ASP.NET의 웹폼 디자이너에 더 흡사하다 라고 볼 수 있더군요.

각 구성부위 설명을 드릴께요

메뉴 바 와 도구상자

말해봐야 목만 아프죠. 네 그 녀석들..음흠흠

 

Toolbox

툴 박스는 사용할 수 있는 컨트롤 등을 모아두어 폼 디자이너에서 쉽게 사용 할 수 있도록 하기 위함입니다.

드래그 하여 임요환 선수처럼 폼에 멋있게 드랍 하셔서 사용하시기 바랍니다.

 

Document Outline

이게 무엇일까? 계속 생각하고 장난을 쳐봤는데. 그냥 디자이너가 생성한 코드가 XML식의 문법구조라(정식명칭은 XAML입니다)  다루기 쉽게 트리구조(하이라키)로 만들어놓은 뷰 같네요.

해당 엘러먼트를 클릭하면 우측 XAML코드에 커서가 이동합니다.

 

Data Source

아직 볼 일은 없습니다. 분명 Data Source Binding 이 되겠죠? 하지만 우리는 Hello World 를 찍으러 온 것 !

 

Design (디자이너)

말 그대로 폼 디자이너 입니다. 툴 박스에 있는 컨트롤을 여기다 담아서 원하는 구성을 할 수 있다죠?

 

XAML

최초 템플릿에 따라 디자이너의 폼의 형태와 동기화 되는 실질적인 코드 부위 입니다.

ASP.NET aspx 파일이라 생각하시면 됩니다.

 

솔루션 탐색기

솔루션에 필요한 프로젝트와 그와 관계된 파일들이 보여지게 됩니다. VS.NET의 파일탐색기를 찾을 수가 없군요 똥망~

 

나머지 부분들

은 그냥 버리죠 대부분이 보여지기 위한 부수적인 부분일 테니까(물론 디버깅 관련도 있습니다)

잡설은 버리고 바로  Hello World 를 찍어보도록 하죠

“Hello World !!!”

 

[목표]

1. “MY APPLICATION” 을 “Window 7 Phone TEST!” 로 변경

2. “page name” 을 “헬로우 월드!” 으로 변경

3. 공란에 “Hello World” 쓰기

 

 

자 그럼 해봅시다.

 

 

위 그림을 보시면 아시겠지만 실제 폼을 보게 되면 LayoutRoot 라는 투명한 Grid로 쌓여 있습니다.

MY APPLLICATION과 page name 은 TitlePanel 이라고 하는 StackPanel이 감싸고 있죠.

 

 

그리고 마지막 아래 공란은 ContentPAnel 이라고 하는 Grid로 구성되어있습니다.

그럼 [목표] 1, 2 는 쉽게 가능하겠습니다.

 

 

<!--TitlePanel contains the name of the application and page title--> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">     <TextBlock x:Name="ApplicationTitle" Text="Windows 7 Phone TEST!" Style="{StaticResource PhoneTextNormalStyle}"/>     <TextBlock x:Name="PageTitle" Text="헬로우 월드!" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel>

네 한글 잘됩니다.

[목표] 3을 해보실까요?

 

<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

를 수정하겠습니다.

 

<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">    <TextBlock Height="50" HorizontalAlignment="Left" Margin="25,21,0,0" Name="textBlock1" Text="Hello World" VerticalAlignment="Top" Width="409" FontSize="26" /> </Grid>

이렇게 수정된 화면입니다.

 

 

어때요? 참 쉽죠?

F5 또는

재생 버튼을 누르면 디버깅 모드로 진입하게 되며 우리가 만든 프로그램을 에뮬레이터로 확인 가능합니다.

이렇게~

다음 포스트에선 툴 박스의 컨트롤 사용법을 함께 익혀봅시다.

이러는 와중에 우리 베이브는 이렇게 개처럼 자고 있네요.

딴 집 고양이는 다소곳하게  자드만!!! 왜 개같이 대충 누워서 자는걸까?

 

 

 

시체가 아닙니다 –0- 살아있는 고양이의 퍼질러 자는 모 to the 습 !!!