3DDashboard ile Widget Dünyasına Giriş

Bir sonraki yazımın widget programlama ile ilgili olacağından bahsetmiştim. Bugün beraber javascript ile beraber uwa.js kütüphanesini kullanarak bir helloworld yazdıracağız 🙂

Netvibes firmasını 2012 yılında Dassault System firmasının satın almasıyla widget yapısını Enovia’ya entegre etmeye başlıyor ve bu widgetlar sayesinde tek bir ekran üzerinde birden fazla değişik konuları içeren pencereler yerleştirmek mümkün hale getirildi. Kullanıcılara tek bir ekran üzerinden firma ile alakalı tüm bilgi aktarımı sağlanabiliyor. 3Ddashboard hikayesi enovia tarihinde çok eski değil aslında ama şuan çok kullanılmamasına rağmen gelecek zamanlarda fazlasıyla çok önem kazanacak gibi duruyor. Çünkü tüm yönetimsel araçların hepsi 3DDasboard üzerine yavaş yavaş taşınıyor ve üstelik javascript üzerinde çalıştığından klasik enoviadaki gibi arka planda java applet’lere ihtiyaç kalmıyor bu sayede tüm browser’larda sıkıntısız çalışıyor. Biliyorsunuz ki güncel browserların hepsi java applet desteğini çoktan kapattılar bu sebeble klasik Enovia’yı maalesef explorer 11 veya firefox 52 esr ile kullanmak zorunda kalıyorduk, gelecek sürümlerde büyük ihtimalle artık bu sorunlarımız büyük ihtimalle kalmayacak. Bir önceki yazımda MQL arayüzünün admin kısmından kaldırılacağından bahsetmiştim. Customization widget tarafına kaydırılmasından dolayı 3DDasboard tarafının yükselişi kaçınılmaz gözüküyor…

Yavaş yavaş giriş yapalım. Yapacağımız örnekte node.js’in bilgisayarınızda yüklü olması gerekiyor. Buradan yüklemeyi yapabilirsiniz. LTS versiyonunu kurabilirsiniz. Kurulumu tamamladıktan sonra live-server npm paketini yüklememiz gerekiyor bunun için windows command line ekranına;


>npm install -g live-server

demeniz gerekiyor. Bu sayede küçük development serverımızıda yüklemiş bulunuyoruz.


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:widget="http://www.netvibes.com/ns/">
    <head>

        <!-- Application Metas -->
        <title>Title of the App</title>
        <meta name="author" content="John Doe" />
        <meta name="description" content="A descriptive description" />

        <!-- Application Standalone emulation files -->
        <link rel="stylesheet" type="text/css"
            href="//uwa.netvibes.com/lib/c/UWA/assets/css/standalone.css" />
        <script type="text/javascript"
            src="//uwa.netvibes.com/lib/c/UWA/js/UWA_Standalone_Alone.js"></script>

        <!-- Application JavaScript Source -->
        <script type="text/javascript">
        //<![CDATA[

            /*
                We create the global MyWidget object (it could be any other name).
                This object will be used to store variables and functions.
            */
            var MyWidget = {

                /*
                    The onLoad() function is the first one,
                    it will be triggered by widget "onLoad" event.
                */
                onLoad: function() {

                    // Here we update the content of the widget body.
                    widget.setBody('Hello World!');
                }
            };

            /*
                The "onLoad" event is the very first event triggered when
                the widget is fully loaded or when the preferences are validated.

                Here, we add MyWidget.onLoad() function as "onLoad" event
                listener on the widget.
            */
            widget.addEvent('onLoad', MyWidget.onLoad);

        //]]>
        </script>
      </head>
      <body>
            <p>Loading...</p>
      </body>
</html>

Yukarıdaki kodu index.html dosyasının içene bir code editörü ile kopyalayabilirsiniz. Ben Visual code kullanıyorum ancak sadece deneme yapacaksanız notepad de olur 🙂

istediğiniz bir klasörün içine index.html dosyasını yerleştirin ve aşağıdaki komutu vererek küçük development server ımızı başlatın.


> cd d:\js\denemeWidget
> live-server --port=8079

İlk görüntü

liver-server ın default olarak yayın portu 8080 dir. Genelde de 8080 kullanıldığından ben 8079 olarak ayarlıyorum. Bu arada bu portu kullanmak zorunda değilsiniz bilgisaayarınızdaki dolu portları görmek için windows command line ekranına;


> netstat -a

komutuyla bakabilirsiniz.

Şimdi gelelim oluşturduğumuz bu widgeti admin modda açtığımız 3DDashboard’a eklemeye;

Admin modda widget’ınızı eklediğinizde tüm kullanıcılarda eklediğiniz ekran aktif hale gelmiş bulunuyor.

http://www.gokhansaman.com/wp-content/plugins/sociofluid/images/google_48.png http://www.gokhansaman.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.gokhansaman.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.gokhansaman.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.gokhansaman.com/wp-content/plugins/sociofluid/images/twitter_48.png

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.