Son Haberler
Buradasınız: Anasayfa / Yazılım / Office Geliştirme UI Elementleri | Tuzla Bilgisayar
Office Geliştirme UI Elementleri | Tuzla Bilgisayar

Office Geliştirme UI Elementleri | Tuzla Bilgisayar

Merhaba , Office geliştirme serimize daha önce videolarda ve yazılarımda bahsettiğim eklenti tiplerinin grafiksel ( UI ) olarak ne anlatmak istediği ve elementlerinin neler olduğu hakkında kısa bilgiler vermeye çalışacağım.

Bundan önce de belirttiğimiz gibi eklenti geliştirme seçenekleri olarak Office 365 ve Office programları üzerinde SharePoint de dahil olmak üzere 3 çeşit eklenti geliştirme olasılığımız bulunmaktadır. Genel olarak SharePoint eklenti geliştirme kısmını Office Geliştirme içine tam olarak dahil etmesek de Office 365 üzerinden bulut tabanlı bir hizmet olduğu için Office Geliştirme araçları da dahil olmak üzere tüm Msdn dokümanlarında da bulunmaktadır.

Bu yazımızda sizlere 3 adet eklenti tipinden bahsediyor olacağız. Bunlar;

·        Task Pane Eklentisi

·        Content Eklentisi

·        Outlook Eklentisi

Yazımızda kavram ve ekran görüntüsü kargaşasına yer vermemek amacı ile tanıtıcı resimleri dev.office.com üzerinden sizler ile paylaşıyoruz.

Content Eklentisi

Content eklenti şablonu, Office programlarımız ve Office 365 Excel, Word, PowerPoint programlarımız içerisinde bulunan  görünümlerin daha tutarlı ve sistematik olarak tüm program silsilesi içerisinde aynı görünüme sahip olmaları için kullanılan bir eklenti şablonudur.

Bu şablonda var olması gereken görünüm öğeleri aşağıdaki gibidir;

clip_image002

Command Bar
Maksimum yüksekliği 80 px olabilecek şekilde tasarlanabilen kullanıcılar tarafından eklentinin büyütülmesi, komutların uygulanması, navigasyon ve diğer öğelerin eklenebildiği bir alandır.

Add-in Content

Eklentimiz için tüm içeriğin gösterildiği alan

Bottam Brand Bar

Marka ve lisans işlemlerini gösterebileceğiniz bir brand alanıdır.

 

Command bar ve Bottom brand bar elemanları isteğe bağlıdır. Her Content eklenti şablonunda kullanılması zorunlu değildir. Ayrıca Content eklenti içeriklerinde HTML tabanlı kodlarınızı da kullanabilirsiniz. Yazımızın sonunda bahsedeceğimiz UI Fabric ile birlikte daha özgün HTML içerikleriniz ile birlikte eklentilerinizi daha şık görüntülere kavuşturabilirsiniz.

Task Pane Eklentisi

 
Office programlarımızın sağ kısmında bizleri yönlendiren ve içeriklere daha hızlı erişilmesini sağlayan eklenti şablonu seçeneğidir. Bu eklenti şablonunda Content eklenti şablonu gibi 4 ana öğe bulunmaktadır.

clip_image004

Add-In Title

Eklentinizin ismini ve başlığını belirtebileceğiniz bir alandır. Bu alan eklentinizi geliştirmeye başladığınızda otomatik olarak ekrana aktarılır. Manifest dosyasından ya da Html içeriğinden düzenlenebilir.

NavBar
Maksimum 80 px olarak yüksekliği ayarlanabilir. Ön tanımlı yüksekliği ise 40 pxdir.  Fabric component türünde olan NavBar UI Fabrik ile etkileşimli olarak kullanılabilir ve menülerinizi tüm platformlar için uyumlu bir şekilde sunabilirsiniz.

Add-In Content
Fabrik UI tipografi ve renklerini içinde barındırabilen eklenti gövdesidir. Tüm işlem ve eklenti ile alakalı gösterimlerin tamamı bu alandan kullanıcıya aktarılır.

Bottam Brand Bar

Marka ve lisans işlemlerini gösterebileceğiniz bir brand alanıdır.

 

Outlook Add-In şablonu

Outlook eklenti şablonu biraz önce bahsettiğimiz iki şablondan farklı olarak Custom pane olarak adlandırılan bir eklenti çeşitlemesine sahiptir. Outlook eklentisi maillerimiz içerisinde yapılması gereken ve Outlook içerisinde bulunmayan fonksiyonların geliştiriciler tarafından tanımlanabilmesine olanak sağlar.

