DCSIMG
June 2010 - Posts - שלמה גולדברג (הרב דוטנט)

שלמה גולדברג (הרב דוטנט)

מרצה בסלע ויועץ בעולם ה - net.

June 2010 - Posts

Learn Silverlight - Part 2

 

מסמך איפיון ל - FileUpload שיכתב ב - Silverlight.

 
כמו שכתבתי בפוסט הקודם אני רוצה לכתוב פקד FileUpload ב - Silverlight שיתן מענה להרבה בעיות שיש בפקדים הקיימים ב - asp.net, בפוסט הקודם התחלתי לכתוב בגדול את הדרישות מהפקד, בפוסט הנוכחי אני מאפיין בפירוט רב יותר את הדרישות מהפקד ואשמח לקבל הערות והארות על דרישות נוספות שהפקד צריך לספק - כמובן שמסמך האיפיון יהיה גמיש ונוכל לשנות אותו בזמן תהליך הפיתוח.
 
 
 
מסמך אפיון לפקד File Upload
 
  • בחירת קבצים
    • לאפשר הגדרה האם יהיה ניתן להעלות רק קובץ אחד או יותר.
    • לאפשר הגדרה של פילטר איזה סוגי קבצים ניתן להעלות.
    • לאפשר הגדרה של מקסימום גודל קבצים שניתן להעלות.
    • לאפשר הסרה של קובץ מהרשימה
    • לאפשר החלפת קובץ ברשימה
  • העלאת קבצים.
    • האם להתחיל העלאה מיד אחרי בחירת הקובץ (תלוי האם אפשר לבחור יותר מקובץ אחד)
    • לאפשר העלאה של קבצים ב – HTTP או ב – FTP
    • אירועים (בצד ה – Silverlight)
      • בזמן סיום העלאה של קובץ (עם פרמטר שמציין האם זה האחרון)
  • JS
    • לאפשר פתיחת ה - Dialog של בחירת קובץ מ – JS
    • לאפשר הסרת קובץ מ – JS
    • להתחיל את תהליך ההעלאה מ – JS
    • גישה מלאה מ – JS לרשימת הקבצים הממתינה להעלאה.
    • אירועים
      • בזמן סיום בחירת קובץ
      • בזמן התחלת העלאה של קובץ
      • בזמן סיום העלאה של קובץ (עם פרמטר מיוחד שאומר שזה אחרון)
  • GUI
    • כל פרמטר מה – GUI יהיה ניתן לקנפג האם להציג או לא.
    • כל הטקסטים יהיו ניתנים לשינוי.
    • ניתן יהיה להסתיר את כל הפקד ולתפעל אותו מ – JS.
    • לחצן browse כדי לבחור קובץ
    • לחצן upload כדי להתחיל להעלות.
    • לחצן cancel כדי לבטל את התהליך באמצע הצגת פס התקדמות.
    • הצגת רשימת הקבצים שנבחרו (שם גודל ואפשרות למחיקה)
    • הצגת סכום גודל כל הקבצים שנבחרו (וכמה ניתן עוד להעלות)
    • רוחב וגובה לפקד.
    • תמיכה בדו כיווניות (rtl - ltr)
הנה המחלקה שאיתה נעבוד
 

public class FileUploaderConfiguration

{

    // 1

    public bool MultiplyFiles { get; set; }

    public string Filter { get; set; }

    public long MaxSize { get; set; }

 

    //2

    public bool StartUploadImmediately { get; set; }

    public string Address { get; set; }

    public string UserName { get; set; }

    public string Password { get; set; }

 

    //3

    public string OnChooseFileJS { get; set; }

    public string OnStartUploadJS { get; set; }

    public string OnFinishUploadJS { get; set; }

 

    //4

    public bool Visible { get; set; }

    public double Width { get; set; }

    public double Height { get; set; }

    public bool ShowProgressBar { get; set; }

    public bool ShowFileList { get; set; }

    public bool ShowCancelButton { get; set; }

    public bool ShowUploadButton { get; set; }

