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>

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