שאלה בכתיבת קוד CS

[ברק קרב]

שאלה בכתיבת קוד CS

אני בונה אתר עם כמה מחלקות, שתפקיד אחת מהן הוא להחזיר טבלאות HTML לתצוגה בצד הגולש. במקור פשוט כתבתי כמו שהייתי רגיל, ע"י כתיבת טבלא לפי סימני HTML לתוך סטרינג, והצגתי אותו. כמובן שלגולש זה לא שינה, והוא רואה את הכל טוב. אני מנסה להפוך את זה לטבלאות של .net, וזה נראה לי המון עבודה ללא סיבה. ההבדל בכמות שורות הקוד שנדרש כדי לכתוב טבלא "ישירות" לסטרינג לעומת כתיבתן בצורה "מסודרת" ענקי! צירפתי מספר שורות קוד חדשות שעשיתי (וזה רק חלק קטן! זה פשוט לא נגמר) , כדי לדעת - האם אני כותב נכון?

// טבלא ראשית Table MainTbl = new Table(); // הגדרות עבור טבלא MainTbl.CellPadding = 0; MainTbl.CellSpacing = 0; MainTbl.Width = Unit.Parse("456") ; TableRow MainRow = new TableRow(); MainTbl.Rows.Add(MainRow); // טור קו שמאלי של טבלא ראשית TableCell MainLineLeftCell = new TableCell(); MainRow.Cells.Add(MainLineLeftCell); MainLineLeftCell.Width = Unit.Parse("1px"); MainLineLeftCell.Height = Unit.Parse("100%"); MainLineLeftCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); // טור שמאלי של טבלא ראשית TableCell MainLeftCell = new TableCell(); MainLeftCell.ColumnSpan = 0; MainLeftCell.Width = Unit.Parse("439"); MainRow.Cells.Add(MainLeftCell); // הוספת טבלא לתוך התא השמאלי Table LeftTable = new Table(); MainLeftCell.Controls.Add(LeftTable); // הגדרות עבור טבלא שמאלית LeftTable.Width = Unit.Parse("100%"); LeftTable.CellSpacing = 0; LeftTable.CellPadding = 0; LeftTable.Height = Unit.Parse("100%"); // שורה עליונה TableRow leftUpRow = new TableRow(); LeftTable.Rows.Add(leftUpRow); TableCell leftUpCell = new TableCell(); leftUpRow.Cells.Add(leftUpCell); leftUpCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); leftUpCell.Height = Unit.Parse("1px"); leftUpCell.Width = Unit.Parse("100%"); // שורה אמצעית TableRow leftMRow = new TableRow(); LeftTable.Rows.Add(leftMRow); TableCell leftMCell = new TableCell(); leftMRow.Cells.Add(leftMCell); // שורה תחתונה TableRow leftDRow = new TableRow(); LeftTable.Rows.Add(leftDRow); TableCell leftDCell = new TableCell(); leftDRow.Cells.Add(leftDCell); leftDCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); leftDCell.Height = Unit.Parse("1px"); leftDCell.Width = Unit.Parse("100%"); // טור ימני של טבלא ראשית TableCell MainRightCell = new TableCell(); MainRightCell.ColumnSpan = 0; MainRightCell.Width = Unit.Parse("16"); MainRightCell.Height = Unit.Parse("100%"); MainRow.Cells.Add(MainRightCell);​

 

[מתכNET]

אז תכתוב כמו שכתבת פעם.

 

[EdotK]

זה אכן המון עבודה ללא סיבה

אני לא מכיר סיטואציה אחת בה כדאי לעבוד עם הטבלאות האלו. מה שכן, כדאי להמנע כמה שיותר מבנייה של HTML בסגנון ASP. לפעמים זה הפתרון הכי מהיר הכי נוח, אבל ברוב המקרים כדאי להתאמץ טיפה יותר ולבצע את זה ע"י GridView. קוד בסגנון ASP מאוד לא קריא, וקשה מאוד לנהל אותו מאוחר יותר. כמעט את כל הדוחות למיניהם אפשר לבצע עם GridView אם יודעים לעבוד נכון. ראיתי שלעיתים קרובות למפתחים חדשים ב.net יש נטיה להמנע משימוש בפקד הזה, וחבל, כי זה אחד הפקדים היותר מוצלחים - גם אם לוקח קצת זמן לרכוש שליטה בו.

 