    public bool ShowBrowseButton { get; set; }

    public bool ShowMaxSize { get; set; }

    public string BrowseText { get; set; }

    public string CancelText { get; set; }

    public string UploadText { get; set; }

    public string Direction { get; set; }

}

Learn Silverlight - Part 1

 

התחלת עבודה עם Silverlight

לכל מי שרוצה להתחיל ללמוד Silverlight ורוצה להתחיל מההתחלה ולהתקדם צעד אחרי צעד - סדרת הפוסטים הנוכחית תוכל לעזור.
 
 
בסדרת הפוסטים הנוכחית אני לא אתמקד באנימציות וכל שאר הדברים המגניבים שאפשר לעשות ב - Silverlight, כמו כן אני לא אתמקד בכתיבה נכונה של XMAL אלא אני יותר אתמקד באיך עושים דברים ב - Silverlight.
 
האפליקצייה שנרצה לכתוב היא FileUpload ב - Silverlight, מן הסתם כבר יש כאלה, אבל זוהי אפליקצייה נחמדה לכתיבה שתוכל להאיר לנו כל מיני אספקטים ב - Silverlight.
 
 
נתחיל בבעיות שיש ל - FileUpload הרגיל של asp.net ושל html משם נעבור לאיפיון של ה - FileUpload שאנחנו רוצים לכתוב, ומשם נתחיל לצעוד צעד אחרי צעד בבטחה בכתיבת האפליקצייה הקטנה שלנו.
 
 
בעיות ב - FileUpload.
כשעובדים עם asp.net אפשר להשתמש בכמה סוגים של FileUpload ולכל אחד יש את הבעיות שלו.
 
asp:Fileupload (המקביל ל - input type=file של html), יש לו כמה בעיות
  • הוא עובד אך ורק בצורה סינכרונית וב - Post כלומר - ניסיון להעלות קובץ גדול יגרום לתקיעת מסך המשתמש להרבה זמן (עד שכל הקובץ יעלה).
  • הוא לא יכול לעבוד עם UpdatePanel.
  • אי אפשר להעלות יותר מקובץ אחד בו זמנית.
  • אי אפשר לגשת אליו מ - JS. (כלומר לפתוח את חלון "בחירת קובץ" מ - JS)
  • הוא מכוער.
  • תמיד מעלה ב - HTTP
  • לא תומך בפילטרניג.
 
ajax:FileUpload
  • ממומש בצורה מכוערת (יוצר iframe שעושים לו post בזמן ההעלאה)
  • אי אפשר לשלוט מתי הוא יעלה את הקובץ (מיד אחרי הבחירה)
  • אי אפשר להעלות יותר מקובץ אחד.
  • אי אפשר לגשת מ - JS.
  • תמיד מעלה ב - HTTP
  • הוא מכוער (קצת פחות מהרגיל - אבל עדיין מכוער)
  • לא תומך בפילטרניג
יש גם פתרונות לעבודה עם flash - שזה די נחמד אבל אני לא רוצה להכנס כאן לדיון עליו.
 
 
ולכן אני רוצה לכתוב מודול ב - Silverlight שיתן את הדברים הבאים.
  • יתן אפשרות בחירה של יותר מקובץ אחד.
  • שליטה מלאה מ - JS
    • פתיחת הדיאלוג של בחירת קובץ.
    • הסרת קובץ מתוך הרשימה.
    • התחלת ה - upload.
  • האם להציג את הפקד (יתכן שרוצים להסתיר את הפקד ולייצר לחצנים במקומות שונים של בחירת קובץ והתחלת upload)
  • הצגת בר התקדמות של קצב ההעלאה לשרת.
  • הפעלת אירועים בצד השרת בסיום העלאה של קובץ
  • הפעלת אירועים בצד הלקוח (JS) בסיום העאלה של קובץ
  • אפשרות להעלאה ל - FTP.
  • שליטה מלאה על המחרוזות של הכפתורים (שפות)
  • האם להתחיל upload מיד אחרי בחירת הקובץ.
  • פילטרניג לסוגי הקבצים.
  • פילטרניג לגודל הקובצים.
 
