Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1906, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

LightSwitch: creare una pagina di registrazione per eventi, ovvero come abbiamo creato la pagina per il nostro evento di lancio - parte 2

Nel precedente post abbiamo iniziato a descrivere come è stata creata la pagina di registrazione per l'evento online che abbiamo organizzato per il lancio di Visual Studio LightSwitch ed eravamo arrivati a costruire dati e data entry screen.

In questo post vediamo il resto, ossia come abbiamo implementato controlli per fornire agli utenti appena registrati le credenziali di accesso. Nel prossimo ed ultimo post vedremo, invece, il deploy su IIS.

Predisposizione di un file di calendario per Outlook

L'evento è stato erogato tramite Microsoft Office Live Meeting, per cui avevamo necessità di fornire il link di accesso ad avvenuta registrazione, ma volevamo anche far scaricare un file del calendario di Outlook che consentisse maggiore facilità per ricordare l'evento. In Outlook, quindi, è stato creato un appointment in locale, il cui testo conteneva anche le credenziali di accesso, e salvato come file .ics. Questo file va copiato sul server, in una directory che sia associata ad IIS e raggiungibile via http. Ci serve anche per fare il test in fase di debug.

La logica del Detail Screen

Tra i vari Screen Template disponibili in LightSwitch ce n'è uno chiamato Detail Screen. Questo non si usa mai, se non quando si vuole sostituire lo screen di default che mostra il riepilogo dei dati salvati dopo l'utilizzo di uno screen di tipo data entry. In realtà questo era proprio il nostro caso, perché era lì, nello screen di riepilogo, che avremmo dovuto mostrare link per il download delle credenziali e del calendario.

Problema: il modo più corretto per far scaricare un file, come quello del calendario, è attraverso un hyperlink che punti al file stesso, mostrando un messaggio sensato piuttosto che l'URL del file; LightSwitch non ha un controllo Hyperlink.

Problema risolto: si costruisce un controllo utente in Silverlight 4 che, oltre ad implementare l'Hyperlink, permette anche di mostrare altre informazioni. Il controllo ottenuto va poi aggiunto al Detail Screen personalizzato.

Creazione del controllo Silverlight

Qui ci vuole, come sapete, Visual Studio 2010 Professional o superiore. Alla soluzione si aggiunge in primo luogo un progetto di tipo Silverlight Class Library. Non ci interessa in quale linguaggio è scritto, facciamo tutto in XAML. Poi:

  • si rimuove il file di codice aggiunto by default
  • si aggiunge (Project, Add New Item) un nuovo elemento al progetto, di tipo Silverlight User Control

Nello XAML volevamo:

  • informare dell'avvenuta registrazione
  • fornire il link per scaricare il file del calendario di Outlook
  • fornire il link di accesso all'evento anche a chi non usa Outlook
  • fornire un indirizzo email di supporto, in caso di problemi

Ecco il codice che, per semplicità, parte dalla Grid:

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition/>
            <RowDefinition Height="60"/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Text="Registrazione completata! Clicca sul link qui sotto per scaricare il calendario di Outlook per l'evento:" 
                   FontSize="14" FontWeight="Bold" 
                   TextWrapping="Wrap">
            <TextBlock.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA03D10" Offset="0" />
                    <GradientStop Color="#FFF82D2D" Offset="1" />
                    <GradientStop Color="#FFA30D0D" Offset="0.477" />
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
        <TextBox x:Name="UrlTextBox" 
                 Text="Download calendario evento" 
                 TextWrapping="Wrap" Grid.Row="1">
            <TextBox.Template>
                <ControlTemplate TargetType="TextBox">
                    <HyperlinkButton Content="{TemplateBinding Text}" 
                                     NavigateUri="http://eventi.lightswitch.it/LancioVisualStudioLightSwitch.ics" 
                                     TargetName="_blank">                       
                    </HyperlinkButton>
                </ControlTemplate>
            </TextBox.Template>
        </TextBox>
        <TextBlock Text="Se non usi Outlook, copia il seguente link nel browser per accedere all'evento da 30 min. prima dell'inizio:" 
                   Grid.Row="2" FontSize="14" FontWeight="Bold" 
                   TextWrapping="Wrap">
            <TextBlock.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA03D10" Offset="0" />
                    <GradientStop Color="#FFF82D2D" Offset="1" />
                    <GradientStop Color="#FFA30D0D" Offset="0.477" />
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
        <TextBox Text="http://bit.ly/pURDud" Grid.Row="3"/>
        <TextBlock Text="Se hai problemi ad accedere con il link sopra esposto invia un'email a supporto[@]lightswitch.it" 
                   Grid.Row="4" 
                   TextWrapping="Wrap"/>
    </Grid>
Qualche riga in più per dare un colore di primo piano a gradiente, ottenuto semplicemente con la finestra delle Proprietà di Visual Studio. Piccolo "magheggio": in Silverlight non c'è un vero e proprio Hyperlink diretto, si ricorre all'HyperlinkButton. Con questo è stato ridefinito il control template della TextBox associata; 
il contenuto testuale dell'hyperlink punta semplicemente alla proprietà Text della TextBox che ridefinisce (TemplateBinding) mentre NavigateUri punta al file che sta su un sito il cui nome va sostituito con quello del vostro sito. 
Nel designer tutto compare così: 

A questo punto non resta che associare il controllo al Detail Screen. Non dimentichiamo di compilare il progetto del controllo utente.

Ridefinire il Detail Screen

Tornando al progetto LightSwitch, in Solution Explorer tasto dx su Screens -> Add Screen. Nella dialog di selezione si sceglie Detail Screen, quindi l'origine dati di interesse. E' fondamentale flaggare Use as Default Details Screen:

così facendo il nuovo screen verrà utilizzato automaticamente al posto di quello standard, altrimenti andrebbe richiamato da codice. Quando compare il designer dello Screen:

  • click sull'ultimo Add in fondo al designer
  • selezionare New Custom Control
  • dalla dialog, click su Add Reference per aggiungere un riferimento al progetto contenente il controllo custom
  • selezione del controllo utente dall'assembly referenziato:

Ci dobbiamo solo accertare che il controllo utente sia visibile nello Screen Designer come in figura:

Test dell'applicazione

Avviando l'applicazione e facendo il submit dei propri dati, la musica cambia:

Lo screen di riepilogo è stato quindi correttamente sostituito da quello personalizzato con il nostro controllo utente. Cliccando sull'Hyperlink, avviene il download del file di calendario per Outlook.

Un minimo (molto minimo) di conoscenza di Silverlight e XAML, qualche riga di codice e si ottiene un risultato molto interessante.

In teoria sarebbe tutto ma non vi abbandono: vi parlerò del deploy su un server Web con IIS sopra nel prossimo post.

Alessandro

Print | posted on sabato 30 luglio 2011 21:32 | Filed Under [ Visual Studio Extensibility Silverlight e Windows Phone Visual Studio 2010 Community and friends Visual Studio LightSwitch ]

Powered by:
Powered By Subtext Powered By ASP.NET