כתיבת תוכנית ראשונה ב-Air

הסבר ודוגמאות לכתיבת תוכנית שקוראת קובץ טקסט ישירות מהדסקטופ באמצעות Adobe Air

אחרי שלמדנו במאמר הקודם לבנות תוכנית ב-Air ועל סביבת הפיתוח ואף כתבנו Hello World! הגיע הזמן ללמוד את ה-JavaScript API של התוכנה יותר לעומק. אחד מהכלים החזקים של Air הוא ה-API שלה. הרי 'סתם' דף HTML שרץ על המחשב המקומי לא היה מסייע לנו במיוחד, אך AIR מאפשרת לנו לעשות הרבה יותר באמצעות JavaScript – כולל גישה למערכת הקבצים של המחשב עצמו למשל. על מנת להדגים כמה זה קל, אנו נבנה אפליקציה שתקרא קובץ טקסטואלי מהמחשב ותציג לנו את תוכנו.

ראשית, נפתח את ה-Aptana וניצור קובץ לדוגמא, אפשר להשתמש גם בפרויקט ה-Hello World הקודם שלנו. אחרי כן נפתח עוד אתר חשוב שיהיה תמיד בדפדפן שלנו – הדוקומנטציה של Air שמכילה את כל ה-classים והאובייקטים שנצטרך. למי שמכיר ActionScript 3, זה אמור להיות מוכר. למי שלא, לא נורא ולא להבהל, אני אסביר בהמשך.

ראשית ניצור את ה-HTML. אין כאן משהו שאנחנו לא מכירים. יש פה title, כפתור input של קבצים וכפתור שיגור:


<html>
	<head>
        <title>MY File Reader</title>
        <link href="sample.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
        <script type="text/javascript">
 //MY SCRIPT WILL BE HERE
            
        </script>
	</head>

    <body>
        <h3>MY File Reader</h3>
        <input id="myFile" type="file" />
        <button onclick="readLocalFile()">Read My File!</button>
		<div id="result">
			
			
		</div>
    </body>
</html>

זה מהווה את ה-html הראשי של התוכנה שלנו ושוב, חוץ מ-script שכרגע אין בו שום דבר אין בו כלום ממה שצריך להסביר. הכפתור מפעיל פונקציה (ב-onclick) שאותה נכתוב עכשיו.

