Buat Widget Sendiri: 6 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:12

Instructable ini akan mengajar anda bagaimana membuat Yahoo! asas Widget. Pada akhir tutorial ini, anda akan mempelajari beberapa JavaScript dan XML.

Langkah 1: Bermula

Beberapa alat yang anda perlukan untuk membuat widget adalah: - Komputer dengan Mac OS X atau Windows Xp / Vista- Program penyuntingan teks. (Notepad sempurna.) - Program penyuntingan gambar. (Microsoft Paint baik-baik saja.) - Sabar dan masa.- Yahoo Widget- Widget Converter WidgetSetelah anda mempunyai program dan widget ini, anda sudah bersedia untuk beralih ke langkah kedua.

Langkah 2: Membuat Struktur Folder

Sekarang anda perlu membuat struktur folder untuk menempatkan semua fail yang membentuk widget. Strukturnya kelihatan seperti ini: -Widget Name | Kandungan | Widget.kon Main.js Sumber | Semua gambar yang akan digunakan widgetAnda boleh memuat turun widget ini untuk membuat struktur folder secara automatikStruktur - Reinier KaperMenetapkan pilihan widget dengan mengklik kanan pada mana-mana bahagiannya, dan klik pada pilihan. Ubah keutamaan Struktur ke yang berikut: root: Navigasi ke folder widget anda. (Terletak di 'Dokumen Saya' di Windows) Sekarang Anda dapat mengklik widget dan kotak dialog akan muncul, meminta Anda untuk nama widget.

Langkah 3: Membuat Semua Fail yang Diperlukan

Kami akan mulai dengan membuat file widget.xml, yang memberitahu informasi mesin widget mengenai widget anda. Muat turun templat yang telah dibuat untuk anda gunakan. Muat turun pautan di bawah. Letakkan fail di folder 'Isi' yang terletak di folder bertajuk nama yang anda pilih tadi. Buka fail dengan editor teks pilihan anda dan ganti YourName Here dengan nama anda. Simpan dan tutup. Selanjutnya kita akan membuat fail.kon yang merupakan fail utama yang memberitahu widget apa yang harus dilakukan. Fail.kon hanyalah fail XML dengan peluasan semula nama. Muat turun fail widget.kon asas ini dan letakkan juga di folder 'Isi'. Sekali lagi, buka fail dengan penyunting teks. Baris pertama menandakan bahawa fail tersebut adalah fail XML yang dibuat dengan pengekodan UTF-8. Tag seterusnya yang akan ditambahkan ialah tag widget; Kemudian anda menyatakan tetapan anda, seperti debug;. Sekarang anda sudah bersedia untuk menambah elemen tetingkap anda;. Widget mempunyai pelbagai objek yang melakukan perkara tertentu dan mempunyai sifat tertentu. Contohnya objek teks,, membuat teks. Berikut adalah senarai beberapa sifat objek teks: -nama (jelaskan diri) -window (susut nilai) -data (teks untuk dipaparkan) -warna (jelaskan diri) -saiz -font -hOffset (aka x) -vOffset (aka y)-lebar-tinggi Dengan itu, mari kita mulakan pengekodan. Tambahkan kod berikut ke fail kon, dalam tag: myTextHello World! BlueArial18left252Dalam bahasa Inggeris, ini menyediakan objek teks bernama myText, yang memaparkan "Hello World!" dalam fon Arial, warna biru, dan saiz 12. Simpan fail kon anda, dan teruskan ke langkah keempat.

Langkah 4: Bergembiralah

Klik dua kali pada fail kon dan widget anda akan dimuat. Tahniah! Anda telah membuat widget pertama anda. Tetapi kami belum selesai membuat pengekodan. Anda mungkin berfikir, "Itu saja?", Bukan? Teruskan ke langkah 5 untuk menambahkan beberapa fungsi ke widget anda.

Langkah 5: Menambah Fungsi

Sekarang kita akan membuat widget memaparkan waktu semasa. Ini memerlukan pemasa yang dikemas kini setiap minit, dan fail lain. Fail seterusnya adalah fail JavaScript, yang akan masuk dalam folder 'Isi'. Buka editor teks anda dan buat fail yang dipanggil main.js. Untuk menambah masa, kami akan menggunakan "objek Tarikh". Untuk menetapkan objek tarikh, anda membuat fungsi. Tambahkan fungsi ini ke fail js: function updateText () '{theTime = new Date (); theHour = Rentetan (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Masanya adalah:" + theHour + ":" + theMinutes; print ('update');} Widget anda belum menunjukkan waktu, kerana tidak tahu apa yang harus dilakukan dengan fail js. Untuk mengurus ini, kami menambahkan pengendali acara ini ke file Kon, di tag tetapi tidak di tag: include ('main.js'); Untuk membuat kemas kini waktu, kita perlu membuat pemasa, yang masuk fail Kon, dalam tag tetapi tidak dalam tag: Simpan fail dan muatkan widget. Ia harus menunjukkan masa. Sekiranya tidak berfungsi, muat turun kedua-dua kon dan js dari bawah dan gantikan dengan yang lama.

Langkah 6: Menjumlahkan Semuanya

Gunakan widget penukar widget untuk mengubah widget menjadi file.widget. CATATAN: Seret folder yang bertajuk nama widget anda ke penukar, bukan fail kon. Sekiranya anda ingin melangkah lebih jauh dengan widget anda, ambil beberapa sumber di sini. Berikut adalah senarai perkara yang boleh anda capai dengan widget anda: -Tambah pilihan untuk mengawal fon menggunakan tag, dan sub-tag fon- Tambahkan beberapa pengendali acara seperti onClick menggunakan atau tag-Paparkan gambar dari fail tempatan menggunakan objek gambar. Semoga tutorial ini berguna dan anda akan menikmati kemungkinan widget yang tidak berkesudahan, Hunter