מדריך למשתמש ביטול

אודות XML ו-XSLT

חפש

עודכן לאחרונה בתאריך 20 במאי 2021

השתמש ב-XML וב-XSLT בדפי אינטרנט של Dreamweaver.

הערה:

ממשק המשתמש הפך לפשוט יותר ב-Dreamweaver CC ואילך. כתוצאה מכך, ייתכן שלא תמצא חלק מהאפשרויות המתוארות במאמר זה ב-Dreamweaver CC ואילך. לקבלת מידע נוסף, עיין במאמר זה.

שימוש ב-XML וב-XSL בדפי אינטרנט

Extensible Markup Language ‏(XML) היא שפה המאפשרת להבנות מידע. בדומה ל-HTML‏, XML מאפשר להבנות את המידע בעזרת תגים, אך תגי XML אינם מוגדרים מראש כמו תגי HTML. במקום זאת, XML מאפשר ליצור תגים המגדירים באופן הטוב ביותר את מבנה הנתונים (סכימה) שלך. תגים מקוננים בתוך תגים אחרים כדי ליצור סכימה של תגי אב ותגים בנים. כמו רוב תגי HTML, כל התגים בסכימת XML חייבים לכלול תג פותח ותג סוגר.

הדוגמה הבאה מציגה את המבנה הבסיסי של קובץ XML:

<?xml version=“1.0”> 
<mybooks> 
    <book bookid=“1”> 
        <pubdate>03/01/2004</pubdate> 
        <title>Displaying XML Data with Adobe Dreamweaver</title> 
        <author>Charles Brown</author> 
    </book> 
    <book bookid=“2”> 
        <pubdate>04/08/2004</pubdate> 
        <title>Understanding XML</title> 
        <author>John Thompson</author> 
    </book> 
</mybooks>

בדוגמה זו, כל תג אב <book> כולל שלושה תגים בנים: <pubdate>‏, <title> ו- <author>. אך כל תג <book> הוא גם תג בן של התג <mybooks>, הנמצא רמה אחת גבוה יותר בסכימה. ניתן לתת שמות ולהבנות תגי XML בכל דרך שהיא, בתנאי שמקוננים תגים בהתאם בתוך תגים אחרים, ומקצים לכל תג פותח תג סוגר מקביל.

מסמכי XML אינם כוללים עיצוב – אלה הם פשוט מכלים למידע מובנה. לאחר שיש לך סכימת XML, ניתן להשתמש בשפת XSL ‏(Extensible Stylesheet Language) כדי להציג את המידע. כפי ש-Cascading Style Sheets ‏(CSS) מאפשרים לעצב HTML,‏ XSL מאפשר לעצב נתוני XML. ניתן להגדיר סגנונות, רכיבי דף, פריסה וכן הלאה בקובץ XSL ולצרף אותו לקובץ XML. כאשר המשתמש יצפה בנתוני XML בדפדפן, הנתונים יעוצבו בהתאם להגדרות בקובץ XSL. התוכן (נתוני XML) והתצוגה שלו (המוגדרת באמצעות קובץ XSL) הם נפרדים לחלוטין, ומעניקים יתר שליטה על אופן התצוגה של המידע בדף האינטרנט. באופן עקרוני, XSL היא טכנולוגיית תצוגה לקובצי XML, כשהפלט הראשי הוא דף HTML.

Extensible Stylesheet Language Transformations ‏(XSLT) היא תת-שפה של XSL המאפשרת להציג נתוני XML בדף אינטרנט ו"להמיר" אותם, יחד עם סגנונות XSL, לנתוני סגנון HTML ניתנים לקריאה. ניתן להשתמש ב-Dreamweaver ליצירת דפי XSLT המאפשרים לבצע המרות XSL בעזרת שרת יישומים או דפדפן. בהמרות XSL מצד השרת, השרת מבצע את עבודת ההמרה של XML ו-XSL ומציג את הנתונים בדף. בהמרות מצד הלקוח, הדפדפן (כגון Internet Explorer) מבצע את העבודה.

