> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-8-la-construccion-proyectos-tareas-y-pomodoros/proyectos.md).
# Proyectos
Un proyecto es una agrupación o categoría de tareas y constituye el tipo base en la que se apoya el resto de entidades. A partir de su representación en la interfaz de usuario se navegará al resto, es decir, la representación de un proyecto dará lugar tanto a su edición y detalle como a la navegación de sus tareas, listado y edición de las mismas.
Para el acceso a datos de una API con Azure Storage Explorer es necesario tener como requerimiento la cadena de conexión “MS\_AzureStorageAccountConnectionString” en el web.config.
Añadir la referencia al paquete NuGet: “WindowsAzure.Storage. Lo que evitará errores del tipo: “*Method not found: 'System.Threading.Tasks.Task Microsoft.WindowsAzure.Storage.Blob.CloudBlockBlob.UploadFromStreamAsync(System.IO.Stream)'*”
## Edición de un proyecto (ProjectEdiction)
La edición de un proyecto requiere de la implementación de una pantalla simple para la creación y modificación de los datos que lo forman. El conjunto de métodos, comandos y propiedades que su tratamiento se encuentran en su *ViewModel* tal y como se agrupa en la siguiente figura:
**Figura 02.- Métodos, comandos y propiedades del ViewModel de edición de proyectos**
Y a continuación la representación de la edición de los datos para un proyecto.
**Tabla 01.- Entidad Proyecto y pantalla de edición**
| Entidad Proyecto | Representación gráfica en IU |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|  |  |
Nos referiremos a la pantalla de edición de proyectos, al igual que a cualquier otra página dividiéndola en tres partes: Cabecera, cuerpo o contenido y pie u opciones de menú.
### Cabecera
La cabecera para la edición de un proyecto, al igual que en cualquier otra pantalla, contiene el título de la aplicación. El cual está representado por un control de tipo “TextBlock”, cuyo valor es recuperado del fichero de recursos “Resources.resw” a través de la clase “LocalizedString”.
```
```
De igual forma, al crear un nuevo proyecto mostraremos el literal “Nuevo proyecto” (o “New Project”), indicándolo. Conseguiremos este comportamiento gracias al convertidor “**BooleanToVisibilityConverter**” el cual, trasforma un valor booleano en uno de valores del enumerado “Visibility”. Es decir, el valor “true” lo trasforma en “Visible” y el valor “false” en “Collapsed”.
{% hint style="info" %}
**Nota**: Usaremos la nomenclatura “**\To\Converter**” en el nombre de un convertidor para denotar el tipo de conversión que realiza.
{% endhint %}
### Contenido
El cuerpo o contenido, es la parte principal de cada pantalla y es la que tiene mayor complejidad a la hora de llevar a cabo su construcción.
Hasta ahora, en nuestra pantalla “Acerca de” no hemos hecho uso de controles TextBox, ComboBox, ni otros controles, es a partir de aquí cuando comenzaremos a implementar la interacción con el usuario y es donde mayor atención tendremos que poner. Es donde comenzaremos a profundizar en estilos, acciones y comportamientos, es decir, nos encontramos frente a la implementación de los elementos visuales y prototipado, de acuerdo a nuestro “Microsoft Design Style”. Tendremos que comenzar a tomar decisiones o alternativas en cuanto al camino a seguir para optar a la mejor opción de codificación frente a determinadas situaciones.
{% hint style="info" %}
**Nota**: Hay veces que nos obsesionamos con hacer algo de cierta manera sin darnos cuenta de que puede llegar a ser extremadamente complejo. Llegado este momento lo mejor es levantar la cabeza, despejarnos y pasar a otra tarea. ¡Podremos volver a retomarla nuevamente más tarde!
Intentemos perseguir siempre el principio KISS, (¡del inglés *Keep It Simple, Stupid*! “¡Hazlo sencillo, estúpido!”). El cual, nos indica que todo funciona mejor si se mantiene simple. ¡Una vez más, recordémonos a nosotros mismos, ser eficientes!
{% endhint %}
Comenzaremos, modificando el estilo de las cajas de texto (o *TextBox*). En primer lugar, cambiaremos el fondo blanco, para que éste sea negro, o lo que es lo mismo, el mismo fondo que el resto de la aplicación. Para conseguir este efecto tendremos que aplicar nuevos estilos:
1. Obtener el estilo/plantilla predeterminada del control TextBox y generarla en el fichero “**AppStyles.xaml**” del proyecto Windows Phone. La siguiente figura resume brevemente estos pasos:
**Figura 03.- Obtención del estilo predeterminado de TextBox desde Blend**
2. Modificar este nuevo estilo “DefaultTextBoxStyle”, sobrescribiendo las siguientes instrucciones:
```
```
Y añadiendo esta otra para el estado (o “VisualState”) de “Focused”:
```
```
Tras los cambios realizados, podemos comprobar los cambios de estilo tanto para el tema "Dark" como para el “Light”.
 
