PhoneGap API + Visual Studio 2012 + Windows Phone 8.0 SDK sobre Windows 8.1

Esta es una pequeña guía de como configurar tu ambiente de desarrollo para PhoneGap sobre Windows 8.1 utilizando VS2012 como IDE y con el emulador de Windows Phone 8.0.

NOTA: Las aplicaciones creadas con Windows Phone 8 solo correrán en dispositivos Windows Phone 8.

1-. Requisitos del Sistema

Sistema Operativo

  • Windows 8, Windows 8 Pro

Hardware:

  • 6.5 GB libre de espacio en disco
  • 4 GB de RAM
  • CPU de 64-bit (x64)

Emulador de Windows Phone 8:

  • Windows 8 Pro edition or greater
  • Requires a processor that supports Second Level Address Translation (SLAT)

SDK + IDE ( Visual Studio )

2.- Instalación IDE

  • Descargar e instalar VS2012
  • Descargar e instalar SDK Windows Phone 8.0

3.- PhoneGap API

  • Descargar la versión 2.8.1 de Phonegap
  • Extraer el contenido, el directorio que utilizaremos será libwindows-phone-8
  • Copiar el archivo CordovaWP8_2_8_0.zip a la carpeta Mis DocumentosVisual Studio 2012TemplatesProjectTemplates

4.- Crear proyecto

  • Abrir Visual Studio 2012 y elegir Nuevo Proyecto
  • Seleccionar CordovaWP8_2_8_0

Win8Phonegap3

  • Dar nombre y ubicación al proyecto
  • Correr el proyecto utilizando alguna opción del emulador

Win8Phonegap5Win8Phonegap4

Si se desea correr la aplicación directamente en un dispositivo es necesario registrarlo. Aquí la documentación de como hacerlo. Una vez hecho esto selecciona la opción Device  y corre tu proyecto.

Gracias

[IIS] Permisos de escritura en directorio

En ciertas ocasiones es necesario que nuestra aplicación ASPX deba generar archivos temporales o permanentes dentro de directorios propios de la aplicación con el fin de usarlos durante el proceso o para descarga de parte del cliente, esto puede representar un problema si no se dan los permisos necesarios al IIS para poder hacer uso de este directorio.

En teoría por default, IIS no es capaz de crear, modificar o eliminar un archivo de un directorio, entonces es necesario agregar los permisos correspondientes al directorio para permitirle a IIS hacerlo posible.

Entonces, abrimos nuestro sitio publicado en IIS y nos dirigimos al directorio en donde se crearán los archivos, y arimos sus propiedades

IIS1

Luego de esto, vamos al tab Seguridad, y damos clic en Editar…

IIS2

En la ventana Permisos de Documentos damos clic en el botón Agregar….

IIS3



En la ventana Seleccionar Usuarios o Grupos agregamos el usuario IIS_IUSRS

IIS4

Una vez agregado el usuario IIS_IUSRS, le damos permisos de Control Total. Verificamos que todos los demás permisos tengan una palomita y damos clic en Aceptar.

IIS5

Listo, IIS podrá ahora manipular archivos en este directorio.

NOTA: Para versiones anteriores de IIS 7.0, se deberá agregar el usuario IIS_WPG Ver aquí

Gracias

[ASPX] Mostrar Imagen en Base de Datos en una etiqueta

Es muy común que en alguna aplicación además de información de tipo texto o numérico (entre otras), sea también necesario almacenar imágenes correspondientes a la información que se requiere representar.

Supongamos una aplicación en la cual se desean mostrar los eventos que se realizaran en cierta institución ordenada en cierta manera pero que además de la información propia del evento, se quiera mostrar un carrusel con JQuery en el cual se muestren los banners correspondientes a cada evento.

Para esto se deberá almacenar dicho banner en Base de Datos junto con la información textual del evento. He aquí la pregunta. Si mi imagen esta almacenada en base de datos, ¿Cómo puedo mostrar esta imagen en una etiqueta IMG? A continuación se muestra una opción para hacerlo.

Paso 1: Crear un WebForm llamado Imagen.aspx

Este formulario funcionara como url local para acceder a la imagen.

Paso 2: Obtener la imagen.

En este paso se consulta la base de datos para obtener la imagen en el evento Page_Load de la página Imagen.aspx, esto se hace de la misma forma que con cualquier dato.

//Recuperar el identificador
string id = Request.QueryString["id"];
//Crear conexion
using (SqlConnection con = new SqlConnection())
{
   //Obtener ConnectionSctring de web.config
   System.Configuration.Configuration rootWebConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("~");
   System.Configuration.ConnectionStringSettings connString;
   if (0 < rootWebConfig.ConnectionStrings.ConnectionStrings.Count)
   {
     connString=rootWebConfig.ConnectionStrings.ConnectionStrings["MiCadena"];
     if (null != connString)
     {
       con.ConnectionString = connString.ToString();
       con.Open();
       using (SqlCommand com = con.CreateCommand())
       {
          //tipo de comado StoreProcedure o consulta
          com.CommandType = CommandType.Text;
         //nombre del StoreProcedure o consulta
          com.CommandText = "SELECT Banner FROM Eventos WHERE IdEvento=" + id;
         try
         {
            //Ejecutar comando
            byte[] img = (byte[])com.ExecuteScalar();
         }catch(SqlException se){}
      }
      //Cerrar conexion
      con.Close();
   }
 }
}