הגישה שתנקוט (המרות מצד השרת לעומת המרות מצד הלקוח) תלויה בתוצאה הסופית שאתה מנסה לקבל, בטכנולוגיות הזמינות, ברמת הגישה לקובצי המקור מסוג XML ובגורמים אחרים. לכל אחת משתי הגישות יש יתרונות וחסרונות משלה. לדוגמה, המרות מצד השרת פועלות בכל הדפדפנים, ואילו המרות מצד הלקוח מוגבלות לדפדפנים חדשים יותר (Internet Explorer 6‏, Netscape 8‏, Mozilla 1.8 ו-Firefox 1.0.2). המרות מצד השרת מאפשרות להציג נתוני XML באופן דינמי מהשרת שלך או מכל מקום אחר ברשת האינטרנט, ואילו המרות מצד הלקוח חייבות להשתמש בנתוני XML המאוחסנים מקומית בשרת האינטרנט שלך. לבסוף, המרות מצד השרת דורשות שתפרוס את הדפים בשרת יישומים מוגדר מראש, ואילו המרות מצד הלקוח דורשות גישה לשרת אינטרנט בלבד.

לקבלת ערכת לימוד בנושא הבנת XML, ראה www.adobe.com/go/vid0165_il.

המרות XSL מצד השרת

Dreamweaver מספק שיטות ליצירת דפי XSLT המאפשרים לבצע המרות XSL מצד השרת. כששרת יישומים מבצע המרות XSL, הקובץ הכולל את נתוני XML יכול להיות מאוחסן בשרת משלך, או בכל מקום אחר ברשת האינטרנט. בנוסף, כל דפדפן יכול להציג את הנתונים לאחר ההמרה. עם זאת, פריסת דפים להמרות מצד השרת היא מורכבת למדי, ודורשת גישה לשרת יישומים.

בעבודה עם המרות מצד השרת, ניתן להשתמש ב-Dreamweaver ליצירת דפי XSLT המפיקים מסמכי HTML מלאים (דפי XSLT שלמים) או מקטעי XSLT היוצרים חלק ממסמך HTML. דף XSLT מלא דומה לדף HTML רגיל. הוא כולל תג <body> ותג <head>, ומאפשר להציג שילוב של נתוני HTML ו-XML בדף. מקטע XSLT הוא קטע קוד, המשמש למסמך נפרד, ומציג נתוני XML מעוצבים. שלא כמו דף XSLT שלם, זהו קובץ עצמאי שאינו כולל תג <body> או <head>. אם ברצונך להציג נתוני XML בדף נפרד, יש ליצור דף XSLT מלא ולקשר אליו את נתוני XML הרצויים. מצד שני, אם ברצונך להציג נתוני XML במקטע מסוים בדף דינמי קיים – לדוגמה דף בית דינמי לחנות של מוצרי ספורט, עם תוצאות ממשחקי ספורט מהזנות RSS המוזנות בצד אחד של הדף – ניתן ליצור מקטע XSLT ולהוסיף הפניה למקטע זה בדף הדינמי. התרחיש הנפוץ הוא יצירת מקטעי XSLT ושימוש בהם בצירוף לדפים דינמיים אחרים לתצוגת נתוני XML.

הצעד הראשון ביצירת סוגי דפים אלה הוא ליצור מקטע XSLT. זהו קובץ נפרד הכולל את הפריסה, העיצוב וכולי של נתוני XML שברצונך להציג בסופו של דבר בדף הדינמי. לאחר יצירת מקטע XSLT, ניתן להוסיף הפניה למקטע בדף הדינמי (לדוגמה, דף PHP או ColdFusion). ההפניה שנוספת למקטע פועלת כמו SSI ‏(Server Side Include) – נתוני XML המעוצבים (המקטע) מאוחסנים בקובץ נפרד, ואילו בתצוגת Design מופיע מציין מיקום למקטע בדף הדינמי עצמו. כשדפדפן מבקש את הדף הדינמי הכולל את ההפניה למקטע, השרת מעבד את ההוראה הנכללת ויוצר מסמך חדש, שבו התוכן המעוצב של המקטע מופיע במקום מציין המיקום.

