JSON View

Okunmak için dizilmiş bir JSON metni: her satırda bir değer, her düzey kendisini tutandan içeride, her tür değer kendi renginde. Her nesne ve her dizi ilk satırının arkasına katlanır.

import com.pantrixui.components.data.jsonview.PantrixJsonView

• Katlama. Katlanan satır bir düğmedir ve başında bir ok durur: satır açıkken aşağıyı, katlanmışken ileriyi gösterir. Basmak, Enter ve boşluk satırı katlar ve açar.
• Kılavuz çizgileri. Açık her nesneden ve diziden, okunun altından, içindekilerin sonuna kadar ince bir çizgi iner: girintinin dar olduğu yerde bir düzeyi ötekinden ayırır. Kalınlığı JsonViewStyle.guideWidth, rengi JsonViewColors.guide'dır; kalınlık sıfır verilirse çizilmez.
• İlk açılış. expandedDepth başta kaç düzeyin açık olduğunu söyler: 1 metnin kendi değerini açar ve içindekileri katlanmış bırakır, 2 onları da açar. Verilmezse her düzey açıktır. Başka bir derinlik vermek görünümü oradan yeniden başlatır.
• Ekranın durumu. expanded alan biçimde açık nesnelerin ve dizilerin yolları ekranın durumudur: bir satıra basılınca açık olması gereken yeni küme onExpandedChange ile bildirilir, görünüm kendiliğinden bir şey değiştirmez.
• Yollar. Bir yol bir JSON Pointer'dır (RFC 6901): metnin kendi değeri boş metindir, user üyesi /user, onun tags'inin ilki /user/tags/0. jsonViewPaths bir belgeyi istenen derinliğe kadar açan yolları verir.
• Arama. search aradığını adlarda ve değerlerde, büyük küçük harfe bakmadan işaretler; içinde aranandan bir şey olan katlanmış bir değer bütünüyle işaretlenir. Görünüm, kaydığı yerde, bulduklarının ilkini ekrana getirir. Neyin açık olduğunu kendisi tutan görünüm, içinde aranandan bir şey olan değerleri de açar; okuyucunun katladığı katlı kalır. expanded alan biçimde açmak ekranın işidir: açılacak yolları jsonViewSearchPaths verir. İşaretin dolgusu JsonViewColors.match'tir.
• Satır numaraları. lineNumbers her satırın başına numarasını yazar: belge bütünüyle açıkken taşıdığı numarayı. Katlanmış bir değer açıldığı satırın numarasını korur ve ardındaki satır, katlanan satırların biteceği yerden sürer. Numaralar seçilmez ve ekran okuyucuya okunmaz.
• Genişlik. Görünüm kendisine verilen genişliği doldurur; sığmayan satır kendi altında sürer. Bir satır, ne kadar derinde olursa olsun, görünümün genişliğinin yarısından fazla içeri girmez.
• Bölünmeyen satırlar. softWrap = false her değeri tek satırda tutar: görünüm genişliğini korur ve belge yana kayar. Bölünmeyen bir satır yarı genişlikte tutulmaz, girintisinin tamamı kadar içeridedir.
• Yükseklik. Yükseklik verilen görünümde belge o yüksekliğin içinde kayar ve yalnızca ekrandaki satırlar kurulur: binlerce satırlık bir belge böyle gösterilir. Yükseklik verilmeyen görünüm, kayan bir sayfada, belgenin tamamı açıkken 300 satırı geçmiyorsa gösterdiği satırlar kadar yüksektir; daha uzun bir belgede pencereden yüksek olmaz ve onun içinde kayar.
• Kaydırma çubukları. Kaydığı yerde görünümün kendi kaydırma çubuğu vardır: yan kenarında, yana kayan belgede alt kenarında da. Çubuk belgenin ne kadarının ekranda olduğunu ve neresinde durulduğunu gösterir. İmleci olan okuyucuda, masaüstünde ve masaüstündeki web'de, kayacak bir şey oldukça durur ve fareyle sürüklenir; parmağın altında yalnızca belge kayarken görünür.
• Kopyalama ve seçme. Görünümün sağ üst köşesindeki düğme belgenin tamamını, açık bir görünümün yazdığı gibi kopyalar: her satırda bir değer, her düzeyde iki boşluk, ekranda ne katlanmış olursa olsun. Kopyalayınca iki saniye bir onay işareti gösterir ve bunu ekran okuyucuya da söyler; onCopy belgenin panoya ulaşıp ulaşmadığını bildirir. Ekrandaki satırlar da seçilir, fareyle sürükleyerek ya da uzun basarak, ve sistemin kendi yoluyla kopyalanır: böyle kopyalanan, satırların gösterdiğidir. copyable = false düğmeyi kaldırır, selectable = false seçmeyi kapatır.
• Yazı yönü. Belge her dilde soldan sağa yazılır, kod gibi.
• JSON olmayan metin. Olduğu gibi gösterilir; üstündeki satır okumanın nerede durduğunu, satır ve sütunla, temanın dilinde söyler.
• Renk. Temanın kendi zeminlerinde her tür değerin, temanın rollerinden, kendi rengi vardır: bir sayı, rakamlardan oluşan bir metin değerinden tırnaklarına bakılmadan ayırt edilir. Temanın bir rol renginin üstünde belgenin tamamı orada okunan tek renkle yazılır. JsonViewColors ile verilen renk kullanılır, verilmeyen temanınki kalır.
• Platform. Parmakla kullanılan yerde, Android'de, iOS'ta ve web'de, bir satırın yazısının üstünde ve altında 4dp vardır ve satır temanın kod yazısıyla 28dp olur; masaüstünde, imleç için, 2dp vardır. Bir düzey masaüstünde ve web'de 16dp, telefonda 12dp içeridedir. Köşeler kartınkilerdir.
• Otomasyon. tagKey ile görünüm JsonView_<tagKey>, bir satırı JsonView_<tagKey>.Row_<path> olur: yol yazıldığı gibidir (Row_/user/tags/0), metnin kendi değeri Row_root'tur. Açık bir değeri kapatan satır JsonView_<tagKey>.End_<path>, JSON olmayan metnin üstündeki satır JsonView_<tagKey>.Note_fault, kopyalama düğmesi JsonView_<tagKey>.Button_copy olur. Bir basış, satırın düzeyiyle, expand ya da collapse olarak; bir kopyalama, panoya ulaşıp ulaşmadığıyla, copy olarak bildirilir. Belgeden hiçbir şey bildirilmez.

