Zdá se, že sada nástrojů Dojo je stále lepší a lepší. Jedním z nových přírůstků v Dojo 1.6 bylo použití LESS CSS k vytváření motivů Dijit. Přesun k používání LESS je skvělý, protože umožňuje mnohem snazší vytváření vlastního tématu Dijit. Pojďme se podívat, jak Dojo využívá MÉNĚ k vytváření motivů Dijit a vytváření vlastního motivu.
Zobrazit ukázkuMÉNĚ CSS
Myšlenka LESS CSS je docela jednoduchá:rozšířit CSS o dynamické chování, jako jsou proměnné, mixiny, operace a funkce. Jednoduše řečeno: opravte zděděná omezení CSS. LESS lze použít na příkazovém řádku / na straně serveru s Node.js nebo se souborem JavaScript na straně klienta. Pro účely vytváření motivů Dojo budeme používat řešení Node.js. Chcete-li nainstalovat LESS, a za předpokladu, že máte npm , spusťte následující příkaz:
npm install less
Balíček LESS by nyní měl být nainstalován na vašem počítači, připraven k použití s Node.js, který musí být také nainstalován na vašem počítači.
Dijit používá LESS
V pokladně Dojo 1.6+ přejděte do následujícího adresáře:
cd dijit/themes/claro/
Uvidíte postaveno {WidgetName}.css soubory, ale také počet {WidgetName}.less soubory -- .css soubory byly vytvořeny pomocí LESS! Před vstupem do jednotlivých .less soubory, otevřete variables.less . variables.less soubor obsahuje deklarované proměnné, které se používají v ostatních souborech CSS; zvažte variables.css "výchozí" soubor. Podívejte se na pár úryvků z variables.less :
/* General */
@text-color: #000000; /* Text color for enabled widgets */
@border-color: #b5bcc7; /* Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer */
@popup-border-color: #769dc0; /* Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match */
@minor-border-color: #d3d3d3; /* Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar */
@disabled-border-color: #d3d3d3; /* Border color for disabled/readonly Button, TextBox etc. widgets */
@disabled-background-color: #efefef;/* Disabled button, textbox, etc. */
@disabled-text-color: #818181; /* Text color for disabled/readonly widgets */
/* ... */
/* Input widgets
@focused-border-color: #769dc0; /* Focused textbox, editor, select, etc. */
@error-border-color: #d46464; /* Border for textbox in error state */
@error-focused-border-color: #ce4f4f; /* Border of textbox in error state, and focused */
@erroricon-background-color: #d46464; /* Background color for exclamation point validation icon (for TextBox in error state) */
@textbox-background-color: #fff; /* Default background color of TextBox based widgets */
@textbox-hovered-background-color: #e9f4fe; /* Background color when hovering a unfocused TextBox, Select, Editor, or other input widget */
@textbox-focused-background-color: @textbox-background-color;
@textbox-error-background-color: @textbox-background-color;
@textbox-disabled-background-color: @disabled-background-color;
/* mixins */
.border-radius (@radius) {
-moz-border-radius: @radius;
border-radius: @radius;
}
.box-shadow (@value) {
-webkit-box-shadow: @value;
-moz-box-shadow: @value;
box-shadow: @value;
}
Všimnete si, jak funguje LESS CSS:
- Chcete-li definovat proměnnou, začněte symbolem „@“ spolu s názvem proměnné.
- Chcete-li použít proměnnou, definujte vlastnost a jako hodnotu zadejte název proměnné s předponou @.
- Chcete-li definovat mixin, zadejte název selektoru s argumenty a definujte dílčí vlastnosti této vlastnosti.
Definice odkazů můžete přenést do jiných .less soubory pomocí následující direktivy, kterou najdete ve všech motivech .less soubory:
@import "variables";
Nyní otevřete Calendar.less a vyhledejte výskyty "@border-color". Všimněte si, že tyto instance odkazují na proměnnou „@border-color“ poskytnutou v souboru variables.css. Všechny ostatní proměnné začínající „@“ budou nahrazeny také v procesu sestavení!
Vytvoření vlastního motivu Dijit
Nejjednodušší způsob, jak začít s vlastním motivem, je zkopírovat nejnovější a oficiálně podporované téma. V tomto případě by to téma bylo claro. Motiv claro je profesionálně vypadající modrý motiv, který využívá přechody CSS, přechody a zaoblené rohy, pokud je prohlížeč podporuje.
Spusťte rychlý cp a zkopírujte složku claro do složky, kterou chcete nazvat svým motivem:
cpmac claro davidwalsh
Než se pustíte do úpravy stávajícího kódu, je důležité změnit deklarace „.claro“ v každém souboru CSS na „.{název_vašeho_prostoru}“. Moje téma se bude jmenovat "davidwalsh", takže pomocí svého textového editoru najdu každou instanci ".claro" a nahradím ji @theme , kterou můžeme mapovat na "davidwalsh". S připravenou kopií claro přejděte do variables.less soubor a proveďte jakékoli změny barev, které uznáte za vhodné. Sám jsem spíše „zelený chlap“, takže barvy upravím v rámci variables.less nazelenalým protějškům:
/* General */ @text-color: #000000; /* Text color for enabled widgets */ @border-color: #b7c7b5; /* Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer */ @popup-border-color: #b7c7b5; /* Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match */ @minor-border-color: #b7c7b5; /* Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar */ @disabled-border-color: #d3d3d3; /* Border color for disabled/readonly Button, TextBox etc. widgets */ @disabled-background-color: #efefef;/* Disabled button, textbox, etc. */ @disabled-text-color: #818181; /* Text color for disabled/readonly widgets */ /* ... */ /* Input widgets @focused-border-color: #7bc076; /* Focused textbox, editor, select, etc. */ @error-border-color: #d46464; /* Border for textbox in error state */ @error-focused-border-color: #ce4f4f; /* Border of textbox in error state, and focused */ @erroricon-background-color: #d46464; /* Background color for exclamation point validation icon (for TextBox in error state) */ @textbox-background-color: #fff; /* Default background color of TextBox based widgets */ @textbox-hovered-background-color: #e9fee9; /* Background color when hovering a unfocused TextBox, Select, Editor, or other input widget */ @textbox-focused-background-color: @textbox-background-color; @textbox-error-background-color: @textbox-background-color; @textbox-disabled-background-color: @disabled-background-color;
Po úpravě mého variables.less soubor, který odpovídá mému požadovanému designu, je čas podívat se na každý {WidgetName}.less soubor k provedení příslušných změn, pokud chci, aby widget vypadal jinak než jeho vzhled claro. Jednou všechny {WidgetName}.less jsou soubory upravovány podle vašich představ, je čas zkompilovat .less soubory do pracovních souborů CSS!
Zkompilování vašeho méně CSS motivu
Před kompilací motivu se podívejme na jiný soubor v adresáři motivu: compile.js . compile.js byl napsán tak, aby skenoval aktuální adresář a také adresáře formulářů a rozvržení a hledal .less soubory. Vše less soubory jsou analyzovány a pomocí variables.less direktivy, hodnoty proměnných se vloží na jejich odpovídající místa a vytvoří se soubor CSS.
Chcete-li použít compile.js , přejděte do složky vašeho motivu pomocí příkazového řádku a spusťte následující příkaz:
node compile.js
Po spuštění tohoto příkazu .css soubory budou generovány se stejným názvem jako jejich .less protějšky. Rychlá kontrola těchto souborů potvrdí, že všechny proměnné byly umístěny na správná místa! Nyní jsou vaše soubory motivů připraveny k použití!
Implementace vlastního motivu Dijit
Najděte soubor themeTester.html (/dijit/themes/themeTester.html ) a upravte jej tak, aby zahrnoval váš motiv:
// Fill in menu/links to get to other themes.
// availableThemes[] is just a list of 'official' dijit themes, you can use ?theme=String
// for 'un-supported' themes, too. (eg: yours)
var availableThemes = [
{ theme:"davidwalsh", author:"David Walsh", baseUri:"../themes/" },
{ theme:"claro", author:"Dojo", baseUri:"../themes/" },
{ theme:"tundra", author:"Dojo", baseUri:"../themes/" },
{ theme:"soria", author:"nikolai", baseUri:"../themes/" },
{ theme:"nihilo", author:"nikolai", baseUri:"../themes/" }
];
Tento přístup doporučuji, protože svůj motiv můžete porovnat s každým widgetem v knize. Budete také chtít vyladit své téma při neustálém vývoji vaší webové aplikace.
Zobrazit ukázkuPřechod z pevně zakódovaných statických souborů CSS na šablony stylů využívajících méně energie by měl mnohonásobně usnadnit vývoj témat. LESS šetří vývojářům spouštění mnoha příkazů pro vyhledávání/nahrazování a umožňuje, aby vytváření šablon stylů bylo dynamičtější a organizovanější. Nyní, když bylo vytváření motivů Dijit exponenciálně snazší, těším se, až se objeví mnoho dalších témat!