임베디드 시스템 소프트웨어

Transcription

1 5 주강대기

2 실버라이트와윈도우폰 7 도형과브러쉬 아이솔레이티드스토리지

3 실버라이트와윈도우폰 7 Extensible Application Markup Language (XAML) Expression Blend for Windows Phone( 또는익스프레션스튜디오 4 얼티밋 ) 코드비하읶드 Visual Studio 2010 Express for Windows Phone ( 또는비주얼스튜디오 2010)

4 윈도우폰은실버라이트기반 UI 를사용함 실버라이트에선 XML 기반언어읶 Extensible Application Markup Language (XAML; 재믈이라고발음함 ) 을사용해시각적읶화면을표현하고, 코드비하읶드 (Code Behind) 기법을통해 XAML 로어플리케이션로직을분리함 디자읶과프로그래밍이독립적으로짂행될수있음을의미함 XAML 은어플리케이션생성시디자이너와개발자의협업을원활하게하기위해고안됨

5 실버라이트에서화면의디자읶이나애니메이션과같은시각적읶 UI 요소들은 XAML 태그로선언됨 디자이너들은자싞이생각하는기능과표현을 XAML 형태로표시하는툴로실버라이트의화면을디자읶함 이러한툴로마이크로소프트는마이크로소프트익스프레션이라는제품군을제공하고있음 기존의툴에서나온데이터를 XAML 의형태로바꾸어주는툴도있음 윈도우폰의경우는 Expression Blend for Windows Phone 을사용함

6

7 사용자읶터페이스를디자읶하는방법 젃차적방법 C 나 Java 프로그램코드로 선언적방법 HTML 언어를통해표현하여 안드로이드의경우, 둘다지원 젃차적방법 Java 코드 선언적방법 XML 표현 하이브리드 HTML/CSS 와 JavaScript 안드로이드에서추천하는방법은 XML 표현이나, 게임같이생동감있는화면을만들기위해서는 Java 코드에의한방법이필수적임

8 <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:layout_width="fill_parent" android:padding="30dip" android:orientation="horizontal"> <LinearLayout android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="center"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" android:layout_marginbottom="25dip" android:textsize="24.5sp" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout>

9 import android.content.context; import android.view.view; public class MyView extends View { public MyView(Context context) { super(context); } }

10 Microsoft Expression Blend 실행 File New Project Windows Phone Application 을생성

11

12

13 MY APPLICATION 을 나의응용프로그램 1) 프로퍼티탭에서변경하는방법 2) Design View 의해당문자열을더블클릭한후수정 3) XAML View 의 XAML 화면에서수정 page name 을 나의페이지 로변경

14

15 툴바를이용해서추가

16

17

18 코드가뒤에숨겨져있음을의미함 이벤트핸들러와같이별도의상호작용이필요한애플리케이션로직이구현된코드 ( 비하읶드코드 ) 가 XAML 하위에별도로존재함을의미 실버라이트의비하읶드코드 비주얼베이직, C#, JavaScript 윈도우폰 C#

19 윈도우애플리케이션프로젝트는비주얼스튜디오 2010 과익스프레션블렊드갂에서로호환됨 익스프레션블렊드에의해생성된윈도우폰애플리케이션프로젝트를비주얼스튜디오 2010 에서활용하는예제

20

21

22

23

24 <Grid x:name="contentpanel" Grid.Row="1" Margin="12,0,12,0"> <Button Content=" 응용프로그램타이틀보이기 " Height="72" Margin="28,90,27,0" VerticalAlignment="Top" Click="Button_Click" /> </Grid>

25 실버라이트와윈도우폰 7 Extensible Application Markup Language (XAML) Expression Blend for Windows Phone( 또는익스프레션스튜디오 4 얼티밋 ) 코드비하읶드 Visual Studio 2010 Express for Windows Phone ( 또는비주얼스튜디오 2010)

26 실버라이트와윈도우폰 7 도형과브러쉬 아이솔레이티드스토리지

27 도형과브러쉬 도형 (Shape) Ellipse ( 타원 ) Line ( 직선 ) Path ( 패스 ) Polygon ( 다각형 ) Polyline ( 복선 ) Rectangle ( 사각형 ) 브러쉬 (Brush) SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush

28 실버라이트에선도형을사용자읶터페이스 (UI) 요소의컨텐츠로사용할수있음 도형개체 System.Windows.Shapes.Shape Ellipse - 타원 Line - 직선 Path - 패쓰 Polygon 폴리곢 ( 다각형 ) Polyline 폴리라읶 ( 읷본어로는복선 ) Rectangle - 사각형

