In previous post I wrote about running WPF-XBAP application on client machine in "Full-Trust Mode".

That worked fine and the post was helpful (I know this from post's talk-backs).

I described how to generate security certificate and how to install it on client machine (thru IE options).

Recently, I worked with XBAP deployment files and required to copy them to new IIS server, during the process I've forgotten to include certificate (ext: "cer") file. I tried to open the application from client machine (in IE or Firefox) and got error message, that tells about security restrictions and that client has refused XBAP application in full-trust mode.

I know another way to generate certificate file without using MS Visual Studio and I'll show it here.

Some Introduction…

What are "deployment files"? – XBAP application BUILD generates assemblies and other resources that required running XBAP application. These files can be placed on IIS virtual folder and being downloaded to remote client machine by using supported Internet browser (IE or Firefox).

To see which files will be included in deployment folder go to "Publish" tab in project settings form and click on "Application Files":

To see options for deployment and how the setup page will look go to "Publish" tab in project settings form and click on "Options":

Check option: "Use '.deploy' file extension". - This is helpful for full-trust mode (some machines don't allow downloading assembly files like EXE and DLL):

If you want to include some additional files for application deployment, go to "Publish" tab in project settings form and click on "Prerequisites":

"Prerequisites" - setup-package files like .Net 2.*-3.* or Windows-Installer 3.*:

To generate deployment files and to publish them in selected folder click "Publish Now" in "Publish" tab in project settings form and click on "Prerequisites":

"Publish Now" generates these files:

"index.htm" is a deployment page, which was build with two options to run XBAP (Click-Once) application. "Run" option opens setup dialog (in case that application runs at first time or deployed with as new version), "launch" opens XBAP directly (without the installation process):

Usually I copy certificate file into this directory and place a link for download on "index.htm", but what can I do if I've forgotten to create the certificate file and already copied deployment files to client's IIS server and I don't have MS Visual Studio to create the new one from sources or event don’t have any sources (project code source files)? Answer: I can extract certificate into file from deployment executables. I can extract it from "setup.exe" file or from original "EXE" or "DLL" file if it wasn’t converted into other unknown file type.

I'll show ho to extract certificate from "setup.exe" (this file includes the same certificate as XBAP-Application EXE files).

1. Go to deployment folder and do right-click on "setup.exe" file:

2. Open "Properties" form and go to "Digital Signatures" tab page, select included digital signature and click on "Details":

3. Click "View Certificate" in "General" tab page:

4. Click on "Copy to File" in "Details" tab page:

5. Proceed with opened "Certificate Export Wizard":

(5.1)

(5.2)

(5.3) you can place extracted "cer" file in deployment folder for future use:

(5.4)

When you'll finish with wizard you'll get "cer" file:

See previous post with instructions that will help you with certificate installation. I found this post that also describes how to run XBAP in Full-Trust mode.

(I'm "cooking" some light application that will help to install certificates automatically on user machines, when I'll finish it, I'll write the post with all sources)

Hope this post was helpful ;-)

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

זה קטע וידאו שהיה בפוסט:

וזה קטע וידאו שקיבלתי במייל:

העלה לי את חיוך בסוף יום קשה :-) וגם עשה חשק לשתף ...

מספר דברים נוספים:

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

חולצה עם אקוולייזר שמשנה את צורתו בהתאם למוסיקה:
 

חוצה עם מסך LCD שניתן להציג עליו את מה שבא לכם:

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

תהנו :-)

בהמשך לפוסט הקודם שלי שבו הצגתי סרטון עם ריקוד הרובוטים של סוני אני רוצה להציג סרטון נוסף שמציג יכולות מדהימות של "רובוכלב" (Big Dog):

חברת Boston Dynamics המפתחת מערכות מתקדמות לצבא, עוסקת בפיתוח רובוטים מתקדמים בעלי יכולות מדהימות (כבר אמרתי: "העתיד כבר כאן"). שימו לב ליכולות הפנטסטיות של הרובוט, חיכוי מדהים של תנועות בעל חיים (כלב, סוס או כל בעל חיים בעל ארבעה רגליים). שווי המשקל נשמר ע"י מנגנון מיוחד המשלב בינה מלאכותית (שימו לב ליציאה מהחלקה של הרובוט בקטע של קרח בירידה על הכביש).

תארו לכם: אתם מטיילים באיזה יער ופתאום פוגשים כזה דבר בלי לדעת שזה רובוט :)

חג שמח לכוווולם!

אני רוצה לשתף אותכם בסרטון מגניב שמראה ריקוד מגניב של רובוטים יפניים:

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

העתיד כבר כאן, תהנו :)

Recently I required to create some simple control that shows 'wait process' (like this in Vista). MS Blend allows you to create cool animated control in one minute or even less.
I want to show how to create very simple continuous animation and some tips in quick animation creation.

