‫Selamat datang kembali.
‫Dan video ini, kita akan berbicara tentang kotak daftar panel bertumpuk, lalu tiga logis dan tiga visual.
‫Jadi pertama-tama, mari kita singkirkan grid ini karena kita belum menyentuh grid.
‫Jadi kami belum menggunakannya dengan benar, tetapi kami akan melakukannya di salah satu video berikutnya.
‫Jadi, alih-alih kisi, saya ingin menggunakan panel tongkat.
‫Panel status memungkinkan saya untuk menumpuk elemen di atas satu sama lain sehingga saya dapat
‫melanjutkan dan menambahkan blok teks di sini, misalnya, dan saya akan menulis teks seperti teks sederhana Hello World.
‫Seperti yang Anda lihat, ada teks dunia saya sekarang.
‫Yang juga ingin saya lakukan adalah saya ingin menyelaraskannya.
‫Jadi perataan horizontal, saya akan menggunakan pusat di sini.
‫Jadi sekarang saya sedang memusatkan teks, seperti yang Anda lihat di sini sekarang ke Texas, berpusat pada juga mungkin
‫sedikit margin ke segala arah, yaitu 20.
‫Jadi seperti yang Anda lihat, saya menggunakan margin dan hanya mengatakan 20, yang akan mengatakan atau yang
‫akan membuat margin ke keempat arah 20 piksel.
‫Sekarang, hal berikutnya adalah sebuah listbox, dan saya ingin menggunakan sebuah listbox, agar Anda dapat melihat bagaimana tampilannya.
‫Jadi kotak daftar ini di sini saat ini kosong, tetapi kita dapat mengubahnya dengan sangat mudah dengan membuat item Kotak Daftar di
‫sana.
‫Jadi mari kita lanjutkan dan buat item ListBox.
‫Dan item itu harus memiliki konten, katakanlah, konten sama dengan item satu.
‫Dan sekarang alih-alih memiliki tag pembuka dan penutup, saya hanya ingin memiliki versi yang lebih pendek ini.
‫Jadi saya menggunakan studio visual dan tahun lalu ini cukup pintar untuk menyingkirkan tag penutup untuk saya secara otomatis.
‫Jadi sekarang kotak daftar ini memiliki item ini dan saya hanya akan menyalin dan menempelkannya beberapa kali.
‫Jadi saya akan memiliki item satu dan dua dan tiga.
‫Dan sekarang kotak daftar ini memenuhi seluruh lebarnya.
‫Seperti yang Anda lihat, dibutuhkan seluruh induk dan hanya setinggi atau setinggi yang dibutuhkan.
‫Jadi itu berarti hanya dibutuhkan ruang sebanyak elemen-elemen di dalamnya berada pada ketinggiannya.
‫Jadi cukup banyak, katakanlah, item satu dan item dua dan tiga ini masing-masing memiliki dasi 30 piksel.
‫Jadi seluruh kotak ini hanya setinggi 90 piksel.
‫Tapi kita bisa mengubahnya dengan, katakanlah, menyesuaikan ketinggian.
‫Dan saya hanya akan menggunakan ketinggian 100.
‫Seperti yang Anda lihat, itu lebih tinggi dari objek sebelumnya.
‫Dan sekarang mari kita buat lebarnya juga.
‫Juga seratus piksel.
‫Jadi sekarang Anda dapat melihat kotak ini jauh lebih kecil dan pas.
‫Baiklah.
‫Sekarang, jika saya ingin memiliki margin ke segala arah, saya juga bisa memberikan elemen ini di margin.
‫Tapi seperti yang Anda lihat, karena ini memiliki blok teks dunia memiliki margin dua puluh ke segala arah.
‫Ada juga jarak antara dua elemen di sini antara ListBox dan blok teks.
‫Sekarang, jika kita menjalankan kode itu, kita akan melihat bahwa kita memiliki jendela utama kecil ini, yang
‫indah dan memiliki kotak daftar kita dengan elemen-elemennya.
‫Jadi seperti yang dapat Anda lihat di sini, blok teks dan kemudian elemen daftar itu, Anda dapat mengkliknya, Anda
‫bahkan dapat memilihnya, seperti yang Anda lihat.
‫Tapi tidak ada lagi yang terjadi karena kami belum memeriksa acaranya, yang akan kami lakukan di video
‫berikutnya.
‫Oke, jadi saya akan menutupnya lagi.
‫Dan sekarang mari kita cepat berbicara tentang suguhan logis dan visual.
‫Jadi apa yang kita miliki di sini adalah pohon logis atau kita dapat melihat pohon logis di Zemel.
‫Jadi pohon logis adalah jendela di dalam jendela itu.
‫Kami memiliki panel bertumpuk di dalam panel bertumpuk itu.
‫Kami memiliki blok teks dan kotak daftar.
‫Dan di dalam ListBox kita sebenarnya memiliki ListBox, item satu, ListBox, item dua dan tiga.
‫Jadi itulah pohon logisnya.
‫Anda cukup banyak memiliki banyak cabang.
‫Ia pergi lebih dalam dan lebih dalam.
‫Jadi jendela memiliki cabang panel bertumpuk yang memiliki dua cabang, dan salah satunya adalah ListBox, yang
‫memiliki cabang juga dan sebagainya.
‫Jadi seperti yang saya katakan lagi, ini adalah pohon logis.
‫Sekarang mari kita lihat pohon visualnya, karena jika saya, misalnya, menambahkan tombol di sini,
‫saya akan membutuhkannya sebentar lagi.
‫Jadi saya membuat tombol baru.
‫Saya memberikan konten Callignee.
‫Dan saya juga akan menambahkan metode di sini yang akan dipanggil setiap kali seseorang mengklik.
‫Jadi saya menggunakan klik di sini dan saya membuat pengendali acara baru.
‫Dan apa gunanya bagi saya, itu menciptakan metode baru yang disebut klik tombol.
‫Jika Anda perhatikan, Anda tahu, kita dapat melihat bahwa ada metode yang disebut Button Click, yang memiliki
‫pengirim objek dan argumen event yang dirutekan yang disebut EHP.
‫Jadi apa yang cukup banyak dilakukan adalah metode ini akan dipanggil setiap kali kita mengklik tombol dan apa pun yang kita
‫miliki di dalam badan metode ini akan dieksekusi.
‫Jadi katakanlah kita menggunakan kotak pesan, sesuatu yang belum pernah kita gunakan dan kita sebut metodenya show.
‫Kami hanya dapat menunjukkan sebuah kotak atau kotak akan muncul seperti pop up kecil dan yang akan menunjukkan kepada kita beberapa teks.
‫Jadi sesuatu seperti terima kasih telah mengklik saya.
‫Dan teksnya berbunyi, klik saya dan sumur, teks yang akan muncul seperti ini, terima kasih telah mengklik kotak pesan akan menampilkan
‫sesuatu yang indah seperti terima kasih telah mengklik saya.
‫Jadi seperti yang Anda lihat, tombol klik saya ini tepat di bawah kotak daftar kami.
‫Jadi tidak, silakan dan tambahkan sedikit jarak di antara mereka.
‫Baiklah, saya harap Anda mencoba melakukannya dan kita dapat memberikan margin botani dan saya hanya akan menggunakan 20
‫lagi, atau kita dapat memberikan margin pada ListBox, tetapi memberikan tombol margin seharusnya
‫baik-baik saja.
‫Jadi sekarang jika Anda menjalankan kodenya, kita akan mendapatkan tombol klik saya yang indah ini di sini.
‫Jadi kita memiliki seluruh dunia dengan teks dan sebagainya atau kotak daftar.
‫Dan sekarang jika kita mengklik Klik Saya, kotak pesan ini muncul dan mengatakan sesuatu seperti, terima kasih telah mengklik
‫saya dan kita dapat mengklik OK untuk menutup kotak pesan itu lagi.
‫Jadi mari kita buka.
‫Seperti yang Anda lihat.
‫Klik saya.
‫Terima kasih telah mengklik saya.
‫Jadi itu adalah kotak pesan dan kita dapat menggunakannya dalam, katakanlah, dengan cara yang sama seperti kita
‫menggunakan garis merah konsol dan aplikasi konsol kita untuk tujuan pengujian.
‫Jadi itu cukup keren.
‫Jika kita ingin membuka sesuatu setelah acara, kita cukup membuka kotak pesan agar kita tahu, OK.
‫Itu bekerja dengan baik.
‫Jadi itulah tombol dan tiga logis kami.
‫Sekarang mari kita lihat pohon visual.
‫Jadi untuk mendapatkan pohon visual, ada beberapa cara.
‫Tapi salah satu yang akan saya gunakan adalah saya akan menambahkan titik di sini, titik debug, sehingga akan
‫mengalami debug setiap kali baris kode ini dijalankan.
‫Jadi izinkan saya memulai kode atau memulai program kami.
‫Sekarang saya mengklik tombol dan program kami berhenti dan kami masuk ke mode debug.
‫Dan di sini saya bisa pergi ke WP Free Visualizer.
‫Jadi apa yang akan saya lakukan adalah saya akan mengkliknya dan itu membuka visualizer, yang memiliki tampilan
‫visual, yang juga memiliki properti tersebut di sisi kanan atas atau di sisi kanan.
‫Seperti yang Anda lihat, ada begitu banyak properti untuk tombol kami, misalnya, atau untuk kotak daftar kami,
‫juga banyak properti.
‫Dan bahkan memberitahu saya semua nilai dari properti tersebut.
‫Dan kami bahkan tidak mengaturnya.
‫Yah, kecuali untuk margin mungkin.
‫Tapi selain itu, tidak ada yang kami siapkan.
‫Dan seperti yang Anda lihat, latar belakangnya lebar.
‫Itu selalu bagus.
‫Jadi kita bisa mengubahnya dalam kode juga.
‫Dan omong-omong, yang penting di sini sekarang adalah pohon visual kita.
‫Dan Anda melihat beberapa aspek dari pohon logika kita di sini, dan juga, misalnya, Anda dapat melihat jendela
‫utama, kemudian Anda melihat panel bertumpuk dan di sana Anda melihat kotak teks tanpa plot dan tombolnya.
‫Tapi ada banyak lagi, seperti yang Anda lihat, jendela utama memiliki batas, yang tidak kita lihat di
‫pohon logis, tapi kita lakukan pohon individu.
‫Kemudian memiliki dekorator donor, pusat konten, yang benar-benar menampilkan konten, yang merupakan panel
‫bertumpuk.
‫Dan panel bertumpuk, sekali lagi, memiliki blog teks, kotak daftar, yang memiliki batas.
‫Kemudian kotak ini memiliki tampilan gulir.
‫Jadi jika ada terlalu banyak elemen untuk ditampilkan dalam ketinggian yang telah dilakukan, itu
‫akan memiliki kemampuan gulir maka itu adalah kotak di sana yang berisi persegi panjang dan penyaji konten gulir, yang
‫memiliki item untuk penyaji memvisualisasikan panel tumpukan.
‫Dan kemudian di sana kami menemukan item ListBox kami, yang lagi-lagi memiliki perbatasan yang memiliki presenter konten.
‫Dan akhirnya, kita dapat menemukan blok teks.
‫Jadi Anda lihat, ada pohon yang sangat, sangat panjang di sini, sangat banyak cabang.
‫Tetapi pada akhirnya, yang dapat Anda temukan adalah semua elemen berbeda yang secara visual ada dalam program Anda.
‫Dan ini bisa sangat membantu jika Anda ingin mengetahui lebih banyak tentang secara umum apa yang diwakili atau digunakan dalam program
‫Anda dan apa yang telah Anda tambahkan ke program Anda, tetapi secara umum itulah cara Anda dapat menemukan segala
‫sesuatu tentang perawatan visual.
‫Seperti yang Anda lihat, kami memiliki kotak di dalam kotak daftar kami, yang tidak kami atur sendiri, tetapi hanya ada di
‫sana.
‫Benar.
‫Dan jika Anda mengklik kisi, Anda juga dapat menemukan properti kisi itu di sisi kanan.
‫Oke dokey.
‫Jadi itu cukup untuk pohon visual.
‫Pohon logis.
‫Kami memiliki panel USEC dan ListBox.
‫Kami akan lebih sering menggunakan panel itu di masa mendatang.
‫Jadi biasakan itu.
‫Dan ya.
‫Dan video berikutnya, kami akan memeriksa acara.
‫Jadi sampai jumpa di sana.