Buscar

Ingphillip's-Prog

TODO: WEB!!!

CPOO en Silverlight – Herencia – 05


Este es uno de los pilares y conceptos más importantes en el paradigma de Programación Orientada a Objetos:

DEFINAMOS

Herencia es una relación entre clases, a través de la cual una clase (Base) permite que sus miembros, atributos, métodos entre otros, puedan ser reutilizados por otras clases (Subclases) y por otra parte se pueda extender la funcionalidad inicial.

Pensemos en un juego de Ajedrez y veamos por ejemplo la necesidad de crear piezas negras y blancas. Pero sinteticemos algo más esto, veamos que hay diferentes tipos de piezas y cada una tiene un tipo de movida diferente.

– Rey – Dama – Alfil – Caballo – Torre – Peón

De este grupo se elige por ejemplo: Caballo y Torre.

El caballo corre en L es decir que segun su posición inicial avanza dos unidades y gira una en sentido lateral.

La torre en cambio se desplaza horizontal y verticalmente tanto como tenga espacio para avanzar.

Según esta pequeña introducción al movimiento de este tipo de piezas. Continuamos y pasamos a abstraer el tipo de objeto base, se tiene en común que ambas tanto Caballo como Torre  son Piezas de jugar al ajedrez. Por lo que se puede ver allí, el primer tipo de objeto es la clase Pieza.

Pero antes de seguir con la definición de la clase, veamos un nuevo tipo de dato  especial, tenemos un enum (Enumeración de tipos de dato), el cual me va a permitir definir si la pieza es blanca o negra, de esta forma se puede conocer si un objeto pertenece al bando blanco o al bando negro.

Posible Diagrama de clases:

Páginas: 1 2 3 4

CPOO en Silverlight – Clases y Objetos – 04


En el siguiente WEBCAST se ve el compendio de los temas tratados hasta el momento, Clases, Objetos en aplicaciones Silverlight.

Código de la clase Balón:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Silverlight_CPOO_01_Clases_Demo
{
    public class Balon
    {
        private const double distancia = 10;
        public Ellipse Grafico { get; set; }

        public Balon()
        {
            Grafico = new Ellipse();
            Grafico.Height = 50;
            Grafico.Width = 50;
            Grafico.Fill = new SolidColorBrush(Colors.Green);
        }

        public void MoverArriba()
        {
            double posTop = (double)Grafico.GetValue(Canvas.TopProperty);
            posTop -= distancia;
            Grafico.SetValue(Canvas.TopProperty, posTop);
        }

        public void MoverAbajo()
        {
            double posTop = (double)Grafico.GetValue(Canvas.TopProperty);
            posTop += distancia;
            Grafico.SetValue(Canvas.TopProperty, posTop);
        }

        public void MoverIzquierda()
        {
            double posLeft = (double)Grafico.GetValue(Canvas.LeftProperty);
            posLeft -= distancia;
            Grafico.SetValue(Canvas.LeftProperty, posLeft);
        }

        public void MoverDerecha()
        {
            double posLeft = (double)Grafico.GetValue(Canvas.LeftProperty);
            posLeft += distancia;
            Grafico.SetValue(Canvas.LeftProperty, posLeft);
        }
    }
}

Código de la clase MainPage

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Silverlight_CPOO_01_Clases_Demo
{
    public partial class MainPage : UserControl
    {
        Balon balon;
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            balon = new Balon();
            LayoutRoot.Children.Add(balon.Grafico);
        }

        private void btArr_Click(object sender, RoutedEventArgs e)
        {
            balon.MoverArriba();
        }

        private void btIzq_Click(object sender, RoutedEventArgs e)
        {
            balon.MoverIzquierda();
        }

        private void btAba_Click(object sender, RoutedEventArgs e)
        {
            balon.MoverAbajo();
        }

        private void btDer_Click(object sender, RoutedEventArgs e)
        {
            balon.MoverDerecha();
        }
    }
}

Código de la UI para el manejo del Balón:

<UserControl x:Class="Silverlight_CPOO_01_Clases_Demo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Canvas x:Name="LayoutRoot" Background="White">
        <Button Canvas.Left="244" Canvas.Top="227" Content="Arriba" Height="23" Name="btArr" Width="75" Click="btArr_Click" />
        <Button Canvas.Left="163" Canvas.Top="256" Content="Izquierda" Height="23" Name="btIzq" Width="75" Click="btIzq_Click" />
        <Button Canvas.Left="244" Canvas.Top="256" Content="Abajo" Height="23" Name="btAba" Width="75" Click="btAba_Click" />
        <Button Canvas.Left="325" Canvas.Top="256" Content="Derecha" Height="23" Name="btDer" Width="75" Click="btDer_Click" />
    </Canvas>
</UserControl>

CPOO en Silverlight – Clases y Objetos – 03


Después de haber estudiado el concepto de Clase y Objeto pasemos a estudiar algunos objetos de silverlight.

DEFINAMOS

LAYOUT

Para empezar con silverlight se deben tener claros conceptos tales como en que forma se van a posisionara los controles (objetos) y que objetos me permiten organizar visualmente la UI (interfaz de usuario) de forma tal que para el usuario una aplicación sea atractiva y funcional.

Objetos de tipo Panel tales como canvas, grid, stackpanel son muy importantes a la hora de implementar el layout o UI (interfaz de usuario) en una aplicación Silverlight.

PRACTIQUEMOS

1 – Grid : Objeto contenedor  para posicionar elementos de la UI en aplicaciones Silverlight, en forma de tabla o cuadricula.

XAML

<Grid x:Name="LayoutRoot" Background="White" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Button Name="BT00" Content="0 0" Grid.Column="0" Grid.Row="0" FontSize="28"></Button>
            <Button Name="BT01" Content="0 1" Grid.Column="1" Grid.Row="0" FontSize="28"></Button>
            <Button Name="BT02" Content="0 2" Grid.Column="2" Grid.Row="0" FontSize="28"></Button>

            <Button Name="BT10" Content="1 0" Grid.Column="0" Grid.Row="1" FontSize="28"></Button>
            <Button Name="BT11" Content="1 1" Grid.Column="1" Grid.Row="1" FontSize="28"></Button>
            <Button Name="BT12" Content="1 2" Grid.Column="2" Grid.Row="1" FontSize="28"></Button>

            <Button Name="BT20" Content="2 0" Grid.Column="0" Grid.Row="2" FontSize="28"></Button>
            <Button Name="BT21" Content="2 1" Grid.Column="1" Grid.Row="2" FontSize="28"></Button>
            <Button Name="BT22" Content="2 2" Grid.Column="2" Grid.Row="2" FontSize="28"></Button>
        </Grid>

Viendo el anterior código se observa dentro del Grid, una sección Grid.ColumnDefinitions, una Grid.RowDefinitions las dos anteriores permiten determinar el número de columnas y el número de filas respectivamente. La definición de cada objeto tipo botón se hace a través de las propiedades Grid.Column y Grid.Row referentes a la fila y columna respectiva como se ve en la imagen inferior.

Código XAML

<UserControl x:Class="Silverlight_CPOO_Clases_03.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            d:DesignHeight="800" d:DesignWidth="400">
    <Grid Name="LayoutPrincipal">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid x:Name="LayoutRoot" Background="White" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Button Name="BT00" Content="0 0" Grid.Column="0" Grid.Row="0" FontSize="28"></Button>
            <Button Name="BT01" Content="0 1" Grid.Column="1" Grid.Row="0" FontSize="28"></Button>
            <Button Name="BT02" Content="0 2" Grid.Column="2" Grid.Row="0" FontSize="28"></Button>

            <Button Name="BT10" Content="1 0" Grid.Column="0" Grid.Row="1" FontSize="28"></Button>
            <Button Name="BT11" Content="1 1" Grid.Column="1" Grid.Row="1" FontSize="28"></Button>
            <Button Name="BT12" Content="1 2" Grid.Column="2" Grid.Row="1" FontSize="28"></Button>

            <Button Name="BT20" Content="2 0" Grid.Column="0" Grid.Row="2" FontSize="28"></Button>
            <Button Name="BT21" Content="2 1" Grid.Column="1" Grid.Row="2" FontSize="28"></Button>
            <Button Name="BT22" Content="2 2" Grid.Column="2" Grid.Row="2" FontSize="28"></Button>
        </Grid>

    </Grid>