Minimum requirements before you'll continue: this post wasn't written as 'Kit for Beginners', means that you must have a basic knowledge/experience in MS Blend application.

Open MS Blend (ver. can be 1+ or 2+) and create new WPF (EXE) project.

Draw two circles (in main window).

Select 'Ellipse' shape and hold 'Shift' key to draw perfect circles (the radius of small circle is about ~60% radius of big).

Align small circle in center of big.

Select both circles and do right-click, when click on 'Horizontal Centers' and 'Vertical Centers' to align circles under 'Align' menu.

Combine circles into one shape (ring like donates).

Select both circles and press on right mouse key. Click on 'Exclude Overlap' under 'Combine' menu.

Fill background color.

Use gradient brush with preferred colors. One side can be darker, lighter side can be semitransparent.

Fill outline (stroke) color.

Use solid or gradient brush (can be semitransparent).

Convert shape (ring) into user control.

Right-Click on shape and click on 'Make Control...'

Blend  generates new user control from defined shape (and replaces shape path in 'Window1' with instance of 'ucWaiting').

(appeared in 'Window1.xaml')

Rebuild project before you'll proceed to next paragraphs. 

Create simple rotation animation.

Because the control must be with continues animation from the moment when its loading event is fired, I suggest to create new stroryboard from adding new event in triggers panel.

Click on '+ Event' button in 'Triggers' panel, Blend will add default event 'Loaded' (fired when control is loaded in parent's visual container).
Click on '+' and 'OK' in message box that asks you if you want to create new stroryboard (animation).

These actions are leading to creation of new timeline with storyboard (animation) named 'OnLoaded1'.
The Blend is switched into recording mode, turn it off by clicking on red circle (see marks):

Save current shape position in timeline by recording new keyframe. Zoom-In the timeline and move it position of 0.5 seconds. Select shape (ring) and click on red circle to start recording.

Rotate shape 360 degrees (hold 'Shift' button for 45 deg. rotation for each movement). After one round is completed, turn-off the recording. You can preview animation by pressing 'play' button.

Storyboard contains animation with two keyframes, animation makes simple rotation of the shape. Animation will be started when 'Load' event is fired.

Continuous Animation

Last step in animation is to set continuous rotation.

Expand 'path' object in objects and timeline tree and expand 'RenderTransform' and 'Rotation' animation. Do right-click on 'Angle' item and click on 'Edit Repeat Count' in context-menu.
When 'Edit Repeat' window is opened click on marked button 'Set to Forever', click on 'OK' to close the dialog.

The animation will be played forever.

Adjust size of control in main window and test project.

Set control's size 24x24 and press <F5> key.

Now it is ready!

>> Of course you can improve this control by adding new functionality, properties (like boolean 'EnableAnimation' or 'ContinuouseAnimation'), by defining more sexy design of shape(s) and/or colors.

PS

Additional tips for animations.

This sub-menu allows to create animations in easy way:


Many beginners unfamiliar with these options:

[Duplicate] - duplicates selected animation, very useful in case you want to save extra work by duplication existing animation

[Reverse] - reverses keyframes, very useful in case you want to switch keyframes or to create duplicated animation with reversed keyframes, for example: one animation is used to show some GUI element, another is used to hide this element; you can create one animation for showing of element and another animation will be duplicate (copy) with reversed keyframes.

Hope this post was helpful ;-)

Recently I work on WPF-XBAP application that will run from intranet website:

This application must have unrestricted access to client's OS resources (that is unusual for XBAP projects):

I publish it on local website by using "Click-Once" deployment mechanism:

User can launch the application from deployment page (also can run application setup):

I get security error ("User has refused to grant required permissions to the application"):

Means that application tried to perform some restricted action, beyond of XBAP sandbox. Actually it tried to read local video file:

(It reads video file from local source, for preview option before uploading it to FTP server)

After some research I found how to fix that:

(1) Project must be signed with "Click-Once" manifest (security certificate file):

(If project doesn't contain "Test Certificate" click on rounded button to create a new one)

(2) After temporary certificate was created we'll save it into file (click on "More Details"):

File export wizard (step A):

File export wizard (step B):

File export wizard (step C):
(Enter username and password, only if you did so while "Test Certificate" creation in par. 1)

File export wizard (step D):

File export wizard (step E):

File export wizard (step F):

(Now project certificate is saved as external file)

(3) Now we'll go to Internet Explorer and will register this certificate:
(Open "Internet Options" from "Tools" menu)

Click on "Certificates" in "Content" tab:

Import certificate file from "Trusted Root Certification Authorities" tab:

File import wizard (step A):

File import wizard (step B):

File import wizard (step C):

File import wizard (step D):

Confirm importing:

If succeed you'll get this window:

And will see certificate here:

Do same in "Trusted Publishers" tab:

Close IE options:

 


(6) No we'll go to "Signing" tab in project options and will select registered certificate:

Select registered certificate from local store:

(5) Republish the application:

Now XBAP can run in "Full Trusted" mode:

Hope this post was helpful ;-)

