אחרי שלמדנו במאמר הקודם לבנות תוכנית ב-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 הכל הופך לפשוט הרבה יותר.
במאמר הבא אנו נרחיב את האפליקציה שבנינו ונאפשר לה גם לערוך ולכתוב את קובץ הטקסט שלנו.