Cara menggunakan sisipan javascript br

Table of Contents Show

File HTML (disertakan sebagai media/asset. javascriptWebViewProcessor. html)
Ikhtisar Blok

Tutorial ini ditulis oleh Rich Interdonato, MIT Master Trainer. App Inventor memungkinkan pengguna untuk menulis program yang kuat menggunakan blok, bukan bahasa pemrograman tradisional. Itu juga memungkinkan pengguna tingkat lanjut untuk memasukkan kode Java tradisional di aplikasi mereka melalui fitur Ekstensi barunya. Yang mungkin tidak Anda ketahui adalah bahwa ada cara lain yang bahkan lebih tua bagi Anda untuk memasukkan pemrograman tradisional ke dalam aplikasi Anda. Teknik ini melibatkan penggunaan komponen WebViewer sebagai pemroses javascript, dan postingan blog ini akan menunjukkan kepada Anda bagaimana hal itu dapat dilakukan dengan menggunakan contoh sederhana. Di dalamnya, sebuah file HTML dikirim teks input dari program App Inventor, membalikkan teks menggunakan javascript, dan kemudian mengirimkan hasilnya kembali ke program App Inventor sebagai output yang dapat digunakan aplikasi (tunjukkan kepada pengguna dalam Pesan dialog). Contoh kami memerlukan file HTML yang menyertakan javascript yang dapat membalikkan teks. File disertakan di bawah, dan perintah javascript yang membalikkan teks disorot dengan warna kuning. Javascript dalam file ini seperti javascript lain yang mungkin Anda temukan di Web, kecuali dalam satu cara. Ini mencakup dua fungsi App Inventor Only khusus, jendela. Penemu Aplikasi. getWebViewString() dan jendela. Penemu Aplikasi. setWebViewString(). Kedua fungsi App Inventor Only inilah yang memungkinkan aplikasi Anda berkomunikasi dengan javascript yang berjalan di dalam komponen WebViewer. Dengan menggunakannya secara kreatif, Anda dapat memanfaatkan sejumlah besar program javascript yang tersedia secara gratis di Web, dan beberapa di antaranya bisa sangat berguna. Untuk saat ini, mari sederhanakan dan buat file bernama javascriptWebViewProcessor. html. Teks lengkap dari file berikut

File HTML (disertakan sebagai media/asset. javascriptWebViewProcessor. html)


WebView Javascript Processor



This page includes a javascript function that reverses text.
The javascript function incorporates a special App Inventor feature called window.AppInventor.getWebViewString(), which allows App Inventor apps to communicate with the WebViewer component's internal processing of javascript.
This simple example shows how to use the window.AppInventor.getWebViewString() function to pass data to and from the WebViewer component, and thereby an App Inventor app.

Perancang

Setelah javascriptWebViewProcessor. html telah dibuat, buat aplikasi App Inventor baru bernama SimpleWebviewerJavascriptProcessor, dan unggah file HTML sebagai aset media aplikasi. Tambahkan HorizontalArrangement dengan a

TextBox bernama StringToBeProcessedByJavascriptFile
Tombol bernama btnProcess

Juga, dengan menggunakan nama dan properti default untuk masing-masing, tambahkan a

komponen WebViewer
Komponen pemberi tahu
komponen jam

Ikhtisar Blok

Seperti yang Anda lihat, blok untuk aplikasi ini cukup sederhana. Ada 4 variabel dan 3 event handler. Masing-masing akan dijelaskan dalam bagian tersendiri

Variabel

pemrosesanIntervalMillis. menetapkan frekuensi panggilan ke komponen WebViewer dari debugMode aplikasi App Inventor. digunakan untuk menentukan lokasi file HTML yang digunakan oleh WebViewer karena aplikasi App Inventor menggunakan direktori berbeda untuk pengembangan dan menjalankan aplikasi currentProcessingDurationMillis. melacak jumlah waktu (dalam milidetik) WebViewer telah bekerja saat memproses javascript dalam file HTML maximumProcessingDurationMillis. mengontrol jumlah milidetik aplikasi akan menunggu balasan dari komponen WebViewer sebelum menentukan bahwa itu tidak responsif Screen1. Inisialisasi

