ใช้ html css javascript เพื่อสร้างหน้าบทช่วยสอนกราฟิก RIA ของคุณเอง 1/2

ป้อน RIADemo เป็นชื่อโครงการ

เลือกเซิร์ฟเวอร์ที่จะรันและมาตรฐาน Java ee

เลือก tomcat5.0, j2ee1.4 ที่นี่ บทความนี้จะแนะนำตัวอย่างและไม่ขึ้นอยู่กับเซิร์ฟเวอร์ เนื่องจากตัว html&css&javascript เป็นแบบคงที่ และจะเป็นไฟล์ html หลังจากเสร็จสิ้น ในแง่ที่เข้มงวด โปรแกรมเว็บจะต้องดำเนินการโดยเซิร์ฟเวอร์ และ Netbeans ยังคงใช้แนวคิดการจัดการนี้
ในขั้นตอนนี้ คุณสามารถคลิก เสร็จสิ้น เพื่อสร้างโปรเจ็กต์ได้ ขั้นตอนต่อไปคือการเลือกเฟรมเวิร์ก ที่นี่ เพื่อความเรียบง่ายและบริสุทธิ์ จะไม่มีการเลือกเฟรมเวิร์ก
หลังจากก่อตั้งโครงการแล้ว โครงสร้างโครงการของพื้นที่ทำงานของโครงการจะเป็นดังนี้:

เนื่องจากเป็นแบบคงที่ คุณจึงไม่จำเป็นต้องใส่ใจกับสิ่งอื่นใดที่อยู่นอกไดเร็กทอรีของเว็บเพจ
เพื่ออำนวยความสะดวกในการจัดการ จำเป็นต้องสร้างไดเร็กทอรีใหม่สองไดเร็กทอรีภายใต้ไดเร็กทอรีของเว็บเพจ inc และรูปภาพ ซึ่งค่อนข้างง่ายและจะไม่อธิบายรายละเอียดที่นี่
ตัวอย่างแรก รอเมื่อมีการร้องขอเพจ ผลกระทบจะเป็นดังนี้:

ตัวอย่างนี้คือการดำเนินการบนเพจปัจจุบัน หยุดเพจ และแสดงกล่องรอก่อนที่จะออกหรือส่งคืนผลการดำเนินการ ฟังก์ชั่นคือการแจ้งให้ผู้ใช้ทราบว่าเพจกำลังโหลด โดยเฉพาะอย่างยิ่งสำหรับคำขอข้อมูลปริมาณมาก UI นี้สามารถบรรเทาความรำคาญของลูกค้าที่เกิดจากการรอนานได้
การวิเคราะห์โดยย่อแสดงให้เห็นว่าตัวอย่างนี้ประกอบด้วยประเด็นหลัก 2 ประเด็น
1. องค์ประกอบคงที่
2. กล่องจะปรากฏขึ้นเมื่อใดและจะหายไปเมื่อใด UI ในเอฟเฟกต์นี้คือกล่องโหลดบนพื้นหลังสีเข้ม
สำหรับองค์ประกอบคงที่ ไม่ว่าจะปรากฏอย่างไร สาระสำคัญขององค์ประกอบเหล่านั้นจะเป็น HTML, CSS และ JavaScript เสมอ ยกเว้นการควบคุมแบบฝัง เช่น แฟลช ที่จริงแล้ว การควบคุมแบบฝังจะไม่อยู่ในขอบเขตขององค์ประกอบคงที่เช่น HTML อีกต่อไป
ในตัวอย่างนี้ กล่องที่มีการโหลดนั้นจริงๆ แล้วเป็นเพียง div ที่มีรูปภาพที่มีเอฟเฟกต์การเลื่อนและข้อความธรรมดา อย่างไรก็ตาม div นั้นได้รับการตกแต่งให้สวยงามด้วย CSS จากนั้นเมื่อรวมกับลักษณะของหน้าเว็บ JavaScript จะถูกนำมาใช้เพื่อควบคุม การแสดง div และหายไป
แล้วจะสร้างเอฟเฟกต์ดังกล่าวได้อย่างไร เพื่อให้อธิบายกระบวนการผลิตทั้งหมดได้อย่างชัดเจน โดยไม่คำนึงถึง JavaScript ในขณะนั้น ให้สร้าง div ก่อน
ในไดเร็กทอรีของหน้าเว็บ คลิกขวา New -->html