</UserControl>

Y para la carga del Grid desde C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Silverlight_CPOO_Clases_03
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            //Inicialización de un objeto Grid
            Grid grid = new Grid();

            //Definición de Columnas
            grid.ColumnDefinitions.Add(new ColumnDefinition());
            grid.ColumnDefinitions.Add(new ColumnDefinition());
            grid.ColumnDefinitions.Add(new ColumnDefinition());

            //Definición de Filas
            grid.RowDefinitions.Add(new RowDefinition());
            grid.RowDefinitions.Add(new RowDefinition());
            grid.RowDefinitions.Add(new RowDefinition());

            //Primera fila de botones/////////////////
            Button button00 = new Button();
            button00.SetValue(Grid.ColumnProperty, 0);
            button00.SetValue(Grid.RowProperty, 0);
            button00.Content = "0 - 0";
            grid.Children.Add(button00);

            Button button01 = new Button();
            button01.SetValue(Grid.ColumnProperty, 1);
            button01.SetValue(Grid.RowProperty, 0);
            button01.Content = "0 - 1";
            grid.Children.Add(button01);

            Button button02 = new Button();
            button02.SetValue(Grid.ColumnProperty, 2);
            button02.SetValue(Grid.RowProperty, 0);
            button02.Content = "0 - 2";
            grid.Children.Add(button02);
            ////////////////////////////////////////////

            //Segunda Fila//////////////////////////////
            Button button10 = new Button();
            button10.SetValue(Grid.ColumnProperty, 0);
            button10.SetValue(Grid.RowProperty, 1);
            button10.Content = "1 - 0";
            grid.Children.Add(button10);

            Button button11 = new Button();
            button11.SetValue(Grid.ColumnProperty, 1);
            button11.SetValue(Grid.RowProperty, 1);
            button11.Content = "1 - 1";
            grid.Children.Add(button11);

            Button button12 = new Button();
            button12.SetValue(Grid.ColumnProperty, 2);
            button12.SetValue(Grid.RowProperty, 1);
            button12.Content = "1 - 2";
            grid.Children.Add(button12);
            ////////////////////////////////////////////

            ///Tercer Fila//////////////////////////////
            Button button20 = new Button();
            button20.SetValue(Grid.ColumnProperty, 0);
            button20.SetValue(Grid.RowProperty, 2);
            button20.Content = "2 - 0";
            grid.Children.Add(button20);

            Button button21 = new Button();
            button21.SetValue(Grid.ColumnProperty, 1);
            button21.SetValue(Grid.RowProperty, 2);
            button21.Content = "2 - 1";
            grid.Children.Add(button21);

            Button button22 = new Button();
            button22.SetValue(Grid.ColumnProperty, 2);
            button22.SetValue(Grid.RowProperty, 2);
            button22.Content = "2 - 2";
            grid.Children.Add(button22);
            /////////////////////////////////////////////

            //Por último se agrega el nuevo Grid al layout
            //Principal y así poder comparar las dos formas
            //mencionadas.
            grid.SetValue(Grid.RowProperty, 1);
            LayoutPrincipal.Children.Add(grid);
        }
    }
}

Tal como se ve en el código de C# la Programación Orientada a Objetos es muy importante a la hora de crear controles dinámicos para una aplicación de silverlight, pero es innegable la facilidad y legibilidad del código XAML a la hora de definir objetos de la UI.

Si inspeccionamos un poco los objetos de Silverlight como button o grid se puede ver allí que hay diferentes métodos y propiedades. Sin profundizar mucho en estas instancias, clases y tipos de objeto es posible afirmara que:

button21.SetValue(Grid.ColumnProperty, 1);

A través de este método se puede establecer el valor index referente de la propiedad Column en la que se va a posicionar el objeto button, una vez sea agregado al control Grid.

button21.SetValue(Grid.RowProperty, 2);

En este caso y de igual forma que en el anterior se establece la posición pero referente a la fila del Grid.

button21.Content = “2 – 1”;

