Gunakan javascript html css untuk membuat halaman tutorial grafis RIA Anda sendiri 1/2

Masukkan RIADemo sebagai nama proyek.

Pilih server yang akan dijalankan dan standar Java ee.

Pilih Tomcat5.0, j2ee1.4 di sini. Artikel ini memperkenalkan contoh dan tidak bergantung pada server, karena html&css&javascript itu sendiri bersifat statis, dan akan menjadi file html setelah selesai. Dalam arti sempit, program web harus dijalankan oleh server, dan Netbeans masih mengadopsi konsep manajemen ini.
Pada langkah ini, Anda dapat mengklik Selesai untuk membangun proyek. Langkah selanjutnya adalah memilih kerangka kerja. Di sini, untuk kesederhanaan dan kemurnian, tidak ada kerangka kerja yang dipilih.
Setelah proyek didirikan, struktur proyek ruang kerja proyek adalah sebagai berikut:

Karena bersifat statis, Anda tidak perlu memperhatikan apa pun di luar direktori halaman Web.
Untuk memudahkan pengelolaan, dua direktori baru perlu dibuat di bawah direktori halaman Web, inc dan gambar. Ini cukup sederhana dan tidak akan dijelaskan secara rinci di sini.
Contoh pertama, tunggu halaman diminta, efeknya sebagai berikut:

Contohnya adalah melakukan operasi pada halaman saat ini, membekukan halaman dan menampilkan kotak tunggu sebelum meninggalkan atau mengembalikan hasil operasi. Fungsinya untuk memberi tahu pengguna bahwa halaman sedang dimuat. Khusus untuk permintaan data tertentu dalam jumlah besar, UI ini mampu meringankan kekesalan pelanggan akibat menunggu lama.
Analisis singkat menunjukkan bahwa contoh ini terdiri dari 2 poin utama.
1. Elemen statis
2. Kapan kotak tersebut muncul dan kapan menghilang? UI pada efek ini adalah kotak pemuatan dengan latar belakang yang gelap.
Untuk elemen statis, bagaimana pun tampilannya, esensinya selalu HTML, CSS, dan JavaScript, kecuali tentu saja kontrol yang disematkan, seperti flash Faktanya, kontrol yang disematkan tidak lagi berada dalam cakupan elemen statis seperti HTML.
Dalam contoh ini, kotak dengan pemuatan sebenarnya hanyalah sebuah div yang berisi gambar dengan efek bergulir dan teks biasa, namun div tersebut dipercantik dengan CSS, kemudian digabungkan dengan karakteristik halaman web, JavaScript digunakan untuk mengontrolnya. tampilan div.
Jadi, bagaimana cara membuat efek seperti itu? Untuk menjelaskan keseluruhan proses produksi dengan jelas, terlepas dari JavaScript untuk saat ini, buatlah div terlebih dahulu.
Di direktori halaman web, klik kanan, Baru -->html

Pilih html dan beri nama file index
Setelah halaman dibuat, bahan yang dibutuhkan hanyalah gambar loading.gif dengan efek scrolling.
Selanjutnya, buat file CSS baru, klik kanan pada folder inc, pilih New --> Other, dan pilih Cascading Style Sheets di direktori lain, seperti yang ditunjukkan pada gambar:

Beri nama gaya, klik Selesai, dan buat file CSS. CSS yang baru dibuat melalui langkah ini secara otomatis menghasilkan akar gaya. Pindahkan kursor ke kisaran lembar gaya akar. Netbeans akan menampilkan jendela pembuat gaya untuk CSS, dan juga Di sana adalah jendela pratinjau efek, seperti yang ditunjukkan di bawah ini:

Jendela generator di sisi kanan editor menyediakan pengaturan GUI untuk banyak atribut dan secara otomatis menghasilkan kode yang sesuai. Di bawah editor adalah pratinjau gaya. Misalnya, di panel font, penulis memilih huruf miring untuk gaya dan ketebalan . Pilih huruf tebal, lalu pilih garis bawah, dan pilih #ff0099 (sejenis warna merah) untuk warna. Saat memilih warna, pemilih warna akan muncul. Pilih warna yang sesuai, dan efek pratinjaunya adalah sebagai berikut:

Editor secara otomatis menghasilkan kode, dan kotak pratinjau juga menunjukkan efek setelah aplikasi Netbeans melakukannya dengan sangat baik.
Perlu dicatat bahwa meskipun kode yang dihasilkan oleh alat ini sederhana, namun tentu tidak sefleksibel dan mudah dikendalikan seperti tulisan tangan.
Di sini, tentukan gaya kotak tunggu yang kita butuhkan
.memuat
{
border:2px solid #a3bad9;/* Gaya batas objek gaya yang diterapkan*/
color:#003366; /* Warna konten pada objek gaya yang diterapkan*/
padding:10px; /* Jarak antara konten dalam objek gaya yang diterapkan dan batas gaya (atas, bawah, kiri, kanan) */
margin:0; /* Jarak antara objek gaya yang diterapkan dan elemen sekitarnya (atas, bawah, kiri, kanan) */
z-index:2000; /* Nilai koordinat z dari objek gaya yang diterapkan di halaman web*/
lebar:205px; /* Lebar objek gaya yang diterapkan*/
text-align:center; /* Memusatkan konten pada objek gaya yang diterapkan*/
position:absolute; /* Posisi objek gaya yang diterapkan pada halaman ditampilkan */
font-weight: bold; /* Gaya font pada objek gaya yang diterapkan*/
font-size: 13px; /* Ukuran font pada objek gaya yang diterapkan*/
}
Jika pembaca tertarik dengan arti spesifik dari setiap atribut, mereka dapat mencari informasi untuk pemahaman lebih dalam di sini.
Setelah membuat CSS, tambahkan kode berikut ke file index.html yang baru saja Anda buat untuk mengimpor gaya CSS.

Bergabunglah di area tersebut

Simpan file, klik kanan pada file index.html dan pilih Run File

Browser akan muncul secara otomatis, dan efek tampilannya adalah sebagai berikut:

Sebuah kotak muncul. Pembaca yang cermat dapat menemukan bahwa UI sedikit berbeda dari yang ditunjukkan di awal jika Anda menambahkan kode berikut ke gaya pemuatan yang baru saja ditentukan:
background:white url(../images/block-bg.gif) repeat-x; /* Latar belakang objek gaya yang diterapkan dan diatur untuk diulang secara horizontal*/
Tentunya Anda juga perlu menambahkan gambar background block-bg.gif. Setelah menambahkan gambar background, efeknya adalah sebagai berikut:

Pada titik ini, UI telah selesai.
Selanjutnya buatlah cara membuat halaman web menjadi gelap dan tidak bisa diklik.
Cara menggelapkan halaman web yang paling sederhana adalah dengan mengubah warna background halaman web menjadi warna gelap, namun hal ini jelas tidak ada artinya, karena setelah diubah menjadi warna gelap, elemen pada halaman tersebut masih bisa diklik.
Lalu bagaimana cara menggelapkan latar belakang dan membuatnya tidak bisa diklik?
Menganalisis kembali prinsip halaman web statis, penggelapan harus dicapai dengan menyesuaikan warna. Untuk mencapai non-clickability, hal ini dapat dicapai dengan mengganti objek yang diklik, yaitu pada objek yang akan diklik, objek dihasilkan, dan objek dibuat. objek ini Transparan, maka ketika pengguna mengklik, yang diklik sebenarnya adalah objek transparan yang menghalangi objek di bawahnya, sehingga memberikan ilusi kepada pengguna bahwa klik tersebut tidak valid, seperti gambar di bawah ini:

Jika objek B transparan dan bersebelahan dengan objek A, jika pihak ketiga mencoba menghubungi objek A dan hanya bertemu dengan objek B, maka semua kontak terhadap A akan menjadi tidak valid.
Pada tahap analisis ini, yang harus kita lakukan adalah membuat div dengan efek khusus ini. Pada analisis akhir, ini masih berupa produksi dan aplikasi CSS.
Efek transparansi gelap dapat diperoleh melalui atribut filter CSS dan mendefinisikan ulang gaya baru bgdiv
.bgdiv
{
latar belakang:#ccc; /* warna latar belakang*/
opasitas:.3; /* transparansi*/
filter: alfa(opasitas=30); /* filter transparan*/
position:absolute; /* Posisi objek gaya yang diterapkan pada halaman ditampilkan */
z-index:1000; /* Nilai koordinat z dari objek gaya yang diterapkan di halaman web*/
lebar:500px; /* Lebar objek gaya yang diterapkan*/
height:500px; /*Tinggi objek gaya yang diterapkan*/
top: 0px; /* Jarak antara objek gaya yang diterapkan dan bagian atas halaman*/
kiri: 0px; /* Jarak antara objek gaya yang diterapkan dan ujung kiri halaman*/
}

Di area tubuh, tambahkan:
, jalankan file tersebut, efeknya sebagai berikut:

Pada titik ini, desain UI selesai, tetapi ukuran div yang kita lihat adalah 500*500, yang tidak memenuhi seluruh halaman, dan kotak tunggu tidak berada di tengah, dan efeknya sudah terlihat dari awal jelas tidak bisa dilakukan secara langsung. Saat benar-benar menggunakannya, kita memerlukan latar belakang untuk memenuhi seluruh halaman, kotak tunggu perlu ditampilkan di tengah, dan kita harus bisa mengontrol kapan efek muncul dan kapan efeknya menghilang.
Maka tugas-tugas ini harus diselesaikan dengan JavaScript.
JavaScript dapat mengontrol hampir semua elemen statis pada halaman, dan efek di atas secara resmi dicapai dengan mengontrol div latar belakang dan kotak tunggu.
Dalam JavaScript, cara paling sederhana untuk mendapatkan elemen pada halaman adalah dengan memberikan nilai pada atribut ID objek target, lalu mendapatkannya melalui getElementbyId JavaScript.
Di sini, pertama-tama berikan nilai pada atribut ID bgdiv, seperti:

Mari kita selesaikan masalah pertama terlebih dahulu, yaitu mengatur ukuran layer agar memenuhi seluruh halaman melalui javascript.
fungsi pertunjukanbg()
{
var bgdiv=document.getElementById("bgdiv"); // Dapatkan objek bgdiv
bgdiv.style.width=document.body.clientWidth; //Setel lebar objek bgdiv dengan lebar area halaman web yang terlihat
if (document.body.clientHeight>document.body.scrollHeight) //Mengatur tinggi objek bgdiv ke tinggi area halaman web yang terlihat
bgdiv.style.height=dokumen.body.clientHeight;
kalau tidak
bgdiv.style.height=dokumen.body.scrollHeight;
}
Yang perlu dijelaskan disini adalah clientWidh dan scrollWidth sama-sama mewakili lebar area visual. Bedanya jika pada halaman web terdapat scroll bar maka scollWidth lebih besar dari clientWidth, karena scollWidth menyertakan scroll bar ke ?? ??????? bagian, sedangkan clientWidth tidak, hanya bagian yang terlihat.
Pada fungsi di atas, clientWidth digunakan sebagai lebar, karena menurut prinsip dasar desain web, mendesain halaman web yang berisi bilah gulir horizontal cukup tidak ramah, karena mouse hanya dapat menggulir ke atas dan ke bawah, tetapi tidak ke kiri. ke kanan, jadi di sini Mengambil clientWidth secara langsung berarti memastikan bahwa tidak ada bilah gulir horizontal yang akan muncul di keseluruhan proyek.
Pengaturan ketinggian di bawah memperhitungkan kompatibilitas dengan dan tanpa bilah gulir vertikal.
Fungsi di atas dapat memastikan bahwa bgdiv yang dipanggil dapat memenuhi seluruh layar.

Di folder inc, buat file javascript baru, salin fungsi di atas ke dalamnya, dan tambahkan kode berikut ke halaman untuk memperkenalkan fungsi tersebut

