August 2009 - Posts
בפוסטים
הקודמים כתבתי על Web Slice (עדיין נשאר לי לדבר על Authenticated Web Slices)
כולנו מכירים את התיבה מצד ימין למעלה בחלון הדפדפן.
אנחנו יכולים לייצר ספקי חיפוש בעצמנו, למעשה זה פיצ'ר עוד מ IE7, בגרסה 8 של הדפדפן הוסיפו לו כל מיני תכונות מעניינות שנראה אותם בפוסטים הקרובים.
הפעם אני רוצה להראות דוגמא אמיתית ובפוסטים הבאים להרחיב על כל התכונות האפשריות.
כאחראי על צוות התשתיות ב
סלע ביקשו ממני לייצר ספק חיפוש לסילבוסים שלנו.
מה שהחבר'ה בסלע רצו שאני אייצר ספק חיפוש שהם יוכלו לכתוב את קוד הקורס ולחיצת Enter תוביל אותם לקורס המיועד. בנוסף הם אמרו לי שלא תמיד הם זוכרים את הקודים של כל הקורסים (יש מאות) ולכן הם רצו שזה יתנהג כמו גוגל, כלומר ברגע שמתחילים לכתוב משהו, זה מביא את ההצעות הכי קרובות (זה אחד מהתכונות החדשות של IE8 - תמיכה ב - suggestions).
אז איך עושים את זה ?
אנחנו צריכים לייצר שירות כלשהו שמחזיר את התוצאות לחיפוש הספציפי, התוצאות יכולות לחזור במבנה של XML או של JSON, כמובן ש - JSON הוא יותר קטן ולכן יותר יעיל, אבל במבנה XNL אנחנו יכולים לקבל יותר תכונות (כמו תמונה לכל תוצאה - ועוד).
אני בחרתי במבנה JSON, נניח שאני מקבל את המילה Introduction - אני מעוניין לחפש בבסיס הנתונים שלנו את כל הקורסים שבכותרת שלהם יש את המילה Introduction. בתוצאה אני אמור להחזיר מחרוזת במבנה הבא:
["Introduction",
["50150", "WP1"],
["Introduction to C# 3.0", Introduction to Web"],
השורה הראשונה זה מה שיוצג ברשימת התוצאות.
השורה השנייה זה תיאור של כל קורס.
והשורה השלישית היא להיכן לנווט.
יצרתי Handle (קובץ עם סיומת ashx) וכתבתי קוד דומה לזה:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(Syllabuses(context.Request["searchTerms"]));
}
private string Syllabuses(string searchTerms)
{
if (HttpContext.Current.Cache[searchTerms] == null)
{
SqlCommand cmd = GetCommand(searchTerms);
StringBuilder fullBuilder = Execute(searchTerms, cmd);
SaveInCache(searchTerms, fullBuilder);
}
return HttpContext.Current.Cache[searchTerms].ToString();
}
כדי לחסוך בפניות לבסיס הנתונים אני שומר במטמון תוצאות של חיפושים קודמים.
אני בודק האם התוצאה קיימת במטמון, במידה ולא -
אני יוצר את ה - Command -
מפעיל אותו ומקבל תוצאה שהיא המחרוזת במבנה מתאים -
שומר את התוצאה במטמון -
ומחזיר את התוצאה.
כעת כתבתי דף html שנראה כך:
<a href="#" onclick="window.external.AddSearchProvider('http://www.example.co.il/XMLFile1.xml')">
Add Syllabus Search Provider</a>
קובץ ה - xml נראה כך:
<?xml version="1.0" encoding="utf-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
xmlns:ie="http://schemas.microsoft.com/Search/2008/">
<ShortName>Syllabus Search</ShortName>
<Url type="text/html"
template="http://www.sela.co.il/syl/syllabus.aspx?CourseCode={searchTerms}&source=IE"/>
<Url type="application/x-suggestions+json"
template="http://www.example.co.il/Handler1.ashx?searchTerms={searchTerms}"/>
</OpenSearchDescription>
ב - URL הראשון אני נותן את הכתובת למי שכותב שם של סילבוס.
בשני את הכתובת ל - handler שלי.
מי שירצה (מצוות המכירות) להוסיף את ספק החיפוש שיצרתי יגלוש לדף שיש בו את הלינק, ילחץ עליו, ויקבל את החלון הבא:
ועכשיו זה נראה כך:
מה שנחמד שצוות המכירות מרוצה עד לב השמיים. (ואני לא מקבל יותר מיילים בנוסח "מה הכתובת של הקורס שמדבר על.....")
חבר יקר (אליאב) הראה לי שיש תג meta שיודע לרענן את הדף בצורה אוטומטית כל כמה דקות.
<meta http-equiv="refresh" content="10" />
זה פיצ'ר נחמד מאוד.
במידה ותרצו לתת את הערך ל - content מתוך הקוד,
אופצייה אחת היא לייצר את כל התגית meta מתוך הקוד.
אופתייה שנייה היא להגיר אותו בצורה הבאה:
<meta id="refreshPage" http-equiv="refresh" runat="server" />
ואז מתוך הקוד להוסיף לו את המאפיין content ולתת לו ערך.
אופצייה שלישית היא לכתוב את הקוד הזה.
<%=String.Format("<meta http-equiv='refresh' content='{0}'/>", ContentValue)%>
כשבקוד יהיה לנו מאפיין בשם ContentValue.
תהנו.
ראיתי שהרבה חברה כתבו על
IDCC (כדי שיצביעו להם כמובן) אז ארשה לעצמי גם לכתוב (כדי שתצביעו לי כמובן :)).
אחד מהדברים
שאי אפשר לעשות באצעות dynamic - זה לגשת ל - private של מחלקות.
אנחנו
כבר יודעים שמאחורי הקלעים כשכותבים dynamic למעשה הקומפייל מג'נרט קוד עם שימוש במחלקה בשם CSharpBinder, נניח שאנחנו יורשים מהמחלקה הזאת, וכותבים שם קוד שיאפשר לגשת בעזרת dynamic גם למה שמוגדר כ - private, נכון שהחיים שלנו יהיו הרבה יותר נפלאים, כי זה יהרוג את השימוש ב - reflection,
השאלה הגדולה היא - איך נגרום לקומפיילר של #C להשתמש במחלקה שלנו במקום במחלקה שלו, הוא הרי לא מכיר את המחלקה שלנו.
אתם רוצים לדעת ? אין בעייה -
הצביעו להרצאה שלי תבואו לשמוע ותגלו עולם חדש.
אפשר להוריד
מכאן את דוגמת הקוד.
כתבתי כמה פעמים על asp validators, כאן אני רוצה לכתוב על יצירה של Validator Summary מותאם אישית, אבל קודם לכן נראה מה זה Validator Summary בכלל.
אז ככה, אנחנו יכולים לשים על הדף שלנו הרבה Validaors ולכל אחד מהם לתת ערך כלשהו למאפיין Text, אבל בנוסף על כך אנחנו יכולים לתת ערך למאפיין ErrorMessage, שזה אומר במידה ויהיה ValidatorSummary על הדף הוא יציג את כל ה - ErrorMessage של כל ה - Validators. לדוגמא.
יש לנו שני תיבות טקסט,
שני RequiredFieldValidator
לחצן אחד.
ן - ValidaroSummary אחד.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ErrorMessage="Name is Required"
Text="*"
ControlToValidate="TextBox1">
</asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator2"
runat="server"
ErrorMessage="Password is Required"
Text="*"
ControlToValidate="TextBox2">
</asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
בזמן לחיצה על הלחצן - במידה ולא הכנסנו ערכים, נקבל ליד תיבות הטקסט כוכבית אדומה, בנוסף נקבל בתחתית העמוד רשימה עם כל השגיאות.
האופצייה השנייה לתצוגה של השגיאות, היא באמצעות alert, מה שצריך לעשות - זה להוסיף ShowMessageBox=true
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
ShowMessageBox="true"
ShowSummary="false" />
ואז נקבל את סיכום השגיאות באמצעות alert.
אבל מה קורה אם אנחנו רוצים לקסטם את התצוגה של סיכום השגיאות, נניח בראש העמוד נציג div עם כל השגיאות, או באמצעות
ModalPopup של ajax, או כל רעיון אחר.
למעשה חרשתי באינטרנט ולא מצאתי שום דוגמא, אז לא היתה לי ברירה והייתי חייב לחקור מה קורה מאחורי הקלעים של ה - ValidatorSummary כדי להבין מה צריך לעשות.
אז התברר לי שלמעשה במידה וה - Validator מגלה שהולידציה נכשלה, הוא מפעיל מתודה שנקראת ValidationSummaryOnSubmit שיושב בקובץ WebResource.axd שמגיע יחד עם הדף (שווה לחקור אותו הוא מכיל המון פונקציות שימושיות), אותה מתודה מייצרת למעשה את ה - alert או את רשימת השגיאות.
מה שאני עושה הוא:
1. לבדוק האם קיימת פונקצייה עם השם ValidationSummaryOnSubmit על הדף.
2. לשמור מצביע לאותה פונקצייה (אפשר לעשות את זה ב - JasaScript).
3. לדרוס את הפונקצייה המקורית עם מימוש משלנו, כך שמי שיקרא למתודה ValidationSummaryOnSubmit יפעיל את המימוש שלנו.
4. לבדוק האם ה - ValidatorSummary במאפיין showCustom (מאפיין שאני המצאתי) = true.
5. במידה ולא - להפעיל את הפונקצייה המקורית של ValidationSummaryOnSubmit.
6. במידה וכן - לעשות את המימוש שאנחנו ממציאים.
7. חשוב מאוד: כל המימוש שלנו חייב להיות בסוף העמוד, כך שהמתודה של מייקרוסופט תוגדר לפני המתודה שלנו - אחרת לא נוכל לדרוס אותה, אלא היא תדרוס את שלנו.
בדוגמא אני מוסיף לדף div בראש הדף ומגדיר שלא יראו אותו, בזמן שאני מגלה שיש שגיאות, אני כותב ל - div את השגיאות ומציג אותו.
הנה ההגדרה החדשה של ה - SummaryValidator.
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowCustom="true" />
הנה ה - div וכמובן הפנייה לקובץ הסקריפט.
<div id='divError'>
<span id="error"></span>
<input id="closeError" type="button" value="Close" onclick="Close()" />
</div>
<script src="CustomSummaryValidator.js" type="text/javascript"></script>
מיד אראה את קוד ה - JS, אבל לפני זה אני אציג את קובץ ה - CSS (שכמובן יש לו הפנייה ב - head)
#divError
{
border: thin solid #000000;
position: absolute;
top: 2px;
left: 0px;
background-color: #f5f5f5;
color: #F8D328;
display: none;
font-family: Tahoma;
font-size: 12pt;
font-weight: bold;
line-height: 3;
}
#closeError
{
color: #3f52b8;
background-color: #f6f8ff;
border:0px;
padding:2px 6px;
margin:0px 6px;
text-align:center;
font-family:Tahoma;
}
מה שחשוב - זה שה - divError מקבל מיקום אבסולוטי לתחילת העמוד ומוגדר שלא רואים אותו.
הנה הסקריפט.
if (typeof (ValidationSummaryOnSubmit) == "function") {
var OriginalValidationSummaryOnSubmit = ValidationSummaryOnSubmit;
ValidationSummaryOnSubmit = function(validationGroup) {
if (typeof (Page_ValidationSummaries) == "undefined")
return;
var summary, sums;
for (sums = 0; sums < Page_ValidationSummaries.length; sums++) {
summary = Page_ValidationSummaries[sums];
if (summary.ShowCustom != "true") {
OriginalValidationSummaryOnSubmit(validationGroup);
}
CustomImplementation(summary, validationGroup);
}
}
}
function CustomImplementation(summary, validationGroup) {
var str = '';
if (!Page_IsValid && IsValidationGroupMatch(summary, validationGroup)) {
for (var i = 0; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid && typeof (Page_Validators[i].errormessage) == "string") {
str += Page_Validators[i].errormessage;
str += "; ";
}
}
}
var span = document.getElementById('error');
span.innerText = str;
var div = document.getElementById('divError');
div.style.display = 'block';
}
function Close() {
var div = document.getElementById('divError');
div.style.display = 'none';
}
כעת כשנלחץ על הלחצן נקבל את הדבר הבא:
כמובן שזה מימוש פשוט, אבל מהנקודה הזאת כל אחד יכול לקחת את זה קדימה ולעשות מימושים נהדרים ל - SummaryValidator
בהצלחה.
חבר מהעבודה שאל אותי את השאלה הבאה:
יש לי Grid שבאחת מהעמודות מוצג תמונה של אדם בקטן, אני רוצה שבזמן מעבר עם העכבר על התמונה, יראו אותה בגדול, איך מבצעים את זה ?
המימוש הוא די פשוט, את דוגמת הקוד ניתן להוריד
מכאן.
צרפתי לאפליקצייה חמש תמונות עם השמות 1..5, והנה הקוד שיוצר טבלה ומקשר את ה - Grid לטבלה.
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("Img");
table.Rows.Add("1.png");
table.Rows.Add("2.png");
table.Rows.Add("3.png");
table.Rows.Add("4.png");
table.Rows.Add("5.png");
GridView1.DataSource = table;
GridView1.DataBind();
}
הנה קוד ה - html
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src='<%# DataBinder.Eval(Container.DataItem, "Img").ToString()%>'
style="cursor: pointer"
onmouseover="Show(this)"
onmouseout="Hide()"
onmousemove="Show(this)" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<br />
<br />
<div id="divImage" style="display: none; position: absolute">
<img id="image" />
</div>
יש לנו Grid שבתוכו עמודה מסוג ItemTemplate שמכילה אובייקט מסוג תמונה כשמאפיין ה - src מקושר לעמודה בטבלה שנקראת Img (שמכילה את ה - url של התמונה).
בזמן תזוזה עם העכבר מפעילים סקריפט (שמיד נראה אותו).
בסוף ה - html יש לנו div שה - position שלו מוגדר כ - absolute ובתוכו יש אובייקט img.
כעת נראה את הסקריפט.
<script type="text/javascript">
function Show(img) {
var newImg = document.getElementById('image');
newImg.src = img.src;
newImg.style.width = '350px';
newImg.style.height = '250px';
var div = document.getElementById('divImage');
div.style.display = 'block';
div.style.top = event.clientY;
div.style.left = event.clientX + 20;
}
function Hide() {
document.getElementById('divImage').style.display = 'none';
}
</script>
פונקציית ה - Show מקבלת כפרמטר את התמונה שעליה הייתה תזוזת העכבר, אנחנו מוצאים את התמונה שבתוך ה - div התחתון, נותנים לו את התמונה ומגדילים את גודל התמונה, לאחר מכן אנחנו מוצאים את ה - div התחתון משנים את המאפיין display ל - block, ומשנים את המיקום של ה - div יחסית למיקום של מצביע העכבר.
הפונקצייה hide משנה את המאפיין display ל - none כך שלא יראו את התמונה.
והנה התוצאה:
אחרי טעינת הדף:
כשהעכבר זז על התמונה:
אנחנו כבר יודעים לייצר Web Slice
פשוט וגם Web Slice שמביא את הנתונים
ממקום אחר שבו נרשמו ל - Web Slice כדי לחסוך בתעבורה,
גם ראינו איך אפשר להגדיר ל - Web Slice חלון Preview באמצעות הגדרה של entry-content.
הבעייה הגדולה בחלון ה - Preview שהוא שומר את הנתונים במטמון לוקלי ולכן כל הסקריפטים וה - ActiveX חסומים.
כדי שנוכל להפעיל סקריפטים או לחצני צד שרת אנחנו צריכים להשתמש ב - Alternative Display Source, מה שזה אומר שגם חלון ה - Preview הולך לשרת כדי להביא את הנתונים, ושום דבר לא נשמר במטמון ולכן אפשר להפעיל סקריפטים וקוד שרץ בצד השרת.
הביצוע פשוט מאוד, בסך הכול צריך להוסיף:
<a rel="entry-content" href="display.html" style="display:none;"></a>
כשה - href מופנה לאותו דף שאמור להביא את ה - data עבור ה - Preview.
דוגמא מלאה:
<div class="hslice" id="StudentMessage123" style="width: 320px">
<a rel="entry-content" href="2DynamicTitle.aspx#ads" style="display: none">
<div dir="rtl" style="font-family: Arial;">
<span class="entry-title"><b>הודעות לסטודנטים</b></span>
</div>
</a>
</div>
<br />
<br />
<div id="ads">
<asp:BulletedList ID="BulletedList1" runat="server">
</asp:BulletedList>
<asp:Button ID="ff" runat="server" Text="ff" OnClick="ff_Click" />
<asp:Label ID="lbl" runat="server"></asp:Label>
</div>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BulletedList1.Items.Add("ביום שלישי הבא יתקיים יום פתוח מאת שלמה על C# 4.0 ");
BulletedList1.Items.Add("יום הסטודנט בסלע מתקרב");
}
}
protected void ff_Click(object sender, EventArgs e)
{
lbl.Text = DateTime.Now.ToLongTimeString();
}
באתר אמיתי אנחנו נוציא מן הסתם את התוכן של ה - Preview לדף אחר או ל - UserControl.
בכל מקרה אי אפשר באמצעות Alternative Display Source:
לפתוח alert, לייצר popup או לפתוח חלון Print וכדו'.
אי אפשר לבקש התקנה של ActivX, ולכן אנחנו אמורים לדעת שבמידה וה - Preview רוצה להשתמש ב - ActivX שהוא יהיה מותקן מראש.
אי אפשר לגרום להורדת קובץ.
במידה ולא נגדיר ללינקים בתוך חלון ה - Preview (אם משתמשים ב - alternative display) שיפתחו בחלון נפרד (traget= _blank) הם יפתחו בחלון ה - Preview.
אפשר כמובן לשלב בין alternative update ו - alternative display.
<div class="hslice" id="auction">
<span class="entry-title">Auction Item - Alternative Update</span>
<a rel="feedurl" href="update.html#auction-update" style="display:none;"></a>
</div>
<%--update.html--%>
<div class="hslice" id="auction-update">
<h2 class="entry-title">Auction Item - Alternative Display</h2>
<div class="entry-content">Current bid is $66</div>
<a rel="entry-content" href="display.html" style="display:none;"></a>
</div>
ושוב אתן את
הלינק למאמר המלא ב MSDN - מומלץ בחום.
entry-content
מומלץ לקרוא את המאמר
הבא, חלק גדול מהחומר שאני כותב נלקחים מכאן.
המאפיין entry-contnet אינו חובה, אבל מומלץ, במידה ואף אובייקט לא יכיל את המאפיין הזה, לחיצה על הלינק תנווט אל הדף המתאים, וכמובן כשיהיו שינויים הכותרת תהיה מודגשת.
במידה והמאפיין ישוייך לפחות לאחד האובייקטים, כשילחצו על הלינק יפתח חלון "תצוגה מוקדמת" אותו חלון שבדרך כלל אנחנו רואים אותו עבור Web Slice.
אפשר לשייך את המאפיין entry-content ליותר מאובייקט אחד, ובסופו של דבר כשילחצו על הלחצן, יראו את הקומבינציה של כל מי שמשוייך ל - entry-content.
גודל ברירת המחדל של חלון ה "תצוגה מקדימה" קבוע ל - 320X240, אבל אפשר לשנות אותו על ידי הגדרה ב - אותו div שיש לו את ה - entry-content.
כמו כן אי אפשר להפעיל סקריפטים בחלון "תצוגה מקדימה" של ה - Web Slice, אלא אם כן נשתמש ב - Alternative Display Source (ועל כך - בפוסט הבא).
כדי לשלוט על ה - style בחלון "תצוגה מקדימה" של ה - Web Slice. צריך להגדיר את ה - style בתוך מי שמוגדר כ - entry-content או במי שמקונן בתוכו, חלון ה - "תצוגה מקדימה" מתעלם מההגדרות שיש למי שמכיל את enrty-content, לדוגמא:
<div class="hslice" id="main" style="color:blue">
<h2 class="entry-title">Seattle Weather</h2>
<p class="entry-content">It is raining.</p>
</div>
בחלון תצוגה מקדימה התוצאה לא תהיה בצבע כחול, מכיון שההגדרה נמצאת מעל ה - entry-content.
אופציה נוספת, זה לתת style ל - body, כך:
<style type="text/css">
.MyBody { background-color: green; }
</style>
<body class="MyBody">
<div class="hslice" id="main">
<h2 class="entry-title">Seattle Weather</h2>
<p class="entry-content">It is raining.</p>
</div>
<body>
--------------------------------
Alternative Update Source
בהרבה מקרים נרצה שהמנגנון של העידכונים עבור ה - Web Slice יהיה ממקור אחר מהדף שבו נרשמו ל - Web Slice, בדרך כלל זה יהיה כדי לחסוך בתעבורה, כדי שלא בכל פעם שה - Web Slice בודק האם יש עידכונים, הוא יצטרך לפנות לדף המקורי שיכול להיות מאוד גדול, ועם הרבה תוכן, אולי יהיה עדיף לייצר דף נפרד שיחזיק רק את התוכן של אותו Web Slice.
זה מאוד פשוט לביצוע.
הנה ה - Web Slice המקורי.
<div class="hslice" id="StudentMessage" style="width: 320px">
<div class="entry-content">
<div dir="rtl" style="font-family: Arial;">
<span class="entry-title"><b>הודעות לסטודנטים</b></span>
<asp:Label ID="lblCount" runat="server" class="entry-title"></asp:Label>
<asp:BulletedList ID="BulletedList1" runat="server">
</asp:BulletedList>
</div>
</div>
</div>
כעת נעשה שינוי קטן.
נעתיק את כל ה - div לדף חדש (שהשם שלו יהיה StudentMessageUpdate.aspx שכל תפקידו יהיה להציג את ההודעות,
בדף המקורי (היכן שנרשמים ל - Web Slice) נשאיר את מה שכתבנו (כדי שגם שם יראו את ההודעות לסטודנטים), אבל בסוף נוסיף את הקוד הבא:
<a rel="feedurl" href="StudentMessageUpdate.aspx#StudentMessage" style="display:none;"></a>
הקוד הזה יגרום לכך, שבכל פעם שהמנגנון של ה - Web Slice ירצה לעדכן את עצמו, הוא לא יפנה לדף המקורי (היכן שנרשמו אליו), אלא יפנה ל - StudentMessageUpdate.aspx שכל תפקידו מסתכם בלתת את השירות ל - Web Slice שלנו.
מה שחשוב הוא לכתוב rel=feedurl, ומומלץ להגדיר אותו כ - display:none, כך שלא יראו את הלינק.
בהמשך
לפוסט הראשון על Web Slice, נעסוק בפוסט הנוכחי על חלק מהמאפיינים (רשות וחובה) שאפשר להגדיר.
אז כמו שאנחנו כבר יודעים, יש שלושה מאפיינים שהם חובה.
מישהו צריך לקבל את class=hslice, אבל במידה ואנחנו רוצים לתת לאותו div גם style משלנו, נוכל לתת לו את השם של ה - class שלנו אחרי רווח, לדוגמא:
<div class="hslice myHsliceStyle" id="StudentMessage">
הפרמטר השני שהוא חובה הוא id שחייב להיות יחודי, אחרת רק הראשון יעבוד.
הפרמטר השלישי הוא - class=entry-title, מה שמעניין שאפשר לתת את ה - class הזה ליותר מאחד, וכך לייצר כותרת דינמית, לדוגמא:
<div class="hslice" id="StudentMessage" style="width: 320px">
<div class="entry-content">
<div dir="rtl" style="font-family: Arial;">
<span class="entry-title"><b>הודעות לסטודנטים</b></span>
<asp:Label ID="lblCount" runat="server" class="entry-title"></asp:Label>
<asp:BulletedList ID="BulletedList1" runat="server">
</asp:BulletedList>
</div>
</div>
</div>
כאן אנחנו רואים שההודעות לסטודנטים מגיעים מהשרת, ואנחנו רואים שיש שני entry-title.
protected void Page_Load(object sender, EventArgs e)
{
BulletedList1.Items.Add("ביום שלישי הבא יתקיים יום פתוח מאת שלמה על C# 4.0 ");
BulletedList1.Items.Add("יום הסטודנט בסלע מתקרב");
lblCount.Text = "(" + BulletedList1.Items.Count.ToString() + ")";
}
כמובן שבקוד אמיתי אנחנו מביאים את ההודעות מ -DB,
אבל כרגע בכל פעם שיתעדכנו ההודעות הסטודנט יראה את מספר ההודעות הנוכחי.
ההגבלה היחידה - עד 128 תווים.
------------------
הגדרת ברירת המחדל עבור זמן הריענון של WebSlice הוא יום, המשתמש יכול לשנות את זה בהגדרות של ה - Web Slice, בנוסף אנחנו יכולים לשנות את ברירת המחדל על ידי שימוש ב - ttl.
<div class="hslice" id="StudentMessage" style="width: 320px">
<div class="entry-content">
<div dir="rtl" style="font-family: Arial;">
<span class="entry-title"><b>הודעות לסטודנטים</b></span><ul>
<li>ביום שלישי הבא יתקיים יום פתוח מאת שלמה על C# 4.0 </li>
<li>יום הסטודנט בסלע מתקרב</li>
</ul>
</div>
</div>
<abbr class="ttl" title="15">
</abbr>
</div>
שימו לב לשימוש ב - title כדי לקבוע את הזמן (15 דקות הינו הזמן המינימלי)
אפשר גם לקבוע מתי ה - Web Slice יפסיק לעבוד באמצעות שימוש ב - endtime, כך:
<div class="hslice" id="StudentMessage" style="width: 320px">
<div class="entry-content">
<div dir="rtl" style="font-family: Arial;">
<span class="entry-title"><b>הודעות לסטודנטים</b></span><ul>
<li>ביום שלישי הבא יתקיים יום פתוח מאת שלמה על C# 4.0 </li>
<li>יום הסטודנט בסלע מתקרב</li>
</ul>
</div>
</div>
<abbr class="ttl" title="15">
</abbr>
<abbr class="endtime" title="25 Jul 2009 17:30:00 PST">
</abbr>
</div>
די אהבתי את הרעיון של כתיבת
סדרת פוסטים, זה נותן את היכולת להקיף נושא מסויים מכל הצדדים שלו.
אז חשבתי לכתוב סדרה על הפיצ'רים של IE8, ותודה
לגיא על העזרה.
כתבתי בעבר על - כמה זה קל לייצר
Web Slice, בפוסט הזה אני אתחיל מההתחלה, נראה איך לייצר Web Slice פשוט, ונתקדם (בפוסטים הבאים) לתכונות מתקדמות של Web Slice.
מה זה בעצם WebSlice בכלל ?
(מתוך העזרה של Windows - לצערי העזרה של 7 windows היא באנגלית, גם אם אני משנה את שפת התצוגה לעברית)
A Web Slice is a specific portion of a webpage that you can subscribe to, and which enables you to see when updated content—such as the current temperature, or a changing auction price—is available from your favorite websites. Once you have subscribed to the Web Slice, it appears as a link on the Favorites bar. When the Web Slice is updated, the link on the Favorites bar will appear with bold formatting. You can then click the link to see the updated content.
הנקודה החשובה בהבנה של WebSlice - שהוא יודע להציג מקטע מתוך דף אינטרנט ולהתעדכן אוטומטית.
נראה דוגמא, ואז נראה איך מממשים את זה.
בעבודה השוטפת שלי אני אחראי להקים את האתר לסטודנט של
סלע, אחד מהדפים הוא "הודעות לסטודנט" נניח שהוא נראה כך:
כדי לראות את ההודעות הסטודנט צריך להיכנס לאתר של סלע, ולגלוש לדף של הודעות לסטודנט, בעזרת IE8 אני יכול להקל עליו את התהליך,
כדי לראות את ההודעות, הוא בסך הכך יצטרך ללחוץ על לינק ב - Favorites Bar (מתוך כל דף) והוא יראה את ההודעות.
כדי להוסיף את ההודעות כ - WebSlice לדפדפן, מה שהסטודנט צריך לעשות - זה ללכת עם העכבר על התוכן של ההודעות והוא יקבל את המסגרת הירוקה מסביב לתוכן.
והוא ילחץ על הסמל הירוק מצד שמאל למעלה,
או במידה והוא רוצה לראות את כל ה - WebSlice שקיימים בעמוד, אפשר ללחוץ על הלחצן Add Web Slice
הסטודנט יקבל את המסך הבא:
כשהסטודנט ילחץ על Add to Favorites Bar, יתווסף ה"הודעות לסטודנטים"
כשהסטודנט ילחץ על הלינק, הוא יקבל את המסך הבא.
וכך הסטודנט יוכל לראות בקלות את ההודעות שהוא מקבל. (בכל פעם שההודעות יתעדכנו - הלינק יהיה מודגש).
אז איך מייצרים Web Slice ?
נכיר את רשימת ההגדרות.
| class="hslice" |
מזהה את התוכן של ה - div שיש לו את ההגדרה, כ - WebSlice |
| id="Uniqe Id" |
מזהה יחודי של אותו div שהוגדר כ - hslice, במידה יהיה יותר מ - hslice אחד עם אותו id, אחד מהם לא יעבוד |
| class="entry-title" |
הכותרת של ה - Web Slice, זה יכול להיות מקונן בתוך ה - entry-content |
| class="entry-content" |
התוכן שיופיע בתוך ה - WebSlice |
לדוגמא:
<div class="hslice" id="StudentMessage" style="width: 320px">
<div class="entry-content">
<div dir="rtl" style="font-family: Arial;">
<span class="entry-title"><b>הודעות לסטודנטים</b></span><ul>
<li>ביום שלישי הבא יתקיים יום פתוח מאת שלמה על C# 4.0 </li>
<li>יום הסטודנט בסלע מתקרב</li>
</ul>
</div>
</div>
</div>