Office UI Fabric julkaistu – omat lisukkeet saumattomaksi osaksi Office-kokemusta


Office UI Fabric julkaistu – omat lisukkeet saumattomaksi osaksi Office-kokemusta



Vielä viime viikolla sitä ei yleisellä tunnuksella GitHubista löytynyt. Maanantaista 31.8. saakka se on ollut kaikkien saatavilla. Se on Office UI Fabric GitHub-projekti – kyllä avoimen lähdekoodin projekti.

Office UI Fabric on kokoelma CSS-tyylitiedostoja, JavaScript-tiedostoja ja valmiita HTML-elementtejä, kuten painonappeja, valintanappeja, pudotusvalikoita ja Office elementtejä kuten vaikkapa henkilökortteja, kaikki valmiiksi Officen ulkoasulla muotoiltuja. Fabricin tarkoitus on auttaa kehittäjiä luomaan appejä (add-innejä), jotka sulautuvat Officen ulkoasuun saumattomasti.

GitHubista löytyy kaksi Office UI Fabric –projektia:

  • Office UI Fabric – varsinainen Office UI Fabric –projekti, jonka zip-lataustiedosto sisältää tarvittavat CSS- ja komponenttitiedostot
  • Office Add-In Fabric UI Sample – sisältää esimerkkejä ja malleja Office UI Fabricin käyttämisestä

Office UI Fabricin käyttöönotto omassa projektissa on suhteellisen suoraviivainen toimenpide. Ladataan GitHubista Office UI Fabric zip-paketti, puretaan se ja sisällytetään Office Add-in –projektiin, minkä jälkeen sitä voidaan hyödyntää projektin HTML-sivuilla. Jos Bootstrap tai vastaava on tuttu, Office UI Fabricin käyttämisen ei pitäisi tuntuman kovinkaan vieraalta. Idea on sama, toteutus on tehty nimenomaan Officen ulkoasua ja käyttökokemusta ajatellen.

Projektin HTML (aspx) –sivuille tulee referoida tarvittavat CSS-tyylitiedostot, vähintäänkin fabric.min.css. Lisäksi jos käyttää komponentteja, tarvitaan fabric.components.min.css ja mikäli tarvitaan oikealta-vasemmalle-tuki, lisätään referenssi myös tyylitiedostoon fabric-[version].rtl.min.css. JavaScript-tiedostoja ei tarvitse referoida omilla HTML-sivuilla, ellei siihen ole erityistä tarvetta. Komponenttien JavaScript-tiedosto on nimeltään fabric.components-.min.js.

Oikealta-vasemmalle tuen lisäksi Office UI Fabric tukee täyttä lokalisaatiota käyttäen XX-kielikoodeja, esim. fi-FI, jotka lisätään joko HTML-tagin tai jonkin yksittäisen elementin lang-attribuutin arvoksi. Tarkemmat ohjeet oikealta-vasemmalle-tuen ja lokalisaation käyttämiseen löytyy Office UI Fabricin dokumentaatiosta, jonka löydät GitHubista projektin sivulta.

Mitä sillä sitten oikeasti voi tehdä? Mitä se tarkoittaa, se Office-kokemus, jonka omaan ”lisukkeeseen” sen avulla voi saada? Ja miten se saavutetaan?

Se on typografiaa – valmiita fonttityylejä. Se on värejä – Officen värit käyttöön. Se on responsiivisuutta – mobiili edellä, elementit valmiiseen ”gridiin”, vähän niin kuin Bootsrapilla. Se on CSS-luokkia, joita voit määrittää HTML-elementeille tarpeen mukaan. Se on valmiita ikoneita, jotta add-innisi ikonit olisivat saman näköiset kuin muualla Officessa. Se on valmiita komponenetteja, joiden avulla saat helposti oman add-innisi napit, valikot, navigoinnit ym. UI-elementit näyttämään samalta kuin ympäröivässä Officessa. Se on valmiita animaatioita pop-up-ikkunoille, valikoille ym.

fontit

colors

 

icons

Se on käyttäjän käyttökokemuksen yhtenäistämistä, melko vaivattomasti.

Kaikki tyylittelyt – fontit, värit, reunat, animaatiot – sekä ikonien käyttö ja elementtien sijoittaminen responsiiviseen gridiin hoituu määrittämällä tarvittavat css-luokat elementeille. Komponenttien peru-HTML-koodi löytyy kunkin komponentin omista tiedostoista /dist/components-hakemistosta. Käyttöönsä saa myös Component Pickerin, jos tekee Office UI Fabric Buildin omalla koneellaan. Ohjeet tähän löytyvät heti dokumentaation alusta.

callout

Meillä ei ole erikseen kurssia Office UI Fabricin käytöstä, mutta sen hyödyntämistä käsitellään Office- ja SharePoint developer-kursseilla.

P.S. Tsekkaa myös Onsightin Office UI Fabric demosivu!



Sanna on pitkän linjan Microsoft-osaaja ja taustaltaan kouluttaja. Viime vuosina hän on ollut mukana lukuisissa asiakasprojekteissa konsulttina ja kouluttajana osaamisalueinaan SharePoint, Office 365 ja Dynamics 365.

Tags: