MonoTouch.Dialog Json 태그

아티클
03/08/2024

이 페이지에서는 MonoTouch.Dialog의 JsonElement에서 수락한 Json 태그에 대해 설명합니다.

예제부터 살펴보겠습니다. 다음은 JsonElement에 전달할 수 있는 전체 Json 파일입니다.

{     
    "title": "Json Sample",
    "sections": [ 
        {
            "header": "Booleans",
            "footer": "Slider or image-based",
            "id": "first-section",
            "elements": [
                { 
                    "type": "boolean",
                    "caption": "Demo of a Boolean",
                    "value": true
                }, {
                    "type": "boolean",
                    "caption": "Boolean using images",
                    "value": false,
                    "on": "favorite.png",
                    "off": "~/favorited.png"
                }, {
                    "type": "root",
                    "title": "Tap for nested controller",
                    "sections": [
                        {
                            "header": "Nested view!",
                            "elements": [
                                {
                                    "type": "boolean",
                                    "caption": "Just a boolean",
                                    "id": "the-boolean",
                                    "value": false
                                }, {
                                    "type": "string",
                                    "caption": "Welcome to the nested controller"
                                }
                            ]
                        }
                    ]
                }
            ]
        }, {
            "header": "Entries",
            "elements" : [
                {
                    "type": "entry",
                    "caption": "Username",
                    "value": "",
                    "placeholder": "Your account username"
                }
            ]
        }
    ]
}

위의 태그는 다음 UI를 생성합니다.

트리의 모든 요소는 속성을 "id"포함할 수 있습니다. 런타임 시 JsonElement 인덱서를 사용하여 개별 섹션 또는 요소를 참조할 수 있습니다. 다음과 같습니다.

var jsonElement = JsonElement.FromFile ("demo.json");

var firstSection = jsonElement ["first-section"] as Section;

var theBoolean = jsonElement ["the-boolean"] as BooleanElement;

루트 요소 구문

Root 요소에는 다음 값이 포함됩니다.

title
sections(선택 사항)

루트 요소는 중첩된 컨트롤러를 만드는 요소로 섹션 내부에 나타날 수 있습니다. 이 경우 추가 속성 "type" 은 다음으로 설정해야 합니다. "root"

url

속성이 "url" 설정된 경우 사용자가 이 RootElement를 탭하면 코드는 지정된 URL에서 파일을 요청하고 내용을 새 정보로 표시합니다. 이를 사용하여 사용자가 탭하는 내용에 따라 서버에서 사용자 인터페이스를 확장할 수 있습니다.

group

이 값을 설정하면 루트 요소의 그룹 이름이 설정됩니다. 그룹 이름은 요소의 중첩된 요소 중 하나에서 루트 요소의 값으로 표시되는 요약을 선택하는 데 사용됩니다. 이 값은 검사box의 값이거나 라디오 단추의 값입니다.

라디오 선택됨

중첩된 요소에서 선택된 라디오 항목을 식별합니다.

title

있는 경우 RootElement에 사용되는 제목이 됩니다.

type

섹션에 "root" 표시되는 경우(컨트롤러를 중첩하는 데 사용됨)로 설정해야 합니다.

섹션

개별 섹션이 있는 Json 배열입니다.

섹션 구문

섹션에는 다음이 포함됩니다.

header(선택 사항)
footer(선택 사항)
elements 배열

있는 경우 머리글 텍스트는 섹션의 캡션 표시됩니다.

있는 경우 바닥글이 섹션의 아래쪽에 표시됩니다.

요소

요소의 배열입니다. 각 요소에는 만들 요소의 종류를 식별하는 데 사용되는 키 "type" 인 키가 하나 이상 포함되어야 합니다. 일부 요소는 다음과 같은 "caption" 몇 가지 공통 속성을 공유합니다 "value". 다음은 지원되는 요소 목록입니다.

