Buat Widget Anda Sendiri: 6 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:58

Instruksi ini akan mengajarkan Anda cara membuat Yahoo! Widget. Pada akhir tutorial ini, Anda akan mempelajari beberapa JavaScript dan XML.

Langkah 1: Memulai

Beberapa alat yang Anda perlukan untuk membuat widget adalah:- Komputer dengan Mac OS X atau Windows Xp/Vista- Program pengeditan teks. (Notepad sempurna.) - Program pengeditan gambar. (Microsoft Paint baik-baik saja.) - Kesabaran dan waktu.- Yahoo Widgets- Widget Konverter Widget Setelah Anda memiliki program dan widget ini, Anda siap untuk melanjutkan ke langkah kedua.

Langkah 2: Membuat Struktur Folder

Sekarang Anda perlu membuat struktur folder untuk menampung semua file yang membentuk widget. Strukturnya terlihat seperti ini: -Widget Name | Isi | Widget.kon Sumber Daya Main.js | Semua gambar yang akan digunakan widget Anda dapat mengunduh widget ini untuk membuat struktur folder secara otomatis - Reinier Kaper Atur preferensi widget dengan mengklik kanan pada bagian mana pun, dan klik preferensi. Ubah preferensi Struktur menjadi berikut: root: Arahkan ke folder widget Anda. (Terletak di 'My Documents' di Windows) Sekarang Anda dapat mengklik widget dan kotak dialog akan muncul, menanyakan nama widget.

Langkah 3: Membuat Semua File yang Diperlukan

Kita akan mulai dengan membuat file widget.xml, yang memberi tahu informasi mesin widget tentang widget Anda. Unduh template yang telah dibuat untuk Anda gunakan. Unduh tautan di bawah ini. Tempatkan file di folder 'Contents' yang terletak di folder berjudul nama yang Anda pilih sebelumnya. Buka file dengan editor teks pilihan Anda dan ganti YourNameHere dengan nama Anda. Simpan dan tutup. Selanjutnya kita akan membuat file.kon yang merupakan file utama yang memberitahu widget apa yang harus dilakukan. File.kon hanyalah file XML dengan ekstensi yang diubah namanya. Unduh file widget.kon dasar ini dan letakkan juga di folder 'Contents'. Sekali lagi, buka file dengan editor teks. Baris pertama menandakan bahwa file tersebut adalah file XML yang dibuat dengan pengkodean UTF-8. Tag berikutnya untuk ditambahkan adalah tag widget; Kemudian Anda mendeklarasikan pengaturan Anda, seperti debug;. Sekarang Anda siap untuk menambahkan elemen jendela Anda;. Widget memiliki banyak objek yang melakukan hal-hal tertentu dan memiliki properti tertentu. Misalnya objek teks,, membuat teks. Berikut adalah daftar beberapa properti dari objek teks: -nama (self-explanitory) -window (depresiasi) -data (text to display) -color (self-explanitory) -size -font -hOffset (alias x) -vOffset (alias y) -width -height Dengan itu, mari kita mulai coding. Tambahkan kode berikut ke file kon, di tag:myTextHello World!blueArial18left252Dalam bahasa Inggris, ini mengatur objek teks bernama myText, yang menampilkan "Hello World!" dalam font Arial, warna biru, dan ukuran 12. Simpan file kon Anda, dan lanjutkan ke langkah empat.

Langkah 4: Bersukacitalah

Klik dua kali pada file kon dan widget Anda akan dimuat. Selamat! Anda telah membuat widget pertama Anda. Tapi kita belum selesai coding. Anda mungkin berpikir, "Itu saja?", kan? Lanjutkan ke langkah 5 untuk menambahkan beberapa fungsi ke widget Anda.

Langkah 5: Menambahkan Fungsi

Sekarang kita akan membuat widget menampilkan waktu saat ini. Ini akan membutuhkan pengatur waktu yang diperbarui setiap menit, dan file lain. File berikutnya adalah file JavaScript, yang akan masuk ke folder 'Contents'. Buka editor teks Anda dan buat file bernama main.js. Untuk menambahkan waktu, kita akan menggunakan "objek Tanggal". Untuk mengatur objek tanggal, Anda membuat fungsi. Tambahkan fungsi ini ke file js:function updateText()'{ theTime = new Date(); theHour = String(Waktu.getHours()); theMinutes = String(theTime.getMinutes()); myText.data = "Waktunya adalah: "+Jam+":"+Menit; print('update');}Widget Anda belum menunjukkan waktu, karena tidak tahu apa yang harus dilakukan dengan file js. Untuk mengatasinya, kami menambahkan event handler ini ke file Kon, di tag tetapi tidak di tag: include('main.js');Untuk membuat pembaruan waktu, kita perlu membuat timer, yang masuk file Kon, di tag tetapi tidak di tag:Simpan file dan muat widget. Itu harus menunjukkan waktu. Jika tidak berhasil, unduh kon dan js dari bawah dan ganti dengan yang lama.

Langkah 6: Menjumlahkan Semuanya

Gunakan widget konverter widget untuk mengonversi widget menjadi file.widget. CATATAN: Seret folder yang berjudul nama widget Anda ke konverter, bukan file kon. Jika Anda ingin melangkah lebih jauh dengan widget Anda, ambil beberapa sumber di sini. Berikut adalah daftar hal-hal yang dapat Anda coba capai dengan widget Anda: -Tambahkan preferensi untuk mengontrol font menggunakan tag, dan sub-tag font- Tambahkan beberapa event handler seperti onClick menggunakan atau tag.-Menampilkan gambar dari file lokal menggunakan objek gambar Semoga tutorial ini bermanfaat bagi Anda dan Anda akan menikmati berbagai kemungkinan widget, Hunter