ראשית, נכתוב את הפונקציה שתרוץ עם לחיצת הכפתור (היא כתובה ב-onclick) ונקבל את המידע שנמצא בשדה ה'קובץ'. זה דבר פשוט מאד יחסית וכך עושים אותו (אני כותב את מה שצריך להיות בתוך ה-script במקום //MY SCRIPT WILL BE HERE לעיל).


            function readLocalFile()
			{
                var file = document.getElementById('myFile').value;

            }

אחרי שיש לנו את הנתיב, אנחנו צריכים לטעון את הקובץ. פה באה לעזרתנו הדוקומנטציה. בואו ונפתח אותה ונסתכל על ה-class שלנו. בלי לנחש הרבה אפשר להניח שאנחנו נצטרך את class File. ראשית אנו נשתמש ב-static property שלו על מנת לקבל אובייקט של נתיב יחסי ל-desktop ואחרי כן אנו נשתמש במתודה של האובייקט שמחזירה לנו את הקובץ עצמו באמצעות הנתיב היחסי.

לא להבהל!!! אם אתם לא מכירים מספיק טוב OOP וזה נראה לכם קצת כמו סינית, אז פשוט תקבלו את הקוד הבא כפשוטו. קשה להסתדר בלי ידע ולו בסיסי ב-OOP ב-Air אבל זה עדיין אפשרי.


            function readLocalFile()
			{
                var fileString = document.getElementById('myFile').value;
				var desktopDir = air.File.desktopDirectory;
				var file = desktopDir.resolvePath(fileString);
            }

משתנה desktopDir מקבל אובייקט עם תכונה סטטית בשם desktopDirectory מאובייקט ה-file. התכונה הזו היא בעצם נתיב אל מערכת הקבצים של המשתמש, לא משנה באיזו מערכת קבצים הוא משתמש ובאיזו מערכת הפעלה.

משתנה file מכיל את התוצאות של המתודה של האובייקט שמכיל desktopDir. המתודה מקבלת פרמטר שהוא מחרוזת טקסט פשוטה של מיקום שמגיעה מה-input שלנו.

אחרי כן הגיע הזמן ליצור את אובייקט fileStream. מדובר באובייקט בסיסי לקריאה ולכתיבה של קבצים (די דומה במהות ל-netStream למי שמכיר). אחרי שניצור את האובייקט אנו נוכל להשתמש במתודת open על מנת לגשת את הקובץ ובמתודת readUTF על מנת לקרוא את תוכן הקובץ.


            function readLocalFile()
			{
                var fileString = document.getElementById('myFile').value;
				var desktopDir = air.File.desktopDirectory;
				var file = desktopDir.resolvePath(fileString);
                var fs = new air.FileStream();
                fs.open(file, air.FileMode.READ);
                var content = fs.readUTFBytes(fs.bytesAvailable);
            }

נוספו לקוד שלנו שלוש שורות. בשורה הראשונה var fs = new air.FileStream() אני יוצר אובייקט של FileStream. הצצה מהירה בדוקומנטציה תגלה כאמור שמדובר באובייקט שיש לו מתודות רבות והוא משמש אותנו לכתיבה ולקריאה של קבצים.

השורה השניה fs.open(file, air.FileMode.READ היא שימוש במתודת open שמקבלת שני פרמטרים, הראשון והחשוב ביותר הוא ה-file שלנו שמכיל את הנתיב היחסי של הקובץ ובלעדיו לא נוכל לפתוח את הקובץ כי לא נדע היכן הוא. הפרמטר השני הוא תכונה סטטית של אובייקט קטן בשם FileMode שמצהירה על כוונת המשורר. יש לנו גם FileMode.WRITE המשמשת לכתיבה וגם FileMode.APPEND ו-FileMode.UPDATE. אבל כיוון שמדובר בקריאה אנו מתייחסים ל-air.FileMode.READ.

השורה השלישית var content = fs.readUTFBytes(fs.bytesAvailable); היא משתנה המקבל את תוכן הקובץ עצמו באמצעות מתודת readUTFBytes שמקבלת פרמטר שהוא תכונה של FileStream. הפרמטר הוא האורך הכולל והוא די סטנדרטי במקרים האלו.

כל מה שנותר לעשות זה לסגור את ה-FileStream ולהדפיס את התוצאה ב-div result.


            function readLocalFile()
			{
                var fileString = document.getElementById('myFile').value;
				var desktopDir = air.File.desktopDirectory;
				var file = desktopDir.resolvePath(fileString);
                var fs = new air.FileStream();
                fs.open(file, air.FileMode.READ);
                var content = fs.readUTFBytes(fs.bytesAvailable);
                fs.close();
                document.getElementById('result').innerHTML = content;
            }

השתמשתי ב-innerHTML (שעדיף לא להשתמש בו כלל לעולם) על מנת לכתוב את התוצאה ל-div ששמו הוא result. כל מה שנותר לי לעשות זה להריץ את התוצאה ולייצא אותה. אפשר לנסות לראות כל קובץ שהוא, טקסט או לא טקסט (אבל עדיף טקסט). הנה הקוד במלואו:


<html>
	<head>
        <title>MY File Reader</title>
        <link href="sample.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
        <script type="text/javascript">
            function readLocalFile()
			{
                var fileString = document.getElementById('myFile').value;
				var desktopDir = air.File.desktopDirectory;
				var file = desktopDir.resolvePath(fileString);
                var fs = new air.FileStream();
                fs.open(file, air.FileMode.READ);
                var content = fs.readUTFBytes(fs.bytesAvailable);
                fs.close();
                document.getElementById('result').innerHTML = content;
            }
        </script>
	</head>

    <body>
        <h3>MY File Reader</h3>
        <input id="myFile" type="file" />
        <button onclick="readLocalFile()">Read My File!</button>
		<div id="result">
			
			
		</div>
    </body>
</html>

אפשר כמובן גם לשגר את תכולת הקובץ לאן שרוצים ב-AJAX (או בלי) או לשנות את תוכנו, באמצעות ה-API של AIR הכל הופך לפשוט הרבה יותר.

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

פוסטים נוספים שכדאי לקרוא

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

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

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

גלילה לראש העמוד