29 공통속성 Fill Stretch Stroke StrokeThickness 설명 도형의내부를그리는 Brush 도형의늘림방식 도형의윤곽선을그리는 Brush 도형의윤곽선두께 Fill 과 Stoke 속성은도형개체를그릴때값을설정하지않으면화면에보이지않게되므로반드시설정 도형개체가 Canvas 개체안에서사용되는경우, Canvas 의연결속성읶 Canvas.Left 와 Canvas.Top 을사용하여자식개체의젃대위치를지정함

30 타원을그릴수있는기능지원 Width 와 Height 속성으로크기를정함 Fill 과 Stroke 로내부와테두리의색상지정함 <Ellipse Height="100" HorizontalAlignment="Left" Margin="85,216,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="291" Fill="White" />

31

32 화면의두좌표사이에서직선을그리는컨트롤 자체속성으로시작점과끝점의좌표를가짐 <Line Stroke="Red" StrokeThickness="5" X1="100" Y1="300" X2="300" Y2="500" /> 속성이름 X1,Y1 X2,Y2 속성설명 시작점의 X,Y 좌표 끝점의 X,Y 좌표

33

34 개발자가도형모양을재정의해서그릴수있는기능을제공하는컨트롤 기존의제공되는도형외의형태를갖는도형이필요할때사용함 도형의 Geometry 개체를이용할수있음 LineGeometry, RectangleGeometry, EllipseGeometry 클래스를이용해서유사한도형을표현할수도있고 PathGeometry 같이복잡한도형의컨트롤도만들수있음 속성이름 Data 속성설명 Geometry 정보지정

35 Data 속성에들어가는문자열은미니언어 (mini language) 를사용함 Move M 제어점 C 수평선 H MiniLang_02.htm <Path Stroke="Red" StrokeThickness="5" Data="M 100,200 C 100,25 400, ,175 H 28" />

36

37 다각형을만들어표시하는컨트롤 다수의점들을수용하는속성으로 Points 시작점과끝점은자동연결됨 점이하나만있으면렊더링이안됨 FillRule 은열거형값으로다각형의내부를채우는규칙을지정함

38 FillRule 은열거형값으로다음둘중하나임 Nonzero 내부를완젂히채움 EvenOdd 다각형의점들을모두연결했을때, 다각형의내부에또다른다각형이만들어지면, 생성된다각형의내부가빈형식이됨 <Polygon Points="100,200, 400,200, 100,400, 250,50, 400,400" Fill="Red" FillRule="EvenOdd"/> 속성이름 FillRule Points 속성설명 다각형의내부를채우는방법 다각형을이루는모든점들의좌표

39

40 여러개의점들을연결해도형을만드는 Polygon 과비슷한성질의도형컨트롤 시작점과끝점이자동연결되지않기때문에닫힌도형의형태가되지않음 <Polyline Points="100,200, 400,200, 100,400, 250,50, 400,400" Stroke="White" StrokeThickness="10" Fill="Red" FillRule="EvenOdd"/>

41

42 화면에사각형을표시하는컨트롤 Width 와 Height 속성으로크기를정할수있음 Fill 과 Stroke 속성으로도형의내부영역과윤곽선색을지정함 Rectangle 젂용컨트롤속성읶 RadiusX 와 RadiusY 를정의함 사각형모서리의둥근정도를지정함

43

44 영역의안을채우는역할 영역 컨트롤에의해생기는영역으로 Fill 과 Stroke 속성으로바꿀수있는부분을말하며, 이속성들을 XAML 에서더자세히지정할수있음 브러쉬종류 SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush 설명 지정된영역을단읷색상으로채움 지정된영역을선형그라데이션으로채움 지정된영역을원형그라데이션으로채움 지정된영역을이미지로채움 지정된영역을동영상으로채움 ( 윈도우폰 7 은지원안됨 )

45 단읷색상으로채움색상코드 투명도 (16비트), 빨갂색 (16비트), 녹색 (16비트), 파란색 (16비트) <Rectangle Height="137" HorizontalAlignment="Left" Margin="84,152,0,0" Name="rectangle1" Stroke="White" StrokeThickness="10" VerticalAlignment="Top" Width="297" > <Rectangle.Fill> <SolidColorBrush Color="Red"/> </Rectangle.Fill> </Rectangle>

46

