Ve struktuře modulu Správce je zařazena kniha Skripty, sestavy, ve které se zobrazují všechny sestavy, skripty a formuláře, které jsou v IS K2 dostupné. Při spouštění jsou standardní zdroje upřednostňovány před speciálními. V levé části Seznam složek si může uživatel zvolit, zda chce zobrazit všechny zdroje nebo jenom vybraný typ.
Ikony ve sloupci "R" a "P"
Není-li u tohoto skriptu ve sloupci "R" ikona
Označíme-li (klávesami Shift+F4) skript, který má ve sloupci "P" ikonu, vloží se nám do tohoto sloupce "D" ikona .
Správa skriptů a sestav
Provede překlad skriptů a sestav ve vybraném adresáři a jeho podadresářích. Skripty označené AS3Compatible přeloží také pomocí AS_Developeru. Pokud skript nebo sestava nejde přeložit, důvod se uloží do souboru "jmeno_skriptu.err" v adresáři SestavyW. Proběhne test kompilace (jen u záznamů, které mají ikonu ve sloupci "P").
Funkce pro vyhledávání a import/export
Spuštění funkce hledat ve zdrojích. Funkce hledá text ve zdrojovém kódu skriptů/sestav/formulářů a záznamy, které obsahují daný text vyfiltruje. Funkci lze spustit buď z ribbonu ze záložky Domů - Rychlé volby, nebo pomocí klávesové zkratky CTRL + F. Po spuštění se zobrazí formulář pro filtrování. Do pole Zdrojový kód se vyplní hledaný text a v poli Typ.Zkratka se vybírá, zda se mají prohledat zdroje skriptů, sestav nebo formulářů.
Je-li toto pole zatrženo, jedná se o speciální zdroj. Zde vkládáme klíčové slovo, které je možné využít pro filtrování. Je-li toto pole zatrženo, uživateli se zdrojový kód nezobrazí.
Touto funkcí lze naimportovat balíček souborů skriptu nebo sestavy do systému K2. Balíček nese informaci o tom, zda se má naimportovat do standardních či speciálních souborů. Po spuštění funkce se otevře formulář Import balíčku, v němž vybereme soubor, který chceme naimportovat. Soubor musí mít příponu *.BPK.
Funkce slouží k importu souborů pro speciální sestavy a skripty do systému K2. Spuštěním funkce otevřeme formulář Vyhledat složku. Tato funkce importuje stejné typy souborů jako funkce Import z adresáře. Tyto soubory jsou však importovány jednotlivě. Po výběru funkce se otevře formulář Import z balíčku.
Touto funkcí lze exportovat soubory skriptu nebo sestavy do balíčku. Exportují se sestavy a skripty, které jsou označeny . Po spuštění funkce se otevře formulář Export do balíčku, v němž pojmenujeme soubor a zvolíme cestu, kam se soubor bude exportovat. Soubor bude mít příponu *.BPK. Potvrdíme vybraný soubor. Vyexportuje i soubory, které jsou označeny jako smazané .
Funkce slouží k exportu souborů speciálních sestav a skriptů. Exportují se sestavy a skripty, které jsou označeny . Po výběru funkce se otevře formulář Vyhledat složku. Vepíšeme název souboru a vybereme složku, do které budeme exportovat.
Změna ikony skriptu v praxi
Zkušenost z Lazarusu se ikona přidává při kompilování. vyklikat ve vlastnostech souboru, popř. ve scriptu upravit delaraci v HKEY_CLASESS_ROOT, popř. si jistý kde se řeší ikony - viz jiné weby. ikona změnila např. při prvním spuštění skriptu apod.
U starších verzí Windows se ikona řešila pomocí přípony souboru.
Vytváření a úprava ikon
Můžete vytvořit nový obrázek, rastrový obrázek, ikonu, kurzor nebo panel nástrojů a pak pomocí Editoru obrázků přizpůsobit jeho vzhled. Ikony a kurzory jsou grafické prostředky, které můžou obsahovat více obrázků v různých velikostech a barevných schématech pro různé typy zobrazovacích zařízení. Kurzor má také aktivní místo, což je umístění, které Systém Windows používá ke sledování své pozice.
Když vytvoříte novou ikonu nebo kurzor, Editor obrázků nejprve vytvoří obrázek standardního typu. Obrázek je zpočátku vyplněný barvou obrazovky (průchodná). Editor obrázků ve výchozím nastavení podporuje vytváření nových imagí pro zařízení zobrazená v následující tabulce.
Když vytvoříte novou ikonu nebo prostředek kurzoru, Editor obrázků nejprve vytvoří obrázek v určitém stylu: 32 × 32 pixelů a 16 barev pro ikony; 32 × 32 pixelů a monochromatické pro kurzory. Potom můžete k počáteční ikoně nebo kurzoru přidat obrázky v různých velikostech a stylech a podle potřeby upravit každý další obrázek pro různá zobrazovací zařízení.
Dialogové > obrázku zařízení umožňuje vytvořit nový obrázek zařízení zadaného typu. Pokud chcete otevřít > zařízení, přejděte do nabídky Obrázek>Nový typ obrázku. Dialogové okno Vlastní obrázek umožňuje vytvořit nový obrázek s vlastní velikostí a počtem barev. > zařízení slouží k otevření imagí zařízení v projektech C++. Zobrazuje seznam existujících imagí zařízení v aktuálním prostředku (obrázky, které jsou součástí aktuálního prostředku). Zobrazí seznam imagí zahrnutých v prostředku.
V zobrazení zdrojů klikněte pravým tlačítkem na .rc soubor a pak zvolte Přidat prostředek. V dialogovém okně Přidat zdroj vyberte ikonu nebo kurzor a zvolte Nový. U ikon tato akce vytvoří prostředek ikony s ikonou 32 × 32, 16barevnou ikonou. Pokud se vedle typu prostředku obrázku zobrazí znaménko plus (+) v dialogovém okně Vložit prostředek , znamená to, že šablony panelů nástrojů jsou k dispozici.
Vyberte typ obrázku, který chcete přidat. Přejděte do nabídky Obrázek>Otevřít obrázek zařízení a zvolte obrázek ze seznamu aktuálních obrázků. Otevřete jiný obrázek ikony v jiném okně Editoru obrázků. Vložte obrázek ikony (Ctrl+V) z jednoho okna Editoru obrázků do druhého. Když se v Editoru obrázků zobrazí obrázek ikony, přejděte do nabídky Obrázek>odstranit obrázek zařízení. Když stisknete klávesu Del , obrázky a barvy, které jste nakreslili na ikonu, se odstraní, ale ikona zůstane a teď ji můžete přepracovat.
V Editoru obrázků má počáteční ikona nebo obrázek kurzoru průhledný atribut. I když jsou obrázky ikon a kurzorů obdélníkové, mnoho z nich se nezobrazuje, protože části obrázku jsou průhledné a podkladový obrázek na obrazovce se zobrazuje přes ikonu nebo kurzor. Když přetáhnete ikonu, můžou se části obrázku zobrazovat v obrácené barvě. Obrazovka a inverzní barvy, které použijete u ikon a kurzorů, buď obrazec a barva odvozeného obrázku, nebo přiřazení inverzních oblastí. Barvy označují části obrázku, které mají tyto atributy. Při úpravách můžete změnit barvy, které představují atributy barvy obrazovky a inverzní barvy.
Zobrazené dialogová okna a příkazy nabídek se můžou lišit od těch, které jsou popsány v nápovědě v závislosti na aktivním nastavení nebo edici. Pokud chcete změnit nastavení, přejděte do nabídky Nástroje>importu a exportu nastavení. Použijte na obrázek obrazovku nebo inverzní barvu pomocí nástroje kreslení.
Pomocí Editoru obrázků můžou být ikony a kurzory velké (64 × 64) s paletou 256 barev, ze které si můžete vybrat. V zobrazení zdrojů klikněte pravým tlačítkem na .rc soubor a pak zvolte Přidat prostředek. Počáteční paleta používaná pro 256 barevných obrázků odpovídá paletě vrácené rozhraním API systému CreateHalftonePalette Windows.
Horké místo kurzoru je bod, na který Windows odkazuje při sledování pozice kurzoru. Ve výchozím nastavení je aktivní bod nastavený na levý horní roh kurzoru se souřadnicemi 0,0.
Když vytvoříte rastrový obrázek, obrázek se vytvoří ve formátu rastrového obrázku (.bmp). V dialogovém okně Uložit soubor jako zadejte název, který chcete dát souboru a příponu, která označuje požadovaný formát souboru, do pole Název souboru. Obrázky VE formátu GIF nebo JPEG můžete otevřít v Editoru obrázků a uložit je jako rastrové obrázky. Můžete také otevřít rastrový soubor a uložit ho jako GIF nebo JPEG.
V zobrazení zdrojů klikněte pravým tlačítkem na .rc soubor a pak zvolte Přidat prostředek. Pokud se vedle typu prostředku obrázku zobrazí znaménko plus (+) v dialogovém okně Přidat prostředek , znamená to, že šablony panelů nástrojů jsou k dispozici. Zdroj se přidá do projektu v Průzkumník řešení a zdroj se otevře v Editoru obrázků. Teď můžete k úpravě obrázku použít všechny nástroje dostupné v Editoru obrázků.
SVG ikony a jejich správa
I přes svou malou velikost představují ikony na webu zajímavý problém. Jeden přístup střídá další - každý o trochu lepší než ten předchozí, každý nějakým způsobem nedokonalý. Poslední systém, kterému se delší dobu daří držet na vrcholu, je takzvaný SVG sprite, který vznikne tak, že jednotlivé ikony vložíme do elementů symbol v rámci jednoho SVG souboru. Důvodem pro použití symbolů je to, že se nevykreslí v místě definice, ale až tehdy, kdy je skutečně použijeme.
Pro vykreslení konkrétní ikonky stačí přímo do šablony napsat jeden řádek SVG kódu obsahující element use. Pomocí jeho atributu xlink:href pak odkážeme na id dané ikony. To je ta jednodušší část.
Nahrání spritu
Ve skutečnosti je to však o trochu složitější, protože žádná verze Internet Exploreru (na rozdíl od Edge) nedokáže nahrát externí soubor přes xlink:href. Řešení jsou dvě: buď sprite vložíme přímo do všech šablon, nebo použijeme AJAX. První případ lze sice řešit automaticky na straně serveru, ale to nás nezbaví problému cachování dvou nezávislých souborů jako jednoho.
(function (window) { // Funkce po zavolání asynchronně načte zadaný soubor. Jeho obsah pak zároveň uloží do localStorage, a vloží do šablony - styly v podobě style elementu, SVG soubory přímo do hlavičky. V druhém případě by jistě bylo lepší cílit na tělo dokumentu, ale to v momentu zavolání funkce ještě neexistuje. SVG sice není standardní součástí head, ale podstatné je, že předchozí metoda funguje. // Výhoda skriptu spočívá v tom, že jím načtené soubory neblokují vykreslení dokumentu. Má to ovšem jeden háček: ikony se nenačtou, pokud je JavaScript vypnutý, a bohužel nevím o žádném řešení (jako je noscript v případě stylů), které nevyžaduje, aby byl sprite dopředu součástí dokumentu. Závěrem je, že na ikony není spoleh a vždy by u nich měl být textový popisek. // Pokud se nic nepokazí, ikony se vykreslí v podstatě okamžitě - samozřejmě s ohledem na rychlost sítě. Při druhém načtení dokumentu by prodleva měla být ještě kratší, jelikož se ikony nahrávají přímo z localStorage. To sice pro čtení a zápis vyžaduje synchronní - tedy blokující - operaci, ale přesto by mělo být dostatečně rychlé a zároveň spolehlivější než klasická cache v prohlížeči.})(window);
SVG a DOM
Stinné stránky máme za sebou a konečně můžeme přejít k výhodám spritu. V momentě, kdy SVG vložíme přímo do dokumentu, se stane součastí DOMu - včetně vnitřní struktury. To znamená, že můžeme upravovat všechny jeho součásti, například měnit barvu podle kontextu pomocí CSS proměnné currentColor. Ale to umí i ikony zabalené do podoby fontu. Podstatné je, že v případě SVG lze měnit jakoukoliv vlastnost, nejen barvu.
Stylizace SVG ikon
Existuje několik způsobů, jak ikony nastylovat. První z nich předpokládá použití atributů - jako třeba fill="currentColor" - přímo na samotné ikoně (nebo jejích částech). Jelikož se však většina ikon bude chovat podobně, vyplatí se jejich vzhled nastavit globálně. Možností je CSS vložit přímo do spritu a tím zacílit všechny symboly. Ale s ohledem na to, jak se sprite vytváří, může jít o zbytečnou komplikaci. Schůdnější je vydat se cestou globálních stylů a vlastnosti jako fill nebo stroke nastavit přímo v nich. Nesmíme ale zapomenout na dva důležité faktory: kaskádu a specificitu.
Předpokládáme-li ve všech případech stejný selektor, pak CSS nastavené přes atribut style přímo na původních elementech symbol přebíjí vše ostatní. Následují styly vložené navrch samotného spritu a hned za nimi atributy typu fill nebo stroke (znovu použité na úrovni samotných ikon). Jako poslední se bere ohled na globální styly ve vnějším dokumentu.
Zmíněná kaskáda pravidel ukazuje, že můžeme zvolit řadu způsobů, jak ovlivnit vzhled ikon. Podle mě je nejlepší držet se globálních stylů a při tvorbě spritu z ikon odstranit veškeré atributy. Pokud zjistíme, že potřebujeme ikonku, která by neměla měnit barvu v závislosti na kontextu (např. loga sociálních sítí), můžeme využít atribut style a ten neodstraňovat. Další trik spoléhá na proměnnou currentColor: část ikony obarvíme pomocí vlastnosti fill s konkrétní hodnotou, jinou pak s hodnotou nastavenou právě na currentColor. Tím získáme způsob, jak dynamicky ovlivnit dvě různé části ikony změnou barvy buď ve fill nebo v color.
Atributy SVG
Pro správné vykreslení je třeba, aby každý symbol obsahoval atribut viewbox. Krom toho ovšem není od věci nastavit i základní rozměry na úrovni SVG elementu v šabloně. Pokud SVG žádné nemá - ať už ze strany atributů width a height nebo v rámci CSS - zobrazí se o velikosti 300 na 150 pixelů.
Dalším zajímavým atributem je role. Pokud chcete, aby čtečky obsahu považovaly ikonku za obrázek, nastavte jej na image. Ale vzhledem k tomu, že by se ikony vždy měly vyskytovat v páru s textovým popiskem, je lepší skrýt je před zraky čteček úplně. Toho snadno dosáhneme pomocí atributu aria-hidden s hodnotou true.
O que é SVG, eu posso utilizá-lo nas minhas artes no Design Gráfico? [No Coreldraw ou Illustrator]
Co dělat bez SVG?
V případě, že vyžadujete, aby se ikonky zobrazovaly i v prohlížečích, které nepodporují SVG, je nutné provést několik dalších kroků. Zaprvé je třeba vytvořit PNG verze všech ikonek. Druhým krokem je ověřit podporu SVG - toho lze docílit buď pomocí knihovny Modernizr nebo dotazem na objekt document.implementation. Další postup spočívá v jednoduchém nahrazení SVG elementů klasickým img s odkazem na PNG verzi dané ikonky.
Pro začátek je třeba získat id ikonky, abychom mohli vytvořit URL rastrové verze. Jelikož však prohlížeč nepodporuje SVG, nerozumí ani jeho struktuře, což znamená, že neumí přímo přečíst atribut xlink:href, kde se id nachází. Řešením je použít regulární výraz, který spustíme nad rodičem ikonky, respektive jeho innerHTML. Další problém se týká Internet Exploreru 8, který náhradní ikoně z nějakého důvodu přisuzuje nulové rozměry.
Sprite a CSS
Poslední příklad se týká situace, kdy chceme ikonku použít v seznamu položek místo klasické odrážky. Zároveň předpokládáme, že je odrážka graficky natolik složitá, že se nedá vytvořit jen pomocí CSS nebo Unicode symbolů. Možným řešením je vložit ikonku (pomocí elementu use) do každé položky zvlášť. Pokud se však chceme vyvarovat zbytečného opakování, nezbyde nám, než se obrátit na CSS. Ale i kdybychom SVG vložili přímo do globálních stylů (přes data-uri), ikonky svou barvu - v závislosti na tom, kde se seznam vyskytuje - nezmění. Pro tyto případy by se daly použít ikony zabalené do podoby fontu, stačila by pak jednoduchá změna barvy textu. To by ovšem vyžadovalo dva nezávislé systémy.
Ve snaze vyřešit tento problém jsem vyzkoušel přístup, který využívá (nebo spíše zneužívá) CSS filtry, konkrétně drop-shadow. Narozdíl od vlastnosti box-shadow, která vytváří obdélníkové stíny (včetně zakulacených rohů a případných transformací), bere drop-shadow v potaz přesný tvar prvku. Pokud skryjeme odrážku, která stín vytváří, stačí správně nastavit barvu samotného stínu. To nám umožňuje na základě jedné ikony vytvořit různě barevné verze.
Nechat odrážku zmizet ovšem není tak jednoduché, jak se zdá. Pokud ji skryjeme pomocí průhlednosti nebo vlastnosti background-position, zmizí spolu s ní i stín. Zbývá nám ještě jeden způsob: posunout ikonu pomocí position a nastavit rodičovskému prvku overflow na hidden. Relevantní posun v drop-shadow filtru nastavíme na zápornou hodnotu posunu samotné odrážky a výsledkem je, že zůstane vidět právě jen stín. Heuréka!
O elegantní řešení však nejde ani zdaleka. Zaprvé, podpora CSS filtrů chybí ve všech verzích Internet Exploreru. Zadruhé, používat filtry v podobném rozsahu může (ale nemusí) zpomalit vykreslení stránky.
Takže nám zbývá jen jedno rozumné řešení, a to sice vkládání ikon přímo do stylů v podobě data URI. Tato technika nám ušetří síťový požadavek a umožní upravovat vlastnosti ikon přímo v CSS. V případě, že použijeme preprocesor jako LESS nebo Sass, a máme v plánu ikonku použít na více než jednom místě, můžeme navíc vytvořit funkci (nebo mixin), která poskytne způsob jak ji obarvit pomocí parametrů. To nám sice nepomůže s repeticí ve výsledném CSS, ale zachová to alespoň jediný zdroj pro případnou úpravu ikonky. Z principu techniky dále vyplývá, že by ikonka neměla být příliš komplexní.