Paso 3: Una vez obtenida la información de la imagen. Solo nos resta responder esta imagen como contenido de tipo “image/jpeg” ya que JPG es el formato en que se almaceno la imagen en la Base de Datos. Ver Tipos Mime


MemoryStream str = new MemoryStream();
str.Write(img, 0, img.Length);
Bitmap bit = new Bitmap(str);
Response.ContentType = "image/jpeg";//Responder Img JPG
bit.Save(Response.OutputStream, ImageFormat.Jpeg);

Paso 4: En el codigo HTML, mostrar la imagen de la siguiente manera:

<img alt="imagen1" src="Imagen.aspx?id=1" />

Con esto nos queda una URL local con la cual accedemos a la imagen que necesitamos.

Gracias

Mostrar PDF en IFRAME dentro de Master Page

En algunas ocasiones es necesario mostrar archivos PDF en un sitio Web, por ejemplo, en un Sistema que genera Ordenes de Pago, pues es lógico pensar que las ordenes generadas sean mostradas en un Web Form, para su impresión o almacenamiento por parte del cliente.

He aquí una forma de mostrar un archivo PDF creado en Directorios de la aplicación (Servidor) en un Web Form, hijo de una Master Page.

ASPX


<iframe id="pdf" runat="server" height="800" width="600"><iframe>

Como puedes darte cuenta, coloco la etiqueta runat=”server”, esto hace visible este control del lado del servidor.

C#

//Nuevo control HTML y Buscamos dentro del ContentPlaceHolder del sitio llamado "contenido"
HtmlControl frame1 = (HtmlControl) Page.Master.FindControl("Contenido").FindControl("pdf");
//Asignamos a la propiedad "src" la ruta donde se genero el archivo
frame1.Attributes["src"] = "../../Documentos/" + Session["usuario"] + ".pdf";

Con esto se le indica al contro iframe (de lado del cliente), la ruta del archivo PDF (del lado del servidor). Esto bastará para mostrarse correctamente.

Saludos.
Gracias.

Actualizar contenido dentro de un IFRAME

Usualmente la etiqueta <iframe> se utiliza para mostrar contenido web dentro de un sitio web, si este contenido web dentro del frame no cambia no existe mucha complicación, pero si el contenido esta cambiando automáticamente y es necesario mostrar la versión mas actual existe el inconveniente de que el navegador pueda guardar en cache este contenido y no se muestre como nosotros queremos.

Una solución fácil y rápida, siempre y cuando el contenido que se muestre en el iframe sea nuestro, es el de agregar las siguientes metas que evitan que el contenido se guarde en cache y se muestre la versión mas reciente de este contenido:


<head>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>

Adémas, también se pueden utilizar si queremos que al dar clic en botón atrás del navegador, la pagina no se quede con datos sino que refresque.

Gracias

ASPX + TinyMCE

En algunas ocasiones es necesario crear aplicaciones web, cuyos formularios soliciten información a los usuarios (Eje: El registro a un diplomado virtual), en donde estos puedan agregar enlaces a alguna pagina, crear tablas para organizar contenidos, enumerar en lista algunas características o elementos, resaltar texto o hacerlo mas grande.

Claro!!!.. Las respuesta es un TextBox que tenga la propiedad de poder editar contenido como HTML. Ya que nativamente el control ASP TextBox no cuenta con esta propiedad, es necesario utilizar otras tecnologías como Ajax o en este caso JQuery.

Lo primero que necesitamos es descargar el plugin TinyMCE, un editor de contenido HTML muy popular, que además de todo cuenta con plugins para WordPress, Joomla, etc.

http://www.tinymce.com/tryit/basic.php

Agregamos el directorio tiny_mce a nuestro proyecto, que entre otras cosas continene:

Los archivos .js, los temas, lenguajes, etc.

Luego de esto, ubicamos el asrchivo donde irá el control HTML, y configuramos el plugin:

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions
,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste
,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,
template,wordcount,advlist,autosave",


// Theme options
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft
,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,
|,tablecontrols",
theme_advanced_buttons2: "bullist,numlist,link,unlink,image,code",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,
sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|
,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,
template,pagebreak,restoredraft",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,

// Example content CSS (should be your site CSS)
// using false to ensure that the default browser settings are used for
best Accessibility
// ACCESSIBILITY SETTINGS
content_css: false,
// Use browser preferred colors for dialogs.
browser_preferred_colors: true,
detect_highcontrast: true,

