패널 내용 보는 방법[발롱도르~]

Jovovich
2017.04.01. 21:20
4447
9
42

https://www.flayus.com/16839081

처음 xml 파일을 열어보면 막 뭔가 어려워보이고 복잡해 보이고 어떻게 해야하나 막막합니다.

천천히 차근차근 살펴보며 어떻게 구성되어 있는지 한 번 알아봅시다.

오늘의 도우미는 건조스킨 3.0 화이트블루 선수 프로필 화면입니다.

player overview panel.xml 파일을 열어봅시다.

저는 visual studio 2015 를 사용합니다. 각자 사용하는 프로그램이나 메모장으로 열어봅니다.

이렇게 player overview panel.xml 의 내용입니다.

xml 파일은 <명령어> </명령어> 이렇게 구성됩니다.

줄여서 <명령어/> 이렇게도 가능합니다.

그리고

이것 사이에 있는 것은 내용들을 보기쉽게 나누어서 설명하는 것입니다.

이 있으면 이 부분은 profile 부분이다 라고 나타내는 것입니다.

이제 하나씩 살펴봅시다.

가장 위에

<?xml version='1.0' encoding='utf-8'?>

이건 이 파일이 속성 같은겁니다. 신경 안 써도 됩니다. 건드리지 말고 넘어갑니다.

<panel> 이 있는데 </panel> 은 없고 아래에 바로 다른 것이 나오네요

</panel> 이 어디있는지 찾아봅시다.

어? 가장 아래에 있네요

즉 <panel> 과 </panel> 사이에 있는 것들은

<panel> 안에 있다는 것입니다.

위에서 <명령어/> 로 줄여서 표현도 가능하다고 했습니다.

원래

</layout>

인데 layout 안에 딱히 더 넣을게 없으니 공간절약도 되고 편하기도 하고 줄여서 나타낸 것일거예요

layout 즉 레이아웃입니다... 영어사전 찾아봐도 레이아웃이라네요.. 뭐 구획? 배치? 정도로 생각하면 될거 같아요

player overview panel.xml 파일은 크게 보면

<panel>

내용

</panel>

panel을 이런 레이아웃으로 내용을 배치해라 정도가 되겠네요

내용부분을 살펴보겠습니다.

<panel> 은 하나뿐이라 </panel>을 쉽게 찾았는데

아래 <container> 는 많이 보이네요 짝인 </container>를 찾아봅시다.

안에 보이는 것 부터 작은 묶음부터 하나씩 하나씩 찾아가는 것입니다.

( 혹시 더 좋은 방법 있으시면 알려주세요~ )

이 container의 짝인 </container>가 나올때까지 안에 있는 것을 묶어가는 것입니다.

빨간 박스 <widget> ~ </widget> 이 있고 이것을 포함하고 있는 <container> </container> 가 있네요

그리고 하얀박스 <container> 가 시작하고 이 안에 노란박스 <widget> </widget>, 파란박스... 아래에 게속 있네요

그리고 더 내려가면 하얀박스 </container> 가 있겠죠

이렇게 <>~</> 계속 찾아나갑니다.

크게 이렇게 4개의 <container> ~ </container> 묶음이 들어 있네요

( visual studio 에는 이렇게 묶어주는 기능이 있습니다. 다른 프로그램도 있을거 같은데 안 써봐서....)

이 패널은 크게 하나의 container 안에 4개의 container로 구성되어 있네요

이 4개의 container는 이것들을 포함하고 있는 container의 layout대로 배치되어 있는 것입니다.

영어를 조금 하실 수 있으시면 눈치채셨겠지만

class="horizontal_adaptive_container" horizontal adaptive container 수평 맞추는 container 라는 말이겠죠 수평으로 배치하라는 말 같아요

class="stick_to_sides_attachment" 사이드를 붙여 정도로 보면 되겠네요

종합하면 container 안에 내용들을 수평으로 붙여서 배치해라 정도가 되겠네요

안에 있는 4개의 container를 수평으로 배치하는 것이지요

이렇게 보면 크게 수평으로 4개로 나누어 져 있는 것이 보일겁니다.

