Görsel düzenleyiciyle grafik bir uygulama oluşturma

JumPHP grafik uygulaması, pencereleri formlar olan bir PHP programıdır: düğmeler, metin alanları, listeler, açılır listeler, onay kutuları, kaydırıcılar, resimler, videolar. HTML ve CSS yok: motor onları kendisi çizer ve aynı uygulama PC, Mac, Linux, tarayıcı ve telefonda (Android ve iOS) çalışır.

Projeyi oluşturma

JumPHP IDE'de: New Project, ardından Graphic app (masaüstü uygulaması) veya Mobile app (dikey bir telefon uygulaması). Komut satırında: bin/jumphp gui:new contacts "Contacts" (telefon için --mobile ekleyin).

Örnek uygulamanın bir penceresi, forms/MainForm.form.yaml, ve onun kodu, src/Form/MainForm.php, vardır.

Pencereyi çizme

forms/MainForm.form.yaml dosyasını açın: Design modunda görünür (Code ve Split düğmeleri dosyayı gösterir).

• Paletten (solda) bir bileşeni pencereye sürükleyin ya da seçimin ardına eklemek için üzerine tıklayın.
• Bir bileşeni sürükleyerek taşıyın; Del siler, Ctrl+D çoğaltır, Ctrl+Z geri alır.
• Denetçi (sağda) seçilen bileşeni ayarlar: metni, stili, boyutu (auto, fill ya da bir sayı), boş alandaki payı (Grow), hizalaması.

Ekrana uyum sağlayan bir yerleşim

• Bir Row (satır) bileşenlerini yan yana, bir Column alt alta koyar.
• Bir Spacer boş alanı kaplar: bir düğmenin önüne konduğunda onu satırın sonuna iter.
• Bir Grid bileşenlerini 12 sütuna yerleştirir. Denetçide Columns (of 12), her ekran boyutu için her birinin genişliğini verir: xs (telefon), sm (tablet), md ve lg (büyük ekranlar). Örneğin xs için 12 ve md için 6: telefonda satır başına bir panel, PC'de yan yana iki panel.
• Hidden on, bir bileşeni bazı ekran boyutlarında gizler.

Araç çubuğundaki PC, Laptop, Tablet, iPhone ve Android düğmeleri pencereyi her boyutta gösterir; PC modunda yerleşimin değiştiğini görmek için pencerenin kenarını sürükleyin.

Olayları bağlama

Bir bileşene çift tıklayın: IDE yöntemini koda yazar (örneğin public function onAddClick(Button $sender): void) ve doldurulmaya hazır şekilde açar:

public function onAddClick(Button $sender): void
{
    $this->people->addItem($this->name->text);
    $this->name->text = '';
}

Diğer olaylar (değişen metin, bir listede seçilen satır…) denetçinin Events bölümündedir. Id'si olan her bileşene otomatik tamamlamayla $this->onunId olarak erişilir.

Resimler ve videolar

Resimlerinizi assets/images/ klasörüne koyun: bir Image bileşeninin Picture alanı (ya da bir düğmenin Image alanı) onları önerir. Bir video için bin/jumphp video contacts film.mp4 onu sesiyle birlikte resimlere böler, ardından Video bileşeni oynatır.

Çalıştırma ve dışa aktarma

Düzenleyicinin Run düğmesi uygulamayı başlatır. Sonrası bir oyundaki gibi: bin/jumphp build (tarayıcı sürümü), bin/jumphp export:standalone (Windows veya Linux çalıştırılabilir dosyası), bin/jumphp android ve bin/jumphp apple (telefon uygulamaları).