Share
Cu puțin timp în urmă, am scris despre actualizările recente ale editorului Brackets. Brackets este un proiect open source axat pe standardele web și construit cu tehnologii web. Ea are un focus îngust și, prin urmare, poate să nu aibă o caracteristică particulară de care ai ajuns să depind de. Din fericire, suporturile sunt livrate cu un API extensie puternică, care vă permite să adăugați numeroase caracteristici noi. În acest articol, voi discuta acest API și va demonstra cum vă puteți construi propriile extensii.
Este crucial că vă amintiți că Bracket-urile sunt în curs de dezvoltare. Acest articol este scris în decembrie 2013. Este cu siguranță posibil ca codul demonstrat mai jos să nu mai fie actualizat. Țineți minte acest lucru și asigurați-vă că verificați wiki-ul pentru cele mai recente actualizări ale extensiei API.
O să presupun că ați citit ultimul meu articol și că sunt deja familiarizați cu managerul extensiei. Aceasta oferă o metodă simplă, cu un singur clic, de instalare a extensiilor. Una dintre cele mai bune moduri în care puteți învăța să scrieți extensii este să vă uitați la munca făcută de alții (așa am învățat). Aș recomanda să luați câteva extensii (există aproape 200 disponibile acum) și să vă distrați codul. Nu vă fie frică să întrerupeți câteva lucruri în timp ce sunteți la el.
Parantezele plasează toate extensiile instalate într-un singur director principal. Pentru a găsi acel dosar, accesați Ajutor meniu și selectați "Afișați dosarul Extensii"Pentru instalarea OS X, aceasta a fost localizată la / Utilizatori / ray / Bibliotecă / Suport pentru aplicații / Brackets / extensii / utilizator. Dacă mergeți din acel dosar, veți observa și un dosar dezactivat. Consolele vor face un efort deosebit de încãrcat, indiferent de ce, dar dacã v-aþi aflat vreodatã într-o situaþie în care Brackets a crapat complet patul ºi pur ºi simplu nu va funcþiona, luati în considerare transferarea eventualelor extensii proaste în dosarul dezactivat. Mai târziu, în articol, voi discuta cum puteți monitoriza și depana extensii pentru a ajuta la prevenirea unor astfel de probleme în primul rând.
Începeți să mergeți la dosarul dvs. de utilizator și să creați un nou dosar, HelloWorld1. Da, chiar dacă este complet lame, vom construi o extensie HelloWorld. Nu mă urăști, îmi place simplu. În interiorul acelui director creați un fișier nou numit main.js. Afișarea unuia arată ce ar trebui să fie conținutul acestui fișier. Rețineți că în acest articol voi trece prin câteva iterații diferite ale Salut Lume extensie. Fiecare dintre ele va fi numit cu un număr progresiv mai mare. Primul exemplu este de la HelloWorld1, urmatorul HelloWorld2, si asa mai departe. Ar fi logic să copiați codul într-un singur dosar, Salut Lume, în loc să copiați fiecare unul singur. Dacă faceți acest lucru, veți avea mai multe extensii asociate care rulează simultan și care pot confunda cu siguranță lucrurile.
Accentsconagua
Lista 1: helloworld1 / main.js define (funcția (necesită, export, modul) jurnalul funcțiilor console.log ("[helloworld] ); Prima linie definește extensia noastră ca un modul care va fi preluat automat de brackets la încărcarea aplicației. Restul extensiei este un mesaj de jurnal personalizat (veți vedea de ce într-o secundă) și un apel către acel logger. După ce ați salvat acest fișier, reveniți la Console, selectați meniul Debug și apăsați Reload. (Puteți, de asemenea, să utilizați Comandă / Control + R să reîncărcați, de asemenea.)
Parantezele se vor reîncărca și ... nimic altceva nu se va întâmpla. Extensia pe care am construit-o nu face nimic de fapt, dar se loghează la consola. Dar unde este consola aceea? Parantezele oferă o modalitate ușoară de vizualizare a consolei. Pur și simplu du-te înapoi la debug meniu și selectați Afișați Instrumentele pentru dezvoltatori. Aceasta va deschide o nouă filă în Chrome cu un utilitar familiar Dev Tools. În ecranul de mai jos am evidențiat jurnalul nostru. Alte prelungiri, precum și consolele în sine, vor fi de asemenea în jurnal la acest ecran. Prin prefixarea mesajelor mele de jurnal cu [Salut Lume], Îmi pot face propriile lucruri mai ușor de găsit.
Rețineți că Chrome complet console.api funcționează aici. Puteți face astfel de lucruri pentru a formata mesajele dvs. de consolă:
jurnal de funcții console.log ("% c [helloworld]" + s, "culoare: albastru; dimensiune font: mare"); Înnebunește-te, dar încearcă să elimini aceste mesaje înainte de a-ți distribui codul cu restul lumii. În cazul în care sunteți curios, nu puteți utiliza instrumentele dev într-un alt browser, cum ar fi Firefox, în acest moment.
Acum că știți (foarte) elementele de bază, hai să vorbim despre ce extensii pentru brackets pot face editorului:
Aceasta descrie modul în care extensiile pot modifica parantezele, dar ce pot extinde de fapt în ceea ce privește codul? Ținând cont de faptul că scrieți extensii în standarde web pure (HTML, JavaScript și CSS), de fapt aveți destulă putere. Singurele limite reale se referă la datele binare. Există un API pentru sistemul de fișiere care vă oferă control asupra fișierelor, dar este limitat doar la date text. Din fericire, ai o cale de ieșire.
Orice extensie pentru brackets se poate integra cu Node.js. Dacă aveți un pachet Node.js existent extensia dvs. poate efectua apeluri către el și poate face, bine, orice Node.js poate face, ceea ce este în esență ceva.
Să ne actualizăm extensia pentru a se integra cu editorul puțin mai bine. Voi începe prin simpla adăugare a unui element de meniu pentru extensie.
Listing 2: helloworld2 / main.js / * Bazat - în parte - pe extensia de probă HelloWorld din wiki Brackets: https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension * / define (funcția (necesită export, modul) var CommandManager = brackets.getModule ("CommandManager"), Menus = brackets.getModule (" ); funcția () log (() () () () "Hello from HelloWorld2"); var HELLOWORLD_EXECUTE = "helloworld.execute"; CommandManager.register ("Run HelloWorld"; HELLOWORLD_EXECUTE; handleHelloWorld); var meniu = Menus.getMenu (Menus.AppMenuBar.VIEW_MENU); menu.addMenuItem (HELLOWORLD_EXECUTE ););); Avem câteva schimbări aici, așa că să le abordăm unul câte unul. Veți observa că extensia începe cu trei apeluri către brackets.getModule. Toate extensiile au acces la un obiect paranteză care oferă un API unde putem încărca funcțiile de bază din editor. În acest caz, extensia a încărcat două biblioteci de care avem nevoie pentru meniu (CommandManager și meniuri) și una care va fi utilizată pentru a ajuta la inițializarea extensiei (AppInit).
Să vorbim despre AppInit. Puteți vedea că cea mai mare parte a extensiei este acum încărcată cu un apel call appReady. Acest apel de apel este declanșat atunci când Brackets a terminat încărcarea și este considerat, în general, "cea mai bună practică" pentru extensiile de utilizat.
Înregistrarea unui element de meniu necesită câțiva pași. Începeți prin definirea unui "ID de comandă", un identificator unic pentru elementul pe care îl voi adăuga la interfața de utilizare. Modul tipic de a face acest lucru este cu formatul extensionname.someaction. În cazul meu, am folosit helloworld.execute. Pot apoi să înregistrez această comandă împreună cu funcția (handleHelloWorld) care ar trebui să fie numit atunci când comanda este declanșată.
Ultimul pas este să adăugați această comandă în meniu. Probabil că puteți ghici că elementul de meniu va fi adăugat sub meniul Vizualizare pe baza acestei valori: Menus.AppMenuBar.VIEW_MENU. De unde am știut acea valoare? Simplu, am văzut și alte extensii. Serios, totuși, nu există o listă specifică de articole ca aceasta încă. Nu uitați că Brackets este open source. Pot să urc ușor la repo GitHub și să verific. În acest caz, fișierul este Menus.js, situat pe Github. Aici pot vedea unde sunt definite diferitele meniuri de bază:
/ ** * Console pentru meniuri aplicație * @enum string * / var AppMenuBar = FILE_MENU: "meniu fișier", EDIT_MENU: "meniu editare", VIEW_MENU: "meniu de vizualizare", NAVIGATE_MENU: ", HELP_MENU:" meniu de ajutor ";
Ca o regulă generală, este logic să aveți cel puțin o înțelegere rapidă a ceea ce este disponibil în Paranteze. Extensiile dvs. vor folosi, din când în când, mai multe caracteristici diferite, astfel încât este cu siguranță în interesul dumneavoastră cel puțin să cunoașteți așezarea terenului.
După reîncărcarea consolelor, veți vedea acum elementul de meniu din Vedere meniul. Exact unde este, poate fi un pic aleatoriu, deoarece este posibil să aveți alte extensii instalate.
De fapt, poți fi mai specific cu privire la poziția ta. Din nou, aici vă va ajuta codul sursă. Același fișier la care am fost legat mai sus conține, de asemenea, definiția addMenuItem.
Acum că ați văzut un exemplu simplu despre modul în care o extensie se poate integra în brackets, să vedem cum actualizăm interfața utilizator. În versiunea anterioară a codului nostru, am folosit o alertă pentru a trimite un mesaj. În timp ce funcționează, nu este foarte drăguță. Codul dvs. poate accesa editorul Console, la fel ca orice alt cod de modificare DOM. In timp ce tu poate sa faceți tot ce doriți, există câteva extensii de moduri standard care actualizează interfața utilizator în paranteze. (Ca un avertisment, în general, nu doriți să atingeți DOM din interfața principală a editorului. Puteți, dar cu viitoarele actualizări, codul dvs. se poate rupe, de asemenea, este posibil ca utilizatorii să nu fie fericiți dacă extensia dvs. modifică ceva de bază în Console. )
Prima metodă pe care o vom analiza utilizează dialogurile modale. Parantezele utilizează deja acest lucru și au un API disponibil pentru extensii de apel. Ca un exemplu simplu, să actualizăm extensia HelloWorld pentru a folosi un modal în schimb.
Lista 3: helloworld3 / main.js / * Bazat - în parte - pe extensia de probă HelloWorld din wiki Brackets: https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension * / define (funcția (necesită, export, modul) var CommandManager = brackets.getModule ("comanda / CommandManager"), meniuri = brackets.getModule (Dialogs = brackets.getModule ), DefaultDialogs = brackets.getModule ("widget-uri / DefaultDialogs"), AppInit = brackets.getModule ("utils / AppInit" () Dialogs.showModalDialog (DefaultDialogs.DIALOG_ID_INFO, "Hello World", "Mesaj același important"); AppInit.appReady (funcție () log ("Hello from HelloWorld3.") Var HELLOWORLD_EXECUTE = "helloworld.execute" ; CommandManager.register ("Run HelloWorld"; HELLOWORLD_EXECUTE; handleHelloWorld); var meniu = Menus.getMenu (Menus.AppMenuBar.VIEW_MENU); menu.addMenuItem (HELLOWORLD_EXECUTE););); Rețineți adăugarea a două module suplimentare pentru brațe: Dialoguri și DefaultDialogs. Următoarea schimbare este în handleHelloWorld. Una dintre metodele din biblioteca Dialog este abilitatea de a afișa un dialog (nu este o surpriză acolo, presupun). Metoda vrea o clasă, un titlu și un corp, și asta este. Există mai mult de făcut cu dialogurile, dar pentru moment, acest lucru demonstrează caracteristica. Acum când conducem comanda, obținem un UI mult mai prețios. (Împreună cu butoanele și comportamentele implicite pentru a gestiona închiderea dialogului.)
Acesta este un exemplu, acum vă permite să vă uitați la altul: crearea unui panou inferior. Ca și în cazul dialogurilor, avem suport din partea Brackets pentru a face mai ușor. Să ne uităm la un exemplu și apoi voi explica schimbările.
Lista 4: helloworld4 / main.js / * Bazat - în parte - pe extensia de probă HelloWorld din wiki Brackets: https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension * / define (functie (necesita export, modul) var CommandManager = brackets.getModule ("comanda / CommandManager"), Menus = brackets.getModule (" ), AppInit = brackets.getModule ("utils / AppInit"); var HELLOWORLD_EXECUTE = "helloworld.execute"; var vară; funcții log console.log ("[helloworld4]" + s); handleHelloWorld ) if (panel.isVisible ()) panel.hide (); CommandManager.get (HELLOWORLD_EXECUTE) .setChecked (false); altceva panel.show (); CommandManager.get (HELLOWORLD_EXECUTE). AppInit.appReady (functie () log ("Hello from HelloWorld4"); CommandManager.register ("Run HelloWorld"; addMenuItem (HELLOWORLD_EXECUTE) ; panoul = PanelManager.createBottomPanel (HELLOWORLD_EXECUTE, $ ("HTML pentru panoul meu"), 200););); Să ne concentrăm asupra schimbărilor. În primul rând, am renunțat la modulele Dialog pe măsură ce nu le mai folosesc. În schimb, încarcă PanelManager. În jos în blocul appReady am definit un nou panou folosind metoda PanelManager API createBottomPanel. Ca și comanda de meniu, acest lucru ia un ID unic, așa că reușesc să reutilizez HELLOWORLD_EXECUTE. Al doilea argument este un bloc HTML învelit în jQuery (și în cazul în care vă întrebați, da, putem face acest lucru mai frumos) și, în sfârșit, o dimensiune minimă. Aceasta stabilește panoul, dar nu o execută.
În cazul unui manipulator de evenimente, am legat meniul, putem solicita panoul dacă acesta este vizibil și apoi se ascunde sau îl arăta. Această parte ar trebui să fie destul de banală. Pentru distracție am adăugat într-un pic mai complexitate. Observa asta CommandManager ne permite să obținem un element de meniu și să setăm o proprietate verificată. Acest lucru poate fi inutil deoarece utilizatorul poate vedea panoul cu ușurință suficient de ei înșiși, dar adăugarea de cecuri doar face lucrurile un pic mai evident. În ecranul de mai jos puteți vedea panoul în stare vizibilă.
Chiar și atunci vă puteți întreba despre panoul HTML. Există o modalitate mai bună de a furniza codul HTML? Oricum să-l stil? Da, vă puteți uita la o versiune mai avansată.
Lista 5: helloworld5 / main.js / * Bazat - în parte - la extensia de probă HelloWorld din wiki Brackets: https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension * / define (functie (necesita export, modul) var CommandManager = brackets.getModule ("comanda / CommandManager"), Menus = brackets.getModule (" ), ExtensionUtils = brackets.getModule ("utils / ExtensionUtils"), AppInit = brackets.getModule ("utils / AppInit"), var var_barcelona_execute = html "); jurnalul funcțiilor console.log (" [helloworld5] "+ s); handleHelloWorld () if (panel.isVisible ()) panel.hide (); CommandManager.get (HELLOWORLD_EXECUTE) ()) altfel panel.show (); CommandManager.get (HELLOWORLD_EXECUTE) .setChecked (adevărat); AppInit.appReady (funcția () log ("Hello from HelloWorld5" (modulul "helloworld.css"); CommandMa nager.register ("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld); var meniu = Menus.getMenu (Menus.AppMenuBar.VIEW_MENU); menu.addMenuItem (HELLOWORLD_EXECUTE); panoul = PanelManager.createBottomPanel (HELLOWORLD_EXECUTE, $ (panelHtml), 200); ); ); Ca și până acum, mă voi concentra asupra schimbărilor. Notați mai întâi că am inclus o variabilă numită panelHtml care este încărcat prin necesită. Acest lucru îmi permite să definim codul HTML în afara codului meu JavaScript. (De asemenea, puteți utiliza motoarele de template-uri. Parantezele sunt livrate cu Mustache.) HTML-ul din spatele panoului este destul de simplu.
Lista 6: helloworld5 / panel.htmlPanoul meu
Panoul meu îi aduce pe toți băieții în curte,
Și sunt ca și cum
Este mai bine decât a ta,
La naiba, e mai bine decât al tău,
te pot învăța,
Dar trebuie să vă acuz
Revenind la main.js, Am demonstrat o altă caracteristică, loadStyleSheet. Aceasta vă permite să încărcați o foaie de stil specifică extensiei. Am creat un fișier, helloworld.css, cu câteva stiluri simple (dar gustoase) CSS.
Lista 7: helloworld5 / helloworld.css .helloworld-panel h1 culoare: roșu; . panoul lumii verde p culoare: albastru; font-weight: bold;
Rețineți că am prefixat stilurile mele cu un nume unic. Acest lucru vă ajută să vă asigurați că clasele mele nu se află în conflict cu ceva încorporat în paranteze. Cu aceste modificări simple, panoul meu arată acum mult mai bine și puteți vedea de ce sunt cunoscut pe plan mondial pentru abilitățile mele de design superioare.
Bineînțeles, doar crearea celei mai proaspete extensii de brațe nu este suficientă. Probabil (sperăm!) Doriți să îl împărtășiți altora. O opțiune este de a zip până directorul și pune-l pe site-ul dumneavoastră. Oamenii pot descărca zipul, extrage-l și îl pot copia în folderul Extensii pentru brațe.
Dar nu e bine. Vrei să fii cool, nu? Pentru a distribui extensia dvs. și a le pune la dispoziție prin intermediul Managerului de extensii Brackets, trebuie doar să adăugați o extensie package.json fișier la extensia dvs. Dacă ați folosit vreodată Node.js, atunci acest lucru va părea familiar. Iată o mostră pentru extensia noastră.