**Figura 04.- Resultado de los TextBox personalizados en temas Dark y Light**
Finalmente, definiremos algunos estilos más, basados en el recientemente creado para fijar la longitud máxima de su contenido, alto, si acepta o no retorno de carro, etc. El siguiente código, define varios estilos básicos que utilizaremos en las pantallas de edición:
```
```
De forma equivalente, crearemos controles desplegables (o “ComboBox”) específicos para que estos incluyan una imagen asociada al texto.
A diferencia con los estilos de los *TextBox*, incluiremos estos otros en un nuevo fichero/diccionario de recursos denominado “**CommonAppStyles.xaml**”, el cual situaremos en el proyecto “Shared” y cuyo objetivo es el de contener todos aquellas plantillas o estilos comunes para Window Phone y Windows. Podríamos haber hecho lo mismo con los *TextBox*, sin embargo, utilizan internamente estilos concretos de Windows Phone y, por tanto, este no es su sitio.
Para la selección de un tipo de proyecto o tarea recurriremos a *ComboBox*es, que diseñaremos manualmente a través del siguiente estilo e identificaremos con la clave “**ComboBoxSchema**”:
Utilizar FontIcons en lugar de BitmapIcons, como tenía pensado en un momento inicial
Recordemos para usar iconos u otras imágenes en nuestra aplicación, tenemos las alternativas: SymbolIcon, FontIcon, PathIcon y BitmapIcon.
Se recomienda utilizar siempre que sea posible las alternativas *SymbolIcon* o *FontIcon*. Además de garantizar un mejor rendimiento, evita el tener que generar distintas imágenes para los distintos temas utilizados en la aplicación.
Representaremos los mismos de la manera más recomendada ganando así en rendimiento y evitando tener varias imágenes para los temas Claro y Oscuro (*Light* y *Dark*). Utilizaremos, por tanto, la alternativa de ***FontIcons.*** Las tablas 02 y 03 representan estos iconos con sus respectivos valores Hexadecimales y Unicode.
**Tabla 02.- Iconos para tipos de proyectos**
| Icono | Nombre |
|
| ----- | ------------- | ------------------------------- | ------------------------- |
| | Llamar a | \ | \uE13A |
| | Email para | \ | \uE119 |
| | Vacaciones | \ | \uE1C3 |
| | Vinculo a | \ | \uE167 |
| | Comer con | \ | \uED56 |
| | Otros | \ | \uEA86 |
| | Leer | \ | \uE7BC |
| | Deporte | \ | \uE805 |
| | Hablar con | \ | \uE939 |
| | Hacer / To-Do | \ | \uE930 |
| | Viajar | \&#x E709; | \uE709 |
```
```
Este estilo incluye dos convertidores (o Converters): ThumbnailSchemaTypeConverter y EnumToLocalizatedConverter:
* **ThumbnailSchemaTypeConverter**. Transforma un proyecto o una tarea en una *Uri* que representa a un icono según su tipo.
```
public object Convert(object value, Type targetType, object parameter, string culture)
{
if (value != null)
{
object url = null;
if (value is Data.Schemas.TaskType)
{
url = string.Format(Constants.TASK_TYPES_ICON_PATH_FILES_FORMAT, (Data.Schemas.TaskType)value);
}
else if (value is Data.Schemas.ProjectType)
{
url = string.Format(Constants.PROJECT_TYPES_ICON_PATH_FILES_FORMAT, (Data.Schemas.ProjectType)value);
}
if (null != url)
return new ThumbnailUriConverter().Convert(url, targetType, parameter, culture);
}
return DependencyProperty.UnsetValue;
}
public object ConvertBack(object value, Type targetType, object parameter, string culture)
{
throw new NotImplementedException();
}
```
A su vez, este convertidor se apoya en otro, “**ThumbnailUriConverter**”, que no es ni más ni menos que un convertidor de imágenes predeterminado utilizado a lo largo de toda la aplicación. Transforma una *Uri* relativa en *Uri* absoluta y en caso de que ésta sea nula se obtiene la *Uri* indicada por el parámetro (“parameter”), que deberá coincidir con la *Uri* de una imagen predeterminada y fija para la aplicación. De esta manera, siempre se mostrará una imagen.
```
public class ThumbnailUriConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value != null && value.ToString() != String.Empty)
{
Uri uri = null;
string url = value.ToString();
if (url.StartsWith("/"))
{
uri = new Uri(string.Concat("ms-appx://", url), UriKind.Absolute);
}
else
{
uri = new Uri(url, UriKind.Absolute);
}
return uri;
}
else
{
if (null != parameter && parameter is string)
return new Uri(string.Concat("ms-appx://", parameter.ToString()), UriKind.Absolute);
else
return DependencyProperty.UnsetValue;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (value is BitmapImage)
{
var image = value as BitmapImage;
return image.UriSource.AbsoluteUri;
}
return string.Empty;
}
}
```
Para que la conversión sea correcta, se requiere que tanto Proyectos como tareas, se encuentren ubicados físicamente en dichas Uris, tal y como puede verse en la siguiente figura:
 
