Fullsix Blog

 

[PT] (for a English version, see bellow on this page, please)

Olá a todos,

Recentemente num projecto interno nós estávamos a necessitar de utilizar algum tipo de activeX numa página Web, para que fosse possível a importação dos contactos do Outlook, tal como no linkedIn.

Portanto, para quê um activeX quando temos as aplicações XBAP? Hum… parece-me bem. Então aqui fica um pouco da experiência que tivemos no desenvolvimento desta brincadeira. Em primeiro lugar, não esquecer que se a nossa aplicação vai interagir com um dos membros do Microsoft Office, as Visual Tools for Office têm as bibliotecas certas para isto!

Eis os nossos passos:

1) Importação da biblioteca do Outlook para a nossa aplicação:

using Microsoft.Office.Interop.Outlook;

2) Criação dos tipos necessários para a transmissão com o Outlook e leitura dos dados:

private MAPIFolder oContactsFolder = null;

//load outlookcontacts

           var oApp = new Microsoft.Office.Interop.Outlook.Application();

           NameSpace oNS = oApp.GetNamespace("MAPI");

           oContactsFolder = oNS.PickFolder();

           string filter = "[MessageClass] = \"IPM.Contact\"";

           Items oContactItems = oContactsFolder.Items.Restrict(filter);

           foreach (ContactItem oContact in oContactItems)

           {

               var item = new EmailContact();

              if (oContact != null)

               {

                   item.ContactEmail = oContact.Email1Address;

                   item.ContactName = oContact.FullName;

                   //before add the email let's see that's is valid

                   if (ValidateEmailAdd(item.ContactEmail) && !String.IsNullOrEmpty(item.ContactEmail))

                   {

                       contactList.Add(item);

                   }

               }

3) Definição da interface e da lógica da aplicação

Para tal escolhemos a XBAP para que nos seja possível aplicar todas as funcionalidades que o WFP nos oferece, mas para tal existem algumas notas importantes a ter em consideração:

- A XBAP deverá correr em modo de “full trust”, e para tal é necessário um certificado digital que assine o código da aplicação, e obviamente o nosso browser deverá confiar no mesmo.

Para tal, criámos um certificado fullsix CA, algo que fomos seguindo aqui:

http://msdn.microsoft.com/en-us/library/aa194055%28office.11%29.aspx

Outro post com informações muito importantes sobre esta parte:

http://blogs.microsoft.co.il/blogs/maxim/archive/2008/03/05/wpf-xbap-as-full-trust-application.aspx

Para a extracção do certificado seguimos:

http://blogs.microsoft.co.il/blogs/maxim/archive/2008/03/31/how-to-run-wpf-xbap-application-in-full-trust-mode-post-2-certificate-extraction.aspx

Para automatizar este processo, desenvolvemos uma pequena aplicação de consola que permite o download e a instalação silenciosa do mesmo. Assim o certificado fullsix CA fica instalado no computador, que assina o certificado que usamos para assinar o código da nossa XBAP application.

Aqui fica o código que usámos:

try

           {

               var myStream = Assembly.GetExecutingAssembly().GetManifestResourceStream("InstallXBAPOutlookCert.Console.f6signing.cer");

               byte[] b = new byte[myStream.Length];

               myStream.Read(b, 0, b.Length);

               X509Certificate2 cert = new X509Certificate2(b);

               X509Store store = new X509Store(StoreName.AuthRoot, StoreLocation.LocalMachine);

               store.Open(OpenFlags.ReadWrite);

               store.Add(cert);

               store.Close();

               store = new X509Store(StoreName.TrustedPublisher, StoreLocation.LocalMachine);

               store.Open(OpenFlags.ReadWrite);

               store.Add(cert);

               store.Close();

               System.Console.WriteLine("Certificate Successfully Installed...!");

               System.Console.Read();

           }

           catch (Exception ex)

           {

               System.Console.WriteLine("Error " + ex.ToString());

}

