Inicio rápido: usar la biblioteca NotificationsExtensions en el código (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Nota  ¿No usas JavaScript? Consulta Inicio rápido: usar la biblioteca NotificationsExtensions en el código (XAML).

 

La biblioteca de modelos de objetos NotificationsExtensions te permite proporcionar contenido de plantillas XML de iconos, distintivos y notificaciones del sistema sin usar Document Object Model (DOM) XML. Ofrece un método más sencillo, claro y directo para proporcionar contenido de notificación. Al usar esta biblioteca en Microsoft Visual Studio, obtienes las siguientes ventajas:

  • IntelliSense, que enumera los atributos y las etiquetas disponibles como propiedades del objeto, en lugar tener que consultar la documentación del esquema para obtener información sobre los elementos y la estructura.
  • Una función de fábrica que puedes usar para crear las estructuras de las notificaciones, que luego podrás rellenar con tu propio contenido.
  • Una manera simplificada de incluir varios tamaños de icono en la carga de la notificación (procedimiento recomendado).
  • Una manera útil de encontrar atributos de texto e imagen y rellenarlos, cuyo nombre se asigna de manera tal que te proporcione más información sobre su posición, tamaño o uso previstos en la plantilla.

Nota  La biblioteca NotificationsExtensions se publica bajo una licencia pública limitada de Microsoft (MS-LPL). Puedes reutilizar la biblioteca en tu aplicación de la Tienda Windows o servicio web y personalizarla si fuera necesario para tu aplicación.

 

Requisitos previos

  • Conocimientos prácticos sobre los términos y conceptos de iconos y notificaciones. Para más información, consulta el tema sobre iconos, distintivos y notificaciones.
  • Capacidad para crear una aplicación de la Tienda Windows con JavaScript básica mediante las API de Windows en tiempo de ejecución. Para obtener más información, consulta el tema sobre cómo crear tu primera aplicación de la Tienda Windows con JavaScript.
  • Contar con conocimientos básicos de XML te dará una noción más completa de lo que crea la biblioteca NotificationsExtensions.

Instrucciones

1. Obtener la biblioteca NotificationsExtensions

La biblioteca NotificationsExtensions se incluye en varias muestras descargables de iconos, notificaciones y notificaciones del sistema, y puedes copiarla de estas muestras para usarla como te haga falta. En este procedimiento, usaremos la muestra de iconos y distintivos principales.

Nota  NotificationsExtensions es una biblioteca de C#, pero puede incluirse en proyectos realizados en JavaScript, C#, C++ y Microsoft Visual Basic y utilizarse con ellos.

 

  1. Descarga la muestra de distintivos e iconos de aplicación del Centro de desarrollo de Windows.
  2. Descomprime el archivo "App tiles and badges sample.zip" en la carpeta que quieras.
  3. Ve a la carpeta en la que descomprimiste la muestra. Copia la carpeta NotificationsExtensions de la muestra al directorio de proyecto, como elemento del mismo nivel del archivo .sln del proyecto.

2. Incluir la biblioteca en tu proyecto

  1. Inicia Visual Studio y abre tu proyecto.
  2. En el Explorador de proyectos, haz clic con el botón derecho en la solución, en la parte superior del árbol.
  3. Selecciona Agregar y, a continuación, Proyecto existente.
  4. Navega hasta la carpeta NotificationsExtensions del proyecto y selecciona el archivo NotificationsExtensions.csproj.
  5. En cada proyecto de la solución, haz clic con el botón derecho en Referencias y selecciona Agregar referencia.
  6. En Administrador de referencias, en Solución, selecciona NotificationsExtensions y luego haz clic en Aceptar. Ahora ya se puede usar NotificationsExtensions.

Nota  Si no deseas incluir todo el proyecto NotificationsExtensions en la solución, puedes compilar NotificationsExtensions como proyecto independiente e incluir NotificationsExtensions.winmd como referencia en tu proyecto.

 

3. Incluir la biblioteca en tu servidor de aplicaciones

También puedes usar NotificationsExtensions en el código de tu servidor de aplicaciones si usas ASP.NET para enviar notificaciones de inserción a Servicios de notificaciones de inserción de Windows (WNS) o si implementas un servicio ASP.NET para atender solicitudes de actualizaciones periódicas del sistema o de icono. La única advertencia es que debes agregar el símbolo de generación de compilación WINRT_NOT_PRESENT en las propiedades del proyecto NotificationsExtensions.

  1. Ve al directorio en el que descomprimiste la muestra. Abre la carpeta de la muestra y copia la carpeta NotificationsExtensions en una nueva ubicación que elijas.

  2. Selecciona el archivo NotificationsExtensions.csproj para abrir el proyecto en Visual Studio.

  3. En el menú Proyecto, elige Propiedades de NotificationsExtensions.

  4. Cambia la selección Tipo de resultado a "Biblioteca de clases" para generar un archivo DLL.

  5. Asimismo, en las propiedades de NotificationsExtensions, selecciona la pestaña Compilación.

  6. En la categoría General, agrega "WINRT_NOT_PRESENT" en el cuadro Símbolos de compilación condicional. Si el cuadro ya contiene otros símbolos, usa un signo de punto y coma como separador antes de "WINRT_NOT_PRESENT".

  7. Presiona F7 o usa Compilación > Compilar solución para compilar el proyecto.

  8. Copia el archivo NotificationsExtensions.dll compilado desde la carpeta (en \NotificationsExtensions\bin\Debug\) al código del servidor de aplicaciones.

4. Usar la biblioteca en el código

NotificationsExtensions ahora se puede usar como un objeto en el código. Contiene tres miembros importantes:

  • BadgeContent
  • TileContent
  • ToastContent

Cada uno de estos tipos de contenido, a su vez, contiene miembros que representan los elementos y los atributos de cada tipo.

El siguiente ejemplo usa NotificationsExtensions para asignar un valor a un distintivo numérico y después enviarlo al icono.


var badgeContent = NotificationsExtensions.BadgeContent.BadgeNumericNotificationContent(85);
var badgeNotification = badgeContent.createNotification();

Windows.UI.Notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

A título comparativo, el siguiente ejemplo muestra el mismo procedimiento sin NotificationsExtensions, mediante la manipulación directa del DOM de XML.


var notifications = Windows.UI.Notifications;                        
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(notifications.BadgeTemplateType.badgeNumber);
var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "85");
var badgeNotification = new notifications.BadgeNotification(badgeXml);

BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

El siguiente ejemplo utiliza NotificationsExtensions para proporcionar texto en una notificación de icono. El primer paso usa la función TileContentFactory de NotificationsExtensions para crear un objeto basado en una plantilla específica. Hay una función de creación independiente para cada plantilla. Simplemente debes incluir la palabra "create" en el nombre de la plantilla, por ejemplo, "createTileWide310x150ImageAndText01".

A continuación, el objeto basado en la plantilla proporciona IntelliSense para mostrar los elementos disponibles en la plantilla como propiedades con nombres acordes con su función, como textHeading, textBodyWrap, textBody1 o textColumn1Row4. Esto te indica con precisión qué elemento asignas.

Una vez que hayas asignado valores a las propiedades, puedes enviar la notificación de icono normalmente.


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Text01();

tileContent.textHeading.text = "Hello!";
tileContent.textBody1.text = "One";
tileContent.textBody2.text = "Two";
tileContent.textBody3.text = "Three";

var tileNotification = tileContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

En este ejemplo se usa NotificationsExtensions para asignar texto y una imagen a una notificación. Al igual que con el texto, los elementos de imagen se muestran como propiedades con nombres acordes con su función en la plantilla, por ejemplo, imageMain e imageSmallColumn2Row2.


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150ImageAndText01();

tileContent.textCaptionWrap.text = "This tile notification uses ms-appx images";

tileContent.image.src = "ms-appx:///images/redWide.png";
tileContent.image.alt = "A red rectangle";

Este ejemplo usa NotificationsExtensions para definir una notificación de icono completa. Esto ilustra una peculiaridad de esta biblioteca: el orden en el que se agregan los tamaños de plantilla a la carga es importante.

  • Una plantilla pequeña (71 x 71 cuadrada; solo Windows Phone 8.1) solo se puede agregar a una plantilla mediana.
  • Una plantilla mediana (150 x 150 cuadrada) solo se puede agregar a una plantilla ancha.
  • Una plantilla ancha solo se puede agregar a una plantilla grande (310 x 310 cuadrada; solo Windows).

Si intentas hacerlo en otro orden, verás que las propiedades necesarias no están disponibles.


var tileLargeContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare310x310Text09();
tileLargeContent.textHeadingWrap.text = "Lorem ipsum dolor sit amet, consectetur";
tileLargeContent.textHeading1.text = "Lorem ipsumo";
tileLargeContent.textHeading2.text = "Lorem ipsumo";
tileLargeContent.textBody1.text = "VivAmus tincidunt convallis urn";
tileLargeContent.textBody2.text = "VivAmus tincidunt convallis urn";

var tileWideContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150Text04();
tileWideContent.textBodyWrap.text = "Lorem ipsum dolor sit amet, consectetur";

var tileMediumContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Block();
tileMediumContent.textBlock.text = "24";
tileMediumContent.textSubBlock.text = "Aliquam";
        
tileWideContent.square150x150Content = tileMediumContent;
tileLargeContent.wide310x150Content = tileWideContent;

var tileNotification = tileLargeContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Este ejemplo usa NotificationsExtensions para proporcionar contenido para una notificación del sistema, incluidos el texto, la imagen, el audio, la duración y los parámetros de inicio.


var toastContent = NotificationsExtensions.ToastContent.ToastContentFactory.createToastImageAndText01();

toastContent.textBodyWrap.text = "Lorem ipsum dolor sit amet";

toastContent.image.src = "ms-appx:///images/redWide.png";
toastContent.image.alt = "A red rectangle";

toastContent.audio.content = NotificationsExtensions.ToastContent.ToastAudioContent.loopingAlarm;
toastContent.audio.loop = true;

toastContent.duration = NotificationsExtensions.ToastContent.ToastDuration.long;

toastContent.launch = '{"type":"toast","param1":"12345","param2":"67890"}';

var toast = toastContent.createNotification();
Windows.UI.Notifications.ToastNotificationManager.createToastNotifier().show(toast);

Resumen

En este tema te mostramos cómo usar NotificationsExtensions para simplificar la creación de notificaciones de icono, de distintivo y del sistema. Esta forma de rellenar una plantilla es más sencilla que usar directamente DOM XML.