14 septiembre 2007

Creando un procesador de textos con RichEdit (y II)

Sigamos añadiendo características a nuestro pequeño editor de textos:


NEGRITA, CURSIVA Y SUBRAYADO

Vamos a definir la función de los típicos botones de negrita, cursiva y subrayado que llevan los procesadores de texto. Comencemos con el botón de negrita:

procedure TFormulario.BNegritaClick( Sender: TObject );
begin
with RichEdit.SelAttributes do
if not ( fsBold in Style ) then
Style := Style + [fsBold]
else
Style := Style - [fsBold];

RichEdit.SetFocus;
end;

Hay que tener en cuenta que si el usuario pulsa una vez negrita y el texto no estaba en negrita entonces se aplica dicho estilo, pero si ya lo estaba entonces hay que quitarlo.

Lo mismo sería para el botón de cursiva:

procedure TFormulario.BCursivaClick( Sender: TObject );
begin
with RichEdit.SelAttributes do
if not ( fsItalic in Style ) then
Style := Style + [fsItalic]
else
Style := Style - [fsItalic];

RichEdit.SetFocus;
end;

Y para el botón de subrayado:

procedure TFormulario.BSubrayadoClick( Sender: TObject );
begin
with RichEdit.SelAttributes do
if not ( fsUnderline in Style ) then
Style := Style + [fsUnderline]
else
Style := Style - [fsUnderline];

RichEdit.SetFocus;
end;

MOSTRANDO LA POSICION ACTUAL DEL CURSOR

Una de las cosas que se agradece en todo procesador de textos es que muestre en que fila y columna estoy situado. Para ello vamos a insertar en la parte inferior del formulario una barra de estado. El componente se llama StatusBar y se encuentra en la pestaña Win32. Le vamos a poner el nombre de Estado y ponemos a True su propiedad SimplePanel.

Lo que haremos a continuación es un procedimiento que muestre la posición actual del cursor dentro del RichEdit en la barra de estado:

procedure TFormulario.MostrarPosicion;
begin
Estado.SimpleText := Format( 'Fila: %d Columna %d',
[RichEdit.CaretPos.y+1, RichEdit.CaretPos.x+1] );
end;

Este procedimiento hay que llamarlo cuando creamos el formulario:

procedure TFormulario.FormCreate( Sender: TObject );
begin
MostrarPosicion;
end;

y en el evento OnSelectionChange del RichEdit:

procedure TFormulario.RichEditSelectionChange( Sender: TObject );
begin
MostrarPosicion;
end;

Al ejecutar el programa veremos que el resultado queda más profesional (ya podían los de Microsoft ponerle esto al cutre Bloc de Notas).

DANDO FORMATO A LOS PARRAFOS DEL DOCUMENTO

Otra característica que vamos a implementar es la de alinear el párrafo actual a la izquierda, al centro y a la derecha. Para ello vamos a poner arriba tres botones llamados BIzquierda, BDerecha y BCentro, cuyos eventos serían:

procedure TFormulario.BIzquierdaClick( Sender: TObject );
begin
RichEdit.Paragraph.Alignment := taLeftJustify;
end;

procedure TFormulario.BCentroClick( Sender: TObject );
begin
RichEdit.Paragraph.Alignment := taCenter;
end;

procedure TFormulario.BDerechaClick( Sender: TObject );
begin
RichEdit.Paragraph.Alignment := taRightJustify;
end;

Otra característica que se le puede añadir a un párrafo es la de añadir un punto por la izquierda como hace Microsoft Word. Para ello vamos a añadir el botón de nombre BPunto cuyo procedimiento es:

procedure TFormulario.BPuntoClick( Sender: TObject );
begin
with RichEdit.Paragraph do
if Numbering = nsNone then
Numbering := nsBullet
else
Numbering := nsNone;

RichEdit.SetFocus;
end;

Si se pulsa una vez este botón añade un punto al párrafo y si se pulsa de nuevo lo quita.

Al párrafo actual se le pueden modificar también las propiedades:

FirstIndent -> Es el espacio en pixels por la izquierda que se le da a la primera línea
LeftIndent -> Es el espacio en pixels por la izquierda que se le da a todas las líneas
RightIndent -> Es el espacio en pixels por la derecha que se le da a todas las líneas

LAS OTRAS PROPIEDADES DEL COMPONENTE RICHEDIT

Hay otras propiedades que nos permiten personalizar nuestro editor de texto como son:

PlainTex: Si se activa esta propiedad al guardar el archivo de texto a disco no almacena las propiedades de color, fuente, etc. Se comporta como el Bloc de Notas.

SelLength: Es el número de caracteres seleccionados por el usuario.

SelStart: Es la posición en el texto donde comienza la selección.

SelText: Es el texto seleccionado.

Con esto finalizamos las características más importantes del componente RichEdit.

Pruebas realizadas en Delphi 7.

13 septiembre 2007

Creando un procesador de textos con RichEdit (I)

Para crear un procesador de textos vamos a utilizar el componente RichEdit que se encuentra en la pestaña Win32. Este componente tiene la particularidad de poder definir distintos estilos de texto al contrario de un componente Memo cuya fuente es estática para todo el documento.

El componente de la clase TRichEdit hereda de TCustomMemo añadiendo características tan interesantes como la de modificar el estilo de la fuente, colorear palabras o frases, etc.

Veamos como se podría crear un mini procesador de textos utilizando este componente. Como procesador de textos lo primero que debemos definir son las funciones para la creación, carga y grabación de documentos en disco.

La programación la voy a realizar sobre este formulario:


Las opciones del menú son:

Archivo -> Nuevo, Abrir, Guardar, Guardar como y Salir.
Edición -> Cortar, Copiar y Pegar.
Formato -> Fuente
Ayuda -> Acerca de...

GUARDANDO EL TEXTO EN UN ARCHIVO

Lo primero que vamos a contemplar es la grabación en un archivo de texto. Para ello vamos a insertar en el formulario un componente de clase TSaveDialog que se encuentra en la pestaña Dialogs y lo vamos a llamar GuadarTexto.

Entonces al pulsar la opción Archivo -> Guardar como del ménu ejecutamos lo siguiente:

procedure TFormulario.GuardarComoClick( Sender: TObject );
begin
if GuardarTexto.Execute then
begin
RichEdit.Lines.SaveToFile( GuardarTexto.FileName );
sArchivo := GuardarTexto.FileName;
end;
end;

La variable sArchivo se va a encargar de guardar la ruta y el nombre archivo que se guardó por primera vez, para que cuando seleccionemos la opción guardar no haya que volver a decirle de nuevo el nombre. Esta variable la vamos a declarar en la sección privada de nuestro formulario:

private
{ Private declarations }
sArchivo: String;

Ahora tenemos que hacer que si el usuario pulsa la opción Guardar se guarde el archivo sin preguntarnos el nombre si ya lo tiene:

procedure TFormulario.GuardarClick( Sender: TObject );
begin
// ¿No tiene nombre?
if sArchivo = '' then
GuardarComoClick( Self )
else
RichEdit.Lines.SaveToFile( sArchivo );
end;

Si no tuviera nombre es que es un archivo nuevo, con lo cual lo desviamos a la opción Guardar como.

CARGADO EL TEXTO DESDE UN ARCHIVO

Para cargar el texto tenemos que añadir al formulario el componente TOpenDialog y lo llamamos CargarTexto. Y al pulsar en el menú la opción Archivo -> Abrir se ejecutaría:

procedure TFormulario.AbrirClick( Sender: TObject );
begin
if CargarTexto.Execute then
begin
RichEdit.Lines.LoadFromFile( CargarTexto.FileName );
sArchivo := CargarTexto.FileName;
end;
end;

También guardamos en la variable sArchivo el nombre del archivo cargado para su posterior utilización en la opción Guardar.

CREANDO UN NUEVO TEXTO

En nuestro programa vamos a hacer que si el usuario selecciona la opción del menú Archivo -> Nuevo se elimine el texto del componente RichEdit. Lo que si hay que controlar es que si había un texto anterior le pregunte al usuario si desea guardarlo.

procedure TFormulario.NuevoClick( Sender: TObject );
begin
// ¿Hay algo introducido?
if RichEdit.Text <> '' then
if Application.MessageBox( '¿Desea guardar el texto actual?', 'Atención',
MB_ICONQUESTION OR MB_YESNO ) = ID_YES then
GuardarClick( Self );

RichEdit.Clear;
end;

CONTROLANDO LA EDICION DEL TEXTO

Otra de las cosas básicas que debe llevar todo editor de texto son las funciones de cortar, copiar y pegar. Para ello vamos a implemantar primero la opción del menú Edición -> Cortar:

procedure TFormulario.CortarClick( Sender: TObject );
begin
RichEdit.CutToClipboard;
end;