// Drop lists for link/image/media/template dialogs
template_external_list_url: “lists/template_list.js”,
external_link_list_url: “lists/link_list.js”,
external_image_list_url: “lists/image_list.js”,
media_external_list_url: “lists/media_list.js”,
// Style formats
style_formats: [
{ title: ‘Bold text’, inline: ‘b’ },
{ title: ‘Red text’, inline: ‘span’, styles: { color: ‘#ff0000’} },
{ title: ‘Red header’, block: ‘h1’, styles: { color: ‘#ff0000’} },
{ title: ‘Example 1’, inline: ‘span’, classes: ‘example1’ },
{ title: ‘Example 2’, inline: ‘span’, classes: ‘example2’ },
{ title: ‘Table styles’ },
{ title: ‘Table row 1’, selector: ‘tr’, classes: ‘tablerow1’ }
],

// Replace values for the template plugin
template_replace_values: {
username: “Some User”,
staffid: “991234”
}
});
</script>

Y finalmente el control que por default debe ser un textarea. Agregamos el
runat=”server” para verlo del lado del servidor y listo.

<body>
<form id="form1" runat="server">
<div>
<textarea runat="server" style="background-color:#000;
width: 300px" id="Texto" name="elm1" rows="15" cols="80"
></textarea>
</div>
</form>
</body>

Error “A potentially dangerous Request.Form value was detected”

Solucion 1:
Uso de las clases HTMLEncode y HTMLDecode.

http://blog.tentaclesoftware.com/archive/2012/05/21/asp-net-4-0-tinymce-and-
ldquoa-potentially-dangerous-request.aspx

Solucion 2:
Deshabilitar la RequestValidation.

Default.ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="TinyMCE.Default" ValidateRequest="false">

Web.Config

<location path="Default.aspx">
<system.web>
<httpRuntime requestValidationMode="2.0" />
</system.web>
</location>

Gracias.

< %# Eval(“Valor”)% >

Últimamente me he percatado de la valiosa ayuda que esta función
tiene, y es que a veces es necesario procesar la información que el origen de
datos nos da, pero todo esto sobre algún control de datos.

Como ejemplo, he desarrollado una aplicación de evaluación de
escenarios/temas, donde cada usuario autenticado y autorizado, puede dar
valores de probabilidad a un escenario, en una escala del 1 al 5, registrando
en una Base de Datos, la evaluación que cada usuario le ha dado a cada uno de
los escenarios.

Pero sabemos que un usuario no terminará de evaluar todos
los escenarios en una sola sesión, así que es recomendable mostrarle una lista
de los escenarios y recordarle cuales ya han sido evaluados y cuáles no.

Para esto utilice un ListView como control de repetición
de datos, para mostrar los escenarios/temas, y si ya han sido evaluados o no.
Para mostrar si ya han sido evaluados muestro una y si o muestro una .

Aqui el código de como hacerlo:

Dentro del ASP ListView

<HeaderTemplate>
<table cellpadding="0" cellspacing="0" width="700px" style="font-family:Calibri, Sans-Serif">
</HeaderTemplate>
<ItemTemplate>
<%# Convert.ToInt32(Eval("Probabilidad")) > 0 ? "<img src="../images/palomita.png" width="20px" />" : "<img src="../images/tachita.png" width="15px" />"%>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>

Quedando algo asi:

Gracias


Facebook
Twitter
More...

Customizar Rows en un ASP Gridview

La manera más fácil de utilizar un ASP Gridview es que a partir de un origen de datos seleccionado Visual Studio, cree automáticamente las columnas y el tipo de control en el cual se representaran los datos, generalmente de tipo ASP BoundField.

Pero cada caso es muy diferente a los demás, en ocasiones esto no es muy conveniente debido a la extensa longitud de algunos datos.

Desarrollando un acortador de URL’s me encontré con un dato que quería mostrar en una columna de un ASP Gridview que era demasiado extenso (Url Larga), y al darle un ancho fijo a la columna lo único que hacia era distribuir el contenido en varias líneas. Eso si la cadena tenía espacios, si no, no respetaba el ancho de la columna.

Entonces, como no era necesario mostrar la cadena completa (Url Larga), decidí, hacer lo siguiente.

Dentro de la etiqueta <Columns> del Gridview
1.- Cambiar el tipo ASP BoundField por el tipo ASP ItemTemplate
2.- Dentro de <ItemTemplate>, Colocar un
<div> con el ancho requerido, y el estilo overflow:hidden.
3.- Dentro del div evaluar la expresión del origen de datos <%# Eval(“Url Larga”)%>

De esta manera, dentro del div se mostrara el contenido de la expresión, el ancho no cambiara a pesar de la longitud del contenido, y con el estilo nos aseguramos que el texto que se salga del div no aparezca, quedando algo asi:

De igual manera para la columna Url Corta, modifique el BoundField por ItemTemplate para poder mostrar este campo como un enlace <a>

Gracias