בפוסט הבא נראה כיצד לייצר אפליקציית Silverlight ראשונה

שינוי כיוון העבודה בין שני מסכים

 

כיצד משנים את כיוון העכבר כשעובדים בין שני מסכים.

 
 
כשיש שילוב בין עבודה במחשב נייד ושני מסכים מקבלים תופעה מעניינת,
 
עם המחשב הנייד אפשר לנדוד ממקום למקום ומידי פעם המסך השני ממוקם במקום אחר לפעמים מימין למחשב ולפעמים משמאל,
ומה שקורה שכדי לעבור למסך השני צריך ללכת לפעמים לצד השני. לדוגמא:
שינויי כיוון העבודה
 
נניח שמסך 1 הוא המסך הראשי (של הלפטופ) ומסך 2 הוא המסך המשני, כדי לעבור מצד לצד צריך ללכת לשמאל של מסך 1 כדי להגיע למסך 2 שזה כמובן לא הגיוני.
 
 
כדי לפתור את זה (Windows7) יש לבחור ב - Screen Resolution (בלחיצה ימנית על שולחן העבודה)
 
Screen Resolution
 
נקבל את המסך הבא
 
Full Screen Resolution
 
אפשר פשוט לגרור את מסך 2 ולשנות את המיקום שיהיה בצד השני.
 
שינויי ביכוון

IE8 - Table Of Content

 

סיכום הפוסטים על IE8

 
 
בשעה טובה סיימתי לכתוב על רוב הפיצ'רים של IE8
 
להלן רשימת הלינקים והסברים.
 
 
 
 

Generated Content in IE8

 

היכולת להוסיף מידע לפני ואחרי אלמנטים.

 
בהמשך לפוסטים על IE8 - נראה הפעם כיצד נוכל בעזרת content להוסיף מידע לפני ואחרי אלמנטים.
 
(לקריאה נוספת) (כל הדוגמאות נלקחו מהאתר של מייקרוסופט)
 
ב - IE8 נוספו מספר אלמנטים מעניינים שנותנים יכולות חדשות.
  • before, after
  • counter
  • quotes
 
נתחיל עם before, after
 
נוכל בעזרת CSS פשוט להוסיף לכל אלמנט שה - class שלו הוא note סוגריים לפני ואחרי
 

<style type="text/css">

    div.note:before

    {

        content: '{';

    }

    div.note:after

    {

        content: '}';

    }

</style>

 
 
נמשיך עם counter (שזה הרבה יותר מעניין)
 
הפעם אני אציג קוד ותוצאה ולאחר מכן אני אסביר איך זה עובד.
 
קוד:
 

<style type="text/css">

    BODY

    {

        counter-reset: chapter; /* Create a chapter counter */

    }

    H1

    {

        counter-increment: chapter; /* Add 1 to chapter */

        counter-reset: section; /* Set section to 0 */

    }

    H1:before

    {

        content: "Chapter " counter(chapter) ". ";

    }

    H2

    {

        counter-increment: section;

    }

    H2:before

    {

        content: counter(chapter) "." counter(section) " ";

    }

</style>

 

<div>

    <h1>

        Shlomo</h1>

    <h2>

        noam</h2>

    <h2>

        microsoft</h2>

    <h2>

        sela</h2>

    <h1>

        tomer</h1>

    <h2>

        yossi</h2>

</div>

 
תוצאה:
 
Generate Content in IE8
 
מעניין, לא ?
 
אז איך זה עובד.
 
בעזרת counter-reset אפשר להגדיר סוג של משתנים שמקבלים את הערך 0 (כברירת מחדל)
בעזרת counter-increment מוספים מספר למשתנה.
בעזרת before מדפיסים ומקדמים את המשתנה.
 
 
ונסיים עם quotes
בעזרתו נוכל לתת בצורה אוטומטית גרשיים לפי תחילת ציטוט (למשל)
 

