Δημιουργήστε το δικό σας widget: 6 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:38

Αυτό το Instructable θα σας διδάξει πώς να δημιουργήσετε ένα βασικό Yahoo! Widget. Μέχρι το τέλος αυτού του σεμιναρίου, θα έχετε μάθει κάποια JavaScript και XML.

Βήμα 1: Ξεκινώντας

Μερικά εργαλεία που θα χρειαστείτε για να δημιουργήσετε ένα widget είναι:- Υπολογιστής με Mac OS X ή Windows Xp/Vista- Ένα πρόγραμμα επεξεργασίας κειμένου. (Το Σημειωματάριο είναι τέλειο.)- Ένα πρόγραμμα επεξεργασίας εικόνας. (Το Microsoft Paint είναι εντάξει.)- Υπομονή και χρόνος.- Yahoo Widgets- Widget Converter Widget Μόλις έχετε αυτά τα προγράμματα και τα γραφικά στοιχεία, είστε έτοιμοι να προχωρήσετε στο δεύτερο βήμα.

Βήμα 2: Δημιουργία δομής φακέλου

Τώρα θα χρειαστεί να δημιουργήσετε τη δομή του φακέλου για να φιλοξενήσετε όλα τα αρχεία που αποτελούν ένα widget. Η δομή μοιάζει με αυτήν: -Ονομασία widget | Περιεχόμενα | Widget.kon Πόροι Main.js | Όλες οι εικόνες που θα χρησιμοποιήσει το widget Μπορείτε να κατεβάσετε αυτό το widget για να δημιουργήσετε αυτόματα τη δομή του φακέλουStructure - Reinier Kaper Ρυθμίστε τις προτιμήσεις ενός widget κάνοντας δεξί κλικ σε οποιοδήποτε μέρος του και κάντε κλικ στις προτιμήσεις. Αλλάξτε τις προτιμήσεις της Δομής στα ακόλουθα: root: Μεταβείτε στο φάκελο widget. (Βρίσκεται στα «Τα έγγραφά μου» στα Windows) Τώρα μπορείτε να κάνετε κλικ στο γραφικό στοιχείο και θα εμφανιστεί ένα παράθυρο διαλόγου, το οποίο θα σας ζητήσει το όνομα του γραφικού στοιχείου.

Βήμα 3: Δημιουργία όλων των απαραίτητων αρχείων

Θα ξεκινήσουμε με τη δημιουργία του αρχείου widget.xml, το οποίο λέει πληροφορίες για τη μηχανή του widget για το widget σας. Κατεβάστε ένα πρότυπο που έχετε δημιουργήσει για να το χρησιμοποιήσετε. Λήψη συνδέσμου παρακάτω. Τοποθετήστε το αρχείο στο φάκελο "Περιεχόμενα" που βρίσκεται στο φάκελο με το όνομα που επιλέξατε νωρίτερα. Ανοίξτε το αρχείο με τον επεξεργαστή κειμένου της επιλογής σας και αντικαταστήστε το YourNameHere με το όνομά σας. Αποθήκευση και κλείσιμο. Στη συνέχεια θα δημιουργήσουμε το αρχείο.kon που είναι το κύριο αρχείο που λέει στο widget τι να κάνει. Το αρχείο.kon είναι απλώς ένα αρχείο XML με μετονομαστική επέκταση. Κατεβάστε αυτό το βασικό αρχείο widget.kon και τοποθετήστε το επίσης στο φάκελο "Περιεχόμενα". Και πάλι, ανοίξτε το αρχείο με έναν επεξεργαστή κειμένου. Η πρώτη γραμμή σημαίνει ότι το αρχείο είναι ένα αρχείο XML που δημιουργήθηκε με την κωδικοποίηση UTF-8. Η επόμενη ετικέτα που πρέπει να προσθέσετε είναι η ετικέτα widget. Στη συνέχεια, δηλώνετε τις ρυθμίσεις σας, όπως τον εντοπισμό σφαλμάτων. Το Τώρα είστε έτοιμοι να προσθέσετε τα στοιχεία του παραθύρου σας. Το Τα γραφικά στοιχεία έχουν πολλά αντικείμενα που κάνουν συγκεκριμένα πράγματα και έχουν ορισμένες ιδιότητες. Για παράδειγμα, το αντικείμενο κειμένου,, δημιουργεί κείμενο. Ακολουθεί μια λίστα με ορισμένες από τις ιδιότητες του αντικειμένου κειμένου: -όνομα (αυτονόητο) -παράθυρο (αποσβεσμένο) -δεδομένα (κείμενο προς εμφάνιση) -χρώμα (αυτονόητο) -μεγέθη -γραμματοσειρά -hOffset (aka x) -vOffset (aka y) -πλάτος -ύψος Με αυτό που είπε, ας ξεκινήσουμε την κωδικοποίηση. Προσθέστε τον ακόλουθο κώδικα στο αρχείο kon, στις ετικέτες: myTextHello World! BlueArial18left252Σε αγγλικά, αυτό δημιουργεί ένα αντικείμενο κειμένου που ονομάζεται myText, το οποίο εμφανίζει "Hello World!" σε γραμματοσειρά Arial, μπλε χρώμα και μέγεθος 12. Αποθηκεύστε το αρχείο kon και συνεχίστε στο βήμα τέσσερα.

