สร้างวิดเจ็ตของคุณเอง: 6 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:08

คำแนะนำนี้จะสอนวิธีสร้างพื้นฐานของ Yahoo! วิดเจ็ต ในตอนท้ายของบทช่วยสอนนี้ คุณจะได้เรียนรู้ JavaScript และ XML บางส่วน

ขั้นตอนที่ 1: เริ่มต้น

เครื่องมือบางอย่างที่คุณต้องใช้ในการสร้างวิดเจ็ต ได้แก่:- คอมพิวเตอร์ที่ใช้ Mac OS X หรือ Windows Xp/Vista- โปรแกรมแก้ไขข้อความ (Notepad สมบูรณ์แบบ) - โปรแกรมแก้ไขรูปภาพ (Microsoft Paint ใช้ได้)- ความอดทนและเวลา- Yahoo Widgets- Widget Converter Widget เมื่อคุณมีโปรแกรมและวิดเจ็ตเหล่านี้ คุณก็พร้อมที่จะไปยังขั้นตอนที่สอง

ขั้นตอนที่ 2: การสร้างโครงสร้างโฟลเดอร์

ตอนนี้ คุณจะต้องสร้างโครงสร้างโฟลเดอร์เพื่อเก็บไฟล์ทั้งหมดที่ประกอบเป็นวิดเจ็ต โครงสร้างมีลักษณะดังนี้: -Widget Name | สารบัญ | Widget.kon Main.js Resources | รูปภาพทั้งหมดที่วิดเจ็ตจะใช้ คุณสามารถดาวน์โหลดวิดเจ็ตนี้เพื่อสร้างโครงสร้างโฟลเดอร์โดยอัตโนมัติ โครงสร้าง - Reinier Kaperตั้งค่ากำหนดของวิดเจ็ตโดยคลิกขวาที่ส่วนใดส่วนหนึ่งของมัน แล้วคลิกการตั้งค่า เปลี่ยนการกำหนดค่าตามความชอบของโครงสร้างเป็นดังต่อไปนี้: root: นำทางไปยังโฟลเดอร์วิดเจ็ตของคุณ (อยู่ใน 'เอกสารของฉัน' บน Windows) ตอนนี้คุณสามารถคลิกที่วิดเจ็ตและกล่องโต้ตอบจะปรากฏขึ้นเพื่อขอชื่อวิดเจ็ตจากคุณ

ขั้นตอนที่ 3: การสร้างไฟล์ที่จำเป็นทั้งหมด

เราจะเริ่มต้นด้วยการสร้างไฟล์ widget.xml ซึ่งจะแจ้งข้อมูลเอ็นจินวิดเจ็ตเกี่ยวกับวิดเจ็ตของคุณ ดาวน์โหลดเทมเพลตที่สร้างขึ้นเพื่อให้คุณใช้ ดาวน์โหลดลิงค์ด้านล่าง วางไฟล์ในโฟลเดอร์ 'เนื้อหา' ที่อยู่ในโฟลเดอร์ชื่อที่คุณเลือกไว้ก่อนหน้านี้ เปิดไฟล์ด้วยโปรแกรมแก้ไขข้อความที่คุณเลือก และแทนที่ YourNameHere ด้วยชื่อของคุณ บันทึกและปิด ต่อไปเราจะสร้างไฟล์.kon ซึ่งเป็นไฟล์หลักที่บอกวิดเจ็ตว่าต้องทำอย่างไร ไฟล์.kon เป็นเพียงไฟล์ XML ที่มีการเปลี่ยนชื่อนามสกุล ดาวน์โหลดไฟล์ widget.kon พื้นฐานนี้ และวางไว้ในโฟลเดอร์ 'เนื้อหา' อีกครั้ง เปิดไฟล์ด้วยโปรแกรมแก้ไขข้อความ บรรทัดแรกหมายความว่าไฟล์นั้นเป็นไฟล์ XML ที่สร้างด้วยการเข้ารหัส UTF-8 แท็กถัดไปที่จะเพิ่มคือแท็กวิดเจ็ต จากนั้นคุณประกาศการตั้งค่าของคุณ เช่น การดีบัก. ตอนนี้คุณพร้อมที่จะเพิ่มองค์ประกอบหน้าต่างแล้ว. วิดเจ็ตมีหลายอ็อบเจ็กต์ที่ทำบางสิ่งและมีคุณสมบัติบางอย่าง ตัวอย่างเช่นวัตถุข้อความ, สร้างข้อความ นี่คือรายการคุณสมบัติบางอย่างของวัตถุข้อความ: -name (อธิบายตนเอง) -window (คิดค่าเสื่อมราคา) -data (ข้อความที่จะแสดง) -color (อธิบายตนเอง) -size -font -hOffset (aka x) -vOffset (aka y) -width -height จากที่กล่าวมาเรามาเริ่มเขียนโค้ดกัน เพิ่มรหัสต่อไปนี้ในไฟล์ kon ในแท็ก:myTextHello World!blueArial18left252ในภาษาอังกฤษ การตั้งค่าวัตถุข้อความชื่อ myText ซึ่งแสดง "Hello World!" ในแบบอักษร Arial สีฟ้า และขนาด 12 บันทึกไฟล์ kon ของคุณ แล้วทำตามขั้นตอนที่สี่ต่อไป