string 요소(스타일 지정 및 스타일 지정 안 됨)
entry 줄(일반 또는 암호)
boolean 값(스위치 또는 이미지 사용)

문자열 요소는 사용자가 셀 또는 액세서리를 탭할 때 호출할 메서드를 제공하여 단추로 사용할 수 있습니다.

렌더링 요소

렌더링 요소는 C# StringElement 및 StyledStringElement를 기반으로 하며 다양한 방법으로 정보를 렌더링할 수 있으며 다양한 방법으로 렌더링할 수 있습니다. 가장 간단한 요소는 다음과 같이 만들 수 있습니다.

{
    "type": "string",
    "caption": "Json Serializer"
}

글꼴, 배경, 텍스트 색 및 장식과 같은 모든 기본값이 포함된 간단한 문자열이 표시됩니다. 이러한 요소에 작업을 연결하고 속성 또는 "onaccessorytap" 속성을 설정 "ontap" 하여 단추처럼 동작하도록 할 수 있습니다.

{
    "type": "string",
    "caption": "View Photos",
    "ontap": "Acme.PhotoLibrary.ShowPhotos"
}

위의 내용은 "Acme.PhotoLibrary" 클래스에서 "Show사진" 메서드를 호출합니다. "onaccessorytap" 유사하지만 사용자가 셀을 탭하는 대신 액세서리를 탭하는 경우에만 호출됩니다. 이 기능을 사용하려면 액세서리도 설정해야 합니다.

{
    "type": "string",
    "caption": "View Photos",
    "ontap": "Acme.PhotoLibrary.ShowPhotos",
    "accessory": "detail-disclosure",
    "onaccessorytap": "Acme.PhotoLibrary.ShowStats"
}

렌더링 요소는 한 번에 두 개의 문자열을 표시할 수 있으며, 하나는 캡션, 다른 하나는 값입니다. 이러한 문자열이 렌더링되는 방법은 스타일에 따라 달라지며 속성을 사용하여 "style" 설정할 수 있습니다. 기본값은 왼쪽의 캡션 오른쪽에 값을 표시합니다. 자세한 내용은 스타일 섹션을 참조하세요. 색은 '#' 기호와 빨강, 녹색, 파랑 및 알파 값의 값을 나타내는 16진수 숫자를 사용하여 인코딩됩니다. 콘텐츠는 RGB 또는 RGBA 값을 나타내는 짧은 형식(3 또는 46진수)으로 인코딩할 수 있습니다. 또는 RGB 또는 RGBA 값을 나타내는 긴 형식(6 또는 8자리 숫자)입니다. 짧은 버전은 동일한 16진수 숫자를 두 번 쓰는 약식입니다. 따라서 "#1bc" 상수는 red=0x11, green=0xbb 및 blue=0xcc로 해석됩니다. 알파 값이 없으면 색이 불투명합니다. 몇 가지 예:

"background": "#f00"
"background": "#fa08f880"

액세서리

렌더링 요소에 표시할 액세서리의 종류를 결정합니다. 가능한 값은 다음과 같습니다.

checkmark
detail-disclosure
disclosure-indicator

값이 없으면 액세서리가 표시되지 않습니다.

백그라운드

배경 속성은 셀의 배경색을 설정합니다. 값은 이미지의 URL이거나(이 경우 비동기 이미지 다운로더가 호출되고 이미지가 다운로드되면 배경이 업데이트됨) 색 구문을 사용하여 지정한 색일 수 있습니다.

caption

렌더링 요소에 표시할 기본 문자열입니다. 글꼴 및 속성을 설정하여 글꼴 및 "font" 색을 "textcolor" 사용자 지정할 수 있습니다. 렌더링 스타일은 속성에 의해 결정됩니다 "style" .

색 및 세부 색

기본 텍스트 또는 자세한 텍스트에 사용할 색입니다.

detailfont 및 font

캡션 또는 세부 텍스트에 사용할 글꼴입니다. 글꼴 사양의 형식은 필요에 따라 대시와 점 크기 뒤에 있는 글꼴 이름입니다. 유효한 글꼴 사양은 다음과 같습니다.