Não esquecer de embeber o ficheiro de manifesto da aplicação dentro do ficheiro exe da aplicação, isto é necessário para utilizar os direitos de Administrador da máquina, para que seja possível fazer a instalação do certificado. É necessário alterar este manifesto como se segue:

<requestedExecutionLevel level="requireAdministrator" uiAccess="false" />

E para embeber o manifesto no exe:

O utilizador vê o ficheiro .exe no browser e se no seu caso a empresa possuir um certificado assinado por uma das bem conhecidas CA’s não deverá existir qualquer problema, no nosso caso, os utilizadores deverão confiar no nosso certificado, para que seja possível visualizar a demo correctamente

Depois o certificado fullsix CA fica instalado no computador tal como se pode ver abaixo:

Agora a aplicação XBAP está devidamente assinada e é confiada pelo browser e tudo corre em modo full trust.

Nota:

- WPF threading module. É um pouco doloroso entender para quem está mais familiriarizado com o modo de threading do silverlight como é o nosso caso. Em WPF existem algumas diferenças, o que significia que é necessário pensar sobre esta questão para que não se bloqueie a thread da Interface. Imaginando por exemplo uma animação de loading enquando a comunicação com o Outlook é feita. Um bom artigo para ajudar nesta questão:

http://msdn.microsoft.com/en-us/library/ms741870.aspx

Para evitar o bloqueio da thread principal da interface, lançamos o método de interacção com o Outlook noutra thread da seguinte forma:

var myDispatcher = new Thread(new ParameterizedThreadStart(s => { StartRetriveContacts(); }));

Depois no regresso á thread original:

private void StartRetriveContacts()

       { …

UIDispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { ProcessContacts(contactList); },

                                    contactList);

Usando este tipo de “roteamento” entre as threads permite-nos fazer um update constante na interface de modo a dar feedback constante ao utilizador sobre as operações que decorrem em background.

E pronto é isto, podem testar. http://labs.fullsix.pt/projects/xbapoutlookdemo/demo.htm e já agora dar uma vista de olhos nos outros projectos que estão no fullsix Labs.

Queria deixar também uma nota de agradecimento aos meus colegas Antoine e Fiel pela ajuda no desenvolvimento.

Merci.

 

[EN]

Hi all,

In order for a internal project we need some kind of an activeX in a web page from Outlook contact email addresses importation, such has like linkedIn has.

So why use a activeX when we have XBAP apps? Sweet hum? Here is how we’ve done the little app. First of all keep in mind this is something to interop with an Microsoft Office application, right? The Visual Tools for Office have the right libraries for it!

Steps:

1) Import the Microsoft Interop Namespace:

using Microsoft.Office.Interop.Outlook;

easy as butter

2) Create the right types to exchange with outlook and load content

private MAPIFolder oContactsFolder = null;

//load outlookcontacts
           var oApp = new Microsoft.Office.Interop.Outlook.Application();
           NameSpace oNS = oApp.GetNamespace("MAPI");
           oContactsFolder = oNS.PickFolder();

           string filter = "[MessageClass] = \"IPM.Contact\"";
           Items oContactItems = oContactsFolder.Items.Restrict(filter);

           foreach (ContactItem oContact in oContactItems)
           {

               var item = new EmailContact();

               if (oContact != null)
               {
                   item.ContactEmail = oContact.Email1Address;
                   item.ContactName = oContact.FullName;

                   //before add the email let's see that's is valid

                   if (ValidateEmailAdd(item.ContactEmail) && !String.IsNullOrEmpty(item.ContactEmail))
                   {
                       contactList.Add(item);
                   }
               }

3) Define your UI and the rest of the behaviors

We choose a XBAP application in order to have the WPF capabilities in a regular web page but you must be aware of some important settings:

- XBAP app needs to run in a full trust mode, so that requires a DigitalCertificate to sign your code and the browser needs to trust on that.

So we created a fullsix CA certificate. Something that follows here:

http://msdn.microsoft.com/en-us/library/aa194055%28office.11%29.aspx 

You can see a quite nice post’s about this at:

http://blogs.microsoft.co.il/blogs/maxim/archive/2008/03/05/wpf-xbap-as-full-trust-application.aspx 

and for the certificate extraction

http://blogs.microsoft.co.il/blogs/maxim/archive/2008/03/31/how-to-run-wpf-xbap-application-in-full-trust-mode-post-2-certificate-extraction.aspx

to automate this process we develop a simple console application that you download first and installs on your computer our fullsix CA certificate, that signs the code sign certificate that we use previously to sign the xbap code.

Here is the code for that:

try
           {

               var myStream = Assembly.GetExecutingAssembly().GetManifestResourceStream("InstallXBAPOutlookCert.Console.f6signing.cer");

               byte[] b = new byte[myStream.Length];

               myStream.Read(b, 0, b.Length);

               X509Certificate2 cert = new X509Certificate2(b);

               X509Store store = new X509Store(StoreName.AuthRoot, StoreLocation.LocalMachine);

               store.Open(OpenFlags.ReadWrite);

               store.Add(cert);

               store.Close();

               store = new X509Store(StoreName.TrustedPublisher, StoreLocation.LocalMachine);

               store.Open(OpenFlags.ReadWrite);

               store.Add(cert);

               store.Close();

               System.Console.WriteLine("Certificate Successfully Installed...!");

               System.Console.Read();
           }
           catch (Exception ex)
           {

               System.Console.WriteLine("Error " + ex.ToString());
           }

Don’t forget to embed the application manifest in the exe file, you need that for auto Admin rights permissions to install like this in your manifest file:

<requestedExecutionLevel level="requireAdministrator" uiAccess="false" />

and to embed it on the exe:

The user see’s the .exe on the browser and if your company has a certificate that’s signed by one of very well known CA you should haven’t any trouble. In this case our users must have trust on us  

 

then you have the fullsix CA in your machine as you can see here:

So now XBAP application is signed and User grant a full trust environment for it.

Note:

- WPF threading module. It’s some kind of “pain”, for those who are more familiar with Silverlight like me, in WPF there are some differences, which means that you have to think about threading block handling, in order to avoid frozen the main UI thread, that can being display, for example, a loading animation of the contact import progress. for that there are also a nice article:

 http://msdn.microsoft.com/en-us/library/ms741870.aspx 

To avoid the main UI thread block we launched the Outlook interop method in another thread, here’s the way:

var myDispatcher = new Thread(new ParameterizedThreadStart(s => { StartRetriveContacts(); }));

then to get back on the main UI:

private void StartRetriveContacts()
       { …

UIDispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { ProcessContacts(contactList); },
                                    contactList);

Using this kind of “routed threading model” we were able to provide an UI update with some animation and application update state.

And that’s it..! you can try for your self 

http://labs.fullsix.pt/projects/xbapoutlookdemo/demo.htm , and take a look into our others fullsix labs projects.

Also a thanks to Antoine and Fiel for their help on this development.

 

[PT]

Gostaria de deixar um pequeno truque para se trabalhar com cores nos controlos de Siverlight. Imaginem que instanciam um controlo como por exemplo uma textbox:

var newTextBox = new TextBox();

Agora, gostaria de mudar a color de fundo para preto, vermelho, verde, etc…

Então será necessário escrever algo como: myTextBox.Background = new Brush(Opacity bla blabla, etc); etc, e mais bla… Mas eu só queria algo como .Background = Colors.Red;

Ok, eis algo que pode ajudar e muito. Criem um método para extraír de um valor Hexadecimal a vossa cor como por ex:

private SolidColorBrush GetColorFromHex(string myColor)
{
    return new SolidColorBrush(
        Color.FromArgb(
            Convert.ToByte(myColor.Substring(1, 2), 16),
            Convert.ToByte(myColor.Substring(3, 2), 16),
            Convert.ToByte(myColor.Substring(5, 2), 16),
            Convert.ToByte(myColor.Substring(7, 2), 16)
        )
    );
}