Örnekler

Bir yanıt

En yalın hâli: bir JSON metni, bir de otomasyon anahtarı. Görünüm metni okunacak biçimde dizer: her satırda bir değer, her düzey kendisini tutandan içeride. Adlar ve metin değerleri tırnaklarıyla, parantezler ve virgüller yerinde durur: açık bir belgenin gösterdiği belgenin kendisidir. Sayılar metinde yazıldığı gibidir, 249.90 son sıfırını korur.

Her tür değer kendi rengindedir: metin değerleri, sayılar, true, false ve null. Nesnelerin ve dizilerin ilk satırı bir düğmedir: "items" satırına bas, dizi tek satıra katlanır ve içinde kaç şey olduğunu yazar. Yeniden bas, açılır.

PantrixJsonView(json = RESPONSE, tagKey = "response")

private val RESPONSE =
    """
    {
      "id": 4821,
      "status": "shipped",
      "total": 249.90,
      "paid": true,
      "coupon": null,
      "customer": {
        "name": "Ada Yılmaz",
        "city": "İzmir"
      },
      "items": [
        { "sku": "KB-104", "quantity": 1, "price": 189.90 },
        { "sku": "MS-220", "quantity": 2, "price": 30.00 }
      ]
    }
    """.trimIndent()

İlk açılışta ne kadarı açık