A. הדפדפן מבקש לקבל דף דינמי B. שרת האינטרנט מוצא את הדף ומעביר אותו לשרת היישומים C. שרת היישומים סורק את הדף לקבלת הוראות ומקבל את מקטע XSLT‏ D. שרת היישומים מבצע המרה (קורא את מקטע XSLT, מקבל נתוני XML ומעצב אותם) E. שרת היישומים מוסיף את המקטע לאחר ההמרה לדף ומעביר אותו בחזרה לשרת האינטרנט F. שרת האינטרנט שולח את הדף הגמור לדפדפן

ניתן להשתמש בהתנהגות המרת XSL של השרת כדי להוסיף את ההפניה למקטע XSLT בדף דינמי. כשמוסיפים את ההפניה, Dreamweaver יוצר את התיקייה includes/MM_XSLTransform/‎ בתיקיית השורש של האתר, הכוללת קובץ ספרייה של זמן הריצה. שרת היישומים משתמש בפונקציות שהוגדרו בקובץ זה בשעת המרת נתוני XML שצוינו. הקובץ אחראי להביא את נתוני XML ואת מקטעי XSLT, לבצע המרת XSL, ולהפיק את התוצאות בדף האינטרנט.

הקובץ הכולל את מקטע XSLT, קובץ XML הכולל את הנתונים וקובץ הספרייה של זמן הריצה שנוצר חייבים להימצא כולם בשרת כדי שהדף יוצג כהלכה. ‏(אם תבחר קובץ XML מרוחק כמקור הנתונים – קובץ מהזנת RSS, לדוגמה – קובץ זה חייב כמובן להיות מאוחסן במקום אחר ברשת האינטרנט).

ניתן גם להשתמש ב-Dreamweaver ליצירת דפי XSLT שלמים לשימוש בהמרות מצד השרת. דף XSLT שלם פועל בדיוק כמו מקטע XSLT. רק אחרי שמוסיפים את ההפניה לכל דף XSLT בעזרת התנהגות המרת XSL של השרת, מוסיפים את כל התוכן לדף HTML. באופן זה, הדף הדינמי (דף CFM‏, PHP או ASP הפועל בדף המכל) חייב להיות נקי מנתוני HTML לפני שמוסיפים את ההפניה.

Dreamweaver תומך בהמרות XSL לדפי ColdFusion‏, ASP ו-PHP.

הערה:

השרת חייב להיות מוגדר כהלכה כדי לבצע המרות מצד השרת. למידע נוסף, פנה למנהל השרת.

המרות XSL מצד הלקוח

ניתן לבצע המרות XSL במחשב הלקוח מבלי להשתמש בשרת יישומים. ניתן להשתמש ב-Dreamweaver ליצירת דף XSLT מלא שיבצע זאת. עם זאת, המרות מצד הלקוח דורשות טיפול בקובץ XML הכולל את הנתונים שברצונך להציג. בנוסף, המרות מצד הלקוח פועלות רק בדפדפנים מתקדמים (Internet Explorer 6‏, Netscape 8‏, Mozilla 1.8 ו-Firefox 1.0.2).

צור תחילה דף XSLT וקשר אותו למקור נתונים מסוג XML.‏ (Dreamweaver ישאל אם ברצונך לקשר את מקור הנתונים כשאתה יוצר דף חדש.) ניתן ליצור דף XSLT מאפס, או להמיר דף HTML קיים לדף XSLT. כשממירים דף HTML קיים לדף XSLT, יש לקשר מקור נתונים מסוג XML מהחלונית Bindings ‏(Window >‏ Bindings).

לאחר יצירת דף XSLT, יש לקשר אותו לקובץ XML הכולל את נתוני XML הדרושים באמצעות הוספת הפניה לדף XSLT בקובץ XML עצמו (כפי שמוסיפים הפניה לגיליון סגנונות CSS חיצוני באזור <head> של דף HTML). המבקרים באתר חייבים לראות את קובץ XML (ולא את דף XSLT) בדפדפן. כשהמבקרים באתר יראו את הדף, הדפדפן יבצע את המרות XSL ויציג את נתוני XML, המעוצבים על-ידי דף XSLT המקושר.

