Share
Tabloul de bord în aceste zile este învechit. Am plasat un calculator aici și o notă lipicioasă acolo o dată la câteva săptămâni, dar, din păcate, nu am văzut multe widget-uri mari care ies recent. Astăzi, pentru a remedia spațiul gol din inima tabloului de bord, să distrugem un widget și să-l împărțim în propriul nostru!
Bacsis: Dacă doriți să descărcați fișierul widget din acest tutorial, îl puteți descărca aici. Acesta este widgetul personalizat de tabloul de bord creat la sfârșitul acestui tutorial, cu toate imaginile și editările predone. Aceasta înseamnă că îl puteți instala direct pe tabloul de bord și puteți să jucați imediat cu modificările.
Când ne uităm la tabloul de bord al utilizatorului mediu Mac, este probabil gol și niciodată folosit, sau copleșitor de plin de feed-uri de știri sportive și note lipicioase. Uneori vedem lumini de Crăciun festive! Desigur, trebuie să existe mai mult decât tabloul de bord.
Am putea continua cu viața noastră și continuăm să ne uităm la ecranele murdare, dar asta nu este în conformitate cu stilul Mactuts +! Tablourile de bord sunt pe cale de dispariție, așa că să revigorăm scena prin personalizarea Widget-urilor mai mult decât oricând.
Pentru a combate un aspect al acestei depresiuni Widget, vom edita Widget-ul "Stickies" și îl vom face pe noi. Modificările sunt simple: modificați fundalul notelor lipicioase, astfel încât să putem avea anumite culori pentru note (și etichete) pentru anumite scopuri. De exemplu, vom avea un singur tip de note lipicioase pentru gânduri personale, unul pentru o listă todo și, eventual, o altă pentru notele aleatoare. Vom adăuga, de asemenea, un buton personalizat "Erase All" pentru a face clarificările noștri mai repede.
Tablourile de bord sunt pe cale de dispariție, așa că să revigorăm scena prin personalizarea Widget-urilor mai mult decât oricând.
Veți avea nevoie de cunostințe HTML, CSS și JavaScript, dar procesul nu este cu siguranță prea avansat. Să începem!
Toate widgeturile se află în dosarul "/ Library / Widgets". Puteți face o scurtă Comman + Shift + G pentru a avea acces rapid la acesta. Pentru că vom edita Stickies Widget, găsiți fișierul widget Stickies.wdgt și faceți o copie pe desktop. În acest fel, putem edita fișierele fără să vă faceți griji cu privire la permisiuni și probleme de economisire.
Pe desktop, faceți clic dreapta și selectați Afișați conținutul pachetului pentru a deschide widget-ul ca un folder, mai degrabă decât să îl deschizi în tabloul de bord.
Acum, când avem fișierele Widget deschise, să aruncăm o privire la structura generală a unui widget.
Tablourile de bord sunt relativ simple. Sunt mici setări HTML cu JavaScript stropit pentru a le face interactive. Din acest motiv, fișierele incluse în fiecare widget sunt simple și ușor de modificat, mai ales când vrem doar să schimbăm lucruri simple precum imaginile. Stickies Widget este un exemplu excelent al acestei simplități.
Pentru a înțelege funcționarea unui widget de tablou de bord, să examinăm fiecare dosar individual și să vedem la ce se utilizează.
Info.plist fișierul determină informații despre widget. Este centrală pentru Widget deoarece include numele Bundle ("Stickies" aici), versiunea curentă, înălțimea și lățimea widget-ului și multe altele. Cu toate acestea, deoarece editați widget-uri doar în acest tutorial, putem ignora acest fișier.
Acest fișier este, în general, același ca ultimul. Acesta conține mai multe informații despre widget. Are numărul versiunii, numărul de construcție etc. Nu este important pentru ceea ce facem.
Aceasta este carnea reală a widget-ului. Aici avem codul care face ceea ce vedem. După cum sa spus mai devreme, fiecare widget este doar o pagină HTML, deci este ușor de editat. Dacă o deschideți, o veți găsi foarte familiar dacă ați mai lucrat cu site-uri web înainte. (Ca o notă, "Stickies" din numele fișierului se modifică în funcție de Widget, deci acest fișier nu are întotdeauna același nume. Acest lucru este valabil și pentru următoarele două fișiere.)
Desigur, cu HTML vom dori să stilul conținutului, deci aici este fișierul CSS care îl însoțește.
Interactivitatea widget-ului vine de la JavaScript, și acesta este locul în care se desfășoară totul. O să facem acest lucru și mai târziu!
Atunci când se încarcă un widget, aceste imagini sunt afișate ca locașe de plasare până când totul este încărcat. Este ecranul de pornire al widget-ului. (Dacă vă întrebați ce înseamnă "@ 2x" la sfârșit, este o imagine mai mare pentru ecranul Retina pe ecranele mai noi.)
Când adăugați un widget în tabloul de bord, pictogramele pe care le puteți vedea și trageți sunt aceste fișiere. Din nou, "@ 2x" este pentru ecranele Retina.
Widgetul Stickies utilizează un dosar "Imagini" pentru a ține toate imaginile. Veți observa că în interior sunt toate fundalul și icoanele care alcătuiesc widget-ul.
Primul și cel mai simplu lucru pe care îl putem face înainte de a intra în cod este să editați fișierele de imagini pentru a schimba aspectul widget-ului. În cazul widgetului Stickies și al multor alte widget-uri stoc, putem să tragem și să lansăm imagini noi în dosarul Widget pentru a face schimbări. De exemplu, dacă vroiam să schimb pictograma Stickies, aș putea să creez un nou .png fișiere și înlocuiți cele vechi ("icon.png" și "[email protected]").
De asemenea, am schimbat imaginea de fundal galben în dosarul "Imagini" adăugând o temă de "gânduri personale". Am schimbat culorile și am adăugat o pictogramă în partea dreaptă sus pentru a indica scopul notei.
Acum, dacă vom instala noul Widget, vom vedea imediat editările și notele noastre galbene vor avea acum tema "gânduri personale". Să schimbăm încă o notă și să o transformăm de această dată într-o listă cu tobe.
Editarea imaginilor este o modalitate excelentă de a adăuga o notă elegantă widget-urilor. Este rapid și simplu de făcut, și dacă aceasta este tot ce ați dori să faceți, puteți să treceți la pasul 5 pentru a instala widgetul modificat recent. În caz contrar, hai să continuăm să lucrăm la ea.
Acum este momentul să adăugați unele funcționalități adevărate! Acesta este locul unde cunoștințele HTML / CSS / JavaScript sunt la îndemână, deoarece fiecare widget este construit doar cu asta. Nu vom trece prea mult în redactarea codului, dar vom lucra cu toate cele trei fișiere pentru a vă familiariza. Așa cum am spus mai înainte, vom lucra pentru a adăuga o altă pictogramă mică în stânga jos care funcționează ca un buton "șterge tot".
Pentru a adăuga noul buton, va trebui să adăugăm un alt buton #eraseButton div chiar înainte de #infoButton div (linia 21). Acum este doar o div divizată cu o imagine înăuntru, dar o vom modela pentru a face să pară ca un buton real în curând. img este o simplă pictogramă de 12 x 12 x "x" pe care am plasat-o în dosarul "Imagini".
Acum, pentru a da stilul butonului de ștergere, hai să ne întoarcem la Stickies.css fișier și adăugați câteva informații despre locația și dimensiunea de bază înainte de #infoButton selectoare. Să-i dăm, de asemenea, un stil mai mult prin creșterea opacității atunci când se deplasează.
#eraseButton opacitate: 0,5; Poziția: absolută; top: 166px; stânga: 15px; lățime: 13px; înălțime: 13px; #eraseButton: mutați opacity: 1;
Dacă te uiți la Stickies.js fișier, veți realiza că este foarte bine documentate și scrise datorită Apple. Acest lucru ne face ușor să lucrăm cu el.
Codul JavaScript pentru a face lucrul de ștergere este o funcție foarte simplă, care doar stabilește conținutul căsuței de text pentru nimic. Adăugați acest cod oriunde în Stickies.js, de preferință acolo unde se potrivește cu alte funcții. Am pus-o după textToHTML funcţie.
funcția eraseAll () mydiv.innerHTML = "";
Pentru a apela codul JavaScript, să adăugăm un cod onclick eveniment la #eraseButton în Stickies.html fişier.
Și butonul este terminat! Este un exemplu foarte simplu, dar arată și extensibilitatea acestor widgeturi datorită simplității lor
Dacă doriți vreodată să vă testați widgetul pe măsură ce efectuați modificări, aveți două opțiuni: deschideți fișierul .html în browser ca un site web sau instalați widgetul și testați-l în tabloul de bord. Primul este mai rapid pentru dezvoltare, în timp ce al doilea oferă o experiență reală în tabloul de bord.
Instalarea unui widget este foarte simplă. Tot ce trebuie este un dublu clic pe un widget și un "da" la promptul de instalare. Asigurați-vă că înainte de a instala noul widget, salvați o copie a versiunii dvs. editate. Aceasta deoarece, pe măsură ce îl instalați, fișierul va fi mutat în "~ / Library / Widgets". De asemenea, rețineți că atunci când instalați noul Stickies Widget, acesta va suprascrie ultimul, având același nume.
Editarea widget-ului părea la început de descurajantă, dar simplitatea lui ne-a permis să facem schimbări cu ușurință. Am terminat editarea Stickies Widget Widget și, sperăm, am dat o lumină mică în lumea tabloului de bord. Dacă vrem, am putea continua să creăm mai multe medii și să adăugăm mai multe funcții pentru a ne satisface nevoile.
Avem cu adevărat doar adâncime în gleznă în ceea ce putem face prin modificarea widget-urilor noastre de tabloul de bord. Acest lucru este într-adevăr doar un element de bază pentru lumea Widget-hacking și ceea ce puteți face va fi bazat pe capacitatea dvs. de a manipula fotografii și de a lucra cu codul. Știți cum să faceți schimbările acum, dar ceea ce urmează va fi să decideți ce schimbări doriți să faceți.
!
Accentsconagua