[ברק קרב]

הגריד ויו נראה לי פחות מתאים

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

 

[EdotK]

בשביל זה קיים DataList.

 

[24sharon]

לדעתי במקרה הזה: repeater

 

[Justin Angel]

קה פרובלמה מואי צ'יקיטה?

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

// טור קו שמאלי של טבלא ראשית TableCell MainLineLeftCell = new TableCell(); MainRow.Cells.Add(MainLineLeftCell); MainLineLeftCell.Width = Unit.Parse("1px"); MainLineLeftCell.Height = Unit.Parse("100%"); MainLineLeftCell.Style.Add("background-image", "url(simages/FramePixel.gif)");​

נוציא את כל קביעת המאפיינים הזו למתודה סטטית

// טור קו שמאלי של טבלא ראשית MainRow.Cells.Add(TableHelper.GetNewCell()); public static class TableHelper { public static TableCell GetNewCell() { TableCell ReturnCell = new TableCell(); ReturnCell.Width = Unit.Parse("1px"); ReturnCell.Height = Unit.Parse("100%"); ReturnCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); return ReturnCell; } }​

OK, אז מה עשינו כאן? לקחנו את כל המאפיינים שנקבעו ושמנו את הקביעה שלהם בתוך מתודה סטטית. המתודה הסטטית הזו גם מחזירה את התא החדש ובחוץ אנחנו דואגים להוסיף אותו לרשימת התאים. עכשיו נטפל בקוד הזה:

// טור שמאלי של טבלא ראשית TableCell MainLeftCell = new TableCell(); MainLeftCell.ColumnSpan = 0; MainLeftCell.Width = Unit.Parse("439"); MainRow.Cells.Add(MainLeftCell);​

אפשר לראות שההבדל בין מה ש-GetNewCell מחזיר לנו לבין מה שאנחנו צריכים זה ה-Width וה-ColumnSpan. אז נשנה את המתודה כך שעדיין GetNewCell יחזיר בדיוק אותו TableCell, אבל גם יהיה לנו Overload שמאפשר להחזיר בדיוק מה שאנחנו צריכים.

public static class TableHelper { public static TableCell GetNewCell() { return GetNewCell("1px", 1); } public static TableCell GetNewCell(string Width, int ColumnSpan) { TableCell ReturnCell = new TableCell(); ReturnCell.ColumnSpan = ColumnSpan; ReturnCell.Width = Unit.Parse(Width); ReturnCell.Height = Unit.Parse("100%"); ReturnCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); return ReturnCell; } } // טור קו שמאלי של טבלא ראשית MainRow.Cells.Add(TableHelper.GetNewCell()); // טור שמאלי של טבלא ראשית MainRow.Cells.Add(TableHelper.GetNewCell("439", 0));​

כפי שאפשר לראות, לא שנינו את העבודה של GetNewCell בלי פרמטרים, אבל קיים GetNewCell עם פרמטרים נוספים שמאפשרים לקבוע מאפיינים נוספים. נמשיך עם הקוד הבא:

TableCell leftUpCell = new TableCell(); leftUpRow.Cells.Add(leftUpCell); leftUpCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); leftUpCell.Height = Unit.Parse("1px"); leftUpCell.Width = Unit.Parse("100%");​

עכשיו אנחנו נדרשים לקבוע גם גובה וגם רקע (שהוא זהה לכל התאים בעלי הרקע), אז נוסיף עוד overload של GetNewCell שמקבל את הגובה של התא וגם מקבל האם צריך להוסיף רקע.

leftUpRow.Cells.Add(TableHelper.GetNewCell("100%", "1px", 1, true)); public static class TableHelper { public static TableCell GetNewCell() { return GetNewCell("1px", 1); } public static TableCell GetNewCell(string Width, int ColumnSpan) { return GetNewCell(Width, "100%", ColumnSpan, false); } public static TableCell GetNewCell(string Width, string Height, int ColumnSpan, bool AddBackground) { TableCell ReturnCell = new TableCell(); ReturnCell.ColumnSpan = ColumnSpan; ReturnCell.Width = Unit.Parse(Width); ReturnCell.Height = Unit.Parse(Height); if (AddBackground) ReturnCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); ReturnCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); return ReturnCell; } }​