"헬베티카"
"헬베티카-14"

linebreak

선을 분할하는 방법을 결정합니다. 가능한 값은 다음과 같습니다.

character-wrap
clip
head-truncation
middle-truncation
tail-truncation
word-wrap

둘 다 character-wrap 0 word-wrap 으로 설정된 속성과 "lines" 함께 사용하여 렌더링 요소를 여러 줄 요소로 변환할 수 있습니다.

ontap 및 onaccessorytap

이러한 속성은 개체를 매개 변수로 사용하는 애플리케이션의 정적 메서드 이름을 가리킵니다. JsonDialog.FromFile 또는 JsonDialog.FromJson 메서드를 사용하여 계층을 만들 때 선택적 개체 값을 전달할 수 있습니다. 그런 다음 이 개체 값이 메서드에 전달됩니다. 이를 사용하여 정적 메서드에 일부 컨텍스트를 전달할 수 있습니다. 예시:

class Foo {
    Foo ()
    {
        root = JsonDialog.FromJson (myJson, this);
    }

    static void Callback (object obj)
    {
        Foo myFoo = (Foo) obj;
        obj.Callback ();
    }
}

lines

이 값을 0으로 설정하면 포함된 문자열의 내용에 따라 요소의 자동 크기가 지정됩니다. 이렇게 하려면 속성 "character-wrap" 도 설정 "linebreak" 해야 "word-wrap"합니다.

style

스타일은 콘텐츠를 렌더링하는 데 사용할 셀 스타일의 종류를 결정하며 UITableViewCellStyle 열거형 값에 해당합니다. 가능한 값은 다음과 같습니다.

"default"
"value1"
"value2"
"subtitle" : 자막이 있는 텍스트입니다.

부제목

부제에 사용할 값입니다. 스타일을 "subtitle" 문자열로 설정하고 속성을 설정하는 "value" 바로 가기입니다. 이 작업은 둘 다 단일 항목으로 수행합니다.

textcolor

텍스트에 사용할 색입니다.

value

렌더링 요소에 표시할 보조 값입니다. 이 레이아웃은 설정의 영향을 받습니다 "style" . 및 을 설정하여 글꼴 및 색을 "detailfont""detailcolor"사용자 지정할 수 있습니다.

부울 요소

부울 요소는 형식을 "bool"/>로 설정해야 하며, 표시할 형식을 "caption" 포함할 수 있으며 "value" true 또는 false로 설정됩니다. 및 "off" 속성이 "on" 설정되면 이미지로 간주됩니다. 이미지는 애플리케이션의 현재 작업 디렉터리를 기준으로 확인됩니다. 번들 상대 파일을 참조하려면 바로 가기로 사용하여 "~" 애플리케이션 번들 디렉터리를 나타낼 수 있습니다. 예를 들어 "~/favorite.png" 번들 파일에 포함된 favorite.png 있습니다. 예시:

{ 
    "type": "boolean",
    "caption": "Demo of a Boolean",
    "value": true
},

{
    "type": "boolean",
    "caption": "Boolean using images",
    "value": false,
    "on": "favorite.png",
    "off": "~/favorited.png"
}

type

형식은 둘 중 하나 "boolean" 또는 "checkbox".로 설정할 수 있습니다. 부울로 설정하면 UISlider 또는 이미지(둘 다 "on""off" 설정된 경우)를 사용합니다. 검사box로 설정하면 검사box를 사용합니다. 이 속성은 "group" 부울 요소에 특정 그룹에 속하는 것으로 태그를 지정하는 데 사용할 수 있습니다. 이는 루트가 동일한 그룹에 속한 모든 부울(또는 검사boxes)의 수로 결과를 요약하기 때문에 포함하는 루트에도 "group" 속성이 있는 경우에 유용합니다.

항목 요소

