הודעות הודעות לרוב

שלום לכול קוראי הבלוג שלי, בקרוב כמה עדכונים מאוד חשובים

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

2. FlexUploader - בימים אלה ממש אני גם עובד על גרסה חדשה לגמרי לUploader בפלקס, עם Api בjavascript שאיתו יהיה קל יותר לעבוד.

במידה ואתם מעוניינים להיות מעודכנים, שלחו לי מייל לavi.kenso@gmail.com ואני מבטיח לעדכן בזמן היציאה של הרכיבים האלה, אני אעדכן גם בטוויטר שלי http://www.twitter.com/kensodev

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

 

בברכת שבוע טוב,

רכיב פלאש חינמי להעלאת קבצים

שלום לכולם,

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

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

איך הרכיב נראה?
ובכן, הרכיב הוא בעצם קובץ Swf ברוחב של 350 פיקסלים ובגובה של 116 פיקסלים.
יכול להתאים לכל אתר או מערכת ניהול שאתם בונים.

(צילום מסך)

איך משתמשים ברכיב?
ובכן, כל שאתם צריכים לעשות הוא להוסיף פונקציית Javascript בדף שבו הרכיב נמצא ובו אתם מורים לרכיב לאן הוא צריך לשלוח את הקובץ.

צד שרת
טכנולוגית צד השרת בה תשתמשו נתונה לבחירתכם, אתם יכולים לעשות שימוש בכל טכנולוגיה, בין אם PHP ובין אם Asp ובעתם כל טכנולוגיה שבאה להם טוב.
מבחינת הפלאש זה לא משנה. :-) הוא יאהב אתכם בכל מקרה.

אבטחה
אם אתם מקבלים שגיאת אבטחה, אתם צריכים להוסיף קובץ שנקרא CrossDomain.xml לRoot של הדומיין שאליו אתם רוצים להעלות את הקבצים.

ד.א
אם מישהו רוצה (וזה ממש חשוב לו) את הרכיב הזה בלי הלוגו שלי :-(, שלחו מייל ואשלח אליכם גרסה ללא הלוגו שלי.
המייל שלי הוא avi.kenso@gmail.com

כל דבר, מדיווחי באגים ועד הצעות לשיפורים יתקבלו בברכה, באמת שאשמח לשמוע כל דבר שתגידו. אבל בבקשה תגידו דברים טובים :-)

ניתן לראות מספר צילומי מסך של הרכיב הזה כאן.
ולהוריד אותו, כולל אתר דוגמא כאן

שילוב Flash בדף Html מבלי מסגרת

כמה פעמים נדרשנו לשלב באנר פלאש או כל אובייקט פלאש אחר בדף HTML.
כנראה שהמון.

יש המון שיטות לשילוב של באנר בתוך דף HTML, אחת מהשיטות היא שימוש בObject, שימוש בתג זה יכול ליצור לנו מסגרת מעצבנת מסביב לפלאש ואף לפעמים לא להציג את הפלאש בכלל עד שהמשתמש שלנו לא לוחץ עליו. מצב שאנחנו לא רוצים להגיע אליו.

במיוחד בשביל זה, יש לי פונקציה בJavascript שאני משלב אותו בדף בכל מקום שבו אני רוצה לשלב פלאש. כך, אני לא מקבל מסגרת מסביב לפלאש, יכול לשלב גם HTML וכו'.

נגיע להכל, אבל קודם כל, הנה הפונקציה. (מימוש שלה בדף)

//WriteFlashObj(sSrc,sWidth,sHeight,bTrans,sFlashVars,sID)
WriteFlashObj('images/bannerHosts/193x219.swf','193px','219px',false,'','BannerFlash')

 

אוקיי,
נסביר את הפרמטרים:

sSrc - מיקום הקובץ הפיזי (swf) של הפלאש
sWidth - רוחב הפלאש
sHeight - גובה הפלאש
bTrans - נתון בוליאני האם הפלאש יוטמע כשקוף או לא
sFlashVars - אם אנחנו רוצים להוסיף Variables, פחות רלוונטי לבאנרים
sID -זיהוי של האובייקט בדף, ניתן גם לגשת אליו בDocument.getElementById

אוקיי, ועכשיו לפונקציה עצמה

   1: function DocumentWrite(sHtml)

   2: {

   3:     document.writeln(sHtml);

   4: }

   5: ///write flash into the html

   6: function WriteFlashObj(sSrc,sWidth,sHeight,bTrans,sFlashVars,sID)

   7: {

   8:     var sObj = "";

   9:     var sWMode = "";

  10:     var sObjID = sSrc.replace(".swf","");

  11:     var sVars = "";

  12:     var sPrfx = "?";

  13:     if(sFlashVars){

  14:         sVars = sFlashVars;

  15:     }

  16:     if(sID){

  17:         sObjID = sID;

  18:     }else{

  19:         sObjID = sSrc.replace(".swf","");

  20:     }

  21:     sObj = sObj+"<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab' width='"+sWidth+"' height='"+sHeight+"' id='"+sObjID+"' align='middle' VIEWASTEXT>";

  22:     sObj = sObj+"<param name='allowScriptAccess' value='sameDomain' />";

  23:     sObj = sObj+"<param name='movie' value='"+sSrc+"' />";

  24:     sObj = sObj+"<param name='quality' value='high' />";

  25:     sObj = sObj+"<param name='bgcolor' value='#ffffff' />";

  26:     sObj = sObj+"<param name='flashvars' value='"+sVars+"' />";

  27:     if(bTrans == true){

  28:         sObj = sObj+"<PARAM NAME='WMode' VALUE='Transparent'>";

  29:         sWMode = "wmode='transparent'";

  30:     }

  31:     sObj = sObj+"<embed src='"+sSrc+"' flashvars='"+sVars+"' quality='high' bgcolor='#ffffff' "+sWMode+" width='"+sWidth+"' height='"+sHeight+"' ID='"+sObjID+"' NAME='bg' align='middle' allowScriptAccess='sameDomain' swLiveConnect=true ID='bg' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />";

  32:     sObj = sObj+"</object>";

  33:     

  34:     DocumentWrite(sObj);

  35: }

לא לדאוג, אם לא ניתן לקרוא, אני אצרף לינק לקובץ js שיהיה קריא מאוד :-)

הנה הוא כאן

אוקיי, עכשיו ניתן להוסיף פלאשים לדף כמה שרוצים :-)

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

בהצלחה, וכרגיל, אשמח לשמוע תגובות.

מציאת כל הTriggers בבסיס נתונים

שלום לכולם,

לעיתים תכופות מאוד, אני יוצר Triggers בבסיסי נתונים של Sql Server.

מאוד נוח לי לעבוד איתם וזה גם משפר ביצועים ופחות קריאות מהאפליקציה.

השימוש שלי בד"כ בטריגרים הוא בדברים שהאפליקציה לא צריכה "לדעת" עליהם.

לדוגמא, אם אני מוחק Post מתוך בלוג של משתמש, אני אשתמש בTrigger על מנת למחוק את כל הComments של הPost הזה.

כמובן שישנם עוד שימושים אבל לא ניכנס אליהם כרגע, זה לא הנושא של הPost.

בכל אופן,

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