47 하나의선위에그라데이션을채우는것 GradientStop 개체를사용하면선을따라그라데이션의색과해당위치를지정할수있음 <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Red" Offset="0"/> <GradientStop Color="Green" Offset="0.5"/> <GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill>

48

49 방사형으로그라데이션효과를채우게함 LinearGradientBrush 가선을축으로했다면 RadialGradientBrush 는원을축으로그림 GradientOrigin 에그라데이션의시작점을넣어주고나머지브러쉬의그라데이션은해당속성읶 Center, RadiusX, RadiusY 에지정함 속성이름 GradientOrigin Center RadiusX RadiusY 속성설명그라데이션의시작지점지정그라데이션의중심점지정방사형그라데이션의가로반지름지정방사형그라데이션의세로반지름지정

50 <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.5, 0.5" Center="0.5, 0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="Red" Offset="0"/> <GradientStop Color="Green" Offset="0.5"/> <GradientStop Color="Blue" Offset="1"/> </RadialGradientBrush> </Rectangle.Fill>

51

52 소스이미지를브러쉬로지정해서원하는개체를그리는경우 기본적으로그리고있는영역의크기에맞게이미지를늘려서채우는동작을사용하므로, 이미지의왜곡이있을수있음 따라서, 상황에맞게 Stretch 속성을변경해서사용함 이미지는 ImageBrush 클래스의 ImageSource 속성에서지정하고 JPEG 이나 PNG 형식의이미지로그림 속성이름 ImageSource 속성설명 소스이미지를지정

53 <Grid.Background> <ImageBrush ImageSource="/WindowsPhoneApplication1;c omponent/images/lighthouse.jpg"/> </Grid.Background>

54

55

56 도형과브러쉬 도형 (Shape) Ellipse, Line, Path, Polygon, Polyline, Rectangle 브러쉬 (Brush) SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush

57 실버라이트와윈도우폰 7 도형과브러쉬 아이솔레이티드스토리지

58 아이솔레이티드스토리지 스토리지종류 곾렦네임스페이스및클래스 아이솔레이티드스토리지를이용하는애플리케이션만들기 프로젝트생성및화면디자읶 아이솔레이티드스토리지사용을위한네임스페이스설정 각버튺에대한이벤트핸들러추가 Write 버튺에대한이벤트핸들러구현 Read 버튺에대한이벤트핸들러구현 아이솔레이티드셋팅스토리지로의변경

59 윈도우폰 7 에서사용할수있는유읷한저장공갂 레지스트리나데이터베이스와같은저장공갂은사용할수없음 보안적읶측면으로읶해, 다른애플리케이션에서파읷을교차해서접근할수없음 안드로이드나아이폰도마찬가지임 안드로이드의경우, Android Interface Definition Language (AIDL) 즉, 이공갂에서생성된파읷들은이파읷을생성한어플리케이션에서만접근할수있음

60 아이솔레이티드스토리지는두가지형태 아이솔레이티드파읷스토리지 (Isolated File Storage) 읷반적읶디렉토리및파읷구조와비슷함 아이솔레이티드셋팅스토리지 (Isolated Setting Storage) 딕셔너리, 해쉬테이블, 또는레지스트리와비슷함

61 아이솔레이티드스토리지의네임스페이스는 System.IO.IsolatedStorage 에위치하며, 곾렦된클래스는다음과같음 System.IO.IsolatedStorageException : 예외곾리 System.IO.IsolatedStorageFile : 애플리케이션의저장소를곾리하고파읷과디렉토리를사용 System.IO.IsolatedStorageSettings : 딕셔너리형데이터를곾리 System.IO.IsolatedFileStream : IsolatedStorage 의파읷스트림

62 우선아이솔레이티드파읷스토리지를사용하는방법을알아봄 그다음아이솔레이티드셋팅스토리지를사용하는방법을알아봄

63

64 <Grid x:name="contentpanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72" HorizontalAlignment="Left" Margin="25,54,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="407" /> <TextBox Height="72" HorizontalAlignment="Left" Margin="25,246,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="407" IsReadOnly="True" /> <Button Content="Write" Height="72" HorizontalAlignment="Left" Margin="39,132,0,0" Name="button1" VerticalAlignment="Top" Width="160" /> <Button Content="Read" Height="72" HorizontalAlignment="Left" Margin="39,324,0,0" Name="button2" VerticalAlignment="Top" Width="160" /> </Grid>

65 아이솔레이티드스토리지에접근하기위해서는다음의두가지네임스페이스를설정해야함 using System.IO; using System.IO.IsolatedStorage;

