DATABINDING

‏ • 24 ביולי, 2002

במאמר הקודם התיחסנו ליצירת XML בעזרת ASP.
במאמר זה נראה את הדרך הפשוטה ביותר להצגת תוכן הXML בדף אינטרנט DATABINDING.
DATABINDING היא שיטה להטמעת תוכן בדפי HTML . השיטה יושמה לראשונה בDHTML כאשר בעזרת פקד שהיה מוטבע בדפדפן [IE4]ניתן היה להטמיע תוכן של קובץ TEXT. [ישנו שימוש לזה בDW הישן]. משום מה השיטה לא נקלטה בקרב המתכנתים [אולי בגלל שימוש בACTIVX בצד לקוח].
בXML השימוש הנפוץ ביותר ל DATABINDING הוא בעזרת טבלה [ועל זה נדבר במאמר ]אולם ניתן להטמיע את XML בתגיות הבאות
על מנת להטמיע את המידע בתוך תגיות אנו נשתמש במאפיין DATASRC וDATAFLD של תגיות הרשומות.

נפתח את המסמך HTML שלנו כרגיל


1
2
3
4
5  

<html>
 <head>
    <link rel="stylesheet" type="text/css" href="../scripts/beta.css">
    <title>ברוכים הבאים</title>
    <meta http–equiv="Content-Type" content="text/html; charset=iso-8859-8-i">

ובתוך הHead ניצור אי של XML. נשתמש בתגית <XML> . זהו מעין "אי" של מידע [DATA ISLAND]. ניתן לו ID בצורה הבאה:


1
2
3
4
5
6
7
8
9
10
11
12  

<XML id="xmlData">
<?xml version="1.0"?>
    <members>
        <member>רועי עובדיה</member>
        <member>ליאור שמש        </member>
        <member>הילדה בלבן        </member>
        <member>זוהר פלד        </member>
        <member>igalR        </member>
        <member>בוב והמסטיק    </member>

    </members>
</XML>

ניתן לקשר לקובץ XML חיצוני או לחלופין לקובץ ASP שיוצר XML.


1
2  

<XML id=" xmlData" SRC="theData.xml"> </XML>
<XML id=" xmlData" SRC="theData.ASP"> </XML>

ברגע זה יצרנו אובייקט במסמך שהDOM של הHTML מזהה. עכשו ניתן לקרוא לו בJS.

נסגור את Head ונפתח את הBODY. ניצור טבלה וניתן לה את המאפיין DATASRC עם הID של הXML, וניתן גם שם לטבלה [לקחתי שם בצרפתית – LaTable ?] אם משתמשים בCSS זה הזמן לרשום את הCLASS של הטבלה. על מנת להגביל את מספר התצוגות בטבלה נשתמש במאפיין datapagesize. אני אגביל את זה ל25 רשימות.


1
2
3
4
5
6  

<table datasrc="#xmlData" ID="LaTable" datapagesize="25" >
     <Thead>
     <TR>
          <TD>כינוי</TD>
        </TR>
    </Thead>

על מנת ליצור את כותרת השתמשתי בתגית <Thead> . על מנת ליצור את גוף הטבלה שמשתכפל נשתמש בתגית <TBody>. היות והתגית <TD> לא מקבלת DATAFFLD נשתמש באחת התגיות האחרות כמו DIV או SPAN.


1
2
3
4
5
6  

  <TBody>
    <TR>
       <TD><DIV DATAFLD=" member" > </DIV> </TD>
    </TR>
  </TBody>
</table>

למעשה כרגע הטמענו את המידע שנימצא בתוך התגית member לתוך התא המתאים. שימו לב לקוד HTML הקצר [טבלה רק עם הכותרת והתאים]אם יש לנו יותר ענף אחד בXML פשוט משכפלים את הTD ונותנים בDATASRC את השם של התגית XML.

הגלילה

על מנת ליצור את הגלילה בXML אני אשתמש במאפיינים lastPage, firstPage, previousPage, nextPage של הטבלה. מכיוון שהטבלה היא כרגע אובייקט בדף [שגם משמש בתור רקורדסט אני יכול להפעיל עליה את המאפיינים האלה [דרך אגב, אפשר גם בHTML רגיל אבל זה למאמר אחר]].


1
2
3
4
5
6  

<DIV align=center>
     <INPUT type="button" value="lastPage" id="lastPage" name="lastPage" onclick=" LaTable.lastPage()">
     <INPUT type="button" value="previousPage" id="previousPage" name="previousPage" onclick=" LaTable.previousPage()">
     <INPUT type="button" value="movenext" id="movenext" name="movenext" onclick=" LaTable.nextPage()">
     <INPUT type="button" value="firstPage" id="firstPage" name="firstPage" onclick=" LaTable.firstPage()">
</DIV>

סיכום ביניים

הכל ברור ? פשוט לא? פה יש לנו .XML די פשוט [של רמה אחת] אבל מה קורה אם יש לי כמה רמות בתוך הXML? פשוט. עושים טבלה מקוננת בתוך הTD הרצוי, ולה נותנים את הDATASRC של הרמה המבוקשת. זה ניראה משהו כזה


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51  

<XML id="xmlData">
<?xml version="1.0"?>
    <members>
        <member id="1">
            <fname>    רועי    </fname>
            <lname>    עובדיה    </ lname >
    </member>
        <member id="1">
            <fname>    ליאור    </fname>
            <lname>    שמש    </ lname >
    </member>
        <member id="1">
            <fname>    הילדה    </fname>
            <lname>    בלבן    </ lname >
    </member>
        <member id="1">
            <fname>    זוהר    </fname>
            <lname>    פלד    </ lname >
    </member>
        <member id="1">
            <fname>    igalR    </fname>
            <lname>        </ lname >
    </member>
        <member id="1">
            <fname>    בוב    </fname>
            <lname>    והמסטיק    </ lname >
    </member>

    </members>
</XML>

<table datasrc="# member" >
   <TR>
        <TD>
     <table datasrc="#xmlData" ID="LaTable" datapagesize="25" >
     <Thead>
     <TR>
         <TD>שם פרטי </TD>
         <TD>שם משפחה </TD>
         </TR>
     </Thead>
     <TBody>
     <TR>
         <TD><DIV DATAFLD=" fname" > </DIV> </TD>
         <TD><DIV DATAFLD=" lname" > </DIV> </TD>
        </TR>
     </TBody>
     </table>
    </TD>
  </TR>
</table>

הטמעה שלא בתוך טבלה –
טוב הנושא הזה ממש פשוט – לרשום את גם את הDATAFLD וגם את הDATASRC…


1  

<div id ="roee" datasrc="#members" datafld="member>"

וגם על הDIV אפשר לרוץ עם כפתורים.

לחץ כאן להרצת הדוגמא

בהצלחה!
רועי

תגיות: , , , , ,

רועי

מאמרים נוספים של רועי

עוד בנושא זה

תגובות בפייסבוק

תגיות

.net ASP ASP.Net ASP.NET MVC C# CMS CSHTML CSS Database DB DHTML DOM Dynamic HTML HTML5 JavaScript JS PHP Reference SEO SilverLight SQL VBS Visual Studio W3C WAP WebMatrix Windows Phone wml WPF בניית אתרים בסיס נתונים דינמי דרופל הרצאות בוידאו וורדפרס מדריך סלולארי פורום צד לקוח פורום צד שרת פיתוח צד לקוח צד שרת קידום קידום אתרים