크게 어떻게 나누어져 있는지 살펴봤으니

이제 세부적으로 한 번 살펴봅시다.

<container class="vertical_adaptive_container" offset="0" inset="0" gap="0" width="370" priority="1" mode="distribute_equally">

이 container 안에는 2개의 container가 있네요 vertical_adaptive_container 이므로 수직으로 즉, 세로로 배치되겠네요

첫번째 container를 먼저 살펴 봅시다.

</container>

이 container 안에는 widget이 하나가 있네요

이것이 container의 내용인데 이건 뭘 나타내는 걸까요? file="gunzo/gunzo player profile" 이 있는걸로봐서 이 파일을 쓰는거 같긴한데...

한 번 지워봅시다.

달라진 점 보이시죠?

없어진 저 부분을 나타내는 것이군요

지운것을 다시 살려줍니다.

class="player_personal_details_panel"

아까 container는 배치? 구획 같은걸 나타냈던거 같은데 이건 뭐지?

class 사전 찾아보니까 등급? 계층? 학급? 그런 뜻인데... class는 속성? 특성 정도로 이해하면 될거 같아요

여기서 이 widget의 속성은 player personal details panel.

id="prop" 이건 그냥 이름입니다. 이 widget의 id는 prop 입니다.

file="gunzo/gunzo player profile" 파일은 gunzo폴더의 gunzo player profile 이다

default_width="-1" 디폴트 가로는 -1 이고

priority="1" 우선순위는 1이다.

이 widget의 내용은

이렇다

정도 인데..

자세한건 이런 코딩이라해야하나 언어라고 해야하나 암튼 컴알못이라 잘 모르겠어요

그래서 볼건

file=, default_width=,priority= 이정도네요 ㅎㅎ

일단 이 widget은 gunzo player profile이 필요하고, 가로는 -1 이고 우선순위는 1이다.

가로가 -1 ... 가로, 세로등 숫자 앞에 -(마이너스) 가 붙으면 비율이 됩니다.

예를들어 layout="-2, -3" 이라면 2:3 의 비율이 되는 것이지요

우선순위는 숫자가 작을 수록 우선순위가 높은 겁니다. 칸이 모자라다면 우선순위가 낮은 것부터 안보이게 됩니다.

이제 다음 container를 봅시다.

이 container는 tabbed_container네요 탭으로 구성된 container겠죠

appearance="boxes/bordered/no margin/paper2" 이 container의 모습은 boxes/bordered/no margin/paper2 파일을 쓴다.

모습이니 그래픽 파일일거 같아요 graphics/boxes/bordered/no margin 폴더의 paper2.png 파일입니다.

(찾아보니까 없네요;; 이렇게 파일이 없을 경우엔 적용이 안된 상태. 없는 상태로 인식해서 그냥 투명하게 나옵니다. )

tabbed_container 안에 여러 widget들이 보이네요

으로 각 widget 들이 어떤건지 잘 설명해 놓으셨네요 갓건조니뮤

하지만 확인해 보기 위해서 하나만 지워봅시다.

가장 아래 club 부분을 지워 볼게요

구단 탭이 없어졌네요

이걸로 각각 widget 이 하나의 탭인것을 알 수 있습니다.

다시 원래대로 삭제한것을 살려주세요

안에 widget을 한 번 봅시다

<widget class="player_personal_details_panel" id="gzp0" file="gunzo/gunzo player profile tab0" default_width="-1" priority="1">
<translation id="title" translation_id="323122" type="use" value="Overview[COMMENT: Player comparison type header]" />
<record id="object_property" get_property="objt" set_property="objt"/>
</widget>

첫번째 status 탭입니다. 한글로 기본정보 탭이네요

이 widget의 class는 player_personal_details_panel 이고 id는 gzp0 라고 이름지어 주셨네요

여기에 사용된 파일은 gunzo 폴더의 gunzo player profile tab0 라는 파일입니다.

translation 이건 영문으로 했을때 Overview 로 탭 이름이 나오고 이 영문 overview를 번역하면 각언어의 323122부분의 번역된 말로 나타내는 것입니다.