Βήμα 4: Χαρείτε

Κάντε διπλό κλικ στο αρχείο kon και το widget σας θα φορτωθεί. Συγχαρητήρια! Δημιουργήσατε το πρώτο σας widget. Αλλά δεν έχουμε τελειώσει ακόμα την κωδικοποίηση. Μάλλον σκέφτεσαι: "Αυτό είναι όλο;", σωστά; Συνεχίστε στο βήμα 5 για να προσθέσετε κάποια λειτουργία στο γραφικό σας στοιχείο.

Βήμα 5: Προσθήκη συνάρτησης

Τώρα θα κάνουμε το widget να εμφανίζει την τρέχουσα ώρα. Αυτό θα απαιτήσει ένα χρονόμετρο που ενημερώνεται κάθε λεπτό και ένα άλλο αρχείο. Το επόμενο αρχείο θα είναι ένα αρχείο JavaScript, το οποίο θα μπει στο φάκελο "Περιεχόμενα". Ανοίξτε τον επεξεργαστή κειμένου και δημιουργήστε ένα αρχείο που ονομάζεται main.js. Για να προσθέσουμε την ώρα, θα χρησιμοποιήσουμε το "αντικείμενο ημερομηνίας". Για να ρυθμίσετε το αντικείμενο ημερομηνίας, δημιουργείτε μια συνάρτηση. Προσθέστε αυτήν τη συνάρτηση στο αρχείο js: function updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Η ώρα είναι:"+theHour+":"+thePinutes; print ('update');} Το widget σας δεν θα εμφανίζει ακόμα την ώρα, επειδή δεν ξέρει τι να κάνει με το αρχείο js. Για να το φροντίσουμε, προσθέτουμε αυτόν τον χειριστή συμβάντων στο αρχείο Kon, στις ετικέτες αλλά όχι στις ετικέτες: include ('main.js'). Για να κάνουμε την ενημέρωση ώρας, πρέπει να δημιουργήσουμε ένα χρονόμετρο, το οποίο μπαίνει το αρχείο Kon, στις ετικέτες αλλά όχι στις ετικέτες: Αποθηκεύστε τα αρχεία και φορτώστε το γραφικό στοιχείο. Θα πρέπει να δείχνει την ώρα. Εάν δεν λειτουργεί, κατεβάστε και το kon και το js από κάτω και αντικαταστήστε τα με τα παλιά.

Βήμα 6: Συνοψίζοντας τα πάντα

Χρησιμοποιήστε το γραφικό στοιχείο μετατροπέα widget για να μετατρέψετε το widget σε αρχείο.widget. ΣΗΜΕΙΩΣΗ: Σύρετε το φάκελο με τον τίτλο το όνομα του widget σας στον μετατροπέα και όχι στο αρχείο kon. Αν θέλετε να προχωρήσετε ακόμη περισσότερο με το widget σας, πάρτε μερικούς πόρους εδώ. Ακολουθεί μια λίστα με τα πράγματα που μπορείτε να προσπαθήσετε να επιτύχετε με το widget σας: -Προσθέστε προτιμήσεις για τον έλεγχο της γραμματοσειράς χρησιμοποιώντας την ετικέτα και την υπο-ετικέτα γραμματοσειράς- Προσθέστε κάποιους χειριστές συμβάντων όπως onClick χρησιμοποιώντας το ή ετικέτες. -Εμφανίστε μια εικόνα από ένα τοπικό αρχείο χρησιμοποιώντας το αντικείμενο εικόνας Ελπίζω να βρήκατε χρήσιμο αυτό το σεμινάριο και θα απολαύσετε τις ατελείωτες δυνατότητες των widgets, Hunter