כאן ניתן למצוא את הטריגרים: (בד"כ)

לManagement Studio של Sql אין מקום מובנה שבו ניתן לראות את כל הTriggers כמו שניתן לראות Stored Procedures, אבל כן ניתן לכתוב Script שימצא לנו את כולם.

הנה הוא:

SELECT myTriggers.[name] TableName, Triggers.[name] TriggerName, 

CASE 

WHEN myTriggers.deltrig = Triggers.id  THEN 'Delete' 

WHEN myTriggers.instrig = Triggers.id THEN 'Insert' 

WHEN myTriggers.updtrig = Triggers.id THEN 'Update' 

END 'TriggerType'

FROM sysobjects Triggers JOIN sysobjects myTriggers ON Triggers.parent_obj = myTriggers.[id] WHERE Triggers.xtype='TR'

כך תוכלו למצוא בקלות את הTriggers שיש לכם בכל בסיס נתונים.

כך גם אם מתכנתים אחרים צריכים לעבוד על אותו בסיס נתונים, אני ממליץ להם למצוא כך את הTriggers ולהבין את הלוגיקה ה"חבויה" יותר של בסיס הנתונים - בהצלחה

** נבדק על Sql 2005, Sql2000.

בהצלחה

onmouseout אמיתי בJavascript

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

נסביר.
נניח שיש לנו Div בPosition Relative ובתוכו Div אחר בPosition Absolute.
בתוך הdiv הזה, יש לנו לצורך העניין לינקים.

אנחנו רוצים, שכאשר העכבר יוצא מהDiv הזה, נסתיר אותו.

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


הDiv הצהוב הוא הDiv שלנו בPosition:relative, ובתוכו ישנו Div בPosition Absolute.
כך נראה הCss של הדף שלנו.

body
{
width:100%;
}
.mainContainer
{
width:100%;
text-align:center;
}
.mainContainer .content
{
width:500px;
height:500px;
margin:auto;
background-color:Yellow;
position:relative;
}
.mainContainer .content .innerFloatingDiv
{
position:absolute;
top:0px;
left:0px;
background-color:#CCCCCC;
width:200px;
height:200px;
}

עכשיו, תרחיש פשוט, נחבר פונקציה לOnMouseOut של הDiv האפור ונציג Alert "אתה בחוץ" כאשר אנחנו יוצאים ממנו.
כך זה נראה.
בואו ונראה מה הבעיה,

אחרי שראיתם כאן בדיוק מה הבעיה, בוא ונראה כיצד ניתן לפתור אותה בצורה קלה ביותר.
לתוך הפונקציה שלנו שמקבלת את הOnMouseOut נוסיף פרמטר שהוא בעצם האובייקט שלנו (הDiv).
נחבר את האובייקט הזה לפונקציה שתחזיר לנו True - אם העכבר באמת יצא מהגבולות של האובייקט, וFalse אם לא.

בצורה כזו
כך הפעלנו קודם את הפונקציה.

div class="innerFloatingDiv" onmouseout="displayAlertOnRollOut()"

עכשיו, אנו נפעיל אותה כך, בעקבותיה באות הפונקציות בJavascript.

div class="innerFloatingDiv" onmouseout="displayAlertOnRollOut(this)"

function displayAlertOnRollOut(obj)
{
if(isMouseRealyOutOfObject(obj))
{
alert('אתה בחוץ');
}
}
function isMouseRealyOutOfObject(obj)
{
if (!window.event)
return true;
var event = window.event;
var oFrom = event.fromElement;
var oTo = event.toElement;
return (obj == oFrom || obj.contains(oFrom)) && !obj.contains(oTo) && obj != oTo;
}

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

בהצלחה!

תרגישו חופשי לומר לי אם משהו לא הלך.

הוספת יכולת לניגון FLV דרך הIIS

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

היכולת לנגן את הקובץ הזה בצורה של Progressive וגם היכולת להשתמש באותו הקובץ בדיוק לStreaming דרך FMS פשוט עושה לי את החיים כמפתח קלים יותר.
בלי לדאוג לפליירים שונים ומשונים והתאמה לדפדפנים.

ועוד משהו כמובן, עיצוב, את הפליירים לFLV אני יכול לעצב איך שבא לי, אני פשוט מקבל מהArt את הSkin ועושה איתו מה שבא לי ואיך שבא לי :-) (אני משוגע!!!)

אבל IIS לא מגיע עם תמיכה לקובץ הזה במקור.