Untuk memudahkan tampilan, tambahkan onload="showbg();" pada tag body. Setelah halaman dimuat, Anda dapat melihat bahwa bgdiv yang disesuaikan telah memenuhi seluruh halaman.
Prinsip pengaturan posisi tampilan kotak tunggu serupa. Fungsinya adalah:
fungsi tunggu pertunjukan()
{
tampilkanbg(); // tampilkan bgdiv
var loading=document.getElementById("loaddiv");//Dapatkan objek pemuatan
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//Atur jarak pemuatan dari atas
loading.style.left=document.body.clientWidth/2-110;//Atur jarak antara pemuatan dan ujung kiri
}
Panggil showwait di acara onload untuk menampilkan kotak tunggu dengan latar belakang transparan gelap.

Yang perlu ditekankan disini adalah atribut position dari atribut CSS. Atribut ini harus diset menjadi absolute agar kode di atas bisa efektif, karena posisi kode di atas diatur sesuai dengan posisi absolutnya.

Efek di atas ditampilkan segera setelah halaman dibuka. Jika Anda ingin mengontrol apakah itu ditampilkan, Anda perlu menggunakan atribut CSS display. Ketika nilainya diblokir, itu akan ditampilkan, dan ketika tidak ada, itu akan ditampilkan tidak akan ditampilkan.

Kami telah menambahkan display: none pada atribut CSS di atas, maka efeknya tidak akan ditampilkan saat halaman dibuka.

Kemudian tambahkan bgdiv.style.display="block" di fungsi showbg;

Tambahkan loading.style.display="none" ke fungsi showwait;

Tambahkan tampilan pada area body halaman dan jalankan halaman tersebut. Hanya link tampilan yang dapat dilihat. Setelah mengklik link tampilan, akan muncul efek yang kita perlukan, seperti terlihat pada gambar:

Efek yang muncul tidak akan hilang. Dalam pekerjaan belajar saya sehari-hari, penulis juga menemukan fenomena ketika mengklik link pada halaman (yaitu mengirim permintaan ke server), ketika server belum selesai memproses dan belum mengembalikan halaman ke klien, maka halaman itu sendiri tidak akan ada Perubahan, dan apa yang disebut kecepatan jaringan lambat juga seperti ini. Mengklik tidak mencerminkannya. Ketika server selesai memproses, ia mengembalikan html ke pengguna dan halaman mulai berubah. Kemudian, jika event showwait terpicu saat link diklik, efeknya akan muncul hingga server selesai memproses permintaan dan halaman dialihkan dan menghilang.

Misalnya, jika kita mengubah kode yang ditampilkan menjadi menampilkan dan kemudian menjalankan halaman tersebut, lalu mengklik tampilan, kita dapat melihat bahwa kotak tunggu muncul, dan ketika halaman tersebut menghilang, beranda Sun muncul.
Mari kita lihat ke belakang, sebenarnya tidak ada yang istimewa dari contoh ini, hanya saja persyaratan untuk HTML, CSS dan javascript sangat tinggi.Hanya jika Anda sudah familiar dengan ketiga elemen statis ini Anda dapat memahaminya dengan baik. Dan di sini, ada juga persyaratan tertentu untuk artis. Perlu dicatat bahwa gambar gulir dan gambar latar belakang tunggu tidak dibuat oleh penulis ext.
Perlu disebutkan bahwa editor Netbeans 6.1 memiliki dukungan cepat yang kaya untuk JavaScript, tidak hanya dukungan kata kunci, tetapi juga perintah untuk browser yang kompatibel, dan bahkan memberikan beberapa contoh sederhana.

Artikel ini menghabiskan banyak ruang untuk menjelaskan contoh yang tidak rumit. Tujuannya adalah untuk memberikan analisis mendalam kepada pembaca tentang bagaimana mengembangkan RIA mereka sendiri melalui pemikiran terperinci dan proses pengembangan.

Terlihat bahwa untuk membuat RIA jenis ini, walaupun masih memerlukan landasan seni dan kemampuan desain halaman tertentu, namun langkah dasar produksinya tidak lebih dari dua langkah berikut:

1. Buat UI Anda sendiri menggunakan HTML dan CSS.

2. Pelajari dengan cermat mode perilaku halaman dan tulis javascript untuk mengontrol UI.

Pada artikel berikutnya, penulis akan memperkenalkan Anda pada contoh yang lebih kompleks dan komprehensif, termasuk kotak dialog pop-up, menu pop-up, lapisan efek khusus, dan jendela seret.