Ana içeriğe geç

İstemci betikleri

İstemci betikleri bir ekrana animasyonların ve tıklama eylemlerinin anlatamadığı mantığı ekler: sayfa açılınca karşılama iletisi, periyodik yenilenen bir değer, bir düğme komut göndermeden önce onay. Sayfa açıkken tarayıcıda çalışırlar; bkz. Hangi betik nerede çalışır.

Başlamadan önce​

  • Proje, betiklerin ekleneceği sayfayla ekran editöründe açık. Betik düzenlemek Editor access (Editör erişimi) ister.

Adımlar​

1. Code görünümünü açın​

Editörün sağ altındaki Code'a (Kod) tıklayın (ya da F12'ye basın; Design geri döner). Code görünümü açık betiği, File Name'ini (Dosya adı), Script Check düğmesini ve Save'i gösterir. project_main.js ile açılır.

project_main.js, Script Check, Valid, How to write? ve Save ile Code görünümü.

How to write? (Nasıl yazılır?) örnekli yerleşik betik belgesini açar.

2. Betik dosyalarını tanıyın​

Explorer'da PAGES altında Common Scripts (Ortak Scriptler) klasörü project_main.js'i ve ortak kütüphane dosyalarını tutar. Her sayfanın kendi betikleri sayfa satırının altındadır.

PAGES altında Common Scripts klasörü ve project_main.js ile Overview sayfa satırını gösteren Explorer.
DosyaÇalışır
project_main.jsProjenin her betiğinin önüne eklenir; olay işleyicileri buradadır
<sayfa>_main.jsSayfa açılınca
<sayfa>_global.jsO sayfanın betiklerinin önüne eklenir
Tetikleyici betikleriTetikleyicilerinde: sayfa açılınca ya da kapanınca, periyodik, bir sinyal değişince
Kütüphanelerimport ile yüklenir; Common Scripts'teki kütüphaneler her sayfada kullanılabilir

3. Tetikleyici betik ekleyin​

Fareyi sayfa satırının üzerine getirip Add trigger script'e (⚡, Tetikleyici script ekle) tıklayın. Betiğe bir ad verin, Trigger'ı (Tetikleyici) seçin ve kodu yazın:

UI.toast("Hoş geldiniz, " + User.name, "info");
UI.set("Status", "text", "Sayfa açıldı: " + new Date().toLocaleTimeString());
Trigger onLoad, Active açık ve iki satır kodla kaydedilmiş welcome.js tetikleyici betiği.
TetikleyiciÇalışır
onLoadSayfa açılınca bir kez
onUnloadSayfa terk edilince bir kez
Periodic (Periyodik)Her Interval (ms)'de, en az 500
Tag Change (Tag değişimi)Tag Name'deki sinyal değişince

Active (Etkin) betiği açıp kapatır. Save'e tıklayın. Sayfa satırındaki ya da Common Scripts'teki + düğmesi (Add library, Kütüphane ekle) işlevlerini diğer betiklerin içe aktardığı bir kütüphane dosyası ekler.

4. Olay işleyicisi ekleyin​

Design'a tıklayın, nesneyi, örneğin bir düğmeyi, seçin ve PROPERTIES'in Events (Olaylar) sekmesini açın. Nesnenin sunduğu her olayın bir satırı vardır; tıklamalar için betiksiz tıklama eylemi için bir Action (Aksiyon) satırı da vardır.

onClick, onMiddleClick, onRightClick, onDblClick, onMouseEnter, onMouseLeave ve onMouseDown satırlarıyla StartButton'ın Events sekmesi.

Olayın satırına, örneğin onClick'e çift tıklayın. YTCC sayfa, nesne ve olaydan adlandırılan bir işleyiciyi, Overview_StartButton_onClick'i, project_main.js içinde oluşturur ve açar. Satırın yeşil noktası işleyiciyi açıp kapatır; ✕ onu kaldırır. Tüm olaylar için bkz. Nesne ve sayfa olayları.

5. İşleyiciyi yazın​

Ne olacağını yazın, örneğin iletiden önce bir onay:

async function Overview_StartButton_onClick(event) {
  if (await UI.confirm("P101 pompası başlatılsın mı?")) {
    UI.toast("Başlatan: " + User.name, "success");
  }
}
Start pump P101? diye soran ve ileti gösteren Overview_StartButton_onClick işleyicisiyle project_main.js.

Editör betik işlevlerini ve sinyal adlarını yazarken tamamlar; bkz. İstemci betiği API'si. Nesneyi sonra yeniden adlandırırsanız bir uyarı işleyici adının eski olduğunu hatırlatır.

6. Betikleri denetleyin​

Script Check'e (Betik denetimi) tıklayın. Valid sorun olmadığını gösterir; yoksa sorun sayısı bir liste açar: sözdizimi hataları, tanımsız adlar, iki kez tanımlanmış işlevler, artık olmayan bir işleyici. Betiğe gitmek için satıra tıklayın.

No issues — all scripts are valid sonucuyla Script Check.

Projeyi kaydedin (Ctrl+S).

7. Sayfayı çalıştırın​

Run'a tıklayın. Sayfa canlı değerlerle ve betikleriyle çalışır: burada tetikleyici betik saati durum metnine yazdı.

Run kipi: Page opened at metni ve açılış saati ile Start pump düğmesiyle Pump station overview.

Hata ayıklama​

  • Log.info(...) ve console.log(...) tarayıcı konsoluna (tarayıcıda F12) [Script] önekiyle yazar. Sayfa betiklerinin hataları ayrıca Code görünümünün çalışma günlüğünde (Script Check'in yanındaki terminal düğmesi) görünür.
  • 5 saniyeden uzun çalışan betik bir uyarıya yol açar; durdurulmaz. Sonsuz döngülerden kaçının; bunun yerine Periodic kullanın.
  • Bir betikteki hata diğerlerini durdurmaz.
  • Betiklerin yaptığı ekran değişiklikleri (UI.set, self) ve tetikleyiciler sayfa terk edilince silinir. setTimeout ya da setInterval ile kendi başlattığınız zamanlayıcılar silinmez; onları bir onUnload betiğinde temizleyin.