נמשיך עם שני התאים האלו:

TableCell leftDCell = new TableCell(); leftDRow.Cells.Add(leftDCell); leftDCell.Style.Add("background-image", "url(simages/FramePixel.gif)"); leftDCell.Height = Unit.Parse("1px"); leftDCell.Width = Unit.Parse("100%"); // טור ימני של טבלא ראשית TableCell MainRightCell = new TableCell(); MainRightCell.Colum​

 

[Justin Angel]

../images/Emo26.gifהמשך

עכשיו הקוד שנשאר לנו נראה ככה:

// טבלא ראשית Table MainTbl = new Table(); // הגדרות עבור טבלא MainTbl.CellPadding = 0; MainTbl.CellSpacing = 0; MainTbl.Width = Unit.Parse("456"); TableRow MainRow = new TableRow(); MainTbl.Rows.Add(MainRow); MainRow.Cells.Add(Cells.LeftLine); // טור שמאלי של טבלא ראשית MainRow.Cells.Add(Cells.LeftColumn); // הוספת טבלא לתוך התא השמאלי Table LeftTable = new Table(); MainRow.Cells[MainRow.Cells.Count - 1].Controls.Add(LeftTable); // הגדרות עבור טבלא שמאלית LeftTable.Width = Unit.Parse("100%"); LeftTable.CellSpacing = 0; LeftTable.CellPadding = 0; LeftTable.Height = Unit.Parse("100%"); // שורה עליונה TableRow leftUpRow = new TableRow(); LeftTable.Rows.Add(leftUpRow); leftUpRow.Cells.Add(Cells.TopRow); // שורה אמצעית TableRow leftMRow = new TableRow(); LeftTable.Rows.Add(leftMRow); leftMRow.Cells.Add(new TableCell()); // שורה תחתונה TableRow leftDRow = new TableRow(); LeftTable.Rows.Add(leftDRow); leftDRow.Cells.Add(Cells.LowerRow); // טור ימני של טבלא ראשית MainRow.Cells.Add(Cells.RightColumn); this.Controls.Add(MainTbl);​

ניקח גם את המאפיינים של טבלה ונכניס למתודות ומאפיינים:

public static class Tables { public static Table Main { get { return TableHelper.GetNewTable("456"); } } public static Table Left { get { return TableHelper.GetNewTable("100%", "100%"); } } } Table MainTbl = Tables.Main; Table LeftTable = Tables.Left;​

עכשיו נוסיף גם מאפיינים סטטים לשורות כך שבתוכן יתווספו תאים.

// שורה תחתונה TableRow leftDRow = new TableRow(); LeftTable.Rows.Add(leftDRow); leftDRow.Cells.Add(Cells.LowerRow); public static class Rows { public static TableRow LowerRow { get { TableRow ReturnRow = new TableRow(); ReturnRow.Cells.Add(Cells.LowerRow); return ReturnRow; } } } LeftTable.Rows.Add(Rows.LowerRow);​

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

public partial class Default3 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Controls.Add(Tables.Main); } } public static class TableHelper { public static TableRow GetNewRow(TableCell CellInRow) { TableRow ReturnRow = new TableRow(); ReturnRow.Cells.Add(CellInRow); return ReturnRow; } public static Table GetNewTable(string Width) { Table ReturnTable = new Table(); ReturnTable.CellPadding = 0; ReturnTable.CellSpacing = 0; ReturnTable.Width = Unit.Parse(Width); return ReturnTable; } public static Table GetNewTable(string Height, string Width) { Table ReturnTable = GetNewTable(Width); ReturnTable.Height = Unit.Parse(Height); return ReturnTable; } public static TableCell GetNewCell() { return GetNewCell("1px", 1); } public static TableCell GetNewCell(string Width, int ColumnSpan) { return GetNewCell(Width, "100%", ColumnSpan, false); } public static TableCell GetNewCell(string Width, string Height, int ColumnSpan, bool AddBackground) { TableCell ReturnCell = new TableCell(); ReturnCell.ColumnSpan = ColumnSpan; ReturnCell.Width = Unit.Parse(Width); ReturnCell.Height = Unit.Parse(Height); &nbs​

 

[ברק קרב]

מקסים! תודה.