Agora, é mais simples atribuir ao nosso controlo:

newTextBox.Background = GetColorFromHex("#00FFFFFF");

Cool! não?

[EN]

Just a tip, if you want in your code work with an color in Hexadecimal format maybe a little complicate.

Imagine that you create a new control such as:

var newTextBox = new TextBox();

Now you want give a color to it, right? So to do something like myTextBox.Background = new Brush(Opacity … etc, etc, etc). :s I just want a simple red, white… or something similar…

Here’s a tip, create a method to extract a color from an Hexadecimal value:

private SolidColorBrush GetColorFromHex(string myColor)
      {
          return new SolidColorBrush(
              Color.FromArgb(
                  Convert.ToByte(myColor.Substring(1, 2), 16),
                  Convert.ToByte(myColor.Substring(3, 2), 16),
                  Convert.ToByte(myColor.Substring(5, 2), 16),
                  Convert.ToByte(myColor.Substring(7, 2), 16)
              )
          );
      }

now it’s more simple to use on your control:

newTextBox.Background = GetColorFromHex("#00FFFFFF");

Cool! Isn’t it?

 

[PT]

Na semana passada estive a desenvolver uma aplicação em Silverlight para um cliente, e com algumas modificações que foram solicitadas, foi necessário desenvolver uma animação totalmente dinâmica… portanto o Blend deixou de servir para o efeito e tudo passou a ser feito por código C#.

Ok, então comecei por tentar mapear a mesma estrutura de código na parte de animação em XAML mas em C#. As linhas de código que seguem, serviram para fazer uma pequena animação de fade in e fade out a um usercontrol, instanciado no momento de execução e adicionado ao layoutroot. Uma vez que esta animação seria usada várias vezes.

// Dymanic Storyboard with the animation
var currentStb = new Storyboard();

//EasyDoubleKeyFrames
var stbkey = new EasingDoubleKeyFrame();
stbkey.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));
stbkey.Value = 0;
var stbkey2 = new EasingDoubleKeyFrame();
stbkey2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3));
stbkey2.Value = 1;
var stbkey3 = new EasingDoubleKeyFrame();
stbkey3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6));
stbkey3.Value = 0;

//DoubleAnimationKeyFrame declaration
var myDoubleAnim = new DoubleAnimationUsingKeyFrames();
myDoubleAnim.KeyFrames.Add(stbkey);
myDoubleAnim.KeyFrames.Add(stbkey2);
myDoubleAnim.KeyFrames.Add(stbkey3);

//wich property is targeted: opacity
Storyboard.SetTargetProperty(myDoubleAnim, new PropertyPath("(UIElement.Opacity)"));

//adding into the layout resources
this.Resources.Add("uniqueId"+_countName.ToString(),currentStb);

//adding into the current layoutRoot
currentStb.Children.Add(myDoubleAnim);
currentStb.SetValue(Storyboard.TargetNameProperty, newTextBox.Name);

//adding some logical stuff then the stb begins

currentStb.Begin();

Recapitulando, não é assim tão complicado como estava à espera, ou pelo menos no primeiro contacto, mas não é obvio, o truque reside em “copiar” a mesma estrutura que o Blend gera em XAML, mas desta em código. Portanto inicialmente define-se os keyframes que contêm os tempos de animação e o values para as propriedades que pretendemos afectar ao controlo animado. Seguidamente, definimos os “alvos” para os DoubleAnimationKeyFrame que compõe a metada da animação em questão, e por fim, o nosso storyboard recebe esta informação e define qual é o tipo de objecto “afectado”, neste caso, um UIElement, e que tipo de animação será feita. Daí a afectação da propriedade Opacity.

