אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
ראשי » מדריכים » סביבת Adobe Air - אדובי אייר » כתיבת תוכנית ראשונה ב-Air

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

רן בר-זיק יוני 26, 2009 8:26 am אין תגובות

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

אזהרה: עדיף מאוד לא להשתמש בסביבה הזו. היא כבר מיושנת מאוד.
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
אזהרה: עדיף מאוד לא להשתמש בסביבה הזו. היא כבר מיושנת מאוד.

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

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

אזהרה: עדיף מאוד לא להשתמש בסביבה הזו. היא כבר מיושנת מאוד.
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
סביבת Adobe Air - אדובי אייר
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
המאמרים האחרונים שהתפרסמו באינטרנט ישראל
  • התקנת hidden service ב-Tor על רספברי פיי

    התקנת hidden service ב-Tor על רספברי פיי

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

    רספברי פיי כשרת אינטרנט ביתי המאחסן וורדפרס

    דצמבר 27, 2020
    התקנת אתר אינטרנט מבוסס וורדפרס בשרת ביתי קטן ונחמד על רספברי פיי.
  • ניתוקים ואיטיות באינטרנט – מה עושים?

    ניתוקים ואיטיות באינטרנט – מה עושים?

    דצמבר 20, 2020
    שוב פעם אייקון הטעינה? צווחות מכל פינה בבית וטענות על ניתוקים? מאיפה מתחילים לטפל בזה? כך בודקים את העניין.
חיפוש
הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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