Después hacemos la opción de Edición -> Copiar:

procedure TFormulario.CopiarClick( Sender: TObject );
begin
RichEdit.CopyToClipboard;
end;

Y por último la opción de Edición -> Pegar:

procedure TFormulario.PegarClick( Sender: TObject );
begin
RichEdit.PasteFromClipboard;
end;

CAMBIANDO EL ESTILO DEL TEXTO

Una vez tenemos implementada la parte básica del editor de texto vamos a darle la posibilidad al usuario de que pueda cambiar la fuente, el estilo, el color, etc.

Para que el usuario pueda elegir la fuente tenemos que introducir en el formulario el componente de la clase TFontDialog situado en la pestaña Dialogs. Le vamos a dar el nombre de ElegirFuente.

Ahora en la opción del menú Formato -> Fuente ejecutamos:

procedure TFormulario.FuenteClick( Sender: TObject );
begin
if ElegirFuente.Execute then
with RichEdit, ElegirFuente do
begin
SelAttributes.Name := Font.Name;
SelAttributes.Size := Font.Size;
SelAttributes.Color := Font.Color;
SelAttributes.Pitch := Font.Pitch;
SelAttributes.Style := Font.Style;
SelAttributes.Height := Font.Height;
end;
end;

¿Por qué no hemos hecho lo siguiente?

RichEdit.Font := ElegirFuente.Font;

Si hago esto me cambia la fuente de todo el texto, incluso la que he escrito anteriormente y a mi lo que me interesa es modificar la fuente de lo que se vaya a escribir a partir de ahora. Para ello se utilizan las propiedades de SelAttributes las cuales se encargan de establecer el estilo del texto seleccionado, y en el caso de que no haya texto seleccionado se aplica a donde esté el cursor.

En el próximo artículo seguiremos ampliando nuestro pequeño procesador de textos.

Pruebas realizadas en Delphi 7.

11 septiembre 2007

El componente TTreeView (y II)

Después de ver el manejo básico de un árbol TreeView pasemos a ver otras características menos conocidas pero también de suma importancia.

OBTENIENDO EL NIVEL DE CADA NODO

Cuando se van insertando elementos dentro de un árbol tenemos la dificultad de saber en que nivel de profundidad se encuentra cada uno de los nodos. Cada uno de los Items del componente TTreeView es de la clase TTreeNode.

Esta clase dispone de la propiedad Level la cual nos da el nivel de profundidad dentro del árbol. Veamos como obtener el nivel de cada uno de los nodos del árbol. Este procedimiento recorre todos los nodos del árbol y les añade a su nombre el nivel:

procedure TFTreeView.BNivelClick( Sender: TObject );
var i: Integer;
begin
// Averiguamos el nivel de cada nodo
for i := 0 to TreeView.Items.Count - 1 do
TreeView.Items[i].Text := TreeView.Items[i].Text + '_' +
IntToStr( ( TreeView.Items[i] as TTreeNode ).Level );
end.

Los elementos situados en la raiz tienen un nivel 0, los hijos un nivel 1, los nietos un 2...

LEYENDO LOS NODOS SELECCIONADOS

El nodo actualmente seleccionado se obtiene mediante:

TreeView.Selected

donde valdrá nil si no hay ninguno seleccionado. Pero si activamos la propiedad MultiSelect la forma de leer aquellos nodos seleccionados sería la siguiente:

procedure TFTreeView.BSeleccionadosClick( Sender: TObject );
var
i: Integer;
Seleccionados: TStringList;
begin
Seleccionados := TStringList.Create;

for i := 0 to TreeView.Items.Count - 1 do
if TreeView.Items[i].Selected then
Seleccionados.Add( TreeView.Items[i].Text );

ShowMessage( Seleccionados.Text );

Seleccionados.Free;
end;

Al igual que hicimos con el componente ListView volcamos el nombre de los nodos seleccionados en un StringList y lo sacamos por pantalla.

ASOCIANDO UNA IMAGEN A CADA NODO

Si añadimos a nuestro formulario el componente TImageList se pueden asocionar iconos distintos a cada uno de los elementos del árbol TTreeView. Para ello asociamos este componente a la propiedad Images del TTreeView. Una vez hecho esto todos los nodos tendrán a su izquierda la primera imagen de la lista de imágenes TImageList.

