Menulis Gadget Anda Sendiri

Persiapan memperkenalkan Anda untuk gadget. Langkah berikutnya adalah menciptakan gadget Anda sendiri.Dokumen ini memberitahu Anda bagaimana.

Image result for Menulis Gadget Anda Sendiri

Langkah dasar

Berikut adalah langkah-langkah dasar Anda ikuti untuk membuat dan menyebarkan gadget:

  1. Gunakan editor teks untuk menulis spesifikasi gadget Anda, dan host di web server publik.
  2. Tambahkan gadget Anda ke sebuah situs yang memiliki kemampuan untuk menjalankan gadget.

Anatomi Gadget

Setelah Anda memahami bagaimana untuk mengedit dan mempublikasikan gadget, Anda siap untuk menyertakan fitur lebih maju dalam spesifikasi gadget Anda. Spesifikasi XML gadget terdiri dari 3 bagian utama:

  • Konten Bagian. The <Content>Bagian adalah tempat kerja nyata dari gadget Anda terjadi. Ini adalah di mana Anda menentukan jenis gadget, logika pemrograman Anda, dan sering elemen HTML yang menentukan penampilan gadget Anda.
  • Preferensi pengguna. The <UserPrefs>bagian mendefinisikan kontrol yang memungkinkan pengguna untuk menentukan pengaturan untuk gadget. Sebagai contoh, sebuah gadget ucapan pribadi mungkin menyediakan kolom teks bagi pengguna untuk menentukan nama-nama mereka.
  • Preferensi gadget. The <ModulePrefs>bagian dalam berkas XML menentukan karakteristik gadget, seperti judul, penulis, ukuran yang lebih disukai, dan sebagainya.

Catatan: Dalam XML atribut dalam spesifikasi gadget, Anda perlu untuk “melarikan diri” (yaitu, benar mengkodekan) karakter tertentu sehingga mereka akan diinterpretasikan dengan benar. Untuk informasi lebih lanjut, lihat Escaping Karakter Khusus .

Saat menulis gadget, Anda harus mulai dengan <Content>bagian.

mendefinisikan Konten

The <Content>bagian mewakili “otak” dari gadget. The <Content>Bagian mendefinisikan jenis konten, dan baik memegang konten sendiri atau memiliki link ke konten eksternal. The <Content>bagian mana gadget atribut dan preferensi pengguna digabungkan dengan logika pemrograman dan format informasi untuk menjadi gadget yang berjalan.

Cara termudah untuk membuat gadget Anda adalah dengan hanya menempatkan HTML (dan opsional, JavaScript atau Flash) ke dalam <Content>bagian. Pengembang web berpengalaman dapat membaca Memilih Jenis Konten untuk pilihan lain yang berkaitan dengan kontrol akses, remote hosting, menggunakan bahasa scripting alternatif, dan topik lainnya. Berikut adalah gadget sampel sederhana. Gadget ini menampilkan sebuah foto diklik yang membuka album foto di halaman HTML baru:

<? xml version = "1.0" encoding = "UTF-8"?> 
<Modul> 
  <ModulePrefs title = "Buka Photo Album" height = "250" skala = "false" /> 
  <Content type = "html"> 
  <! [CDATA [ 
    <div style = "text-align: center"> <a 
      id = "Riggs" title = "My Photo Album" target = "_ blank" 
      href = "http://picasaweb.google.com/doc .examples / ShelfBoy "> 
      <img border =" 0 "alt =" Foto "src =" http://doc.examples.googlepages.com/Riggsie-OP.jpg " 
      title =" Klik Disini. "> </ a > 
    </ div> 
  ]]> 
  </ Content> 
</ Module>

Menentukan DOCTYPE

Anda dapat menyertakan sewenang-wenang DOCTYPE di spesifikasi gadget Anda. Gadget yang tidak menentukan DOCTYPE tersebut diberikan di mode quirks secara default.

Mendefinisikan Preferensi Pengguna

Beberapa gadget perlu memberikan pengguna cara memasok informasi pengguna tertentu. Sebagai contoh, sebuah gadget permainan mungkin memungkinkan pengguna untuk memasukkan tingkat disukai kesulitan.Preferensi pengguna ( <UserPref>bagian) dalam file XML menggambarkan field input pengguna yang berubah menjadi kontrol antarmuka pengguna ketika gadget berjalan. Preferensi pengguna disimpan terus-menerus.

