1. Obiettivo

Obiettivo della guida è descrivere il processo di personalizzazione del framework MyCompany secondo le caratteristiche dell’ISV, dettagliando passo per passo le opzioni fino alla pubblicazione sull’App Hub.

1.1 Prerequisiti

Per aprire e distribuire il progetto sono necessari i Tools di Sviluppo di Windows Phone 7.5, disponibili qui:

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570

MyCompany è sviluppato interamente con i componenti del .NET Framework e di Silverlight per Windows Phone; non è quindi necessaria l’installazione e il know-how di altri toolkit di terze parti.

2. Procedura

Aprire in Visual Studio la soluzione “Microsoft.ISVApps”, che sarà composta da questi due progetti:

Figura 1 - Progetto Common

clip_image002

Figura 2 - Progetto MyCompany

clip_image004

2.1 Preparazione delle grafiche

Nonostante sia meglio fare un giro veloce nella soluzione per capire come sia stata sviluppata e quale sia l’effetto generale dell’interfaccia grafica, è necessario procurarsi, prima di procedere alla personalizzazione, alcune grafiche.

In particolare:

· PNG 62x62 pixels corrispondente all’icona dell’applicazione

· PNG 99x99 pixels corrispondente all’icona per il Marketplace

· PNG 173x173 pixels corrispondente al Tile di applicazione

· PNG 200x200 pixels corrispondente all’icona grande del Marketplace

· PNG 430x500 pixels corrispondente all’elenco dei clienti dell’azienda

· PNG 440xX pixels (con X massimo consigliato 25) ad uso separatore

· JPG 480x800 pixels con la pagina splash screen dell’applicazione

· Una o più PNG 480x800 pixels con gli screenshot dell’applicazione

· Opzionalmente:

o Una PNG Xx35 pixels con X massimo 440, come logo dell’azienda in alto su tutte le pagine

o Una PNG 480x800 pixels con lo sfondo personalizzato dell’applicazione.

2.1.1 Come realizzare gli screenshot di applicazione

Aperto l’emulatore di Windows Phone 7, comparirà una barra a scomparsa in alto a destra. Cliccare sulla freccia “>>” e si aprirà una seconda finestra con tre tab (Accelerometer, Location, Screenshot). Cliccato su “Screenshot” apparirà questa finestra:

Figura 3 - Finestra di screenshot dell'applicazione

clip_image006

Dove sarà possibile premere “Capture” e catturare ogni screenshot.

2.2 Apertura del progetto

Una volta aperto il progetto in Visual Studio si consiglia di abilitare la visualzzazione della Task List, così da avere in primo piano la lista delle customizzazioni effettuabili, come in figura:

Figura 4 - Task List in modalità "Comments"

clip_image008

2.3 Modifiche

Nell’AssemblyInfo.cs di entrambi i progetti è possibile customizzare le stringhe relative al titolo e ai dettagli dell’Assembly, anche se non è strettamente necessario.

2.3.1 File WMAppManifest.xml

In questo file è necessario modificare:

· Attributo “Title” del tag xml App.

· Contenuto del tag “Title” verso il fondo del documento xml.

· Attributo “ProductID” del tag App con un nuovo GUID, generato per esempio su: http://www.guidgenerator.com

2.3.2 Immagini

È necessario rinominare e poi rimpiazzare alcune immagini nelle cartelle del progetto MyCompany:

· Rinominare la 480x800, creata per l’immagine di sfondo, in “MyCompanyDefaultBackground” e copiarla in Images/

· Rinominare la 430x550, creata per l’immagine dei clienti, in “MyCompanyDefaultClients” e copiarla in Images/

· Rinominare la 62x62, creata per l’icona piccola, in “MyCompanyDefaultIcon” e copiarla in Images/

· Rinominare la Xx35, creata per il logo dell’applicazione, in “MyCompanyDefaultLogo” e copiarla in Images/

· Rinominare la 173x173, creata per il Tile dell’applicazione, in “MyCompanyDefaultTile” e copiarla in Images/

· Rinominare la 480x800, creata per lo splash screen dell’applicazione, in “SplashScreenImage” e copiarla nella root folder dell’applicazione

2.3.3 Modifica a MainPage

MyCompany è completamente modificabile tramite fogli di stile, tranne che per un solo punto di intervento, completamente opzionale, relativo alla descrizione aziendale.

Figura 5 - Modifica della descrizione di azienda

clip_image010