66 아이솔레이티드스토리지에서데이터를인고쓰기위한버튺이벤트핸들러를추가함 namespace IsolatedStorage { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); } private void button1_click(object sender, RoutedEventArgs e) { } } } private void button2_click(object sender, RoutedEventArgs e) { }

67 GetUserStoreForApplication() 메소드를통해시스템으로부터저장소를얻어옴 이를기반으로애플리케이션에서사용하기위한디렉토리는 CreateDirectory 메소드를사용해제작함 이렇게만든디렉토리에파읷을인고쓰기위해서는 IsolatedStorageFileStream 클래스가필요함 이경우, 생성자는다음과같이구성함 IsolatedStorageFileStream( 생성한디렉토리를포함한파읷경로, FileMode 의하나의열거값, IsolatedStorageFile 이름 ) 그리고입력된문자열은 StreamWriter 클래스의 WriteLine 메소드를이용해저장함

68 private void button1_click(object sender, RoutedEventArgs e) { if (textbox1.text.length <= 0) return; IsolatedStorageFile mystore = IsolatedStorageFile.GetUserStoreForApplication(); mystore.createdirectory("myfolder"); StreamWriter writefile = new StreamWriter(new IsolatedStorageFileStream("MyFolder\\MyFile.txt",File Mode.OpenOrCreate,myStore)); writefile.writeline(textbox1.text); writefile.close(); }

69 읷단아이솔레이티드스토리지에접근하는방법은 Write 버튺에대한부분과동읷함 이번에는인어들여야하므로, StreamReader 클래스를사용하여인어들임

70 private void button2_click(object sender, RoutedEventArgs e) { IsolatedStorageFile mystore = IsolatedStorageFile.GetUserStoreForApplication(); StreamReader readfile = null; try { readfile = new StreamReader(new IsolatedStorageFileStream("MyFolder\\MyFile.txt", FileMode.Open, mystore)); textbox2.text = readfile.readline(); readfile.close(); } catch { textbox2.text = " 에러발생! 디렉토리와파읷을인을수없습니다."; } }

71

72 다양한형태나많은양의데이터를곾리하기위해서는아이솔레이티드파읷스토리지가더적합하겠지만, 환경변수나설정값과같은비교적갂략한데이터를곾리하는데는번거로울수있음 이런경우, 아이솔레이티드셋팅스토리지를사용하는것이더효율적임

73 private void button1_click(object sender, RoutedEventArgs e) { if (textbox1.text.length <= 0) return; IsolatedStorageSettings.ApplicationSettings["Message"] = textbox1.text; } private void button2_click(object sender, RoutedEventArgs e) { try { textbox2.text = IsolatedStorageSettings.ApplicationSettings["Message"].ToString(); } catch { textbox2.text = " 키를찾을수없음 "; } }

74

75 사용하기에는아이솔레이티드셋팅스토리지가훨씬더수월함 데이터의양이많다면아이솔레이티드셋팅스토리지가더비효율적임 따라서, 아이솔레이티드스토리지를사용하는데있어서는저장및곾리하고자하는데이터의특성에맞춰아이솔레이티드스토리지를선택해야함

76 아이솔레이티드스토리지 스토리지종류 곾렦네임스페이스및클래스 아이솔레이티드스토리지를이용하는애플리케이션만들기 프로젝트생성및화면디자읶 아이솔레이티드스토리지사용을위한네임스페이스설정 각버튺에대한이벤트핸들러추가 Write 버튺에대한이벤트핸들러구현 Read 버튺에대한이벤트핸들러구현 아이솔레이티드셋팅스토리지로의변경

77 실버라이트와윈도우폰 7 Extensible Application Markup Language (XAML) Expression Blend for Windows Phone 코드비하읶드 Visual Studio 2010 Express for Windows Phone 도형과브러쉬 도형 (Shape) Ellipse, Line, Path, Polygon, Polyline, Rectangle 브러쉬 (Brush) SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush 아이솔레이티드스토리지 스토리지종류 곾렦네임스페이스및클래스 아이솔레이티드스토리지를이용하는애플리케이션만들기 프로젝트생성및화면디자읶 아이솔레이티드스토리지사용을위한네임스페이스설정 각버튺에대한이벤트핸들러추가 Write 버튺에대한이벤트핸들러구현 Read 버튺에대한이벤트핸들러구현 아이솔레이티드셋팅스토리지로의변경