El objeto button dispone de una propiedad Content (de tipo object) la cual permite registrar cual va a ser el contenido del botón, en este caso un texto.

grid.Children.Add(button21);

El objeto Grid contiene una propiedad Children (de tipo UIElementCollection), en la cual se puede hacer uso del método Add para agregar cada elemento al control contenedor.

Así pues se empieza a notar que de la Programación Orientada a Objetos en Silverlight, permite a través de las propiedades y métodos de un objeto poder configurar y en este caso a un botón darle su respectiva posición cuando es agregado a un control Grid desde código. Aclarando que la forma estándar de hacer esto es crear la UI en código XAML el cual es por mucho, más fácil, flexible y legible.

Páginas: 1 2 3 4

CPOO en Silverlight – Clases y Objetos – 02


En el anterior post se dio un vistazo al concepto de clase y objeto, veamos unos temas de mayor relevancia a la hora de programar de forma orientada a objetos.

DEFINAMOS

¿Qué es un Constructor ?

Una vez se instancie una clase, es decir, se cree un Objeto, el Constructor permite la configuración de dicho Objeto, de forma tal que se puedan inicializar variables, estados, eventos o procesos para que el objeto pueda ser usando e interactúe con otros objetos.

Por ejemplo supongamos que Victor tiene un  porshe convertible. Y digamos que quiere sacar su carro de día. Por lo que elige tener un carro sin capota y que le permita recibir aire.

Pero Victor al otro día sale en la noche y quiere un coche que sea  más confortable y pueda evitar el frió por ejemplo.

Según lo anterior, el constructor permite crear una instancia de carro con capota y otra sin capota, según Victor lo requiera.

PRACTIQUEMOS

Teniendo una nueva solución, creamos la clase carro:

Clase carro:

En una primera vista la clase con construcutor irá de la siguiente forma:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Silverlight_CPOO_Clases_02
{
    public class Carro
    {
        ///
<summary> /// Constructor, debe llevar el mismo nombre de la clase.
 /// </summary>
        public Carro()
        {

        }
    }
}

Ahora si especificamos la inicialización de un objeto a través de un constructor el cual me permita configurar si el carro tiene capota o no, el diagrama y código será de la siguiente forma:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Silverlight_CPOO_Clases_02
{
    public class Carro
    {
        ///
<summary> /// Propiedad privada para la clase carro
 /// que indica si el carro tiene o no capota
 /// </summary>
        private bool _TieneCapota;

        ///
<summary> /// Constructor para la clase Carro que permite inicializar
 /// la variable que indica si el carro tiene o no
 /// capota.
 /// </summary>
        public Carro(bool tieneCapota)
        {
            //Se establece el valor de la propiedad
            //privada del objeto que de va a instanciar.
            _TieneCapota = tieneCapota;
        }
    }
}

Respecto a la propiedad privada de la clase, resta indicar por ahora que simplemente es una variable que sólo la clase podrá modificar internamente, es decir dentro de cualquier parte del código encerrado por la definición de la clase.

Páginas: 1 2

CPOO en Silverlight – Clases y Objetos – 01


DEFINAMOS

La programación orientada a objetos, como el nombre lo indica esta enfocada y centrada en el uso de objetos, y se constituye como un paradigma que permite la creación de programas de software eficienties, robustos y funcionales.

¿Qué es una clase?

Clase, puede entenderse como un plano, a partir de el cual se crea un objeto.

Imaginemos un conjunto de casas residenciales, el arquitecto crea un plano y a partir de este se crean todas las casas del conjunto.

Manera formal:

Clase, es el  marco programático que permite definir la configuración  para  un grupo de objetos.

¿Qué es un objeto?

Objeto, instancia generada a partir de una clase (plano).

Manera formal:

Objeto, unidad de software con propiedades, estados, comportamientos, funcionalidades, intercambio de mensajes que cumple una tarea o funcionalidad definida en la ejecución de un software.

Así como se ve en la imagen anterior, podemos crear una representación gráfica de una clase, estableciendo así un contexto más claro que permita inspeccionar  propiedades, métodos  u otros que integremos a la definición de esa clase.

Páginas: 1 2 3

