TAChart – חלק שני

בחלק הקודם, דיברתי על קצה המזלג אודות TAChart. בשל אורך הפוסט, הוא חולק למספר חלקים, וסה"כ יהיו 4 חלקים לכל הנושא (כולל הפוסט הקודם), בשביל להקל על הקריאה.

tachart_example

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

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

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

עיצוב וויזואלי

דבר ראשון, ניצור לנו אפליקציה חדשה עם לזרוס. נלך לטאב של Standard אשר סבור להניח כי כבר מצביע לכם על דברים, נזרוק על הטופס TPanel, ונגיד לו כי Align הוא Bottom. זה אומר לרכיב שתמיד ידאג להצמיד את עצמו לתחתית הcontiner שלו, במקרה הזה כמובן, זה החלון שלנו.

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

לאחר מכן, נלך לטאב של Additional ונזרוק לנו על ה pnlBottom את הרכיב TStringGrid. זה בעצם הרכיב שאיתו נבצע את העריכות שלנו.

גם לרכיב זה, שיניתי את השם, וגרמתי לו להיות sgGraphDetails. המקדם מסביר כי זה StringGrid, בעוד שהשם מסביר לי מה הוא עושה.

נזרוק 4 כפתורים (תבחרו את הסוג שלדעתכם מתאים) אל pnlBottom , ונתחיל לשחק עם העיצוב שנרצה לקבל.

אני למשל בחרתי כי הכפתורים יהיו בצד ימים, ומסודרים לפי סוגי פעולות. כאשר ה2 העליונים תמיד דבוקים כלפי מעלה, והשניים התחתונים כלפי מטה, והם גם תמיד דבוקים לצד ימין (כל הארבעה). מבצעים זאת על ידי שימוש בתכונה Anchors (ראו את התמונה למעלה).

  • הכפתור הראשון קיבל כותרת של Add Item. והוא קיבל את השם btnAddItem.
  • הכפתור השני קיבל את השם Remove Last Item .השם אותו קיבל הוא btnRemoveLastItem.
  • הכפתור השלישי קיבל כותרת של Apply. והשם שלו הוא btnApply.
  • הכפתור הרביעי קיבל כותרת של Export. וכמובן שהשם שלו כמו שאתם כבר מזמן, מבינים הוא btnExport.

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

אמרתי לsgGraphDetails, שיש לו רק שורה אחת כרגע  על ידי שינוי התכונה RowCount.
לאחר מכן בתכונה Options, הודעתי כי האפשרות לעריכה מאופשרת.
עם ה StringGrid, הלכתי להגדיר את תכונת ה Columns בצורה וויזואלית.

  • העמודה הראשונה שהגדרתי קיבלה כותרת בשם Name. וזהו השינוי היחיד שהיא קיבלה.
  • העמודה השניה שהגדרתי קיבלה כותרת בשם Percentage וגם כאן זה השינוי היחיד.
  • העמודה השלישית, קיבלה את הכותרת Color, אבל קיבלה עוד שינוי: ButtonStyle מצביע על כפתור בעל שלוש נקודות (Ellipsis), היות ואנחנו נאפשר למשתמש לבחור בצורה וויזואלית איזה צבע הוא מעוניין להשתמש עבור כל עמודה לגרף.

לאחר מכן, זרקתי על הטופס, רכיב בשם TSplitter. כיוונתי אותו באמצעות align להיות צמוד לBottom. הוא יאפשר לנו לשנות את גודל הTPanel וכן של הגרף בצורה דינאמית. הרכיב צריך להיות מעל pnlBottom.
הSplitter קיבל את השם spltBottom.

עכשיו הלכתי לטאב הנקרא Chart וזרקתי על החלון רכיב בשם TAChart, והגדרתי אותו עם Align להיות על הclient, דבר שאומר כי הוא תופס את כל הגודל הפנוי האפשרי.

שיחקתי עם הגדרות ה Legend של Chart (הייתי מאוד מקורי בשם שלו, תודו) שיתאימו לצורך ולמראה שאני רוצה, וכן שיניתי את הוויזואליות של הצירים, וצבע הרקעים השונים, וזה כל השינויים שעשיתי וויזואלית.

זרקתי גם מטאב Dialogs שני רכיבים. זרקתי את TColorDialog לבחירת צבע, וכן SaveDialog, לייצא יותר מאוחר את הגרף.

tachart_designtime

מחשבה אחת על “TAChart – חלק שני

  1. פינגבק: TAChart – חלק שלישי | לראות שונה

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s