היחס בין דף XML לבין דף XSLT המקושר אליו הוא דומה מבחינה מושגית, ועם זאת שונה מהמודל של דף HTML/גיליון CSS חיצוני. כשיש דף HTML הכולל תוכן (כגון טקסט), ניתן להשתמש בגיליון סגנונות חיצוני לעיצוב התוכן. דף HTML קובע את התוכן, וקוד CSS החיצוני, שהמשתמש אינו רואה לעולם, קובע את התצוגה. ב-XSLT ו-XML המצב הפוך. קובץ XML (שהמשתמש אינו רואה לעולם בצורתו הגולמית) קובע את התוכן, ואילו דף XSLT קובע את התצוגה. דף XSLT כולל את הטבלאות, הפריסה, הגרפיקה וכולי שדף HTML סטנדרטי כולל בדרך כלל. כשמשתמש מתבונן בקובץ XML בדפדפן, דף XSLT מעצב את התוכן.

A. הדפדפן מבקש לקבל קובץ XML B. ‏השרת מגיב ושולח קובץ XML לדפדפן C. הדפדפן קורא את הנחיות XML וקורא לקובץ XSLT‏ D. ‏השרת שולח קובץ XSLT לדפדפן E. הדפדפן ממיר את נתוני XML ומציג אותם בדפדפן

כשמשתמשים ב-Dreamweaver לקישור דף XSLT לדף XML, ‏Dreamweaver מוסיף את הקוד המתאים בראש דף ה-XML. אם דף XML שאתה מבצע אליו את הקישור נמצא ברשותך (כלומר אם קובץ XML מאוחסן אך ורק בשרת האינטרנט שלך), כל מה שאתה צריך לעשות הוא להשתמש ב-Dreamweaver להוספת הקוד המתאים המקשר את שני הדפים. כשקובץ XML נמצא ברשותך, המרות XSL המתבצעות על-ידי הלקוח הן דינמיות באופן מלא. כלומר, כל פעם שתעדכן את הנתונים בקובץ XML, כל פלט HTML המשתמש בדף XSLT המקושר יתעדכן אוטומטית במידע החדש.

הערה:

קובצי XML ו-XSL המשמשים להמרות מצד הלקוח חייבים להיות מאוחסנים באותה ספרייה. אם הם אינם מאוחסנים באותה ספרייה, הדפדפן יקרא את קובץ XML וימצא את דף XSLT לצורך ההמרה, אך לא יצליח למצוא את המשאבים (גיליונות סגנונות, תמונות וכולי) המוגדרים על-ידי קישורים יחסיים בדף XSLT.

אם דף XML שאתה מבצע אליו את הקישור אינו נמצא ברשותך (לדוגמה, אם ברצונך להשתמש בנתוני XML מהזנת RSS במקום אחר באינטרנט), תהליך העבודה הוא מורכב קצת יותר. לביצוע המרות מצד הלקוח בעזרת נתוני XML ממקור חיצוני, יש להוריד תחילה את קובץ המקור מסוג XML לאותה ספרייה שבה מאוחסן דף XSLT המתאים. כשדף XML מאוחסן באתר המקומי, ניתן להשתמש ב-Dreamweaver כדי להוסיף את הקוד המתאים שיקשר אותו לדף XSLT, ולהעלות את שני הדפים (קובץ XML שהורדת ודף ה-XSLT המקושר) לשרת האינטרנט שלך. כשהמשתמש צופה בדף XML בדפדפן, דף XSLT מעצב את התוכן, ממש כמו בדוגמה הקודמת.

החיסרון של ביצוע המרות XSL מצד הלקוח על נתוני XML המגיעים ממקור חיצוני הוא שנתוני XML הם "דינמיים" באופן חלקי בלבד. קובץ XML שתוריד ותשנה יהיה רק "תצלום בזק" של הקובץ המאוחסן במקום אחר באינטרנט. אם קובץ XML המקורי באינטרנט משתנה, יש להוריד שוב את הקובץ, לקשר אותו לדף XSLT, ולחזור ולהעלות את קובץ XML לשרת האינטרנט שלך. הדפדפן יעבד רק את הנתונים שהוא יקבל מקובץ XML בשרת האינטרנט שלך, ולא נתונים הנכללים בקובץ XML המקורי.