PS: see this post about certificate extraction for XBAP applications.

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

מתודולוגיה בפיתוח ממשקי משתמש - שיטות בהנדסת תוכנה:

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

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

אחזור לנושא...

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

הכלים החדשים לפיתוח תוכנה ב- WPF נותנים אפשרות לבצע עבודה על ממשק המשתמש במקביל - ז"א מעצב גראפי יכול לעצב חלקים מסוימים של ממשק גראפי ב-MS Expression Designer ואחר כך, ובמקביל, עם מפתח תוכנה לעבוד ב- MS Expression Blend ומפתח יעבוד ב-MS Visual Studio 2005/8. זה אפשרי אודות מתודולוגיה של פיתוח שמושתת על הכלים הללו והקשר ביניהם מתבצע דרך XAML. לאחר תכנון נכון של הפרויקט רוב המודולים שצריך לפתח כבר ידועים מראש וניתן להתחיל לעבוד על כל אחד מהם (בתנאי שיש מודל שכבתי שעושה הפרדה בין שכבת הממשק הגראפי - GUI ליתר השכבות בתוכנה).

שיתוף פעולה בין מעצב למפתח

השיטה הישנה:

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

מכוון שתהליך פיתוח הממשק לא יכול להתבצע במקביל, זמן הפיתוח היה ארוך, העבודה לא יכולה להתבצע במקביל מסיבות שונות כמו: GUI ניתן לעצב רק לאחר ששכבת המידע או שכבת לוגיקה העסקית מוכנה, GUI ניתן לעצב רק לאחר שכל הרכיבים הגראפיים הוכנו ע"י המעצב אחר. בד"כ חברות לא העסיקו מעצבים גראפיים, עיצוב הGUI נעשו ע"י מפתחי התוכנה (למען האמת גם אומר שלחלק גדול ממפתחי התוכנה חסר חוש עיצובי/ציורי או רקע בתחום, הם גם לא חייבים להיות מעצבים מתוקף תפקידם).

השיטה החדשה:

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

ניתן ליישם מתודולוגיה חדשה תודות לכלים החדשים ושפת ההתקשרות שלהם -  XAML. למשל: מעצב יבנה ממשק על כל רכיביו (או רק רכיבים) בתוכנה MS Expression Designer או בכל תוכנה שתומכת בפורמט ייצוא של XAML, בו הזמן מפתח יוכל לעבוד על "code behind" של GUI, מפתח יכול לעבוד ב-MS Expression Blend ו/או ב-MS Visual Studio 2005/8 או בכל כלי פיתוח אחר שתומך בפורמט ייבוא של XAML.

XAML:

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

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

בעזרת XAML, מעצבים ומפתחים יכולים לפשט תהליכי פיתוח:

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

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

לסיכום אומר: תנו לכל אחד לבצע את העבודה שהוא יודע לעשות הכי טוב (בהקשר של "מעצב vs. מפתח"). כל אחד למד את התחום שלו ולכל אחד יש התמחות בתחום שלו. מקצוע העיצוב הולך ותופס תאוצה בשנים האחרונות. מפתח תוכנה יכול להיות בעל כישרון עיצובי, אך אין זה יהיה נכון שהוא יעמיס על עצמו משימה של עיצוב GUI שאותה יכול לבצע בקלות המעצב. מודל פיתוח זה כבר עובד בתחום האינטרנט, לכן אין שום סיבה שלא יצליח בתחום היישומים החלונאיים.

מה יש לנו היום:

::: כלים של מיקרוסופט עבור מעצבים ומפתחים
::: תכנות הצהרתי ב- XAML
::: כלי פיתוח של צד שלישי: Aurora by Mobiform, ZAM 3D by Electric Rain, e.g.

הערות: ניתן לנהל ויקוחים/דיונים רבים לגבי נכונות הגישה או המצב במציאות. השילוב של מעצב ומפתח באותו הפרויקט די מסובך ודורש מיומנות בניהול פרויקטים. שימוש בכלים חדשים כמו MS Expression Blend במקביל ל- MS Visual Studio 2005/8 גם אינו פשוט, לפי ניסיוני אומר שאין עבודה חלקה בעיצוב הממשק כאשר עובדים במקביל עם כלים אלה ועוד ע"י שני אנשים ויותר, בפרויקטים גדולים זה יכול להיות מסובך עד בלתי אפשרי. כעת מתבשל פוסט בנושא, שבו אנסה לתאר את המצב היום ואת השיטות לעיצוב ממשקים גראפיים בעזרת כלים אלה וע"י שילוב מעצב בצוות המפתחים.