expandedDepth belgenin başta kaç düzeyinin açık olduğunu söyler. 1 metnin kendi değerini açar ve içindeki her şeyi katlanmış bırakır; 2 onları da açar; verilmezse her düzey açıktır.

Neyin açık olduğunu görünüm kendisi tutar: bir satıra basıp katladığın ya da açtığın öyle kalır. Başka bir derinlik verilince görünüm oradan yeniden başlar: "customer" satırına bas, sonra başka bir derinlik seç.

var depth by rememberSaveable { mutableIntStateOf(1) }
PantrixSegmentButton(
    options = DEPTHS,
    selected = depth,
    onSelect = { depth = it },
    fullWidth = false,
    tagKey = "depth"
)
PantrixJsonView(json = RESPONSE, expandedDepth = depth, tagKey = "by_depth")

private val DEPTHS = listOf(
    SegmentOption(value = 1, label = "1 düzey", tagKey = "one"),
    SegmentOption(value = 2, label = "2 düzey", tagKey = "two"),
    SegmentOption(value = Int.MAX_VALUE, label = "Hepsi", tagKey = "all")
)

private val RESPONSE =
    """
    {
      "id": 4821,
      "status": "shipped",
      "total": 249.90,
      "paid": true,
      "coupon": null,
      "customer": {
        "name": "Ada Yılmaz",
        "city": "İzmir"
      },
      "items": [
        { "sku": "KB-104", "quantity": 1, "price": 189.90 },
        { "sku": "MS-220", "quantity": 2, "price": 30.00 }
      ]
    }
    """.trimIndent()

Yüksekliği verilen uzun bir belge

Birkaç yüz satırlık bir belge, 280dp yüksekliğinde bir yerde. Yükseklik görünümün modifier'ına verildi: belge o yüksekliğin içinde kayar ve yalnızca ekrandaki satırlar kurulur. Binlerce satırlık bir belge de böyle gösterilir.

Yükseklik verilmeseydi görünüm, bu sayfa gibi kayan bir sayfada, 300 satırı geçen bu belgeyle pencerenin yüksekliğini alır ve onun içinde kayardı. 300 satırı geçmeyen bir belgeyle bütün satırları kadar yüksek olurdu: yüksekliği verilmeyen öteki örneklerde öyledir. Metin yalnızca değiştiğinde yeniden okunur; burada bir kez kurulur ve remember ile tutulur.

val readings = remember { sensorReadings(count = 60) }
PantrixJsonView(json = readings, modifier = Modifier.height(280.dp), tagKey = "readings")

private fun sensorReadings(count: Int): String =
    (1..count).joinToString(separator = ",", prefix = "[", postfix = "]") { n ->
        """{"id": $n, "sensor": "T-${n % 4 + 1}", "celsius": ${18 + n % 7}.${n % 10}, "ok": ${n % 9 != 0}}"""
    }

Arama

search aradığını adlarda ve değerlerde bulur, büyük küçük harfe bakmadan, ve üç şey yapar: bulduğunu işaretler, onu tutan değerleri açar ve görünümün kaydığı yerde bulduklarının ilkini ekrana getirir.

Belge kırk sekiz siparişlik bir dizidir, 240dp yüksekliğinde bir yerde, ve yalnızca ilk düzeyi açıktır: her sipariş tek satıra katlanmış durur. Alana returned yaz: iade edilen dört sipariş açılır, sözcük dördünde de işaretlenir ve görünüm ilkine, on ikinci siparişe kayar. Alanı boşalt: işaretler kalkar ve aramanın açtığı siparişler yeniden katlanır.

val query = rememberTextFieldState()
val orders = remember { orderExport(count = 48) }
PantrixTextField(
    state = query,
    modifier = Modifier.fillMaxWidth(),
    placeholder = "Siparişlerde ara",
    showClearButton = true,
    contentDescription = "Siparişlerde ara",
    tagKey = "order_search"
)
PantrixJsonView(
    json = orders,
    modifier = Modifier.height(240.dp),
    expandedDepth = 1,
    search = query.text.toString(),
    tagKey = "orders"
)