사용자가 데이터를 입력할 수 있도록 항목 요소를 사용합니다. 항목 요소의 형식은 하나 "entry" 또는 "password".입니다. "caption" 속성은 오른쪽에 표시할 텍스트로 설정되며 "value" 항목을 설정할 초기 값으로 설정됩니다. 빈 "placeholder" 항목에 대한 힌트를 사용자에게 표시하는 데 사용됩니다(회색으로 표시됨). 다음 몇 가지 예를 참조하세요.

{
    "type": "entry",
    "caption": "Username",
    "value": "",
    "placeholder": "Your account username"
}, {
    "type": "password",
    "caption": "Password",
    "value": "",
    "placeholder": "You password"
}, {
    "type": "entry",
    "caption": "Zip Code",
    "value": "01010",
    "placeholder": "your zip code",
    "keyboard": "numbers"
}, {
    "type": "entry",
    "return-key": "route",
    "caption": "Entry with 'route'",
    "placeholder": "captialization all + no corrections",
    "capitalization": "all",
    "autocorrect": "no"
}

autocorrect

항목에 사용할 자동 수정 스타일을 결정합니다. 가능한 값은 true 또는 false(또는 문자열 및"no")입니다"yes".

대/소문자

항목에 사용할 대문자 스타일입니다. 가능한 값은 다음과 같습니다.

all
none
sentences
words

caption

항목에 사용할 캡션

Keyboard

데이터 입력에 사용할 키보드 유형입니다. 가능한 값은 다음과 같습니다.

ascii
decimal
default
email
name
numbers
numbers-and-punctuation
twitter
url

placeholder

항목에 빈 값이 있을 때 표시되는 힌트 텍스트입니다.

return-key

반환 키에 사용되는 레이블입니다. 가능한 값은 다음과 같습니다.

default
done
emergencycall
go
google
join
next
route
search
send
yahoo

value

항목의 초기 값입니다.

라디오 요소

라디오 요소에는 형식 "radio"이 있습니다. 선택한 항목은 포함하는 루트 요소의 radioselected 속성에 의해 선택됩니다. 또한 속성에 대해 "group" 값이 설정된 경우 이 라디오 단추는 해당 그룹에 속합니다.

날짜 및 시간 요소

요소 형식 "datetime""date" 이며 "time" 시간, 날짜 또는 시간을 사용하여 날짜를 렌더링하는 데 사용됩니다. 이러한 요소는 캡션 및 값을 매개 변수로 사용합니다. 이 값은 .NET DateTime.Parse 함수에서 지원하는 모든 형식으로 작성할 수 있습니다. 예시:

"header": "Dates and Times",
"elements": [
    {
        "type": "datetime",
        "caption": "Date and Time",
        "value": "Sat, 01 Nov 2008 19:35:00 GMT"
    }, {
        "type": "date",
        "caption": "Date",
        "value": "10/10"
    }, {
        "type": "time",
        "caption": "Time",
        "value": "11:23"
    }                       
]

Html/웹 요소

탭하면 형식을 사용하여 로컬 또는 원격으로 지정된 URL의 내용을 렌더링하는 UIWebView를 포함하는 셀을 "html" 만들 수 있습니다. 이 요소에 대한 두 가지 속성은 다음과 같습니다"caption"."url"

{
    "type": "html",
    "caption": "Miguel's blog",
    "url": "https://tirania.org/blog" 
}

MonoTouch.Dialog Json 태그

루트 요소 구문

url

group

라디오 선택됨

title

type

섹션

섹션 구문

헤더

바닥글

요소

렌더링 요소

액세서리

백그라운드

caption

색 및 세부 색

detailfont 및 font

linebreak

ontap 및 onaccessorytap

lines

style

부제목

textcolor

value

부울 요소

type

항목 요소

autocorrect

대/소문자

caption

Keyboard

placeholder

return-key

value

라디오 요소

날짜 및 시간 요소

Html/웹 요소

추가 리소스