<style>

    /* Define quote characters */q

    {

        quotes: '"' '"';

    }

    /* Define pseudo-class triggers */q:before

    {

        content: open-quote;

    }

    q:after

    {

        content: close-quote;

    }

</style>

 

<q>My Question is</q>

foucs in IE8

 

הגדרה של CSS עבור אלמנטים שנמצאים בפוקוס ב - IE8

 
בהמשך לפוסטים על IE8 נראה הפעם כיצד לשנות בקלות הגדרות CSS לאלמנטים שנמצאים בפוקוס.
 
 
הרבה פעמים אנחנו רוצים שאלמנטים שנמצאים בפוקוס יקבלו הגדרות CSS, כדי לעשות את זה ב - IE8 נצטרך בסך הכול להכיר את foucs:
 
לדוגמא, נוכל לכתוב:
 

<style type="text/css">

    .txt:focus

    {

        background-color: Silver;

    }

    input:focus

    {

        background-color: #ffc;

    }

</style>

 
כדי לקבוע שכל ה - input יקבלו צבע רקע מסויים בזמן פוקוס וכל מי שיש לו class בשם txt יקבל צבע רקע אחר.
 
פשוט וקל.

outline in iE8

 

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

 
בהמשך לפוסטים על IE8 נכיר את המאפיין outline שנותן את יכולות מעניינות לעטוף אלמנטים מבלי להשפיע על ה - DOM
 
 
הקוד הבא לדוגמא
 

<span>Shlomo Goldberg

    <br />

    IE8 For Developers

</span>

 

span

{

    outline-style: ridge;

    outline-color: Silver;

    outline-width: 7px;

    background-color: lavender;

}

 
יתן את התוצאה הבאה
 
outline in IE8
 

CSS Compliance - Table Layout in IE8

 

עיצוב אלמנטים בצורת טבלה מבלי להשתמש בתגיות טבלה ב - IE8

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

<div class="sTable">

    <span class="sTR"><span class="sTD">1</span> <span class="sTD">Shlomo</span> </span>

    <span class="sTR"><span class="sTD">2</span> <span class="sTD">Noam</span> </span>

    <span class="sTR"><span class="sTD">3</span> <span class="sTD">Tomer</span> </span>

</div>

 

<style>

    .sTD

    {

        display: table-cell;

        padding-right: 3px;

        padding-left: 3px;

    }

    .sTable

    {

        display: table;

    }

    .sTR

    {

        display: table-row;

    }

</style>

 
יחזיר ב - IE8 את אותו אפקט של הקוד הבא
 

<table>

    <tr>

        <td>1</td>

        <td>Shlomo</td>

    </tr>

    <tr>

        <td>2</td>

        <td>Noam</td>

    </tr>

    <tr>

        <td>3</td>

        <td>Tomer</td>

    </tr>

</table>

Data Url for image in IE8

 
IE8 נראה בפוסט הנוכחי איך אפשר לתת לתמונה את המידע שמתאר את התמונה.

בהמשך לפוסטים שלי על IE8 נראה הפעם את האפשרות להציג תמונות כ - Embedded
 
 
 
אני לא ממש יודע להגיד למה צריך את זה אבל זה נחמד, שימו לב לקוד הבא, (קצת ארוך - ולכן עשיתי כתב קטן)
 

<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAtAC0AAD/4SFyRXhpZgAATU0AKgAAAAgADQEPAAIAAAAGAAAItgEQAAIAAAAU

AAAIvAESAAMAAAABAAEAAAEaAAUAAAABAAAI0AEbAAUAAAABAAAI2AEoAAMAAAABAAIAAAExAAIAAAAu

AAAI4AEyAAIAAAAUAAAJDgITAAMAAAABAAEAABABAAMAAAABBkAAABACAAMAAAABBLAAAIdpAAQAAAAB

AAAJIuocAAcAAAgMAAAAqgAAFr4c6gAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAENhbm9uAENhbm9uIFBvd2VyU2hv