נתוני XML ורכיבים חוזרים

אובייקט XSLT מסוג אזור חוזר מאפשר להציג רכיבים חוזרים מקובץ XML בעמוד כל אזור הכולל מציין מיקום לנתוני XML ניתן להפוך לאזור חוזר. עם זאת, האזורים הנפוצים ביותר הם טבלה, שורה בטבלה או מספר שורות בטבלה.

הדוגמה הבאה מציגה כיצד אובייקט XSLT של אזור חוזר מוחל על שורה בטבלה המציגה נתוני תפריט של מסעדה. השורה הראשונית מציגה שלושה רכיבים שונים מסכימת XML: פריט, תיאור ומחיר. כשאובייקט XSLT של אזור חוזר מוחל על השורה בטבלה, והדף מעובד על-ידי שרת יישומים או דפדפן, הטבלה חוזרת על עצמה עם נתונים ייחודיים הנוספים בכל שורה חדשה בטבלה.

כשמחילים אובייקט XSLT מסוג אזור חוזר בחלון המסמך, מסגרת אפורה דקה מופיעה מסביב לאזור החוזר. כשאתה מציג תצוגה מקדימה של עבודתך בדפדפן (File >‏ Preview in Browser), המסגרת האפורה נעלמת והבחירה מתרחבת ומציגה את הרכיבים החוזרים שצוינו בקובץ XML, כמו באיור הקודם.

כשאתה מוסיף אובייקט XSLT מסוג אזור חוזר לדף, אורך מציין המיקום של נתוני XML בחלון המסמך נקטם. זאת משום ש-Dreamweaver מעדכן את ביטוי XPath (שפת XML Path) למציין המיקום של נתוני XML כך שהוא יחסי לנתיב של הרכיב החוזר.

לדוגמה, הקוד הבא הוא קוד של טבלה הכוללת שני מצייני מיקום דינמיים, שלא הוחל עליה אובייקט XSLT מסוג אזור חוזר:

<table width="500" border="1"> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/title"/></td> 
    </tr> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/description"/></td> 
    </tr> 
</table>

הקוד הבא הוא לאותה טבלה, שהוחל עליה אובייקט XSLT מסוג אזור חוזר:

<xsl:for-each select="rss/channel/item"> 
    <table width="500" border="1"> 
        <tr> 
            <td><xsl:value-of select="title"/></td> 
        </tr> 
        <tr> 
            <td><xsl:value-of select="description"/></td> 
        </tr> 
    </table> 
</xsl:for-each>

בדוגמה הקודמת, Dreamweaver עדכן את XPath לפריטים הנכללים באזור החוזר (כותרת ותיאור) כך שיהיו יחסיים ל-XPath בתגים הפותחים ובתגים הסוגרים ‎<xsl:for-each>‎, במקום לעדכן את כל המסמך.

Dreamweaver מפיק ביטויי XPath יחסיים להקשר גם במקרים אחרים. לדוגמה, אם תגרור מציין מיקום של נתוני XML לטבלה שכבר הוחל עליה אובייקט XSLT מסוג אזור חוזר, Dreamweaver יציג אוטומטית את XPath יחסית ל-XPath הקיים בתגים הפותחים והסוגרים ‎<xsl:for-each>‎.

תצוגה מקדימה של נתוני XML

כשמשתמשים באפשרות Preview in Browser ‏(File >‏ Preview in Browser) כדי להציג תצוגה מקדימה של נתוני XML שהוספת במקטע XSLT או בדף XSLT שלם, המנגנון המבצע את המרות XSL שונה ממצב למצב. בדפים דינמיים הכוללים מקטעי XSLT, שרת היישומים מבצע תמיד את ההמרות. במקרים אחרים, Dreamweaver או הדפדפן יכולים לבצע את ההמרה.

הטבלה הבאה מסכמת את המצבים בשעת שימוש בפקודה Preview in Browser, ואת המנגנונים המבצעים את ההמרות, בהתאמה:

סוג הדף המוצג בתצוגה מקדימה בדפדפן	המרת נתונים מתבצעת על-ידי
דף דינמי הכולל מקטע XSLT	שרת יישומים
מקטע XSLT או דף XSLT שלם	Dreamweaver
קובץ XML עם קישור לדף XSLT שלם	דפדפן