Catatan: Untuk mekanisme ketekunan tujuan yang lebih umum yang tidak terikat dengan userprefs, melihat OpenSocial kegigihan API .

Misalnya, gadget ini menampilkan ucapan pribadi berdasarkan waktu hari. Ini memungkinkan pengguna menentukan berikut:

  • Sebuah nama untuk digunakan dalam salam. Nama ini juga ditampilkan dalam judul bar.
  • Sebuah warna latar belakang.
  • Apakah akan menampilkan foto.

Ini adalah apa gadget tampak seperti ketika pengguna mengklik mengedit memodifikasi preferensi pengguna:

Preferensi pengguna yang bisa berubah menjadi kontrol antarmuka pengguna dalam gadget berjalan didefinisikan dalam spesifikasi XML sebagai berikut:

<? xml version = "1.0" encoding = "UTF-8"?> 
<Modul> 
  <ModulePrefs title = "Preferensi untuk __UP_myname__" height = "250" /> 
  <UserPref name = "myname" display_name = "Nama" diperlukan = "true" /> 
  <UserPref name = "MyPhoto" display_name = "Foto" DEFAULT_VALUE = "http://doc.examples.googlepages.com/rowan-headshot.jpg" /> 
  <UserPref name = "mychoice" display_name = " Tampilkan Foto? " datatype = "bool" DEFAULT_VALUE = "true" /> 
  <UserPref name = "MyColor" display_name = "Warna" DEFAULT_VALUE = "Kuning" data = "enum"> 
    <EnumValue value = "Red" /> 
    <EnumValue value = "Aqua "/> 
    <EnumValue value =" Lime "/> 
    <EnumValue value =" Kuning "/> 
    <EnumValue value =" pink "/> 
    <EnumValue value =" Orange "/> 
    <EnumValue value =" White "/> 
  </ UserPref>

Perhatikan hal berikut:

  • Baris 3 dari file berisi teks title="Preferences for __UP_myname__". Ketika Anda menjalankan gadget, nilai yang diberikan untuk preferensi pengguna myname yang dinamis diganti untuk __UP_myname__.
  • The myname preferensi pengguna ditandai sebagai “diperlukan.” Jika pengguna mencoba untuk menjalankan gadget tanpa memasok nilai untuk bidang ini, preferensi pengguna mengedit kotak tetap terbuka sampai nilai yang disediakan.
  • Preferensi pengguna mychoice memiliki booltipe data. Ini ditampilkan dalam antarmuka pengguna sebagai kotak centang.
  • Preferensi pengguna MyColor memiliki enumtipe data. Daftar EnumValuesPath menetapkan pilihan yang muncul dalam menu drop-down di preferensi pengguna mengedit kotak.

Berikut adalah gadget yang lengkap, termasuk JavaScript yang menampilkan ucapan untuk gadget:

<? xml version = "1.0" encoding = "UTF-8"?> 
<Modul> 
  <ModulePrefs title = "Preferensi untuk __UP_myname__" height = "400" /> 
  <UserPref name = "myname" display_name = "Nama" DEFAULT_VALUE = "Rowan" /> 
  <UserPref name = "MyPhoto" display_name = "Foto" DEFAULT_VALUE = "http://doc.examples.googlepages.com/rowan-headshot.jpg" /> 
  <UserPref name = "mychoice" display_name = " Tampilkan Foto? " datatype = "bool" DEFAULT_VALUE = "true" /> 
  <UserPref name = "MyColor" display_name = "Warna" DEFAULT_VALUE = "Kuning" data = "enum"> 
    <EnumValue value = "Red" /> 
     <EnumValue value = "Aqua "/> 
     <EnumValue value =" Lime "/> 
     <EnumValue value =" Kuning "/> 
     <EnumValue value =" pink "/> 
     <EnumValue value =" Orange "/> 
     <EnumValue value =" White "/> 
   </ UserPref> 
   <Jenis konten = "html"> <! [CDATA [ 
   <div id = "content_div"> </ div> 
   <script type = "text / javascript"> 
   // Dapatkan userprefs 
   var prefs = gadgets.Prefs baru () ; 

   fungsi displayGreeting () { 
     // Dapatkan sekarang waktu 
     var hari = new Date (); 
     waktu var = today.getTime (); 
     var html = ""; 

     // Berdasarkan waktu hari, menampilkan ucapan yang sesuai 
     jam var = today.getHours (); 
     var salam = "Afternoon"; 
     if (jam <12) { 
       salam = "Pagi"; 
     } else if (jam> 17) { 
       salam = "Evening"; 
     } 

     // Mengatur warna latar belakang sesuai dengan yang MyColor UserPref 
     var elemen = document.getElementById ( 'content_div'); 
     element.style.height = 250; 
     // Mengatur warna latar belakang sesuai dengan MyColor UserPref 
     element.style.backgroundColor = prefs.getString ( "MyColor"); 

     / / Tampilan salam berdasarkan myname yang UserPref 
     html + = "Situs <FONT SIZE = 6> Baik" + salam + "," + 
           prefs.getString ( "myname") + "!!! <br> </ FONT> "; 

     // Jika" Tampilkan Foto "? checkbox dicentang, foto display. 
     if (prefs.getBool ( "mychoice") == true) { 
       html + = '<img src = "' + prefs.getString (" MyPhoto ") + '">'; 
     } 
     elemen. innerHTML = html; 
   } 
   // Lulus userprefs misalnya modul ini untuk fungsi 
   // (memungkinkan pengguna untuk memasukkan beberapa contoh modul pada halaman mereka) 
   gadgets.util.registerOnLoadHandler (displayGreeting); 

   </ script> 
   ]]> 
  </ Konten > 