เลือก html และตั้งชื่อดัชนีไฟล์
หลังจากสร้างเพจแล้ว สิ่งเดียวที่จำเป็นคือรูปภาพ Loading.gif พร้อมเอฟเฟกต์การเลื่อน คัดลอกรูปภาพไปยังโฟลเดอร์รูปภาพ
จากนั้น สร้างไฟล์ CSS ใหม่ คลิกขวาที่โฟลเดอร์ inc เลือก New --> Other และเลือก Cascading Style Sheets ในไดเร็กทอรีอื่น ดังแสดงในรูป:

ตั้งชื่อสไตล์ คลิกเสร็จสิ้น และสร้างไฟล์ CSS ที่สร้างขึ้นใหม่ผ่านขั้นตอนนี้จะสร้างรูทสไตล์โดยอัตโนมัติ เป็นหน้าต่างแสดงตัวอย่างเอฟเฟกต์ดังที่แสดงด้านล่าง:

หน้าต่างตัวสร้างทางด้านขวาของตัวแก้ไขจะมีการตั้งค่า GUI สำหรับคุณลักษณะต่างๆ และสร้างโค้ดที่เกี่ยวข้องโดยอัตโนมัติ ด้านล่างของตัวแก้ไขคือการแสดงตัวอย่างสไตล์ ตัวอย่างเช่น ในแผงแบบอักษร ผู้เขียนเลือกตัวเอียงสำหรับสไตล์และความหนา เลือกตัวหนา จากนั้นเลือกขีดเส้นใต้ และเลือก #ff0099 (ประเภทสีแดง) สำหรับสี เมื่อเลือกสี ตัวเลือกสีจะปรากฏขึ้น เลือกสีที่เกี่ยวข้อง และเอฟเฟกต์ตัวอย่างจะเป็นดังนี้:

โปรแกรมแก้ไขจะสร้างโค้ดโดยอัตโนมัติ และกล่องแสดงตัวอย่างยังแสดงผลหลังจากแอปพลิเคชัน Netbeans ทำได้ดีมาก
ควรสังเกตว่าแม้ว่าโค้ดที่สร้างโดยเครื่องมือจะเรียบง่าย แต่ก็ไม่ยืดหยุ่นและควบคุมได้ง่ายเท่ากับการเขียนด้วยลายมืออย่างแน่นอน
ที่นี่ กำหนดรูปแบบของกล่องรอที่เราต้องการ
. กำลังโหลด
-
border:2px solid #a3bad9;/* รูปแบบของเส้นขอบของวัตถุสไตล์ที่นำไปใช้*/
color:#003366; /* สีของเนื้อหาในวัตถุสไตล์ที่ใช้*/
padding:10px; /* ระยะห่างระหว่างเนื้อหาในวัตถุสไตล์ที่ใช้กับเส้นขอบสไตล์ (บน, ล่าง, ซ้าย, ขวา) */
Margin:0; /* ระยะห่างระหว่างวัตถุสไตล์ที่ใช้กับองค์ประกอบโดยรอบ (บน, ล่าง, ซ้าย, ขวา) */
z-index:2000; /* ค่าของพิกัด z ของออบเจ็กต์สไตล์ที่ใช้ในหน้าเว็บ*/
width:205px; /* ความกว้างของวัตถุสไตล์ที่ใช้*/
text-align:center; /* จัดกึ่งกลางเนื้อหาในวัตถุสไตล์ที่นำไปใช้*/
position:absolute; /* ตำแหน่งของวัตถุสไตล์ที่ใช้ในเพจจะปรากฏขึ้น */
น้ำหนักแบบอักษร: ตัวหนา; /* รูปแบบของแบบอักษรในวัตถุสไตล์ที่นำไปใช้*/
ขนาดตัวอักษร: 13px; /* ขนาดของตัวอักษรในวัตถุสไตล์ที่นำไปใช้*/
-
หากผู้อ่านสนใจความหมายเฉพาะของแต่ละคุณลักษณะ ก็สามารถหาข้อมูลเพื่อทำความเข้าใจให้ลึกซึ้งยิ่งขึ้นได้ ฉันจะไม่ลงรายละเอียดที่นี่
หลังจากสร้าง CSS แล้ว ให้เพิ่มโค้ดต่อไปนี้ลงในไฟล์ index.html ที่คุณเพิ่งสร้างขึ้นเพื่อนำเข้าสไตล์ CSS