הנושאים הבאים מספקים הנחיות, שיסייעו לך להחליט מהן שיטות התצוגה המקדימה המתאימות ביותר, בהתאם לצורך.

תצוגה מקדימה של דפים להמרות מצד השרת

במקרה של המרות מצד השרת, התוכן שהמבקר באתר יראה בסופו של דבר מומר על-ידי שרת היישומים שלך. בשעת בניית רכיבי XSLT ודפים דינמיים לשימוש לצורך המרות מצד השרת, עדיף תמיד להציג בתצוגה מקדימה את הדף הדינמי הכולל את מקטע XSLT במקום את מקטע XSLT עצמו. בתרחיש הקודם משתמשים בשרת היישומים, המבטיח שהתצוגה המקדימה תהיה עקבית עם מה שהמבקר באתר יראה כשהוא יציג את הדף. בתרחיש האחרון, Dreamweaver מבצע את ההמרה, ועלול להציג תוצאות שאינן עקביות לגמרי. ניתן להשתמש ב-Dreamweaver לתצוגה מקדימה של מקטע XSLT תוך כדי בנייתו, אך ניתן לראות את התוצאות המדויקות ביותר של עיבוד הנתונים אם משתמשים בשרת היישומים לתצוגה מקדימה של הדף הדינמי לאחר הוספת מקטע XSLT.

תצוגה מקדימה של דפים להמרות מצד הלקוח

במקרה של המרות מצד הלקוח, התוכן שהמבקר באתר יראה בסופו של דבר מומר על-ידי דפדפן. ניתן לבצע זאת בעזרת הוספת קישור מקובץ XML לדף XSLT. אם תפתח קובץ XML זה ב-Dreamweaver ותציג תצוגה מקדימה שלו בדפדפן, אתה מאלץ בכך את הדפדפן לטעון את קובץ XML ולבצע את ההמרה. הדבר מספק לך אותה חוויה כשל המבקר באתר.

אך שימוש בגישה זו מקשה על ניפוי השגיאות בדף, משום שהדפדפן ממיר את נתוני XML ויוצר את דף HTML באופן פנימי. אם תבחר באפשרות View Source בדפדפן כדי לנפות שגיאות ב-HTML שייווצר, תראה רק את נתוני XML המקוריים שקיבל הדפדפן, ולא את קוד HTML המלא (תגים, סגנונות וכולי) האחראי לעיבוד הדף. כדי לראות את קוד HTML המלא בשעת צפייה בקוד המקור, יש להציג במקום זאת תצוגה מקדימה של דף XSLT בדפדפן.

תצוגה מקדימה של דפי XSLT מלאים ושל מקטעי XSLT

בשעת יצירת דפי XSLT מלאים ומקטעי XSLT, ודאי תרצה להציג תצוגה מקדימה של עבודתך כדי לוודא שהנתונים מוצגים כהלכה. אם תשתמש בפקודה Preview in Browser כד להציג דף XSLT שלם או מקטע XSLT, ‏Dreamweaver יבצע את ההמרות בעזרת מנגנון המרה מובנה. שיטה זו מציגה תוצאות מהירות, ומקלה עליך להמשיך לבנות את הדף ולנפות בו שגיאות. היא גם מספקת דרך לצפות בקוד HTML המלא (תגים, סגנונות וכולי) בעזרת בחירה באפשרות View Source בדפדפן.

הערה:

שיטה זו של תצוגה מקדימה משמשת לרוב כשמתחילים לבנות דפי XSLT, ללא קשר אם אתה משתמש בהמרת נתונים מצד הלקוח או השרת.

פריטים דומים נוספים

קבל עזרה במהירות ובקלות

משתמש חדש?

אודות XML ו-XSLT

שימוש ב-XML וב-XSL בדפי אינטרנט

המרות XSL מצד השרת

המרות XSL מצד הלקוח

נתוני XML ורכיבים חוזרים

תצוגה מקדימה של נתוני XML

פריטים דומים נוספים

קבל עזרה במהירות ובקלות

שאל את הקהילה

איך פונים אלינו