In questo modo è infatti possibile sostituire una visualizzazione “plain” del testo aziendale, con il markup specifico dello XAML.

2.3.4 Separatore della lista prodotti

È possibile modificare il separatore della lista prodotti (o della pagina che eventualmente sostituisca la lista prodotti integrata) creando una PNG 440xX (con X di misura consigliata compresa tra 15 e 30), rinominandola “Separator.png” e spostandola, nel progetto “Microsoft.ISVApps.Common” nel path Graphic/.

2.3.5 Scelta della lingua

Pur essendoci pochi messaggi di errore/informazione/avvisi, essi sono esternalizzati in file di risorse e localizzati in Italiano e in Inglese. È possibile fare lo switch delle due lingue commentando/decommentando il file di risorse scelto nel file CompanyDetails.xaml, come in figura:

Figura 6 - Scelta della lingua di sistema

clip_image012

2.3.6 Personalizzazione di CompanyDetails.xaml

Il punto di maggiore personalizzazione dei contenuti è proprio il file di risorse CompanyDetails.xaml. Come prima cosa è possibile modificare il footer presente in ogni pagina:

Figura 7 - Modifica del footer

clip_image014

Poi è possibile impostare le informazioni di contatto dell’azienda:

Figura 8 - Informazioni di contatto

clip_image016

Per abilitare il reperimento dei Feed RSS/Atom delle news dell’azienda, è necessario sostituire il link del feed a quello sotto:

Figura 9 - Link al Feed RSS/Atom

clip_image018

Eccetto che non si proceda alla personalizzazione 2.3.3 è possibile modificare il testo di default che verrà presentato in pagina principale, per descrivere le attività dell’azienda, con questa setting:

Figura 10 - Modifica della descrizione aziendale

clip_image020

In pagina principale è presente un componente chiamato JumpList. Essa è un menù veloce di navigazione all’interno delle pagine Pivot del programma ed è completamente personalizzabile. Funziona tramite Binding XAML diretto nel file CompanyDetails, per cui ogni modifica a queste righe:

Figura 11 - Modifica della JumpList

clip_image022

Si ripercuoterà sulla JumpList in pagina iniziale. Questo permette di fare JumpList dei soli elementi che interessano o di farne anche di doppi per evidenziare più punti della stessa pagina di destinazione. La personalizzazione consiste nella modifica dei campi:

· ID: punta alla pagina Pivot (da 0 a N)

· JumpCode: è il testo piccolo presente nel box di selezione

· JumpColor: è il colore del box di selezione (tinta unita o colore di start nel caso di gradiente)

· JumpTitle: è la descrizione del JumpItem a sinistra del box di selezione

Infine è possibile personalizzare, sempre via XAML nel CompanyDetails, la lista dei prodotti (nome/descrizione), tramite la risorsa sotto:

Figura 12 - Personalizzazione dei prodotti

clip_image024

2.3.7 Stili di visualizzazione

Pur restando chiaro che la soluzione è facilmente editabile nella sua struttura direttamente nello XAML delle pagine, tutta l’informazione di stile è contenuta nel file Styles.xaml, dove è possibile intervenire sulla maggiori personalizzazioni di grafica.

In particolare si evidenziano questi blocchi utili per la personalizzazione dei testi generici:

Figura 13 - Modifica dello stile dei testi di default

clip_image026

La pagina 4 del Pivot (contatti) è composta da 4 Tiles altamente personalizzabili con i seguenti stili:

Figura 14 - Stile della pagina contatti

clip_image028

E il Pivot stesso ha un header personalizzabile così:

Figura 15 - Stile del logo/titolo dell'applicazione

clip_image030

Per la parte di titolo/logo; per quella del menù, lo stile su cui agire è questo:

Figura 16 - Stile dell'Header del Pivot

clip_image032

Nel caso si volesse impostare una immagine di sfondo per l’applicazione o un colore tinta unita o ancora un gradiente, lo style su cui agire è questo:

Figura 17 - Stile Background di tutte le pagine

clip_image034

La JumpList di cui si parlava nella sezione 2.3.6, ha uno stile editabile completamente tramite l’utilizzo di questo DataTemplate:

Figura 18 - Template della JumpList

clip_image036

Infine, le due liste in pagina 2 e 3 (rispettivamente “prodotti” e “news”) hanno un template più semplice editabile nei template sotto:

Figura 19 - Prodotti e News

clip_image038

Last edited Dec 12, 2011 at 2:37 PM by child, version 1

Comments

No comments yet.