Mini: Silverlight – Deshabilitar el zoom del browser


Para poder deshabilitar el efecto de zoom que traen los browsers por ejemplo cuando se manipula el scroll del mouse y simultáneamente se oprime la tecla ctrl se ve que el contenido se hace más grande o menos visible según se quiera, es posible desactivar dicho efecto de la siguiente forma:

1- Es importante comprender que Silverlight corriendo en el browser es un plug-in osea algo que no es nativo  al estándar que maneja el browser(HTML), por lo tanto es importante conocer que para hospedar un objeto de Silverlight en el browser es necesario crear un tag object de html, el cual me permite exponer por ejemplo dicho  plug-in  como en este caso, así:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
  <param name="source" value="ClientBin/ZoomDisabled.xap"/>
  <param name="onError" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="4.0.50826.0" />
  <param name="autoUpgrade" value="true" />
 </object>

2-) Observese que a través de este tag podemos parametrizar propiedades para el plug-in, dentro de muchas otras, para lograr deshabilitar el zoom se debe agregar el siguiente tag param y establecer su valor en false, de esta forma el  zoom ya no tendrá efecto en ningún browser.

<param name="enableautozoom" value="false" />

Saludos!

Entrada destacada

Creando una aplicación para Twitter con Silverlight y WCF – (TweetRobot) @DotNeteros


Un RSS consiste en una fuente de datos en formato xml  usada para presentar noticias o información actualizada de un tema en específico.

Hoy día Twitter está minado de un sin fin  de Robots que hacen este tipo de actualizaciones, bien sea periódicamente o automáticamente.  Hasta cierto punto es bueno tener un motor dedicado a este tipo de trabajo y no tener nosotros que convertirnos en ese Robot! dedicando nuestros días a copiar y pegar links, que siendo muchos de estos provechosos, es una tarea que toma bastante tiempo y sacrificio, entonces, si lo que quieres es compartir fuentes de datos esta podría ser una solución :D!

Indice

  1. Crear una aplicación en Twitter en tan solo segundos.
  2. API para hacer update TwitterStatus.
  3. Creación de UI con Silverlight para nuestro TweetRobot (ListBox – ItemTemplate).
  4. IsolatedStorage en Silverlight (Manejo de archivos XML)
  5. Creación y configuración  de un servicio WCF  para comunicación con TweetRobot.
  6. Helpers y Componentes para implementar funcionalidad de Tweets.
  7. Depurando código TweetRobot.
Una de las cosas requisito para el desarrollo de este tutorial es tener una cuenta de Twitter :/, espero la tengas, de lo contrario deberias crearla, demora tan solo segundos, bueno y de paso me das el Follow ;), bueno continuando.

 

Crear una aplicación en Twitter en tan solo segundos

 

Lo primero que debemos hacer es ir al siguiente link, acá vamos a hace el login con la cuenta propia (Si no quieres causar molestias a gente escasa de paciencia :D, debes crear una nueva cuenta para este ejercicio). Ya en el portal para desarrolladores.

Como se ve,  hay una opción que se llama My Applications, allí podremos crear lo que pronto se va a convertir en nuestra primer aplicación para Twiiter. Oprimimos el botón crear aplicación.

 

 

Validamos el captcha y aceptamos los terminos,

 

 

Y como se ve en pantalla la aplicación se habrá creado en forma correcta.

 

Páginas: 1 2 3 4 5

Entrada destacada

[WebCast] Tip Debugging Visual Studio


Hola en este post quiero presentar  las instrucciones #if  y #endif  “DEBUG” y cómo permiten  potencializar el debug en nuestras aplicaciones .NET (ASP.NET, WPF, Silverlight etc) construidas con Visual Studio 2010

Veamos el video.

Espero sea les guste. Saludos!

Entrada destacada

¿Cómo conectar .NET y ORACLE?


Un saludo.

En esta ocasión desarrollaremos un aplicativo sencillo, el cuál nos permita lograr conectar una base de datos ORACLE desde .NET, más precisamente la base de datos Oracle Express Edition.

Seguir leyendo “¿Cómo conectar .NET y ORACLE?”

Entrada destacada

Subir ↑