Blok ini menyetel WebViewer1. Properti HomeUrl ke salah satu file. ///min/sdcard/AppInventor/assets/javascriptWebViewProcessor. html (ketika debugMode BENAR), atau file. ///android_asset/javascriptWebViewProcessor. html (ketika debugMode adalah FALSE). Ini kemudian mengatur Clock1. Properti TimerInterval ke nilai processingIntervalMillis (50ms), dan menonaktifkan komponen Clock1 sehingga tidak mulai memicu peristiwa segera setelah aplikasi dimulai. btnProses. Klik

The javascriptWebViewProcessor. Pemrosesan file html dimulai setelah pengguna mengaktifkan aplikasi. Aktivasi ini ditangkap oleh btnProcess. Klik blok event handler, yang menyetel WebViewer1. komponen WebViewString ke nilai StringToBeProceededByJavascriptFile. Teks. Kemudian WebViewer1. Prosedur GoHome dipanggil, yang menyebabkan WebViewer memuat javascriptWebViewProcessor. html, sehingga memulai pemrosesan javascript. Setelah pemrosesan javascript dimulai, aplikasi perlu memantau kemajuan, dan Clock1. Properti TimerEnabled disetel ke BENAR. Jam1. Timer

Segera setelah Jam1. Properti TimerEnabled diatur ke TRUE, Clock1. Timer event mulai menyala pada interval yang diatur oleh nilai processingIntervalMillis di Screen1. Inisialisasi acara. Setiap kali Jam1. Timer event dipicu, aplikasi terlebih dahulu memeriksa untuk melihat apakah nilai WebViewer1. WebViewString sama dengan StringToBeProcessedByJavascriptFile. Teks. Jika sama, ini berarti komponen WebViewer masih memproses javascript, dan menambahkan currentProcessingDurationMillis dengan processingIntervalMillis dan kemudian memeriksa untuk melihat apakah nilai currentProcessingDurationMillis yang baru lebih besar atau sama dengan nilai maximumProcessingDurationMillis. Jika ya, aplikasi akan berubah menjadi nilai WebViewer1. Properti WebViewString (dengan menggabungkan menambahkan teks TIMEOUT ke nilai saat ini dari StringToBeProcessedByJavascriptFile. Teks untuk membuatnya berbeda dari nilai StringToBeProcessedByJavascriptFile. Teks, dan dengan demikian memastikan bahwa waktu berikutnya Jam1. Timer event dipicu, pemeriksaan pertama akan gagal. Segera setelah pemeriksaan pertama gagal (mis. e. Penampil Web1. WebViewString berbeda dari StringToBeProcessedByJavascriptFile. Text), aplikasi akan mereset StringToBeProcessedByJavascriptFile. Teks ke string kosong (), atur Clock1. TimerEnabled ke FALSE, lalu tampilkan pesan ke pengguna dalam Dialog Pesan yang menyertakan hasil pemrosesan javascript, serta berapa lama waktu yang diperlukan untuk melakukannya. Keluaran pemrosesan tersedia untuk aplikasi di WebViewer1. Properti WebViewString, yang diatur di dalam file pemrosesan javascript. Sebagai tindakan pembersihan terakhir, ProcessingDurationMillis saat ini disetel ulang ke 0, sehingga saat berikutnya pengguna mengklik btnProcess, aplikasi akan menghitung durasi pemrosesan dengan benar.

Kesimpulan

In this article, we have explored how the WebViewer component can be used to process javascript in your App Inventor apps. Our example was simple, but it demonstrated the fact that App Inventor can communicate with running javascript, and this provides you with a foundation for more advanced and useful javascript processing. There is a LOT of javascript code available on the web, and some of it can be used immediately by you to implement advanced features in your apps. In my next blog post, I will explore an advanced application of WebView javascript processing that you can use right away to freely make your apps much more secure. Until then, keep inventing!