[SketchFlow 따라하기] Using Sample Data in SketchFlow

 

이번 포스팅에서 다뤄볼 내용은 바로 샘플 데이터를 삽입하는 것입니다. 그냥 단순하게 프로토타입의 틀만 있는 것은 단순하니까 뭔가의 샘플 데이터를 삽입함으로써 조금더 풍부하게끔 보이게 하는 것이죠.

 

10.zip

 

처음 뜨는 메인 화면에서 Board Screen을 선택해줍니다. 이번에 할 건은 가운데 왼쪽에 보이는 all Terrain에 스노우 보드 이미지를 삽입하는 겁니다. 지금 상태에서는 그 위치에 SketchRectangle이 들어가 있는데 다른 걸 넣어야 합니다. 그러니까 지금 보이는 개체는 없애줍니다.

 

 

이번에 새로넣어줘야 할 개체는 이겁니다. 우선 Assets에서 Style로 들어가면

 

 

SketchStyle에 ListBox라는 항목이 있습니다. 이걸 아까 지웠던 항목에 삽입해줍니다. 겉보기에는 아까의 SketchRectagle와 별반 차이가 없지만 밑의 Object and Timeline 에 보면 해당 개체가 ListBox로 삽입된 것을 확인할 수 있습니다.

 

이제 ListBox가 선택된 상태에서 window의 Data 패널을 열도록 합니다. 이제 샘플 데이터를 삽입해야 합니다.

 

 

그럼 Properties가 있던 창에 새롭게 Data라는 패널이 형성되었습니다. 여기서 새로운 샘플데이터를 하나 생성합니다.

 

 

이름을 집어넣으라는 메뉴가 뜨는데 예제에서 한것처럼 SnowBoardData로 해보겠습니다.

 

 

이렇게까지 하고 나면 Data창에 여러가지 개체가 생성됩니다. 지금 해당 샘플데이터로 들어가 있는 것은 Property1 과 Property 2입니다. 이를 수정하기 위해서는 Collection 옆의 Edit Sample Values를 선택해줍니다.

 

 

자 이제 지금 샘플데이터로 떠 있는 것이 Property1과 Property2라고 했는데 1은 Text 2는 boolean으로 형이 지정되어 있습니다. 우리는 Property1에 보드 이미지를 넣고자 합니다. 이를 위해서는 이름 옆의 Change Property type을 선택해줍니다.

 

 

 

당연히 처음거는 Image를 선택해줘야겠지요. 그러면 폴더를 선택하게 되어 있는데 첨부된 파일 내부로 들어가보면 sampleData라는 폴더가 있습니다. 이안의 snowboards_file을 선택해줘야 합니다.

 

 

처음 열었을때는 이렇게 텅빈 화면이지만 지금은 폴더를 선택하는 것이기 때문에 바로 폴더 선택버튼을 누릅니다. 그러면 기존에 Text로 되어있던 Property1이 Image로 바뀌게 됩니다.

 

 

이렇게 보드 이미지가 삽입된다는 것이지요. 같은 방법으로 Property2도 텍스트로 바꿔줍니다. 참고로 이 항목에서는 SampleData의 갯수도 수정할 수 있습니다.

자 샘플 데이터가 만들어졌습니다. 이제 각각의 이름을 알맞게 수정하면 됩니다.

 

 

이걸 시각화하기 위해서는 Collection을 선택하고 해당 ListBox로 드래그 해주면 됩니다. 그러면

 

 

위와 같이 샘플데이터가 입혀지게 됩니다. 그런데 뭔가 이상하지요. 그림도 너무 작은 것 같습니다. 먼저 그림부터 키우려면 해당 ListBox의 Template를 수정해야 합니다. 그런데 지금과 같이 만든 개체는 말 그대로 ListBox에 추가로 생성된 아이템들입니다. 그래서 그 Template을 수정하기 위해서는 Additional Template을 고쳐줘야 합니다. 그리고 지금처럼 DataBinding으로 삽입한 경우에는 새롭게 생성된 것이므로 Generated Item을 고쳐줘야 합니다. 물론 지금 상태이므로 Edit Current를 선택해주면 되겠지요.

 

 

이제 내부의 개체를 선택할 수 있습니다. 그 사진을 쭉 늘리면 되겠지요.물론 지난 시간에도 다뤘지만 StackPanel이 이러게 묶인 상태이기 때문에 하나를 선택하면 그 영향이 밑에 있는 개체에도 끼치게 됩니다. 그래서 맨위 그림만 수정해도 아래의 아이템들의 크기도 같이 수정이 되겠지요.

 

 

물론 Player로 돌려보면 제대로 나올겁니다.

 

 

각 보드의 글이 이상하게 나온건 아까 SampleData에서 Text부분을 각각 수정해주면 됩니다. 여기까지가 SampleData의 삽입과정이었습니다.