</ Module>

Untuk daftar semua <UserPref>atribut, lihat Referensi .

preferensi pengguna diakses dari gadget Anda menggunakan preferensi pengguna JavaScript API, misalnya:

<script type = "text / javascript"> 
  prefs var = gadgets.Prefs baru (); 
  var someStringPref = prefs.getString ( "StringPrefName"); 
  var someIntPref = prefs.getInt ( "IntPrefName"); 
  var someBoolPref = prefs.getBool ( "BoolPrefName"); 
</ script>

Untuk daftar semua fungsi JavaScript, lihat Referensi JavaScript .

Catatan: Jika Anda menyimpan data pengguna pribadi sensitif dalam preferensi pengguna gadget ini, kami sarankan Anda menggunakan terkunci-domain fitur.

Pengguna Variabel Preferensi Pergantian

Anda dapat menggunakan variabel substitusi dari format dalam atau bagian, di mana sesuai dengan nama atribut preferensi pengguna. Ketika gadget berjalan, nilai string dari preferensi pengguna yang bersangkutan akan diganti untuk variabel, unescaped. Misalnya, dalam kutipan ini, nilai persediaan pengguna pada saat dijalankan untukproyek preferensi pengguna digantikan __UP_projects__ di title_url tali:__UP_userpref__ <ModulePrefs><UserPref>userpref

<Modul> 
  <ModulePrefs title = "Membangun Monitor" 
             title_url = "http://www.example.com/build/status.php?__UP_projects__" /> 
  <UserPref name = "proyek" display_name = "proyek (s)" / > 
  <Content ... /> 
</ Module>

Anda dapat melihat contoh lain dari ini di sampel preferensi pengguna .

Berikut adalah panduan umum untuk menggunakan variabel substitusi preferensi pengguna:

  • Untuk <ModulePrefs> title atribut, menggunakan __UP_ nama __ . Ini adalah HTML-melarikan diri .
  • Untuk <ModulePrefs> title_url atribut, menggunakan __UP_ nama __ . Ini adalah URL-melarikan diri .
  • Dalam HTML dalam <Content>bagian, menggunakan __UP_ nama __. Ini adalah HTML-melarikan diri.
  • Dalam kode JavaScript dalam <Content>bagian, gunakan gadgets.Prefs()fungsi.

Mendefinisikan Preferensi Gadget

The <ModulePrefs>bagian dalam berkas XML menentukan karakteristik gadget, seperti judul, penulis, ukuran yang lebih disukai, dan sebagainya. Sebagai contoh:

<Modul> 
  <ModulePrefs title = "Hari ini Lalu Lintas Jaringan" 
     title_url = "http: // www / ~ rowan / gadget / stats /" 
     height = "200" 
     author = "Jane Smith" 
     author_email = "xxx@google.com" / > 
  <konten ...> 
   ... konten ... 
  </ Content> 
</ Module>

Pengguna gadget Anda tidak dapat mengubah atribut ini. KAMERA PONSEL ANDROID TERBAIK 2016: 6 ATAS SUPER-SNAPPERS

Leave a Reply

Your email address will not be published. Required fields are marked *