אם האתרים שלכם יושבים על שרתי Shared (שרתים משותפים) כנראה שאין לכם מה לדאוג ומישהו עשה את זה לפניכם, אבל אם אתם רוצים לבדוק את הקובץ על הIIS בבית, או שיש לכם אתר Dedicated אתם צריכים "ללמד" את הIIS מה זה הקובץ הזה.

וכך עושים את זה.
בממשק הניהול של הIIS בוחרים את האתר הרצוי.
זהו החלון שמתקבל.

לוחצים על Mime Types, ואז בחלון שקופץ על New


בExtenstion כותבים
flv.
בMime Type כותבים
video/x-flv

ו...
זהו!
יש לכם בIIS תמיכה לניגון של קבצי flv.

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

מערכת באנרים - תשובה לשאלה מפורום תפוז

שלום לכולם,

הפוסט הזה מוקדש לענות על שאלה מתוך פורום תפוז
השאלה המקורית כאן

אני אנסה לענות על השאלה אבל להכנס לכמה שפחות פרטים מבחינת האפליקציה, אחרי הכל רוב הדברים כאן ברורים לכולנו, זה בעצם Insert/Updated/Delete מתוך דטה בייס, שזה פעולה שרובנו מקיאים ממנה ביום יום שלנו.

הפוסט הזה יגע גם בc#, גם בsql server, וגם בפלאש (כן כן, בפלאש).

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

הנה בסיס הנתונים


כמו שאנחנו רואים יש לנו שלוש טבלאות

* טבלת באנרים
* טבלת סוגי באנרים
* טבלת קישור בין באנרים, סוגי באנרים ושמות דפים (נגע בטבלה זו בהמשך).

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


ממשק הניהול כפי שניתן לראות מכיל את רשימת הבאנרים שכבר קיימים לנו במערכת.
מכיל טופס איתו ניתן להוסיף באנר למערכת או לערוך את הבאנר שבוחרים מהGridView בצד ימין.

אם תשימו לב תוכלו לראות שיש כפתור קטן ליד הInput של הקובץ, הכפתור הזה נועד לשוטט בתוך תיקיית Files, אליה אנחנו יכולים להעלות קבצים בFTP, אני מוצא את השיטה הזו יעילה יותר ללקוחות מאשר להעלות בכל פעם קובץ ייעודי, כך הם יכולים בעצם לבחור באנר או תמונה או כל Resource אחר, ולהעלות את הקבצים בצורה נוחה מאוד.

כך זה נראה.

זה מאוד דומה לכל הBrowser's שמגיעים עם RTE's למיניהם.

מתישהו אני אעשה Post שיתייחס רק לבנייה של הComponent הזה, אני עובד על שיפור שלו עכשיו.

אוקיי,
בואו נראה מה יש לנו עד עכשיו
יש לנו בסיס נתונים מוכן
יש לנו ממשק ניהול מוכן

מה נשאר
באנר בפלאש לדוגמא
מארח באנר (מה?) הסבר בהמשך.

לצורך העניין נכין באנר בגודל של 193X219 פיקסלים.
(נא לא לרדת עלי, אני לא מעצב)


יופי, יש לנו באנר, עכשיו אנחנו צריכים ליצור מארח לבאנר (הבטחתי הסבר לא?)
מארח לבאנר הוא בעצם קובץ פלאש, בגודל המדויק של הבאנר שאותו הוא מארח.

תפקידו?
תפקידו של הקובץ הזה הוא לקבל אליו קובץ להפעלה
לקבל לינק לאחר לחיצה
להפעיל פונקציה כאשר הוא נטען (Views)
להפעיל פונקציה כאשר הוא נלחץ (Click)

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

יפה, נכון?

נמשיך...

בואו נראה איך נראה הבאנר המארח (רמז... הוא נראה אפילו פחות טוב מהבאנר שאני עיצבתי :-))

(הפלאש כתוב בActionScript 2 ומתאים לנגני פלאש 8 ומעלה, אבל באותה מידה אני יכול לכתוב אותו ל9)