**Figura 05.- Iconos para tipos de Proyectos y Tareas**
* **EnumToLocalizatedConverter**. Transforma un enumerado en la correspondiente cadena de texto indicada en el fichero de recursos de cada idioma. Requiere de un fichero de recursos por cada uno de los idiomas que soporta la aplicación: “es” y “en-US”.
**Tabla 04.- Ficheros de recursos para los tipos de proyectos**
| Español (es) | Inglés (en-US) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|  |  |
Su implementación es la siguiente:
```
public class EnumToLocalizatedConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return LocalizedStrings.GetForCurrentView(parameter as string).GetString(value.ToString());
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
```
Una vez implementados todos los estilos y convertidores, el aspecto final del control *ComboBox* para la selección del tipo de proyecto, pasa a ser el siguiente:
```
```
Para la previsualización de la imagen personalizada una vez seleccionada, utilizaremos un control “**Image**”, con un “**BitmapImage**” como *Source*, para así obviar el uso de cache (CreateOptions="IgnoreImageCache"), y permitir al usuario cambiar la imagen tantas veces como quiera.
```
```
Si una imagen ha sido personalizada por el usuario prevalecerá ésta, frente a la predeterminada para cada tipo de proyecto. Para conseguirlo, haremos uso de un nuevo convertidor “**ThumbnailProjectConverter**”.
```
internal sealed class ThumbnailProjectConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string culture)
{
if (value != null)
{
if (value is Data.Schemas.Project)
{
var proj = (Data.Schemas.Project)value;
string url = String.Empty;
if (!string.IsNullOrWhiteSpace(proj.ImageUrl))
{
url = proj.ImageUrl;
}
else
{
url = string.Format(Constants.PROJECT_TYPES_ICON_PATH_FILES_FORMAT, proj.ProjectType);
}
return new ThumbnailUriConverter().Convert(url, targetType, parameter, culture);
}
}
return DependencyProperty.UnsetValue;
}
public object ConvertBack(object value, Type targetType, object parameter, string culture)
{
throw new NotImplementedException();
}
}
```
Tras analizar este código, la pregunta a hacernos aquí es, si la propiedad “ImageUrl” no ha sido obtenida a partir del repositorio, **¿Cómo la obtenemos si nuestra entidad proyecto utiliza un conjunto de bytes (*****byte\[]*****)?**. Tanto en una situación como en cualquier otra, salvo en aquellos casos en que el repositorio sea el “Storage”, utilizaremos un sistema de cacheado de imágenes basado en ficheros locales, así, al descargar las imágenes de un servicio Web, o bien al utilizar imágenes como conjuntos de *bytes*, agilizaremos la visualización de las mismas teniendo en cuenta, además, que los controles de imágenes gestionan más racionalmente las mismas y evitan altos consumos de memoria.
Partiendo de la premisa anterior, tendremos que aprovisionar las URLs de las imágenes en el momento en que el usuario haga su elección a partir de la librería de imágenes del dispositivo. Por lo que, para completar el proceso de selección de imágenes, al igual que comentamos en el capítulo 2, son necesarios algunos pasos:
* Activar y configurar la declaración “FileOpenPicker” e incluir las extensiones de ficheros soportadas.
**Figura 06.- Declaración "FileOpenPicker" para la selección de imágenes**
* Incluir en fichero “App.xaml.cs”, en el evento “**OnActivated**”, el siguiente código. Este evento se encarga permitir el acceso a librería de imágenes y devolver el control nuevamente a la aplicación para poder tratar la imagen seleccionada.
```
protected override void OnActivated(IActivatedEventArgs args)
{
Frame rootFrame = appManager.DisplayOnActivateView(args);
if (args.Kind == ActivationKind.PickFileContinuation)
{
var page = rootFrame.Content as ProjectEditionPage;
var viewModel = page.ViewModel as IProjectEditionViewModel;
viewModel.ContinueFileOpenPicker(args as FileOpenPickerContinuationEventArgs);
}
}
```
* Incluir en el ViewModel “ProjectEditionViewModel”, el método que tomará el control tras la selección de la imagen para tratar la misma.
public async void ContinueFileOpenPicker(FileOpenPickerContinuationEventArgs args) { //... }
**Nota**: La implementación de este método, así como sus particularidades las veremos en el siguiente apartado, en las opciones de menú.
Como vamos a añadir, modificar o borrar imágenes de la librería, no tendremos que activar las capacidades “Pictures Library”, por lo que no la marcaremos.
**Figura 07.- Selector de imágenes desde la librería del dispositivo**
Llegado este punto, hemos diseñado el *ComboBox* para la selección de tipos de proyectos, hemos configurado la selección de imágenes desde la librería del dispositivo, hemos creado una imagen para la pre-visualización, y ya tenemos los *TextBox* para la introducción del título, el detalle del proyecto y la dirección. Añadiremos ahora un botón para la obtención automática de la dirección a partir de la localización actual haciendo uso del GPS. Lo cual implicará algunos pasos previos:
* Habilitar la capacidad de localización (o *Location*).
**Figura 08.- Habilitación de la capacidad de localización en el manifiesto de la aplicación**
* Crear un nuevo servicio “**GeolocationService**” para el acceso a la locación para el que implementaremos los siguientes métodos:
```
public async Task GetAddressFromCoordinatesAsync()
{
var locator = new Geolocator();
var position = await locator.GetGeopositionAsync();
return await this.GetAddressFromCoordinatesAsync(position);
}
public async Task GetAddressFromCoordinatesAsync(Geoposition geoposition)
{
string address = null;
try
{
var location = await MapLocationFinder.FindLocationsAtAsync(geoposition.Coordinate.Point);
if (location.Status == MapLocationFinderStatus.Success)
{
bool requireNewLine = !String.IsNullOrWhiteSpace(location.Locations[0].Address.Town.Trim())
&& (!String.IsNullOrWhiteSpace(location.Locations[0].Address.StreetNumber.Trim())
|| !String.IsNullOrWhiteSpace(location.Locations[0].Address.Street.Trim()));
if (System.Globalization.CultureInfo.CurrentCulture.TwoLetterISOLanguageName == "es")
{
address = String.Format("{0}{1}{2} {3}",
location.Locations[0].Address.Town.Trim(),
requireNewLine ? Environment.NewLine : String.Empty,
location.Locations[0].Address.Street.Trim(),
location.Locations[0].Address.StreetNumber.Trim());
}
else
{
address = String.Format("{0}{1}{2} {3}",
location.Locations[0].Address.Town.Trim(),
requireNewLine ? Environment.NewLine : String.Empty,
location.Locations[0].Address.StreetNumber.Trim(),
location.Locations[0].Address.Street.Trim());
}
}
}
catch { /* Nothing to do. Return null. */ }
return address;
}
```
* Enlazar a este nuevo botón, el comando “GetCurrentPositionCommand” con el código:
```
private RelayCommand getCurrentPositionCommand;
public RelayCommand GetCurrentPositionCommand
{
get
{
return getCurrentPositionCommand
?? (getCurrentPositionCommand = new RelayCommand(
async (search) =>
{
bool errorFound = false;
string addressFound = String.Empty;
try
{
await StatusBarService.ShowProgressAsync();
// get the first address that matches the current position
var geoService = new GeolocationService();
addressFound = await geoService.GetAddressFromCoordinatesAsync();
errorFound = (null == addressFound);
}
catch (UnauthorizedAccessException) { /* Noting to do. When User not
accept GPS access */}
finally
{
await StatusBarService.HideProgressAsync();
if (!errorFound)
this.Address = addressFound;
else
await this.dialogService.ShowMessageBox(LocalizedStrings.MsgCurrentAddressNotFound, LocalizedStrings.MsgCurrentAddressTitle);
}
}));
}
}
```
Finalmente, y para que todos los convertidores anteriores entren en acción, los registraremos en el diccionario de recursos a nivel de aplicación. En el fichero “App.xaml”.
```
```
### Opciones de menú
Las opciones de menú que constituyen la edición de un proyecto son las siguientes:
* Guardar (o *Save*). Como su nombre indica guarda los datos del proyecto y además cierra la pantalla actual volviendo
* Eliminar (o *Remove*). Elimina el proyecto previo aviso de confirmación. Su comando el siguiente.
```
private RelayCommand appBarDeleteCommand;
public RelayCommand AppBarDeleteCommand
{
get
{
return appBarDeleteCommand ?? (appBarDeleteCommand = new RelayCommand(
async () =>
{
bool pushButtonOk = await this.dialogService.ShowMessage(
LocalizedStrings.MessageBoxDeleteProjectMessage,
LocalizedStrings.MessageBoxDeleteTitle,
LocalizedStrings.ButtonOK,
LocalizedStrings.ButtonCancel,
null);
if (pushButtonOk)
{
if (await this.service.DeleteProject(this.projectId) == 0)
{
this.navigationService.GoBack();
this.navigationService.GoBack();
}
}
}));
}
}
```
* Foto (o *Photo*). Esta opción, posibilita la elección de una imagen personalizada para el proyecto escogiéndola a partir de la biblioteca de imágenes del dispositivo.
```
private RelayCommand