É importante reter o seguinte, após criar um storyboard por esta maneira, é necessário dar-lhe um nome único e adicioná-lo aos resources do nosso layoutRoot. É só desta forma que tudo funcionará correctamente, e uma vez que a nossa animação fica a pertencer aos recursos locais do controlo, podemos usar a mesma várias vezes na aplicação

Espero que vos seja útil, e deixou uma leitura muito recomendável sobre este assunto.

http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx 

Merci.

[EN]

Last week I was developing a Silverlight application for a customer, and after a few modifications it was necessary to make an dynamic animation … so no storyboards with Blend… get in the code and do everything with C#.

Okay… so I started by mapping the same XAML animation structure, into the code. The next few lines show us a simple fade in and fade out animation effect with a new usercontrol (a simple textbox) created at the moment and placed on LayoutRoot. This animation is used several times, during the application.

// Dymanic Storyboard with the animation
var currentStb = new Storyboard();

//EasyDoubleKeyFrames
var stbkey = new EasingDoubleKeyFrame();
stbkey.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));
stbkey.Value = 0;
var stbkey2 = new EasingDoubleKeyFrame();
stbkey2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3));
stbkey2.Value = 1;
var stbkey3 = new EasingDoubleKeyFrame();
stbkey3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6));
stbkey3.Value = 0;

//DoubleAnimationKeyFrame declaration
var myDoubleAnim = new DoubleAnimationUsingKeyFrames();
myDoubleAnim.KeyFrames.Add(stbkey);
myDoubleAnim.KeyFrames.Add(stbkey2);
myDoubleAnim.KeyFrames.Add(stbkey3);

//wich property is targeted: opacity
Storyboard.SetTargetProperty(myDoubleAnim, new PropertyPath("(UIElement.Opacity)"));

//adding into the layout resources
this.Resources.Add("uniqueId"+_countName.ToString(),currentStb);

//adding into the current layoutRoot
currentStb.Children.Add(myDoubleAnim);
currentStb.SetValue(Storyboard.TargetNameProperty, newTextBox.Name);

//adding some logical stuff then the stb begins

currentStb.Begin();

To recap, it’s not so complicated, first we create the storyboard, then the keyframes that contains the times and the values for the animation sequence, then we define the target properties, such as the DoubleAnimation, the Opacity property target and the storyboard to apply on the current usercontrol or the UIElement.

Just regard that after you create an Storyboard this has to belong into the current layout resource in order to work, with a unique Id. So that can be re-used in your application.

A recommended lecture:

http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx 

Thanks.

[PT]

Na sequência deste post, eis mais um conjunto de efeitos visuais aplicados a uma imagem. Os efeitos são conseguidos utilizando o WritableBitmap.

Ver aplicação. Download do código fonte.

[EN]

Folowing this post, here is another set of visual effects applied to a image. The effects are enabled by using the WritableBitmap class of Silverlight 3.

Running Demo. Download of the source code.

Versão em [PT]

Fullsix Portugal developed for SuperBock (a major portuguese brand) a new movie search engine, completely implemented in Silverlight and using other Microsoft technologies in the background (SQL Server Integration Services, Expression Encoder).

You can play with it at: http://www.superbock.pt/cinema/.

In the past DevDays 2009 event, the prototype for this application was presented, and it is now live with extra features and integration with the main SuperBock site. Any comments, suggestions, etc…, are welcome and you can drop me an email (ricardo.fiel at fullsix.com) or use the application’s “Dá-nos a tua opinião” area.

One of the goals of this application was to improve the User eXperience of the current Superbock movie search engine, taking advantage of some Silverlight features such as DeepZoom and Smooth Streaming (this last one is not available in the application yet). It is still in Beta stage and there are some improvementes which are being implemented.

To anyone interested, here’s an architectural overview:

I’ll be talking about dynamic DeepZoom in a future post.

See you later.

[Translated from http://xamlpt.com/blogs/rfiel/archive/2009/09/08/deepzoom-din-226-mico-superbock-cinema.aspx]