dCBBNzAAAAAAtAAAAAEAAAC0AAAAAU1pY3Jvc29mdCBXaW5kb3dzIFBob3RvIFZpZXdlciA2LjEuNzYw

MC4xNjM4NQAyMDEwOjA0OjMwIDEyOjU3OjU4AAAhgpoABQAAAAEAABLAgp0ABQAAAAEAABLIkAAABwAA

AAQwMjIwkAMAAgAAABQAABLQkAQAAgAAABQAABLkkQEABwAAAAQBAgMAkQIABQAAAAEAABL4kgEACgAA

AAEAABMAkgIABQAAAAEAABMIkgQACgAAAAEAABMQkgUABQAAAAEAABMYkgcAAwAAAAEABQAAkgkAAwAA

AAEAWQAAkgoABQAAAAEAABMgknwABwAAAj4AABMokoYABwAAAQgAABVmoAAABwAAAAQwMTAwoAEAAwAA

AAEAAQAAoAIABAAAAAEAAASwoAMABAAAAAEAAAZAoAUABAAAAAEAABZuog4ABQAAAAEAABamog8ABQAA

AAEAABauohAAAwAAAAEAAgAAohcAAwAAAAEAAgAAowAABwAAAAEDAAAApAEAAwAAAAEAAAAApAIAAwAA

AAEAAAAApAMAAwAAAAEAAAAApAQABQAAAAEAABa2pAYAAwAAAAEAAAAA6hwABwAACAwAAAq06h0ACQAA

AAEAAA96AAAAABzqAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAADwAAAAwAAAACjIwMTA6MDQ6MzAgMTE6

NTY6MzEAMjAxMDowNDozMCAxMTo1NjozMQAAAAADAAAAAQAAAL0AAAAgAAAAkQAAACAAAAAAAAAAAwAA

AJEAAAAgAAACBwAAACAOAAEAAwAuAAAAXAQAAAIAAwAEAAAAuAQAAAMAAwAEAAAAwAQAAAQAAwAiAAAA

yAQAAAAAAwAGAAAADAUAAAAAAwAEAAAAGAUAABIAAwAUAAAAIAUAABMAAwAEAAAASAUAAAYAAgAgAAAA

UAUAAAcAAgAYAAAAcAUAAAgABAABAAAAuwgSAAkAAgAgAAAAiAUAABAABAABAAAAAAAlAQ0AAwAiAAAA

qAUAAAAAAABcAAIAAAADAAUAAAAAAAQAAAABAAUAAAADAAAAAAAAAA8AAwABAAFAAAD/////BwKtACAA

kQDAAAEACCAAAAAAAAAAAP//MABAAwAIAAABAAAAAAD/fwAAAAAAAAIABwILAogBsQBOAwAAAABEADAA

gABIAJEAvQAAAAAAAAAAAAYAAAAAAAIBAAAAAAAAAAABAN4AAACRAMAAAAAAAAMA+gAAAAAAAAAAAAAA

AACgAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAFAEAGsAQACAABcQEqAAAAjv4AAHIBAADQ/wAAAAAAADAA

AAAAAAAAAAAAAAAASU1HOlBvd2VyU2hvdCBBNzAgSlBFRwAAAAAAAAAAAABGaXJtd2FyZSBWZXJzaW9u

IDIuMDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQACQA6AQGAAYABgAGAAYABgAGA

AYBAAAAAAADIAAAAAAAKAAAABAAKADoClP9JAP3/BwRVAwAAAAAAAAAAVgAAAFoAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAQAAQACAAAABFI5OAAAAgAHAAAABDAxMDAQAQADAAAAAQZAAAAQAgADAAAAAQSw

AAAAAAAAAAAAPBU/AAAA0AAtD+8AAACcAAAIAAAAA0AABgEDAAMAAAABAAYAAAEaAAUAAAABAAAXDAEb

AAUAAAABAAAXFAEoAAMAAAABAAIAAAIBAAQAAAABAAAXHAICAAQAAAABAAAKTQAAAAAAAAC0AAAAAQAA

