Cíl lekce
V této lekci ukáži jak zpracovávat formát json pro výstup do programu Adobe Photoshop. Cílem bude vytvořit položku den a pod ni zapsat snídani a oběd v daný den. Vše bude extrahováno z externího souboru formátu json. Lekce se věnuje základnímu zpracování externích dat pro například webovou prezentaci, výukové videa a jiné.
Obsah jsonu - obrázek 8.1
Výsledný dokument s naparsovaným jsonem - obrázek 8.2
Využité třídy v této lekci
- Application: pro práci s atributy dokumentu.
- Layers: vytváření vrstvy a změna atributů.
- File: práce se soubory.
- json2.js: skriptový soubor, který se používá pro parsování formátu json.
Začlenění json.js do projektu
První krok v této lekci je stáhnutí souboru json2.js z tohoto odkazu.
Tento soubor slouží jako parser formátu json a lze z něj volat metody pro práci s tímto
formátem.
Dalším krokem je
vložení tohoto souboru do skriptu, to je možné provést pomocí příkazu #include [název
souboru]. Tento příkaz by měl být na první řádce skriptu, aby nedošlo k chybě, kdy se
volá funce parseru, který se linkuje až později níže ve skriptu.
#include json2.js
Funkce pro parsování
Nyní mohu vytvořit funkci, které přečte json ze souboru, uloží jako řetězec a parsuje ho. Funkce bude mít jeden parametr a to je název souboru json. Vytvořím si tedy soubor s cestou k nynějšímu skriptu. Tento soubor poté využiji při načtení souboru s daty, kde použiji atribut path k získání cesty a přidám název souboru json. Důležité je zmínit, že soubor formátu json pro parsování, skript a json2.js musí být ve stejném adresáři. Jinak je třeba zadávat externě cesty k souborům. Nyní, když jsem již získal, jaký soubor chci parsovat, je třeba ho otevřít a to konstantou 'r' tedy pro čtení. Pomocí metody read() načíst obsah souboru a metodou close() soubor zavřít. Poté co načtu obsah do proměnné mohu metodou parse() třídy JSON vráti objekt s atributy souboru. Kód níže ilustruje tuto záležitost.
function loadJson(path){
var script = new File($.fileName);
var jsonFile = new File(script.path + '/' + path);
jsonFile.open('r');
var str = jsonFile.read();
jsonFile.close();
return JSON.parse(str)
}
Vložení textových vrstev a jejich atributů
V poslední části lekce si vytvořím objekt a vložím si do něj návratovou hodnotu z funkce výše. Následně si vytvořím tři vrstvy pro text. Nastavím vrstvám atribut textové vrstvy, název, pozici, velikost písma a atribut contents nastavím pomocí atributu objektu jsonu. Toto by se dalo provést ručně, jako jej provádím já, či využít cyklu a pomocí parametrů měnit nastavené hodnoty a atributy. Hlavní část skriptu je tedy uvedená níže.
//Nastavení jednotek na pixelové body
app.preferences.rulerUnits = Units.PIXELS
//aktivní dokument
var docRef = app.documents.add(650, 650)
//parsovaný json
var obj = loadJson('jidelnicek.json');
//nová vrstva
var title = docRef.artLayers.add();
//nastavení atributu textLayer
title.kind = LayerKind.TEXT;
//název vrstvy
title.name = "title";
//pozice
title.textItem.position = Array(100, 100);
//velikost
title.textItem.size = 20;
//obsah
title.textItem.contents = obj.title;
var dinner = docRef.artLayers.add();
dinner.kind = LayerKind.TEXT;
dinner.name = "dinner";
dinner.textItem.position = Array(100, 150);
dinner.textItem.size = 15;
dinner.textItem.contents = obj.dinner;
var breakfast = docRef.artLayers.add();
breakfast.kind = LayerKind.TEXT;
breakfast.name = "breakfast";
breakfast.textItem.position = Array(100, 200);
breakfast.textItem.size = 15;
breakfast.textItem.contents = obj.breakfast;
Spuštění skriptu, adresářová struktura
Pro správné fungování skriptu, je důležité umistění ostatních souborů a samotného skriptu. Skript musí být umístěn v adresáři společně s ostatními soubory, tedy json parserem a také samotným jsonem, který obsahuje data. Pokud uživatel chce mít jinou adresářovou strukturu, je třeba toto zahrnout i v cestách k souborům ve skriptu a to buď nastavením absoultní, či relativní cesty ke každému ze souborům. Zároveň je třeba se ujistit, že skript je uložený a nikoliv jen otevřený v editoru. Toto nastavení ilustruje obrázek struktury níže.
Struktura adresáře - obrázek 8.3
Výsledný zdrojový kód
#include json2.js
//Nastavení jednotek na pixelové body
app.preferences.rulerUnits = Units.PIXELS
//aktivní dokument
var docRef = app.documents.add(650, 650)
//parsovaný json
var obj = loadJson('jidelnicek.json');
//nová vrstva
var title = docRef.artLayers.add();
//nastavení atributu textLayer
title.kind = LayerKind.TEXT;
//název vrstvy
title.name = "title";
//pozice
title.textItem.position = Array(100, 100);
//velikost
title.textItem.size = 20;
//obsah
title.textItem.contents = obj.title;
var dinner = docRef.artLayers.add();
dinner.kind = LayerKind.TEXT;
dinner.name = "dinner";
dinner.textItem.position = Array(100, 150);
dinner.textItem.size = 15;
dinner.textItem.contents = obj.dinner;
var breakfast = docRef.artLayers.add();
breakfast.kind = LayerKind.TEXT;
breakfast.name = "breakfast";
breakfast.textItem.position = Array(100, 200);
breakfast.textItem.size = 15;
breakfast.textItem.contents = obj.breakfast;
function loadJson(path) {
//cesta skriptu
var script = new File($.fileName);
//zjištěná cesta k jsonu
var jsonFile = new File(script.path + '/' + path);
//otevření souboru
jsonFile.open('r');
//přečtení jsonu
var str = jsonFile.read();
//zavření osuboru
jsonFile.close();
//vrácení naparsovaného jsonu
return JSON.parse(str)
}