Outlook eklentileri 3 ana şekilde tasarlanabilir bunlardan birincisi Task Pane dir. Yazımız içerisinde Task pane eklentilerinden bahsettiğimiz için tekrar bundan bahsetmiyor olacağız. Aynı işlemleri ve özellikler ile Task Pane eklentisini Outlook eklentimiz içerisinde de kullanabiliriz.

Custom Pane

Aşağıdaki resim ön tanımlı olarak eklenti geliştiricilerine sağlanan Custom Pane ekranını göstermektedir.

clip_image006

Custom Pane içerisinde birden fazla eklentiyi aynı anda görebilir üst kısmında bulunan tab bar sayesinde aynı mail içerisinde benzer eklentiler arasında geçiş yapabilirsiniz. Add-In UI ekranında ise eklentinizin içeriklerini görebilirsiniz.

Outlook eklentilerinin diğer bir şekli ise Contextual Add-in dir bu eklenti çeşidinde kullanıcıya daha iyi mesaj, mail ya da randevuları için etkileşim iyileştirilmesi sunulmaktadır.

clip_image008

Bunların yanında Outlook eklentilerimiz için Info Bar özelliğini de kullanabiliriz. Bu özellik Task Pane eklenti ya da Custom Pane eklenti ayrılmaksızın komutlarınızı çalıştırdığınızda kullanabilirsiniz. Örneğin mail içeriğinizi PDF aktarması tamamlandığında “Mail Aktarımı Başarılı” şeklinde metinlerinizi ve alert dediğimiz uyarıları info bar yardımı ile kullanıcılarınız ile paylaşabilirsiniz.

Office UI Fabric Kullanımı
Office 365 ve Office programlarında geliştirme yapabilmek ve kullanıcı etkileşimlerini tam olarak yansıtabilmek için Microsoft tarafından sağlanan Fabric UI açık kaynaklı ve GitHub tarafından da örnekleri çokça olan bir kütüphanedir.

Kütüphanenin detaylarına https://github.com/OfficeDev/office-ui-fabric-core adresinden erişebilirsiniz.

Kurulum

Fabric UI Css dosyalarını HTML dosyanıza Microsoft Apps Office CDN yardımı ile ekleyiniz

<link rel=”stylesheet” href=”https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css”>

 <link rel=”stylesheet” href=”https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css”>

Simgeler ve Fontlar

Simgeler ve fontları kullanabilmek çok kolay ve basittir. İ tag’ı yardımı ile simgelerinizi aşağıda belirtildiği gibi xxx ler ile font büyüklüklerini ayarlayabilirsiniz.

<i class=”ms-Icon ms-Icon–group” style=”font-size:xx-large” aria-hidden=”true”></i>

Componentler için Kullanım

Bootstrap kullanan geliştirici arkadaşlarımız Fabric UI kullanımında çok zorlanmayacaklardır. SharePoint geliştiricilerine daha yakın olan MS stil classları Fabric UI da da karşımıza çıkmaktadır. Butonlar ve diğer HTML öğeleri için aşağıdaki şekilde öğelere karşılık gelen stil classlarını eklemeniz yeterli olacaktır.

<button class=”ms-Button” id=”get-data-from-selection”> <span class=”ms-Button-icon”><i class=”ms-Icon ms-Icon–plus”></i></span> <span class=”ms-Button-label”>Get Data from selection</span> <span class=”ms-Button-description”>Get Data from the document selection</span> </button>

 

Fabric UI hakkında daha fazla örneğe https://github.com/OfficeDev/Office-Add-in-Fabric-UI-Sample adresinden erişebilirsiniz.

Office geliştirme dünyası Office 365 in de hayatımıza girmesi ile devasa şekilde okyanusunda ötesinde bir derinliğe sahip. Bu derinlik içerisinde boğulmadan ufak ufak derinlemesine gidiyoruz. Daha etkileşimli kullanıcı ekranları ve görsel açıdan zengin eklentileri geliştirebilmek için bugün Fabric UI ve Office UI eklenti tiplerini inceledik.

Faydalı olması dileği ile.

sizlere tuzlabilgisayarci.net farkıyla sunulmuştur. Tuzla BilgisayarGökyüzü Bilgisayar

Hakkında ates_kqual202

Cevapla

Scroll To Top