ALQAAAAB/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcp

LDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy

MjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABkAEsDASEAAhEBAxEB/8QAHwAAAQUBAQEBAQEA

AAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKB

kaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlq

c3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ

2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREA

AgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcY

GRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaX

mJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oA

DAMBAAIRAxEAPwD2WiuI6CtqGoWmlWE19fTrBbQrueRu3+J9AOteI+LfipqmuSPZ6F5thYdDKDiaUe7D

7o9h+J7VUI8z12Jk7aI4NYrgSCQTkSZzuBOc+ua6Cx8Y+LtMwLbXbp1Xokz+aPphwa1ag9yEpI9U8AfE

tfENwuk6vFHb6mR+6dOEnx2x2b26HtjpXo1ZtW0KTuIWFN3GpuURUtIZ4r8Ttfl13Xx4etWIs7Jv32P+

WkuP5LnH1zWXp/hu3VFEw3H+6OBRKfLFJGlGnzyuzai8N2LOHMOMD7oPFF34bsbj7tuqN6rmud1ZXOtU

YNHLanoNzpri6j3R+W4aORTgrg8HI6HpXuHgzxGfE3hmC8lwLtCYbkAY/eLjn8QQfxx2rpU+eNzhnDkl

Y36WgkjoLBAXYgKoySewpDPnGNy3iCedyW82d33H+Ikk5/WuztOQCMVFTodOH2ZqoSFBIOKepJx0H1rm

kjrRS1e3SfS54mwdyHFN+Et0La91LTpXAaZUkjXPUpndj3wR/wB81rQlo0cmJV2meq0tdBzEVc3451Ya

Z4WuyrgTTL5SDPPPX9M1LGjwaynRbohpFEg4XzGAGTgDkmumt4hNIkc+sTQsTguMhBjn+EE4q5R12Lg9

NGdLpsstupt7i4EoyNsr45z2/n1qLUrSS7lYzam1lCqK4ALKCCAR91Secjr61ioe9Z7G7l7pmLcC0iLN

qMs1uAPME/zcHoQcA/pXPeHdTXQfGa3bOTBFdfNj+4QQf0NOnH4tDKo9tT6MhlSeGOWNg8bqGVh0IPQ1

JVoxZEa8Z+LGpl9bgsUc/uUDkD1NNK7QdDkfC0CXDTM4DMzcg/Q12Nrp0Kg70jILbvu55pVJWkdFGHNG

5JK0K6oiwI+MjLORlvwA7En161aigiklmSWNmYZKkYIJz34/zxWLlaVzoVNuNhyacnmK4WNdpB+VMHg5

HNcB4iKJ4hvUQjI2uPqVx/hVUXebMcRHlij3LwLcG58HaW27JWLafwJH9K6WtEcz3IT0r5z8YXLX3jLV

J2bCxsQM+mMCqjuJ7FPw7vsrwxyHBljDj37/AMjXoqXdtDbqZWVeO5rOs/eudWG0VjKiv4m1TzYgjtuz

tOeR6VafV4jqDbx5Zx/AvSsZdzqTSNCLU4poWKuCR17V5tqaNPqVzegZSWZog34E/wBKug/eZzYnVI9i

+FE/meDxDkkxTuCfrzj/AD613dbHIyI9RXzt4y057bxHfrMxjWd92cdBn9acfiB7FLxJYy6J4ie3IYJH

gRsT1XHFbWkfZ9TQLNKzShNqknpx+VRUXupm9Ddo2dN042xKt8zf3w4U/kQaszaYtzKDI5VFOTiQsx/H

/wCtWM5W1OxJWMPX9Rt7eN47cruJxwaxoombwlPqLKfKiu41J7En/wCsa0pR0ucld62PWPhVHb/8IzJL

C2ZHnZZQexXp+hru6swZHXhHxNlJ8R3zyA8wKIh7cgk/Wmt0HQPihDjWLeby3XzYVc7voOPw6VxlldzW