ขั้นตอนที่ 4: ดีใจ

ดับเบิลคลิกที่ไฟล์ kon และวิดเจ็ตของคุณจะโหลด ยินดีด้วย! คุณได้สร้างวิดเจ็ตแรกของคุณแล้ว แต่เรายังเขียนโค้ดไม่เสร็จ คุณคงคิดว่า "แค่นั้นเหรอ" ใช่ไหม? ดำเนินการต่อในขั้นตอนที่ 5 เพื่อเพิ่มฟังก์ชันบางอย่างในวิดเจ็ตของคุณ

ขั้นตอนที่ 5: การเพิ่มฟังก์ชัน

ตอนนี้เรากำลังจะทำให้วิดเจ็ตแสดงเวลาปัจจุบัน ซึ่งจะต้องใช้ตัวจับเวลาที่อัปเดตทุกนาทีและไฟล์อื่น ไฟล์ถัดไปจะเป็นไฟล์ JavaScript ซึ่งจะไปอยู่ในโฟลเดอร์ 'Contents' เปิดตัวแก้ไขข้อความของคุณและสร้างไฟล์ชื่อ main.js ในการเพิ่มเวลา เราจะใช้ "วัตถุวันที่" ในการตั้งค่าวัตถุวันที่ คุณต้องสร้างฟังก์ชัน เพิ่มฟังก์ชันนี้ในไฟล์ js:function updateText()'{ theTime = new Date(); theHour = สตริง (theTime.getHours ()); theMinutes = สตริง (theTime.getMinutes()); myText.data = "เวลาคือ: "+ ชั่วโมง+":"+นาที; print('update');}วิดเจ็ตของคุณยังไม่แสดงเวลา เพราะไม่รู้ว่าจะทำอย่างไรกับไฟล์ js เพื่อดูแลเรื่องนี้ เราได้เพิ่มตัวจัดการเหตุการณ์นี้ลงในไฟล์ Kon ในแท็ก แต่ไม่อยู่ในแท็ก: include('main.js');ในการอัพเดทเวลา เราจำเป็นต้องสร้างตัวจับเวลา ไฟล์ Kon ในแท็ก แต่ไม่อยู่ในแท็ก:บันทึกไฟล์และโหลดวิดเจ็ต ควรแสดงเวลา หากไม่ได้ผล ให้ดาวน์โหลดทั้ง kon และ js จากด้านล่างและแทนที่ด้วยอันเก่า

ขั้นตอนที่ 6: สรุปทั้งหมด

ใช้วิดเจ็ตตัวแปลงวิดเจ็ตเพื่อแปลงวิดเจ็ตเป็นไฟล์.widget หมายเหตุ: ลากโฟลเดอร์ที่ชื่อวิดเจ็ตของคุณไปที่ตัวแปลง ไม่ใช่ไฟล์ kon หากคุณต้องการใช้วิดเจ็ตให้ก้าวหน้ายิ่งขึ้นไปอีก ให้คว้าแหล่งข้อมูลที่นี่ นี่คือรายการของสิ่งที่คุณพยายามทำให้สำเร็จด้วยวิดเจ็ตของคุณ: -เพิ่มการตั้งค่าเพื่อควบคุมฟอนต์โดยใช้แท็ก และแท็กย่อยฟอนต์- เพิ่มตัวจัดการเหตุการณ์เช่น onClick โดยใช้หรือแท็ก-แสดงรูปภาพจากไฟล์ในเครื่องโดยใช้วัตถุรูปภาพ หวังว่าคุณจะพบว่าบทช่วยสอนนี้มีประโยชน์และคุณจะเพลิดเพลินไปกับความเป็นไปได้ไม่รู้จบของวิดเจ็ต Hunter