เข้าร่วมในพื้นที่

บันทึกไฟล์ คลิกขวาที่ไฟล์ index.html แล้วเลือก Run File

เบราว์เซอร์จะปรากฏขึ้นโดยอัตโนมัติ และเอฟเฟกต์การแสดงผลจะเป็นดังนี้:

กล่องจะปรากฏขึ้น ผู้อ่านที่ระมัดระวังจะพบว่า UI นั้นแตกต่างจากที่แสดงไว้ตอนต้นเล็กน้อย หากคุณเพิ่มโค้ดต่อไปนี้ให้กับสไตล์การโหลดที่เพิ่งกำหนด:
พื้นหลัง: white url(../images/block-bg.gif) ทำซ้ำ-x; /* พื้นหลังของวัตถุสไตล์ที่ใช้และตั้งค่าให้ทำซ้ำในแนวนอน*/
แน่นอน คุณต้องเพิ่มภาพพื้นหลัง block-bg.gif ด้วย หลังจากเพิ่มภาพพื้นหลังแล้ว เอฟเฟกต์จะเป็นดังนี้:

ณ จุดนี้ UI เสร็จสมบูรณ์
ต่อไป กำหนดวิธีทำให้หน้าเว็บมืดและไม่สามารถคลิกได้
วิธีที่ง่ายที่สุดในการทำให้หน้าเว็บมืดลงคือการเปลี่ยนสีพื้นหลังของหน้าเว็บให้เป็นสีเข้ม แต่เห็นได้ชัดว่าไม่มีความหมาย เพราะหลังจากเปลี่ยนเป็นสีเข้มแล้ว องค์ประกอบต่างๆ บนหน้าเว็บยังสามารถคลิกได้
แล้วจะทำให้พื้นหลังมืดลงและทำให้คลิกไม่ได้ได้อย่างไร?
การวิเคราะห์หลักการของหน้าเว็บแบบคงที่อีกครั้ง การทำให้มืดลงจะต้องทำได้โดยการปรับสี เพื่อให้ไม่สามารถคลิกได้ สามารถทำได้โดยการแทนที่วัตถุที่ถูกคลิก นั่นคือ บนวัตถุที่จะคลิก วัตถุจะถูกสร้างขึ้น และ ออบเจ็กต์นี้มีความโปร่งใส ดังนั้นเมื่อผู้ใช้คลิก สิ่งที่เขาคลิกจริง ๆ แล้วจะเป็นออบเจ็กต์โปร่งใสที่บล็อกออบเจ็กต์ที่อยู่ด้านล่าง ซึ่งทำให้ผู้ใช้รู้สึกว่าการคลิกนั้นไม่ถูกต้อง ดังที่แสดงด้านล่าง:

หากวัตถุ B มีความโปร่งใสและอยู่ติดกับวัตถุ A หากบุคคลที่สามพยายามติดต่อกับวัตถุ A และพบเฉพาะวัตถุ B การติดต่อทั้งหมดกับ A จะไม่ถูกต้อง
ณ จุดนี้ของการวิเคราะห์ สิ่งที่เราต้องทำคือสร้าง div ด้วยเอฟเฟกต์พิเศษนี้ ในการวิเคราะห์ขั้นสุดท้าย ยังคงเป็นการผลิตและแอปพลิเคชัน CSS
สามารถรับเอฟเฟกต์ความโปร่งใสสีเข้มได้ผ่านแอตทริบิวต์ตัวกรองของ CSS และกำหนด bgdiv สไตล์ใหม่ใหม่
.bgdiv
-
พื้นหลัง:#ccc; /* สีพื้นหลัง*/
ความทึบ:.3; /* ความโปร่งใส*/
ตัวกรอง: อัลฟ่า(ความทึบ=30); /* ตัวกรองโปร่งใส*/
position:absolute; /* ตำแหน่งของวัตถุสไตล์ที่ใช้ในเพจจะปรากฏขึ้น */
z-index:1000; /* ค่าของพิกัด z ของวัตถุสไตล์ที่ใช้ในหน้าเว็บ*/
width:500px; /* ความกว้างของวัตถุสไตล์ที่ใช้*/
height:500px; /*ความสูงของวัตถุสไตล์ที่ใช้*/
top: 0px; /* ระยะห่างระหว่างวัตถุสไตล์ที่ใช้กับด้านบนของหน้า*/
left: 0px; /* ระยะห่างระหว่างวัตถุสไตล์ที่ใช้กับด้านซ้ายสุดของหน้า*/
-

ในบริเวณร่างกาย ให้เติม:
, รันไฟล์, เอฟเฟกต์จะเป็นดังนี้:

ณ จุดนี้ การออกแบบ UI เสร็จสมบูรณ์ แต่ขนาดของ div ที่เราเห็นคือ 500*500 ซึ่งไม่เต็มหน้า และช่องรอไม่ได้อยู่ตรงกลาง และเอฟเฟกต์ก็มองเห็นได้ตั้งแต่ต้นแล้ว เห็นได้ชัดว่าไม่สามารถทำได้โดยตรง เมื่อใช้งานจริง เราจำเป็นต้องมีพื้นหลังให้เต็มหน้า กล่องรอ จะต้องแสดงตรงกลาง และเราต้องควบคุมได้ว่าจะให้เอฟเฟกต์ปรากฏขึ้นเมื่อใดและจะหายไปเมื่อใด
จากนั้นงานเหล่านี้จะต้องทำให้เสร็จโดย JavaScript
JavaScript สามารถควบคุมองค์ประกอบคงที่เกือบทั้งหมดบนเพจได้ และเอฟเฟกต์ข้างต้นทำได้อย่างเป็นทางการโดยการควบคุม div พื้นหลังและกล่องรอ
ใน JavaScript วิธีที่ง่ายที่สุดในการรับองค์ประกอบบนเพจคือการกำหนดค่าให้กับแอตทริบิวต์ ID ของออบเจ็กต์เป้าหมาย จากนั้นรับผ่าน getElementbyId ของ JavaScript
ที่นี่ ขั้นแรกให้กำหนดค่าให้กับแอตทริบิวต์ ID ของ bgdiv เช่น:

เรามาแก้ปัญหาแรกกันก่อน ซึ่งก็คือการกำหนดขนาดของเลเยอร์ให้เต็มทั้งหน้าด้วย javascript
ฟังก์ชั่น showbg()
-
var bgdiv=document.getElementById("bgdiv"); // รับวัตถุ bgdiv
bgdiv.style.width=document.body.clientWidth; //ตั้งค่าความกว้างของวัตถุ bgdiv เป็นความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ
if (document.body.clientHeight>document.body.scrollHeight) //ตั้งค่าความสูงของวัตถุ bgdiv เป็นความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ
bgdiv.style.height=document.body.clientHeight;
อื่น
bgdiv.style.height=document.body.scrollHeight;
-
สิ่งที่ต้องอธิบายที่นี่คือทั้ง clientWidh และ scrollWidth แสดงถึงความกว้างของพื้นที่ภาพ ข้อแตกต่างคือ หากมีแถบเลื่อนในหน้าเว็บ ดังนั้น scollWidth จะมากกว่า clientWidth เนื่องจาก scollWidth รวมแถบเลื่อนไปที่ ? ??????? ส่วนในขณะที่ clientWidth ไม่ได้เป็นเพียงส่วนที่มองเห็นได้
ในฟังก์ชันด้านบนนี้ clientWidth จะถูกใช้เป็นความกว้าง เนื่องจากตามหลักการพื้นฐานของการออกแบบเว็บ การออกแบบหน้าเว็บที่มีแถบเลื่อนแนวนอนนั้นค่อนข้างไม่เป็นมิตร เนื่องจากเมาส์สามารถเลื่อนขึ้นลงได้เท่านั้น แต่ไม่สามารถเลื่อนไปทางซ้ายได้ ไปทางขวา ดังนั้น การรับ clientWidth โดยตรงหมายถึงการทำให้แน่ใจว่าจะไม่มีแถบเลื่อนแนวนอนปรากฏขึ้นในโปรเจ็กต์ทั้งหมด
การตั้งค่าความสูงด้านล่างคำนึงถึงความเข้ากันได้ทั้งแบบมีและไม่มีแถบเลื่อนแนวตั้ง
ฟังก์ชั่นด้านบนช่วยให้มั่นใจได้ว่า bgdiv ที่เรียกว่าสามารถเต็มหน้าจอได้

ในโฟลเดอร์ inc ให้สร้างไฟล์จาวาสคริปต์ใหม่ คัดลอกฟังก์ชันด้านบนลงไป และเพิ่มโค้ดต่อไปนี้ลงในหน้าเพื่อแนะนำฟังก์ชัน

เพื่ออำนวยความสะดวกในการแสดงผล ให้เพิ่ม onload="showbg();" ในแท็ก body หลังจากโหลดเพจแล้ว คุณจะเห็นว่า bgdiv ที่ปรับแล้วเต็มทั้งหน้า
หลักการปรับตำแหน่งการแสดงผลของกล่องรอจะคล้ายกัน ฟังก์ชั่นคือ:
ฟังก์ชั่น showwait()
-
showbg(); // แสดง bgdiv
var Loading=document.getElementById("loaddiv");//รับวัตถุที่กำลังโหลด
Loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//กำหนดระยะการโหลดจากด้านบน
Loading.style.left=document.body.clientWidth/2-110;//กำหนดระยะห่างระหว่างการโหลดและปลายด้านซ้าย
-
โทร showwait ในเหตุการณ์ onload เพื่อแสดงกล่องรอบนพื้นหลังโปร่งใสสีเข้ม

สิ่งที่ต้องเน้นที่นี่คือแอตทริบิวต์ตำแหน่งของแอตทริบิวต์ CSS ต้องตั้งค่าแอตทริบิวต์นี้ให้เป็นค่าสัมบูรณ์เพื่อให้โค้ดด้านบนมีประสิทธิภาพ เนื่องจากตำแหน่งของโค้ดด้านบนจะถูกตั้งค่าตามตำแหน่งที่แน่นอน

เอฟเฟกต์ด้านบนจะแสดงทันทีที่เปิดเพจ หากคุณต้องการควบคุมว่าจะแสดงหรือไม่ คุณต้องใช้การแสดงแอตทริบิวต์ CSS เมื่อค่าถูกบล็อก ค่านั้นจะถูกแสดง และเมื่อไม่มีค่าใดเลย จะไม่ปรากฏ

เราได้เพิ่ม display: none ให้กับแอตทริบิวต์ CSS ข้างต้น ดังนั้นเอฟเฟกต์จะไม่ปรากฏขึ้นเมื่อเปิดเพจ

จากนั้นเพิ่ม bgdiv.style.display="block" ในฟังก์ชัน showbg

เพิ่ม Loading.style.display="none" ให้กับฟังก์ชัน showwait

เพิ่มการแสดงผลในพื้นที่เนื้อหาของหน้าและเรียกใช้เพจเท่านั้นที่สามารถมองเห็นได้หลังจากคลิกลิงค์แสดงผลแล้วเอฟเฟกต์ที่เราต้องการจะแสดงดังแสดงในรูป:

เอฟเฟกต์ที่ปรากฏจะไม่หายไป ในงานศึกษาประจำวันของฉัน ผู้เขียนยังได้ค้นพบปรากฏการณ์หนึ่งเมื่อคลิกลิงก์บนเพจ (นั่นคือ การส่งคำขอไปยังเซิร์ฟเวอร์) เมื่อเซิร์ฟเวอร์ประมวลผลไม่เสร็จและยังไม่ได้ส่งคืนเพจนั้นไปยังไคลเอนต์ เพจนั้นจะไม่อยู่ที่นั่น การเปลี่ยนแปลง และสิ่งที่เรียกว่าความเร็วเครือข่ายที่ช้าก็เป็นเช่นนี้เช่นกัน จากนั้น หากเหตุการณ์ showwait ถูกทริกเกอร์เมื่อมีการคลิกลิงก์ เอฟเฟกต์จะปรากฏขึ้นจนกว่าเซิร์ฟเวอร์ประมวลผลคำขอเสร็จสิ้น และเพจถูกเปลี่ยนเส้นทางและหายไป

เช่น ถ้าเราเปลี่ยนโค้ดที่แสดงให้แสดงแล้วเปิดเพจแล้วคลิกแสดง เราจะเห็นว่ากล่องรอปรากฏขึ้น และเมื่อเพจหายไป หน้าแรกของซันก็ปรากฏขึ้น
ลองย้อนกลับไปดู ที่จริงแล้ว ไม่มีอะไรพิเศษเกี่ยวกับตัวอย่างนี้ เพียงแต่ว่าข้อกำหนดสำหรับ HTML, CSS และ javascript นั้นสูงมาก หากคุณคุ้นเคยกับองค์ประกอบคงที่ทั้งสามนี้เท่านั้นที่จะเข้าใจได้ดี และที่นี่ยังมีข้อกำหนดบางประการสำหรับศิลปินอีกด้วย ควรสังเกตว่าผู้เขียนไม่ได้จัดทำรูปภาพเลื่อนและภาพพื้นหลังของการรอคอย เป็นรูปภาพของเฟรมต่อ ต่อ
เป็นที่น่าสังเกตว่าตัวแก้ไขของ Netbeans 6.1 มีการสนับสนุนพร้อมท์ที่หลากหลายสำหรับ JavaScript ไม่เพียงแต่รองรับคำหลักเท่านั้น แต่ยังพร้อมท์สำหรับเบราว์เซอร์ที่เข้ากันได้ และยังมีตัวอย่างง่ายๆ อีกด้วย

บทความนี้ใช้พื้นที่มากในการอธิบายตัวอย่างที่ไม่ซับซ้อน จุดประสงค์คือเพื่อให้ผู้อ่านได้รับการวิเคราะห์เชิงลึกเกี่ยวกับวิธีพัฒนา RIA ของตนเองผ่านการคิดโดยละเอียดและกระบวนการพัฒนา

จะเห็นได้ว่าในการสร้าง RIA ประเภทนี้ แม้ว่าคุณจะยังต้องมีพื้นฐานทางศิลปะและความสามารถในการออกแบบหน้าอยู่บ้าง แต่ขั้นตอนการผลิตขั้นพื้นฐานนั้นไม่มีอะไรมากไปกว่าสองขั้นตอนต่อไปนี้:

1. สร้าง UI ของคุณเองโดยใช้ HTML และ CSS

2. ศึกษาโหมดพฤติกรรมของเพจอย่างรอบคอบ และเขียนจาวาสคริปต์เพื่อควบคุม UI

ในบทความถัดไป ผู้เขียนจะแนะนำให้คุณรู้จักกับตัวอย่างที่ซับซ้อนและครอบคลุมมากขึ้น รวมถึงกล่องโต้ตอบป๊อปอัป เมนูป๊อปอัป เลเยอร์เอฟเฟกต์พิเศษ และการลากหน้าต่าง