s6yIxBB7U0rxsVF2lc9AsNZtL+HMnykDLYbr9KdqviCG0s2WEZcjaDnpXM4tux386sefS3DTuzMeSa73

TtPik+EmqXUykCOQEDs205H6mum1locMnd3Og+D8zJ/bFntIQNHIvsTkH+n5V6hSM2QvypFeGfEYibxv

OgYhhBEse09GyMULcdrmX411GbU9WM0rErj5Qa5TPzcHHFXBaDZLHcyxAlGK+vNDXDyfeYk5zkmjlRXO

wj+YgGu+0bUJJfhzq+mzH90q5UAdO5JPapmHQ6P4RSRibV4n3fatsLNkcFcNz9cn+VepVJDMXWvEWk+H

4PN1O+igyMrGTl2+ijk/XpXhHiHVo/EWr315ZxyBZDujMgwyqOOQCQKaT3GnrY1PE+k+fax3dqu6Mgc7

cE5H/wBYmuIkgdTkqfyrRaBa4zYSpp0cLMSQpI6mquKxds7N55ljUcnr/OuotNUtdK0fUNE1GNkluFV4

ZAMqSOitzkDP9axlduyNHpHU7nwGtraay4inV5byHLtkGNtucCLHIAyfvenfnHo+alPQh7nyLcXM13O8

88skssh3PJIxZmPuT1rsvh9ok+sHUJILoW7QhFOU3Bg248j/AIDXVOPu2RjB+8eqz6NDLpAsWRWVUC5H

GMd68x1nwff6estx5W6IfxAcEf4//rrJm8XqZljpQnU5XOOCMYJ/zmuuXwxaLYRB4TkjrnkE81k5G6ii

fTPC0dtO905DYUgLtGP/AK1c14+0Y6fBpl2P+WvmRuM52kEEf+hH8q2hHVM56j0aOWt9Tu7SWKS1uJYJ

IjmN4nKsv4iu6tPi/wCIYLSKKSKwuHRcGWWJt7e52sBn8KbpJ7GSm+p5gOOveu/+HHiPT/D1rrk1/LtB

jieOMfflYFhtUdz8w+nWtZbEQ0Z7Bbzw3+n295GcxzxpJGR0AYAj+dXWgjmj2uisp6qw4/KsEzoSOf1z

w1C8DXNiiwuuSUH3SPb0NTadZ/ao0mlQFQMRoen1NRy+9c1U/dNKSyUJjHyDqPWvJfirqsM97ZaXbur/

AGUPJKVOcOxACn3AXP8AwIVpB3ZhPRHnoPJzTg2BWxiVv4hSimI95+F1xJdeCIkmO4QTPEn+6CGH6sa7

tlAOR3rne50R2RGwDRyRMMrtz9KdCiiBMKBwDSZQ2Y4iY+1fLF3O9zdTTynMkrtIx9STk1dIzq9COlrU

xP/ZAP/hMbhodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0n77u/JyBp

ZD0nVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkJz8+DQo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5z

Om1ldGEvIj48cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRm

LXN5bnRheC1ucyMiPjxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSJ1dWlkOmZhZjViZGQ1LWJhM2Qt

MTFkYS1hZDMxLWQzM2Q3NTE4MmYxYiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8x

LjAvIj48eG1wOkNyZWF0b3JUb29sPk1pY3Jvc29mdCBXaW5kb3dzIFBob3RvIFZpZXdlciA2LjEuNzYw

MC4xNjM4NTwveG1wOkNyZWF0b3JUb29sPjwvcmRmOkRlc2NyaXB0aW9uPjwvcmRmOlJERj48L3g6eG1w

bWV0YT4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw/eHBh

Y2tldCBlbmQ9J3cnPz7/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgK

CAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwM

DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABkAEsDASIAAhEBAxEB/8QAHwAAAQUB

AQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1Fh

ByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNk

ZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT

1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL

/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYk

NOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImK

kpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3