private fun orderExport(count: Int): String =
    (1..count).joinToString(separator = ",", prefix = "[", postfix = "]") { n ->
        val status = if (n % 12 == 0) "returned" else "shipped"
        """{"id": ${4800 + n}, "status": "$status", "total": ${30 + n * 4}.50}"""
    }

Satır numaraları ve bölünmeyen satırlar

lineNumbers her satırın başına numarasını yazar: belge bütünüyle açıkken taşıdığı numarayı. "request" satırına bas: katlanan değer açıldığı satırın numarasını, 4'ü, korur ve ardındaki satır 9'dan sürer.

"signature" değeri karta sığmayacak kadar uzundur. Başta satır kendi altında sürer ve tek bir numara taşır. Anahtarı kapat: softWrap = false her değeri tek satırda tutar, görünüm genişliğini korur ve belge yana kayar.

var wraps by rememberSaveable { mutableStateOf(true) }
PantrixSwitchButton(
    checked = wraps,
    onCheckedChange = { wraps = it },
    label = "Uzun satır kendi altında sürsün",
    tagKey = "soft_wrap"
)
PantrixJsonView(json = WEBHOOK, softWrap = wraps, lineNumbers = true, tagKey = "webhook")

private val WEBHOOK =
    """
    {
      "event": "payment.failed",
      "order": 4821,
      "request": {
        "method": "POST",
        "url": "https://api.example.com/v2/payments",
        "attempts": 3
      },
      "signature": "${"9f2c41d7a0b35e68".repeat(14)}",
      "handled": false
    }
    """.trimIndent()

Kopyalama ve seçme

Görünümün sağ üst köşesindeki düğme belgenin tamamını kopyalar: ekranda katlanmış olanı da, açık bir görünümün yazdığı gibi, her satırda bir değer ve her düzeyde iki boşlukla. Kopyalayınca düğme iki saniye bir onay işareti gösterir.

onCopy belgenin panoya ulaşıp ulaşmadığını bildirir: burada kartın "Son olay" satırına yazılır. Bunu kullanıcısına söyleyen bir ekran, sistemin kopyalananı kendisi gösterdiği yerde, Android 13 ve üstünde, yalnızca kopyalanamadığında söyler: orada rememberPantrixClipboard().traits.announcedBySystem true'dur.

Üstteki görünümde ekrandaki satırlar da seçilir, fareyle sürükleyerek ya da uzun basarak, ve sistemin kendi yoluyla kopyalanır. Alttaki görünüm aynı belgedir: copyable = false düğmeyi kaldırır, selectable = false seçmeyi kapatır.

val report = LocalExampleEvents.current
PantrixJsonView(
    json = SETTINGS,
    expandedDepth = 1,
    onCopy = { copied -> report(if (copied) "Belge panoya kopyalandı" else "Belge panoya kopyalanamadı") },
    tagKey = "copyable"
)
PantrixJsonView(
    json = SETTINGS,
    expandedDepth = 1,
    selectable = false,
    copyable = false,
    tagKey = "not_copyable"
)

private val SETTINGS =
    """
    {
      "theme": "dark",
      "fontScale": 1.15,
      "notifications": {
        "email": true,
        "push": false,
        "quietHours": { "from": "22:00", "to": "07:00" }
      },
      "shortcuts": [
        { "keys": "Ctrl+K", "action": "search" },
        { "keys": "Ctrl+S", "action": "save" }
      ]
    }
    """.trimIndent()

Ekranın kendi düğmeleriyle

expanded alan biçimde neyin açık olduğunu ekran tutar, bir accordion'ın bölümlerinde olduğu gibi: görünüme açık nesnelerin ve dizilerin yolları verilir, bir satıra basılınca açık olması gereken yeni küme onExpandedChange ile bildirilir. Görünüm kendiliğinden hiçbir şeyi değiştirmez.

