Adobe Air – כתיבת אפליקציה ראשונה – הרחבה

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

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

באפליקציה הקודמת שלנו, השתמשנו בשני אובייקטים: File שהשתמשנו בתכונה הסטטית שלו ובמתודה שלו על מנת לקבל אובייקט של filePath – הפניה לקובץ שלנו. האובייקט השני והחשוב מאד שבו השתמשנו הוא FileStream שבאמצעותו פתחנו וקראנו את תוכן הקובץ.

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


<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">
            var file;
			
			function readLocalFile()
			{
                var fileString = document.getElementById('myFile').value;
				var desktopDir = air.File.desktopDirectory;
				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').value = content;
            }		
        </script>
	</head>

    <body>
        <h3>MY File Reader</h3>
        <input id="myFile" type="file" />
        <button onclick="readLocalFile()">Read My File!</button>
		<button onclick="writeLocalFile()">Write My File!</button>
		<textarea cols="50" rows="10" id="result"></textarea>
    </body>
</html>

זה הקוד שיוצר את ה-textarea שמקבל את המידע וגם שולח אותו:
<textarea cols="50" rows="10" id="result"></textarea>

זה הקוד שיוצר את הכפתור שמבצע את הכתיבה. יש לו פונקצית onclick שמייד נכתוב:
<button onclick="writeLocalFile()">Write My File!</button>

שימו לב שבחזית ה-script גם עשיתי שינוי קטן: משתנה file, המכיל את מיקום הקובץ, יצא אל מחוץ לפונקציה כיוון שאני ארצה להשתמש בו גם בפונקציה שכותבת את התוכן לקובץ. לאחר שפתחתי קובץ וטענתי את תוכנו ל-textarea, אין טעם ליצור נתיב חדש אלא אפשר להשתמש בנתיב הקודם.

ועכשיו לכתיבת הפונקציה הקודמת. נסתכל בדוקומנטציה של JavaScript ל-Adobe Air ונגלה שאנחנו יכולים להשתמש ב-FileStream על מנת לכתוב תוכן. ראשית ניצור FileStream וניקח גם את התוכן מה-textarea:


			function writeLocalFile()
			{
				var fs = new air.FileStream();
				var content =  document.getElementById('result').value;
			}

מה לעשות עכשיו? אנחנו חייבים לפתוח את ה-stream באמצעות open. הפעם, הפרמטרים שאנו מעבירים הם הנתיב לקובץ, אותו file שדנו בו קודם ו-air.FileMode.WRITE: תכונה סטטית שמודיעה ל-FileStream שהפעם אנו כותבים.


			function writeLocalFile()
			{
				var fs = new air.FileStream();
				var content =  document.getElementById('result').value;
				fs.open(file, air.FileMode.WRITE);
			}

עכשיו כל מה שנותר לעשות זה לכתוב באמצעות מתודת writeUTFBytes שהפרמטר שלה הוא התוכן ואחרי כן לסגור את ה-FileStream.


			function writeLocalFile()
			{
				var fs = new air.FileStream();
				var content =  document.getElementById('result').value;
				fs.open(file, air.FileMode.WRITE);
				fs.writeUTFBytes(content);
				fs.close();
			}

וזה הכל! מאד מאד פשוט, לא? כך הקוד נראה במלואו:


<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">
            var file;
			
			function readLocalFile()
			{
                var fileString = document.getElementById('myFile').value;
				var desktopDir = air.File.desktopDirectory;
				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').value = content;
            }
			function writeLocalFile()
			{
				var fs = new air.FileStream();
				var content =  document.getElementById('result').value;
				fs.open(file, air.FileMode.WRITE);
				fs.writeUTFBytes(content);
				fs.close();
			}
			
        </script>
	</head>

    <body>
        <h3>MY File Reader</h3>
        <input id="myFile" type="file" />
        <button onclick="readLocalFile()">Read My File!</button>
		<button onclick="writeLocalFile()">Write My File!</button>
		<textarea cols="50" rows="10" id="result"></textarea>
    </body>
</html>

רק צריך לזכור להעזר בדוקומנטציה שצריכה להיות פתוחה כל הזמן.

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

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

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

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

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

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

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

פתרונות ומאמרים על פיתוח אינטרנט

רינדור של קליינט סייד עם SSR

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

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