אוקיי, אז מה הוא בעצם עושה?
אנחנו קובעים שלושה פרמטרים אותם אנחנו מעבירים לתוך הפלאש שלנו

banner_id - זיהוי הבאנר שלנו בבסיס הנתונים
Banner_Path - הנתיב לקובץ הפלאש של הבאנר האמיתי והמעוצב שלנו
bannerLink - הלינק אותו אנחנו צריכים להפעיל לאחר שהבאנר נלחץ.

בואו ונראה את הקוד שלנו

(Flash)

loadMovie(_root.Banner_path, _root.banner_loader);
ExternalInterface.call("flashAction", _root.banner_id, 'view');

שתי שורות הקוד האלה מאוד חשובות לנו
השורה הראשונה בעצם טוענת את הקובץ loadMovie ואם תשימו לב, היא משתמש בפרמטר Banner_Path שמועבר אליה.
banner_loader אינו בשימוש אבל בהחלט ניתן להשתמש בו לLoader עד שהבאנר הראשי יטען, כאן בדוגמה שלנו זה לא ממש ממומש :-)

השורה השנייה בעצם קוראת לפונקציה Javascript בשם flashAction ומעבירה אליה שני פרמטרים, האחר הוא banner_id שנכנס פנימה והשני הוא view.

מה זה אומר? (בהמשך)

אחלה, זה זה מה שקורה בטעינה, מה קורה בקליק?

on(release){
ExternalInterface.call("flashAction", _root.banner_id, 'click');
getURL(_root.bannerLink, "_blank");
}

שורה שנייה כאן מפעילה בדיוק את אותה הפונקציה המדוברת flashAction, ומעבירה את הפרמטר banner_id, אך הפעם מעבירה click.
השורה השנייה, מעבירה אותנו לURL שהעברנו פנימה בדפדפן חדש, או בטאב חדש (תלוי בדפדפן של הגולש)

יפה, אז מה הפונקציה בJavascript בעצם עושה.
היא קוראת לService (מאיפה הוא הגיע?) שבעצם אחראי ללכת לשרת ולבצע את הפעולות ישירות על הSQL.

ואז בService אנחנו נעשה התנייה
אם מועבר view, אנחנו נגדיל את השדה bannerViews ב1 לbanner_id.
אם מועבר click, אנחנו נגדיל את השדה bannerClicks ב1 לbanner_id.

כל אחד בדרך המימוש שלו, זה ממש לא משנה כאן, זה יכול להיות Access, או Sql עם NHibernate, זה יכול להיות הכל.

עכשיו אנחנו ניצור דף שצריך לארח את הבאנר שלנו.


יפה, אז עכשיו יש לנו גם דף שמארח לנו את הבאנר.

רגע, איזה פלאש אני מפעיל בדף?

הנה

WriteFlashObj('images/bannerHosts/193x219.swf?','193px','219px',false,'','BannerFlash')

וואו ואוו, נראה מסובך? לא, ממש לא

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

הפונקציה מחזירה לנו String שהיא הוציאה מבסיס הנתונים בהתאם למה ששמרנו שם.
להלן דוגמה למה שהפונקציה מחזירה

Banner_path=files/kenso_blog_flash_example.swf&banner_id=1&bannerLink=http://kensodev.blogspot.com

זהו, יש לנו מערכת באנרים מוכנה.

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

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

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

** הפוסט הוא סקירה כללית של איך לבנות את המערכת.
** בימים הקרובים אני אשתדל מאוד לבנות מערכת כזו שלמה כולל ההתקשרות לבסיסי הנתונים ואפרסם כאן את קוב המקור שלה, התעדכנו בבלוג בימים הקרובים (אם לא תראו את השורה הזו סימן שממש ממש לא היה לי זמן :-))

** עדכון 26.10.2008
קובץ קוד המקור של הFlash נמצא כאן
אם אתם משתמשים בו, אשמח לשמוע על זה הערות והארות.

תודה לכולם.