Durum jsonViewPaths(json, depth = 1) ile kuruldu: yalnızca metnin kendi değeri açık. "Hepsini aç" belgenin bütün yollarını koyar, "Hepsini kapat" kümeyi boşaltır: açık hiçbir şey kalmaz ve belge tek satıra iner. Her değişiklik, kaç yolun açık olduğuyla birlikte, kartın "Son olay" satırına yazılır.

Bir yol bir JSON Pointer'dır: metnin kendi değeri boş metin, notifications üyesi /notifications, shortcuts'un ilki /shortcuts/0.

val report = LocalExampleEvents.current
var open by rememberSaveable { mutableStateOf(jsonViewPaths(SETTINGS, depth = 1)) }
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixButton(
        text = "Hepsini aç",
        onClick = {
            open = jsonViewPaths(SETTINGS)
            report("Hepsi açıldı, açık yol: ${open.size}")
        },
        variant = ButtonVariant.Outline,
        size = ButtonSize.Small,
        tagKey = "json_open_all"
    )
    PantrixButton(
        text = "Hepsini kapat",
        onClick = {
            open = emptySet()
            report("Hepsi kapatıldı, açık yol: ${open.size}")
        },
        variant = ButtonVariant.Text,
        size = ButtonSize.Small,
        tagKey = "json_close_all"
    )
}
PantrixJsonView(
    json = SETTINGS,
    expanded = open,
    onExpandedChange = { paths ->
        open = paths
        report("Satıra basıldı, açık yol: ${paths.size}")
    },
    tagKey = "settings"
)

private val SETTINGS =
    """
    {
      "theme": "dark",
      "fontScale": 1.15,
      "notifications": {
        "email": true,
        "push": false,
        "quietHours": { "from": "22:00", "to": "07:00" }
      },
      "shortcuts": [
        { "keys": "Ctrl+K", "action": "search" },
        { "keys": "Ctrl+S", "action": "save" }
      ]
    }
    """.trimIndent()

Arama, ekranın kendi durumuyla

expanded alan biçimde arama yalnızca işaretler; bulduğunu açmak ekranın işidir. jsonViewSearchPaths içinde aranandan bir şey olan değerlerin yollarını verir ve ekran onları kendi kümesine ekler.

Alana ctrl yaz: shortcuts dizisi ve içindeki iki nesne açılır, Ctrl ikisinde de işaretlenir. Arama sürerken bu satırlar katlanmaz: aramanın yolları kümeye her seferinde yeniden eklenir. Alanı boşalt: açık olan yine yalnızca ekranın kümesidir.

val query = rememberTextFieldState()
var open by rememberSaveable { mutableStateOf(jsonViewPaths(SETTINGS, depth = 1)) }
PantrixTextField(
    state = query,
    modifier = Modifier.fillMaxWidth(),
    placeholder = "Ayarlarda ara",
    showClearButton = true,
    contentDescription = "Ayarlarda ara",
    tagKey = "settings_search"
)
PantrixJsonView(
    json = SETTINGS,
    expanded = open + jsonViewSearchPaths(SETTINGS, query.text.toString()),
    onExpandedChange = { open = it },
    search = query.text.toString(),
    tagKey = "searched_settings"
)

private val SETTINGS =
    """
    {
      "theme": "dark",
      "fontScale": 1.15,
      "notifications": {
        "email": true,
        "push": false,
        "quietHours": { "from": "22:00", "to": "07:00" }
      },
      "shortcuts": [
        { "keys": "Ctrl+K", "action": "search" },
        { "keys": "Ctrl+S", "action": "save" }
      ]
    }
    """.trimIndent()

JSON olmayan bir metin

Son üyesinden sonra bir virgül kalmış bir metin: JSON değildir. Görünüm okuyamadığı metni saklamaz, olduğu gibi, satır satır gösterir. Üstündeki satır, temanın dilinde, okumanın nerede durduğunu söyler: satır ve sütun, ikisi de birden sayılır.

Burada okuma dördüncü satırın ilk karakterinde durur: virgülden sonra bir ad beklenirken kapanış parantezi gelir.