Ya será cuestión de cada cual asociar la imagen correspondiente cada nodo. Vamos a ver un ejemplo que recorre los elementos del árbol y va a poner la segunda imagen de la lista de imágenes a aquellos nodos hijos (de nivel 1):

procedure TFTreeView.CambiarNodosHijos;
var
i: Integer;
begin
for i := 0 to TreeView.Items.Count - 1 do
if ( TreeView.Items[i] as TTreeNode ).Level = 1 then
( TreeView.Items[i] as TTreeNode ).ImageIndex := 1;
end;

CAMBIANDO LA FORMA EN QUE SE MUESTRAN LOS NODOS

El componente TreeView dispone la propiedad Ident la cual determina la identación de entre los nodos padres y sus hijos que por defecto es de 19 pixels. Se puede cambiar en cualquier momento, pero afectará a todos los nodos del árbol.

Otra cosa que se puede hacer al cargar un árbol desde un archivo de texto es expandir todos sus nodos, ya que cuando se carga el árbol esta compactado. Para solucionarlo se hace:

TreeView.FullExpand;

Equivale a pulsar el botón + de cada uno de los nodos padres.

CAMBIANDO LA FORMA DE DIBUJAR LOS NODOS

Al igual que vimos con el componente ListView también se puede modificar en tiempo real la forma de dibujar cada nodo. Para ello lo que hacemos es reprogramar el evento OnCustomDrawItem. Veamos un ejemplo de como hacer que los nodos hijos aparenzan de color de fuente azul y negrita:

procedure TFTreeView.TreeViewCustomDrawItem( Sender: TCustomTreeView;
Node: TTreeNode; State: TCustomDrawState; var DefaultDraw: Boolean );
begin
if Node.Level = 1 then
begin
Sender.Canvas.Font.Color := clBlue;
Sender.Canvas.Font.Style := [fsBold];
end
else
begin
Sender.Canvas.Font.Color := clBlack;
Sender.Canvas.Font.Style := [];
end;

if cdsFocused in State then
Sender.Canvas.Font.Color := clWhite;
end;

En las dos últimas líneas del procedimiento también nos hemos asegurado de que si un elemento esta seleccionado la fuente salga de color blanca. Hemos utilizado para ello el parámetro State del evento. Los posibles valores de esta variable son:

cdsSelected -> La columna o fila ha sido seleccionada
cdsGrayed -> La columna o fila esta grisacea
cdsDisabled -> La columna o fila esta deshabilitada
cdsChecked -> La fila aparece con el CheckBox activado
cdsFocused -> La columna o fila esta enfocada
cdsDefault -> Por defecto
cdsHot -> Se ha activado el HotTrack y esta enfocado
cdsMarked -> La fila esta marcada
cdsIndeterminate -> La fila no esta seleccionada ni deseleccionada

Con esto se resumen las propiedades más importantes del componente TreeView.

Pruebas realizadas en Delphi 7.

10 septiembre 2007

El componente TTreeView (I)

Cuando queremos representar una información en forma de árbol incluyendo nodos padres e hijos el componente ideal para ello es el TreeView, el cual funciona exactamente igual que la parte izquierda del Explorador de Windows.

Veamos las peculiaridades que aporta este componente. Todas las funciones las voy a aplicar sobre esta pantalla:


AÑADIENDO ELEMENTOS AL ARBOL

Cuando se añaden elementos a un árbol pueden pertenecer al elemento raiz del mismo (sin padre) o pertenecer a un elemento ya creado. Los elementos del árbol se llaman nodos (Node) pudiendose crear tantos niveles de nodos como se deseen.

Vamos a crear un procedimiento asociado al botón Nuevo que va a añadir un nuevo nodo al árbol. El elemento insertado será un nodo raiz, a menos que el usuario seleccione un nodo antes de ello, que hará que sea su hijo:

procedure TFTreeView.BNuevoClick( Sender: TObject );
var
sNombre: string;
begin
sNombre := InputBox( 'Crear un nodo', 'Nombre:', '' );

if sNombre <> '' then
begin
// ¿Hay un nodo seleccionado?
if TreeView.Selected <> nil then
begin
TreeView.Items.AddChild( TreeView.Selected, sNombre );
TreeView.Selected.Expanded := True;
end
else
TreeView.Items.Add( nil, sNombre );
end;
end;

Lo que hace este procedimiento es preguntarnos el nombre del nodo y si el usuario ha seleccionado uno anteriormente lo mete como hijo (AddChild) expandiendo además el nodo padre (Expanded) como si el usuario hubiese pulsado el botón + del elemento padre.