+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">

    </div>

 
זה יתן לנו את התוצאה הבאה (ב - IE8) (במידה וזה לא עובד - תוכלו להסתכל על התוצאה כאן)
 
 
 

מציאת אלמנטי DOM בעזרת מנגנון החיפוש של IE8

 

כיצד למצוא אלמנטים בקלות בעמוד

 
בהמשך לפוסטים על IE8 נראה הפעם כיצד למצוא אלמנטים בעמוד בעזרת שאילתות ולא בעזרת JavaScript
 
 
יש לנו שני מתודות חדשות.
  • querySelector
  • querySelectorAll
 
כשהראשון ימצא את האלמנט הראשון ב - container שאנחנו מחפשים בו, והשני ימצא את כל האלמנטים המתאימים לתוצאות החיפוש.
 
דוגמא:
 
נניח שיש לנו את ה - html הבא
 

<div>

    <p class="a">

        <span class="b">span1</span>

        <span class="a">span2</span>

        <a class="a" href="">a1</a>

    </p>

    <p class="b">

        <span class="a">span3</span>

        <span class="b">span4</span>

    </p>

    <a class="b" href="">a2</a>

</div>

 
אם נריץ את השאילתא הבאה:
 

function ByClassA() {

    var res = document.querySelectorAll(".a");

    alert(res.length);

}

 
נקבל את התשובה 4 (מכיון שיש לנו 4 אלמנטים שיש להם את ה - class בשם a)
 
אם נרית את השאילתה הבאה:
 

function Spans() {

    var res = document.querySelectorAll("span");

    alert(res.length);

}

נקבל את התשובה 4 (מכיון שיש לנו 4 אלמנטים מסוג span)
 
אם נריץ את השאילתא הבאה
 

function a() {

    var res = document.querySelectorAll("p a");

    alert(res.length);

}

נקבל את התשובה 1 (מכיוון שיש לנו a אחד שיושב במתוך אלמנט p)
 
 
כמובן שאם נחפש בתוך continaer אחר ולא בתוך ה - document נקבל את התשובות המתאימות

תקשורת בין דומיינים שונים ב - XJAX בעזרת IE8 באמצעות XDomainRequest

 

 תקשורת בין דומיינים שונים ב - AJAX

 
בהמשך לפוסטים על IE8 הפעם נדבר על האובייקט XDomainRequest שנותן לנו את האפשרות לתקשר בין דומיינים שונים (מה שאי אפשר לעשות בעזרת XMLHTTPRequest)
 
 
כדי שדף אחד יוכל לבקש מידע משרת אחר אותו שרת צריך לאפשר זאת, לדוגמא:
נניח שדף מסויים רוצה לפנות ל - Handler שיושב בשרת אחר:
 
צד שרת:
ה - Handler נראה כך:
 

context.Response.ContentType = "text/plain";

if (context.Request["data"] == "name")

{

    context.Response.Write("Tomer");

}

else if (context.Request["data"] == "age")

{

    context.Response.Write("90");

 
כדי שיוכלו להפעיל את ה - Handler בעזרת XDomainRequest צריך להוסיף את השורה הבאה
 

context.Response.AddHeader("Access-Control-Allow-Origin", "*");

 
כמובן שהפרמטר השני לא חייב להיות * אלא יכול להיות דומיין ספציפי שאותו אנחנו רוצים לאשר.
 
 
צד לקוח:
 

<script>

    function XDR() {

        // 1. Create XDR object

        var xdr = new XDomainRequest();

 

        // Start Wrking

        xdr.onprogress = function() {

 

        };

 

        //End Working

        xdr.onload = function() {

            alert(xdr.responseText);

        };

 

        xdr.ontimeout = function() {

 

        };

 

        xdr.onerror = function() {

 

        };

 

        xdr.timeout = 10000;

 

        // 2. Open connection with server using GET method

        xdr.open("GET", "Handler1.ashx?data=name");

 

 

        // 3. Send string data to server

        xdr.send();

 

    }

</script>