PantrixJsonView(json = NOT_JSON, tagKey = "not_json")

private val NOT_JSON =
    """
    {
      "id": 4821,
      "status": "shipped",
    }
    """.trimIndent()

Bir kartın içinde, kendi renkleriyle

Görünümün kendi dolgusu ve kenarı vardır: dolgu temanın surface'ı, kenar temanın divider'ıdır. İkisi de olan bir kartın içinde colors ikisini de saydam verir. Verilen renk kullanılır, verilmeyen temanınki kalır: adlar temanın textPrimary'si, parantezler ve virgüller textSecondary'sidir; metin değerleri success, sayılar warning, true, false ve null ise primary rolünün rengindedir.

style görünümün geometrisini değiştirir; yalnızca verilen alanlar değişir. Burada satırlar kartın iç boşluğunun bittiği yerden başlasın diye horizontalPadding sıfır verildi, her düzey de 24dp içeride: indent.

PantrixCard(modifier = Modifier.fillMaxWidth(), variant = CardVariant.Outlined) {
    PantrixText(text = "Son sipariş", style = PantrixTheme.typography.title)
    PantrixJsonView(
        json = RESPONSE,
        style = JsonViewStyle(horizontalPadding = 0.dp, indent = 24.dp),
        colors = JsonViewColors(container = Color.Transparent, border = Color.Transparent),
        tagKey = "in_a_card"
    )
}

private val RESPONSE =
    """
    {
      "id": 4821,
      "status": "shipped",
      "total": 249.90,
      "paid": true,
      "coupon": null,
      "customer": {
        "name": "Ada Yılmaz",
        "city": "İzmir"
      },
      "items": [
        { "sku": "KB-104", "quantity": 1, "price": 189.90 },
        { "sku": "MS-220", "quantity": 2, "price": 30.00 }
      ]
    }
    """.trimIndent()

API

json

Okunmak için dizilmiş bir JSON metni: her satırda bir değer, her düzey kendisini tutandan içeride, her tür değer kendi renginde. Her nesne ve her dizi ilk satırının arkasına katlanır.

json

Neyin açık olduğunu çağıranın tuttuğu PantrixJsonView, bir accordion'ın bölümlerinde olduğu gibi: expanded verilir, onExpandedChange'in bildirdiği uygulanır. Böylece bir ekran kendi düğmesiyle her şeyi açabilir, bir aramanın bulduğu değere giden yolu açabilir ya da başka bir ekrana gidip dönünce açık olanı koruyabilir.

JsonViewStyle

PantrixJsonView'in geometrisi: satırlarının çevresindeki boşluk, bir düzeyin ne kadar içeride durduğu ve kenar.

JsonViewColors

Temanın renklerini almayan bir görünüm için PantrixJsonView'in renkleri: verilen renk kullanılır, verilmeyen temanınki kalır.

Erişilebilirlik

• Klavye. Belge Tab için tek bir duraktır: odak en son durduğu satıra gelir ve oradan oklarla gezilir. Aşağı ve yukarı oklar bir değerin başladığı satırları sırayla gezer, Home ve End ilk ve son satıra gider. Sağ ok katlanmış satırı açar, açık satırda içindeki ilk şeye girer; sol ok açık satırı katlar, başka her satırda o satırı tutan değeri açan satıra çıkar. Kopyalama düğmesi Tab'ın bir sonraki durağıdır.
• Ekran okuyucu. Katlanan satırda basışın ne yapacağı sunulur ve satırın açık olup olmadığı söylenir. Satır adını, katlanmışsa içinde kaç şey olduğunu ve kaçıncı düzeyde olduğunu söyler, son ikisini temanın sözleriyle: "items, Öğe sayısı: 2, Düzey 2". Metnin kendi değerinin adı yoktur: açıkken yalnızca "Düzey 1" der. Öteki satırlar yazıldıkları gibi okunur; açık bir değeri kapatan satır okunmaz.