MODIFICANDO LOS ELEMENTOS DEL ARBOL

Una vez creado un árbol de elementos se puede modificar el texto de cada uno de ellos mediante la propiedad Text. Vamos a hacer que si el usuario pulsa el botón Modificar y hay un nodo seleccionado el programa nos pregunte el nuevo nombre del nodo y lo cambie:

procedure TFTreeView.BModificarClick( Sender: TObject );
var
sNombre: string;
begin
if TreeView.Selected <> nil then
begin
sNombre := InputBox( 'Crear un nodo', 'Nombre:', TreeView.Selected.Text );

if sNombre <> '' then
TreeView.Selected.Text := sNombre;
end;
end;

Cuando se van a hacer operaciones con los nodos hay que asegurarse siempre que el nodo al que vayamos a acceder no sea nil, para evitar Access Violations.

ELIMINANDO LOS ELEMENTOS DEL ARBOL

Para eliminar un nodo del árbol se utiliza el método Delete:

procedure TFTreeView.BEliminarClick( Sender: TObject );
begin
if TreeView.Selected <> nil then
TreeView.Selected.Delete;
end;

Y si queremos eliminar todos los nodos se utiliza el método Clear de la propiedad Items:

procedure TFTreeView.BBorrarTodosClick( Sender: TObject );
begin
TreeView.Items.Clear;
end;

ORDENANDO LOS NODOS ALFABETICAMENTE

El modo de ordenar los elementos de un componente TreeView es igual al de ordenar los elementos de un componente ListView. Hay dos métodos: CustomSort y AlphaSort. El método CustomSort no voy a explicarlo ya que lo mencioné anteriormente en el artículo dedicado al componente ListView y es un poco más primitivo que utilizar AlphaSort.

Para ordenar todos los elementos de un árbol TreeView se utiliza el método:

procedure TFTreeView.BOrdenarClick( Sender: TObject );
begin
TreeView.AlphaSort( True );
end;

El parámetro booleano especifica si queremos que ordene tanto los elementos padres como los hijos (True) o sólo los elementos padres. Si no se especifica nada se asume que ordene todos los elementos.

Ahora hay que programar el evento OnCompare del TreeView para que ordene alfabéticamente los elementos:

procedure TFTreeView.TreeViewCompare( Sender: TObject; Node1,
Node2: TTreeNode; Data: Integer; var Compare: Integer );
begin
Compare := CompareText( Node1.Text, Node2.Text );
end;

Si queremos que la ordenación sea descendente entonces sólo hay que cambiar el signo:

Compare := -CompareText( Node1.Text, Node2.Text );

GUARDANDO LA INFORMACION DEL ARBOL EN UN ARCHIVO DE TEXTO

La clase TTreeView dispone del método SaveToFile para volcar todos los nodos en un archivo de texto para su posterior utilización. Voy a hacer un procedimiento que pregunte al usuario que nombre deseamos dar al archivo y lo guardará en el mismo directorio del programa con la extensión .TXT:

procedure TFTreeView.BGuardarClick( Sender: TObject );
var sNombre: string;
begin
sNombre := InputBox( 'Crear un nodo', 'Nombre:', '' );

if sNombre <> '' then
TreeView.SaveToFile( ExtractFilePath( Application.ExeName ) + sNombre + '.txt' );
end;

La información la guarda por líneas donde cada elemento hijo va separado por tabuladores:

documentos
ventas
contactos
Pablo
Ana
Maria
claves
Terra
Hotmail
GMail

CARGANDO LA INFORMACION DEL ARBOL GUARDADA ANTERIORMENTE

Para cargar el archivo de texto vamos a crear en tiempo real el componente TOpenDialog para que le pregunte al usuario el archivo de texto a cargar:

procedure TFTreeView.BCargarClick( Sender: TObject );
var
Abrir: TOpenDialog;
begin
Abrir := TOpenDialog.Create( Self );
Abrir.InitialDir := ExtractFilePath( Application.ExeName );
Abrir.Filter := 'TreeView|*.txt';

if Abrir.Execute then
TreeView.LoadFromFile( Abrir.FileName );

Abrir.Free;
end;

Hemos modificado el filtro de la carga para que sólo se vean archivos TXT.

En el próximo artículo seguiremos viendo más propiedades interesantes del componente TreeView.

Pruebas realizadas en Delphi 7.

Publicidad