Tema 5. Entornos de Desarrollo de Interfaces. - Muralmural.uv.es/miexsan/Tema 5.pdf · 1 5....

1

5. Entornos de desarrollo. Entornos de Usuario 1

Tema 5. Entornos de Desarrollo de Interfaces.


Índice.

5.1. Visual C++ y MFC.

5.2. Arquitectura documento vista.5.3. Jerarquía de clases MFC.

5.3.1. La clase documento (CDocument).5.3.2. La clase ventana (CWnd) y sus derivadas.5.3.3. Clase ventana marco (CFrameWnd).5.3.4. Clase ventana vista (CView).

5.4.Gráficos.Clase Contexto de dispositivo y derivadas:5.4.1.CDC5.4.2. CClientDC5.4.3. CPaintDC5.4.4.Dibujar en una vista.

2


Índice.

- Clases para objetos gráficos.5.4.5. CBrush5.4.6. CPen5.4.7. CBitmap

5.5.Recursos: Diálogos, controles y menús.5.5.1.Menús:5.5.2.Cuadros de diálogo.5.5.3.Controles:– Clase CButton.– Clase CEdit.– Clase CListBox.– Clase CComboBox.



• MFC: Microsoft Foundation Class Library.

• Jerarquía de clases C++ que encapsula la mayor parte del API Win32 :las clases C++ contienen variables y funciones miembro que llaman a las funciones de Win32. Ej : HWND (Win32) àCWnd (MFC): contiene una variable de tipo HWnd, y funciones que la toman como parámetro.

• Contiene clases que representan la ventana, diálogos, etc. Las funciones de las MFC llaman a las funciones del API de Windows.

• Contiene clases de funcionalidad general.

• Con el Visual C++ se puede programar utilizando C, C++ y el API de Windows, o bien C++ y las MFC.

3



• Algunas características:

• Arquitectura documento /vista.

• Las clases de las MFC nos permiten crear aplicaciones para Windows.

• Automatización de la creación del “Marco de la aplicación” (esqueleto de la aplicación Windows)

• Se crea una aplicación que contiene clases derivadas de las MFC.El programador personaliza la aplicación creada sustituyendoel código original, y definiendo los mensajes y comandos a los que se responderá.

• Aplicaciones SDI (Single Document Interface) o MDI (Multiple Document Interface).

• Programación para internet (TCP/IP) y soporte bases de datos.


5.2. Arquitectura documento / vista.

• MFC: orientado a la arquitectura documento/vista: los datos son independientes de su visualización.

• Objeto Documento: almacena los datos con los que el usuario interactúa. Se crea desde el menú Nuevo o Abrir. Se almacena en un fichero.

• Ventana Vista: visualiza los datos en una ventana, a través del cual el usuario interactúa con el documento.

• Ventaja: permite cambiar el interfaz sin cambiar el documento, o crear varias vistas para un solo documento.

4


5.2.Arquitectura documento / vista.

• Aplicación basada en MFC: contendrá una serie de clases derivadas de las MFC a las que podremos añadirles datos, funciones miembro, y modificar las existentes.

• Las partes básicas de una aplicación serán:

• Documento: la clase documento (derivada de CDocument) almacena los datos de nuestra aplicación.

• Vista: la clase vista (derivada de CView) controla cómo el usuario ve los documentos y actúa con ellos (seleccionando o editando). Sirve de intermediario entre el usuario y el documento.



• La ventana marco: las vistas se muestran dentro de la ventana marco (derivada de CFrameWnd o CMDIFrameWnd).

• El objeto aplicación. La clase aplicación (derivada de CWinApp) controla todos los objetos anteriores y especifica el comportamiento de la aplicación en la inicialización y al finalizar. Se encarga de crear los documentos.

• Las plantillas de documento (CDocTemplate). Crea los documentos, vistas y marcos. Crea y gestiona los documentos de un tipo concreto

5



Vistas. Marco de la aplicación

Documento

Fichero.doc

•En una aplicación podremos tener:•Un documento – una vista.•Múltiples documentos con sus respectivas vistas.•Múltiples vistas para un solo documento (pero no al revés).•Vistas divididas. (Splitter Window).



• La conexión entre el documento y la vista será:• La vista recoge datos del documento:

1. Accede a los datos del documento, utilizando la función GetDocument que devuelve un puntero al documento.

2. Obtiene los datos que necesita.3. Los dibuja o manipula.

• La vista inserta datos en el documento:1. El usuario introduce datos en la vista (teclado o ratón).2. La vista obtiene el puntero al documento.3. La vista pasa datos al documento a través de ese puntero.4. El documento almacena los datos.

• Para dibujar en la ventana de la vista se utiliza la función OnDraw. Dentro de esta función se añaden los comandos necesarios para dibujar.

6



Relaciones entre las clases básicas de una aplicación

de un solo documento (SDI).

Objeto aplicación.CWinApp

Puntero a:

Plantilla documentoCSinglDocTemplate

Puntero a:

Objeto documentoCDocument

Puntero a:

Ventana MarcoCFrameWnd

Puntero a:

Objeto VistaCView

Puntero a:

crea

crea

crea

crea


5.3.Jerarquía de clases MFC.

7


5.3.Jerarquía de clases MFC.


5.3.1.Clase documento (CDocument).

• Ofrece la funcionalidad básica para los objetos documento.

• En ella se incluirán los datos, y las funciones para crear nuevos documentos y guardarlos.

• Cuando un documento es modificado cada una de sus vistas debe reflejar las modificaciones. Esto lo hacemos con la función UpdateAllViews().

• Para utilizar la clase documento debemos seguir los siguientes pasos:

Ø Derivar una clase CDocument para cada tipo de documento. Si creamos una aplicación llamada Aplic, Visual creará automáticamente una clase derivada de CDocument.

8



Ø Añadir variables miembro para almacenar nuestros datos.

class CAplicDoc::public CDocument{

...............//Añadimos nuestros datosint midato;

}Ø Implementar funciones miembro para leer y modificar los datos del

documento (que serán utilizadas por la vista).Ø Redefinir la función OnNewDocument para definir las acciones al

crear un documento nuevo.



BOOL CAplicDoc::OnNewDocument(){

if (!CDocument::OnNewDocument())return FALSE;

/*Aquí inicializamos las variables de nuestra clase, o reservamos memoria*/

midato = 5;

return TRUE;}

Ø Redefinir la función Serialize para abrir y guardar fichero:void CAplicDoc::Serialize(CArchive& ar){

if (ar .IsStoring()) //GUARDAR EN FICHERO{

// TODO: add storing code herear << midato;

}else //LEER DE FICHERO{

// TODO: add loading code herear >> midato;

}}

9


5.3.2.Clase Ventana (CWnd) y derivadas.

• Proporciona las funcionalidades básicas para todos los tipos de ventanas.

• Oculta el procedimiento de ventana (WndProc)

Objeto Ventana.Funciones miembro:

OnMensaje1OnMensaje1

Mensajes


5.3.2.Clase Ventana (CWnd) y derivadas.

Algunos miembros de la clase CWnd.

• Datos:m_hWnd à handle (HWND) asociado a la ventana.

• Métodos:– Construcción / Destrucción

• CWnd();• DestroyWindow ();

– Tamaño y posición de la ventana:• void GetWindowRect( LPRECT lpRect ): coordenadas de la

ventana relativas a la pantalla.• void GetClientRect( LPRECT lpRect ): coordenadas del área cliente

relativas a la esquina superior izquierda de dicha ventana.

10


5.3.2. Clase Ventana (CWnd) y derivadas.

– Dibujado y actualización:• CDC* BeginPaint( LPPAINTSTRUCT lpPaint );• void EndPaint( LPPAINTSTRUCT lpPaint );ç• CDC* GetDC( ):

– Devuelve un puntero al contexto gráfico.– Nos permitirá dibujar sobre la ventana.– No modifica las propiedades que hubiéramos seleccionado para el

contexto previamente.

• int ReleaseDC( CDC* pDC ): libera el contexto de dispositivo.• void InvalidateRect( LPCRECT lpRect, BOOL bErase = TRUE ):

invalida el área cliente contenida en el rectángulo. – El rectángulo se añade a la región de actualización..– Cuando la región de actualización no está vacía windows envía un

mesnaja de redibujado (WM_PAINT).



– Timers:• UINT SetTimer( UINT nIDEvent, UINT nElapse, void (CALLBACK

EXPORT* lpfnTimer)(HWND, UINT, UINT, DWORD) );• BOOL KillTimer( int nIDEvent );

– Manipuladores de mensajes generales:• void OnPaint( );• void OnSize( UINT nType, int cx, int cy );• void OnClose( );• void OnKillFocus( CWnd* pNewWnd );• void OnMove( int x, int y );• void OnShowWindow( BOOL bShow, UINT nStatus );

– Temporizador:• void OnTimer( UINT nIDEvent

11



• Eventos de ratón y teclado:

void OnLButtonDblClk( UINTnFlags, CPoint point );

WM_LBUTTONDLBCLK

Doble click ratón izquierdo

OnMouseMove(UINTnFlags,CPoint point )

WM_MOUSEMOBEMovido puntero ratón.

OnKeyDown(UINT nChar, UINTnRepCnt, UINT nFlags)

WM_KEYDOWNPulsada tecla

OnKeyUp ( UINT nChar, UINTnRepCnt, UINT nFlags );

WM_KEYUPLiberada tecla.

OnRButtonUpWM_RBUTTONUPLevantado botón derecho.

OnRButtonDownWM_RUBTTONDOWNPulsado botón derecho

OnLButtonUpWM_LBUTTONUPLevantado botón izquierdo.

OnLButtonDown (UINT nFlags,CPoint point )

WM_LBUTTONDOWNPulsado botón izquierdo sobre la ventana.

Función de la clase.MensajeEvento



• Añadir eventos a la claseà desde el ClassWizard.

12



•En nuestro código aparecerá:

void CAplicView::OnLButtonDown(UINT nFlags, CPoint point )

{

// TODO: Add your message handler code here and/or call default

CView::OnLButtonDown(nFlags, point);

}



• De CWnd derivan distintas clases para manejar ventanas, que se pueden agrupar en cuatro categorías:ü Ventanas Marco.ü Ventanas de vista o visualización.ü Cuadros de diálogo.ü Controles.

• Clases de ventanas Marco:ü CFrameWnd: Ventana marco SDI. Proporciona funcionalidad para

interfaces de un solo documento (SDI).ü CMDIChildFrame: Ventana hija MDIü CMDI FrameWnd: Ventana marco MDI.ü CsplitterWnd: Ventana dividida tipo explorador.

13



• Clases de ventanas vista:

ü CView: Incluye la vista básica

ü CCtrlView: Aplica la arquitectura doc/view a los controles comunes de Windows. De ella se derivan: CEditView, CListView, CRichEditView,CTreeView.

ü CScrollView: permite crear barras de desplazamiento.

ü CFormView: clase base para vistas con controles, como los cuadros de diálogo.


5.3.3.Clase Ventana Marco (CFrameWnd)

• Deriva de CWnd.• Proporciona las funcionalidades para las aplicaciones de un

solo documento (SDI).• Gestiona:

– El menú principal de la aplicación.– La posición de las barras de botones.– Las vistas.– Tabla de aceleradores.

• Algunos métodos:– virtual CDocument* GetActiveDocument( );– CView* GetActiveView( ) const;

14


5.3.4.Clase ventana vista (CView).

• La vista proporciona la presentación visual de los datos del documento.

• Controla la interacción del usuario con la ventana.• Cuando creamos una aplicación doc/view Visual deriva de la clase

CViewuna clase que será nuestra vista. En ella podremos sobreescribirnuestras funciones.class CAplicView : public CView{}

• Algunas funciones miembro de CView:CDocument* GetDocument( ) const; -> devuelve puntero al documento.

Con él accedemos a los datos.DoPreparePrinting() -> muestra cuadro de diálogo de imprimir.virtual void OnDraw( CDC* pDC ) = 0;


5.3.4. Clase ventana vista (CView).

• Para dibujar sobre la ventana sobreescribiremos la función OnDraw:void CAplicView::OnDraw(CDC* pDC){

pDC->TextOut (posx, posy , “Texto”,tam); //Utilizamos las funciones del GDI para dibujar

}

15


5.4.Gráficos.

• Clase CDC y derivadas.– CDC– CClientDC– CPaintDC– Dibujar en una vista.

• Clases para objetos gráficos.– CBrush

– CPen– CBitmap


5.4.1.Clase Contexto de Dispositivo (CDC)

• La clase CDC sirve para definir contextos de dispositivo.• Contiene funciones miembro para trabajar con contextos

de dispositivo (pantalla o impresora) así como contexto áreas cliente asociadas a una ventana.

• Proporciona métodos para:– Utilizar herramientas de dibujo.– Selección en el interfaz.– Conversión de coordenadas.

– Trabajar con regiones.– Dibujar líneas, elipses, polígonos.– Escribir textos y utilizar fuentes.

16


5.4.1. Clase Contexto de Dispositivo

• Un contexto de dispositivo es una estructura de datos de Windows que contiene información acerca de los atributos de dibujado de un dispositivo.

• Todas las llamadas a funciones de dibujo se hacen a través del contexto de dispositivo, el cual encapsula el API de Windows para dibujar líneas, formas y texto.

• El contexto de dispositivo permite dibujar en Windows con independencia del tipo de dispositivo sobre el que se dibuja, ya que se pueden utilizar para dibujar sobre la pantalla o la impresora.



• Tiene una serie de clases derivadas:

CpaintDC encapsula las llamadas a BeginPaint/EndPaint.

CClientDC:. Sirve para gestionar un contexto asociado con un área cliente.

CWindowDC: gestiona un contexto de dispositivo asociado con una ventana completa (incluyendo el marco y los controles)

CMetaFileDC: asocia un contexto de dispositivo con un metafichero.

17



• Datos:– m_hDC y m_hAttibDC: contextos de dispositivo del objeto CDC.Ambos se refieren al mismo dispositivo.– m_hDC es el contexto de dispositivo de salida.– CDC dirige las llamadas de salida del GDI a m_ hDC, y las

peticiones de información de los atributos del GDI a m_ hAttribDC. Ej: GetTextColor sería un atributo.

SetTextColor sería una llamada de salida.

• Métodos:– Constructor CDC();



• Métodos:– Inicialización:

• CreateDC• static CDC* PASCAL FromHandle( HDC hDC );• virtual BOOL CreateCompatibleDC( CDC* pDC ); crea un contexto

de dispositivo en memoria, compatible con pDC. Contexto de dispositivo en memoria: bloque de memoria que representa un área de dibujo. Se puede utilizar para preparar imágenes en memoria antes de copiarlas al contexto de disp actual.

• virtual BOOL DeleteDC( );• CBrush* GetCurrentBrush( ) const; Devuelve un puntero a la brocha

actual.• CFont* GetCurrentFont( ) const;• CPen* GetCurrentPen( ) const;• CWnd* GetWindow( ) const;

18



• Métodos:

– HDC GetSafeHdc( ) const; devuelve el manipulador del contexto: m_hDC.

– virtual int SaveDC( );guarda el estado actual del contexto de dispositivo copiando la información a una pila interna.

– virtual BOOL RestoreDC ( int nSavedDC ); restaura el contexto almacenado previamente.

– int GetDeviceCaps( int nIndex ) const; devuelve información sobre las capacidades del dispositivo sobre el que dibujamos.



• Métodos:

– Selección de objetos: SelectObject:• CPen* SelectObject( CPen* pPen );• CBrush* SelectObject( CBrush* pBrush );• virtual CFont* SelectObject( CFont* pFont );• CBitmap* SelectObject( CBitmap* pBitmap );• int SelectObject( CRgn* pRgn );

• virtual CGdiObject* SelectStockObject( int nIndex );– Selección de objetos en stock SelectStockObject:

• virtual CGdiObject* SelectStockObject( int nIndex );con nIndex= BLACK_BRUSH, BLACK_PEN.. etc.

19



• Métodos:

– Atributos de dibujado:• SetBkColor / GetBkColor. Color de fondo.• SetTextColor / GetTextColor. Color de texto.• SetStretchMode / GetStrechMode. Modo de dibujo de los bitmaps.

– Funciones de dibujo de líneas:• CPoint MoveTo( int x, int y ); // CPoint MoveTo( POINT

point );• BOOL LineTo( int x, int y ); // BOOL LineTo( POINT point

);• BOOL Arc( int x1, int y1, int x2, int y2, int x3, int y3, int x4,

int y4 ); // BOOL Arc( LPCRECT lpRect, POINT ptStart, POINT ptEnd );



• Métodos:

– Funciones de dibujo de líneas:• BOOL Polyline( LPPOINT lpPoints, int nCount );• BOOL PolyBezier( const POINT* lpPoints, int nCount );

– Funciones de dibujo simples:• void FillRect( LPCRECT lpRect, CBrush* pBrush ); Dibuja

un rectángulo relleno utilizando una brocha específica.• void FrameRect( LPCRECT lpRect, CBrush* pBrush );

Dibuja un borde de ancho=1 alrededor de un rectángulo.

• void InvertRect( LPCRECT lpRect ); Invierte el contenido de un rectángulo

• BOOL DrawIcon( int x, int y, HICON hIcon );

20



• Métodos:

– Funciones de bitmaps• BOOL BitBlt( int x, int y, int nWidth, int nHeight, CDC*

pSrcDC, int xSrc, int ySrc, DWORD dwRop ); Copia un bitmap desde un contexto de dispositivo (psrcdc) al actual. x,y -> esquina superior izquierda del rectángulo donde se dibujará.nWidth, nHeight-> ancho y alto del bitmappsrcDC -> DC desde el que se copia el bitmapxSrc,ySrc -> esquina sup.izda del bitmap que se dibujará

dwRop-> operación del raster que se realizará. ej: SRCCOPY



• Métodos:

– Funciones de bitmaps• BOOL StretchBlt( int x, int y, int nWidth, int nHeight, CDC*

pSrcDC, int xSrc, int ySrc, int nSrcWidth, int nSrcHeight, DWORDdwRop ); Copia un bitmap modificándolo de tamaño nWidth, nHeight-> tamaño final, nSrcWidth, nSrcHeight -> tamaño original.

• COLORREF SetPixel( int x, int y, COLORREF crColor ); Pone en el pixel de coordenadas (x,y) el color crColor.

• COLORREF GetPixel( int x, int y ) const; Devuelve el color del pixel situado en (x,y)

21


5.4.2.Clase Contexto de Dispositivo del área cliente (CClientDC)

• Deriva de CDC.• El contexto de dispositivo asociado con un objeto

CClientDC corresponde al área cliente de una ventana.• Esta clase encapsula el trabajo con un contexto de

dispositivo que representa al área cliente de una ventana. El constructor de CClientDC llama a la función GetDC y el destructor a ReleaseDC.

• Datos: – m_hWnd: variable de tipo HWND. Identificador de la ventana a la

que está asociado el objeto CClientDC

• Métodos: constructor.– CClientDC(CWnd *pWnd): crea un objeto CClientDC asociado a

la ventana pWnd. Llama a la función GetDC.


5.4.2. CClientDC. Ejemplo: dibujar sobre un diálogo.

Al pulsar el botón“dibujar”

22


5.4.2. CClientDC. Ejemplo: dibujar sobre un diálogo.

Función al que se llama al pulsar el botón “Dibujar”void CEjemploDlg::OnDibujar() {CClientDC dlgDC(this); //Creamos un DC asociado a la

//ventanaint x,y;

for (x=0; x<=200; x++)for(y=0; y<=200; y++)

dlgDC.SetPixel (x,y,RGB(x*y,0,0)); //Acceso a las //funciones de dibujo de la clase CDC

}


5.4.2. CClientDC. Ejemplo: dibujar sobre una vista.

Utilización de la clase CClientDC para dibujar cuando se pulsa el ratón sobre una vista.

void CEjemploView::OnLButtonDown(UINT nFlags, CPoint point) {CClientDC my _DC(this );//Creamos un contexto de dispositivo

asociado a nuestra vista.OnPrepareDC(&my_DC);//Lo preparamos para dibujar sobre él.

my_DC.TextOut(point.x,point.y,"Hola",4); //Escribimos un texto //en el mismo sitio donde /se ha pulsado el ratón.

CView::OnLButtonDown(nFlags, point);}

23


5.4.3. CPaintDC

• Deriva de la clase CDC.• Un objeto CPaintDC sólo puede ser utilizado en respuesta

al mensaje WM_PAINT -> OnPaint.• WM_PAINT:

– Mensaje procedente de Windows que se envía a la ventanas cuando debe redibujarse una región.

– Con el mensaje llega un rectángulo con la región a redibujar.

• CPaintDC encapsula las llamadas a BeginPaint /EndPaint. El constructor de CpaintDC llama a BeginPaint y el destructor a EndPaint.


5.4.3. CPaintDC

• Datos:– m_ps: variable pública de tipo PAINTSTRUCT.

typedef struct tagPAINTSTRUCT { HDC hdc; ->identificador del contexto de dispositivo. BOOL fErase; ->indica si el fondo necesita se redibujado.RECT rcPaint; ->coordenadas del rectángulo a redibujar.BOOL fRestore; BOOL fIncUpdate; BYTE rgbReserved[16]; } PAINTSTRUCT;

– m_hWnd variable protegida de tipo HWND. Identificador de la ventana a la que está asociada el CPaintDC.

24


5.4.3. CPaintDC

• Métodos:– Constructor: CPaintDC (CWnd *pWnd); Construye un

objeto CPaintDC asociado a la ventana pWnd, prepara la ventana para que se dibuje sobre ella y almacena en la variable m_ ps una estructura de tipo PAINTSTRUCT.


5.4.3. CPaintDC. Ejemplo: mensaje WM_PAINT en un diálogo.

void CEjemploCPaintDCDlg ::OnPaint() {

if (IsIconic()){//Dibuja el icono.................}else{CPaintDC paintDC(this );.RECT *pRect;int x,y;

pRect=&paintDC.m_ps.rcPaint; for (x=pRect->left; x<pRect->right; x++)

for (y=pRect->top; y<pRect->bottom; y++)paintDC.SetPixel(x,y,RGB(x*y,0,0));

CDialog::OnPaint();}

}

25


5.4.4.Dibujar en una vista.

• Cuando los datos del documento cambian, la vista debe reflejar esos cambios. – El usuario introduce un cambio en la vista.– La vista llama a la funcion UpdateAllViews del documento para notificar

a todas las vistas del mismo documento que deben actualizarse.– UpdateAllViews llama a la funcion OnUpdate (de CView) de cada una de

las vistas. OnUpdate por defecto invalida toda el área cliente.– Cuando la vista se invalida Windows envía un mensaje de WM_PAINT. – La función OnPaint (CWnd) de la vista responde al mensaje creando un

contexto de la clase CPaintDC y llama a la funcion OnDraw.– OnDraw (CView) recibe un contexto de dispositivo como parámetro y

redibuja.


5.4.4. Dibujar en una vista.

Ventana VISTAUsuario

Documento.

Ventana VISTA

Ventana VISTA.

Un documento con tres vistas asociadas.

Acción sobreUna vista.

Modifica eldocumento

Métodos para modificarEl documento.

UpdateAllViews: actualizaTodas las vistas asociadasAl documento.

OnUpdate

OnUpdate

OnUpdate

26



Ventana VISTA

Usuario

DocumentoOnUpdate: invalida el área cliente marcándola para el siguiente

mensaje WM_PAINT.

OnPaint:

OnDraw: redibuja.

Mensaje WM_PAINTCPaintDC



Ejemplo: mensaje WM_PAINT en una vista.void CMyView::OnDraw( CDC* pDC ) { CMyDoc* pDoc = GetDocument(); CString s = pDoc->GetData(); // Returns a CString CRect rect; GetClientRect( &rect ); pDC->SetTextAlign( TA_BASELINE | TA_CENTER );

pDC->TextOut( rect.right / 2, rect.bottom / 2, s, s.GetLength() );

}

27


Clases para objetos gráficos.

• Clases para objetos gráficos.


5.4.5.Brocha o pincel- CBrush

• Encapsula las funciones del GDI para creación de brochas.• Sirve para rellenar de color los objetos.• Utilización:

– Se crea un objeto Cbrush.– Se pasa como parámetro a cualquier función de la clase CDC que

lo requiera.

• Métodos:– Constructores:

CBrush(); Constructor por defecto.Constructores con parámetros:

CBrush( COLORREF crColor );

CBrush( int nIndex, COLORREF crColor );

28


5.4.5. CBrush

– Inicialización:BOOL CreateSolidBrush( COLORREF crColor ); Inicializa un pincel con un color sólido.

BOOL CreateHatchBrush( int nIndex, COLORREF crColor );Inicializa un pincel con un color y un patrón :HS_BDIAGONAL, HS_CROSS, HS_HORIZONTAL,HS_VERTICAL….


5.4.5. CBrush - Ejemplo

Dibujar de un color aleatorio toda la ventana vista cuando se pulsael ratón sobre ella.

29


5.4.5. CBrush - Ejemplo

void CEjemploView::OnLButtonDown(UINT nFlags, CPoint point) {CClientDC miDC(this ); //Creamos objeto DC asociado a la vista.CBrush Pincel; //Creamos pincelCRect miRect; //Rectángulo para almacenar el tamaño de la ventanaint r, v, a; //Variables para almacenar los colores

r=rand()%255; v=rand()%255; a=rand()%255; Pincel.CreateSolidBrush (RGB(r,v,a));//Creamos pincel sólidoGetClientRect(miRect);//Recogemos el área cliente.miDC.FillRect (miRect,&Pincel);//Rellenamos el rectánguloCView::OnLButtonDown(nFlags, point);

}


5.4.6.Pluma o lápiz- CPen

• Encapsula las funciones del GDI para creación de plumas.• Sirve para seleccionar el color y patrón de las líneas.• Métodos:

– Constructor:CPen( ); Constructor por defecto

CPen( int nPenStyle, int nWidth, COLORREF crColor );

– Inicialización:

BOOL CreatePen( int nPenStyle, int nWidth, COLORREFcrColor );

30


5.4.6. CPen

Posibilidad de crearla e inicializarla a la vez, o en dos pasos.void CMyView::OnDraw( CDC* pDC ){//Creación e inicialización simultáneas (utilizando el constructor con

//parámetrosCPen myPen1( PS_DOT, 5, RGB(0,0,0) );

//En dos pasos:CPen myPen2; //Creación del objetoif( myPen2.CreatePen( PS_DOT, 5, RGB(0,0,0) ) ); //Inicialización

………uso de la pluma

}


5.4.6. CPen- ejemplo

Dibujar una línea con una pluma, restaurando luego la pluma anterior.

void CMyView::OnDraw( CDC* pDC ){

CPen penBlack; // Creamos un objeto plumapenBlack.CreatePen( PS_SOLID, 2, RGB(0,0,0) ) );//Lo inicializamos.

// Seleccionamos la nueva pluma creada, almacenando la anteriorCPen* pOldPen = pDC->SelectObject( &penBlack );

// Dibujamos líneas que serán del color de la plumapDC->MoveTo(...);pDC->LineTo(...);// Restauramos la anterior plumapDC->SelectObject( pOldPen );

}

31


5.4.7. Bitmap - CBitmap

• Encapsula las funciones del GDI para la utilización deBitmaps.

• Constructor:– CBitmap()

• Inicialización:– BOOL LoadBitmap( UINT nIDResource ); Carga un bitmap a

partir de su identificador. El bitmap debe haberse añadido a los recursos de la aplicación previamente.

– BOOL CreateBitmap( int nWidth, int nHeight, UINT nPlanes,UINT nBitcount, const void* lpBits );


5.4.7. Bitmap - CBitmap

• Atributos:– int GetBitmap( BITMAP* pBitMap ); Rellena la estructura

BITMAP con información sobre las características del bitmap.

typedef struct tagBITMAP {

LONG bmType;

LONG bmWidth;

LONG bmHeight;

LONG bmWidthBytes;

WORD bmPlanes;

WORD bmBitsPixel;

LPVOID bmBits;

} BITMAP;

32


5.4.7. Cbitmap- ejemplo.

• Crear un bitmap y dibujarlo en el centro de la vista



1- Crear o copiar el bitmap en los recursos de nuestra aplicación:

33





void CEjemploView::OnDraw(CDC* pDC){

CEjemploDoc* pDoc = GetDocument();ASSERT_VALID(pDoc);CBitmap bmp; // Crea un objeto CBitmap

if (bmp.LoadBitmap(IDB_BITMAP1)) //Carga IDB_BITMAP1 de los recursos{

BITMAP bmpInfo; //Estructura BITMAP para almacenar las características.bmp.GetBitmap(&bmpInfo); // Rellena la estructura BITMAPCDC dcMemory ; // Contexto de dispositivodcMemory.CreateCompatibleDC(pDC); // Crea un contexto de dispositivo

//compatible

34



// Selecciona el bitmap en el contexto de dispositivo en memoriadcMemory.SelectObject(&bmp);CRect rect;GetClientRect(&rect); //Almacena el área cliente en un rectángulo.//Busca el centro de la ventanaint nX = rect.left + (rect.Width() - bmpInfo.bmWidth) / 2; int nY = rect.top + (rect.Height() - bmpInfo.bmHeight) / 2;//Copia los bits del DC en memoria (dcMemory) al DC actual. Pasa a´l//método BitBlt los parámetros del bitmappDC->BitBlt(nX, nY, bmpInfo.bmWidth, bmpInfo.bmHeight, &dcMemory, 0, 0, SRCCOPY);

}else TRACE0("ERROR: Where's IDB_BITMAP1?\n");}


Ejemplo.

35


Ejemplo.

• Si dibujamos en la funciónOnDraw:– Creamos dos brochas como variables de la clase y las

inicializamos en el constructor:CBrush brocha1,brocha2;

COLORREF rojo,verde;rojo = RGB(255,0,0);brocha1.CreateSolidBrush(rojo); //Crea una brocha rojaverde = RGB(0,255,0);brocha1.CreateSolidBrush(verde); //Crea una brocha verde


Ejemplo.

– Dibujamos en la función OnDrawvoid CEjemploView::OnDraw(CDC* pDC)//Ya tenemos como parámetro un contexto{

CTresrayaDoc* pDoc = GetDocument();ASSERT_VALID(pDoc);pDC->TextOut(50, 50,”Hola”,4);

CRect tam_ventana; //Estructura que contiene cuatro campos: top, bottom, left y rightGetClientRect(& tam_ventana);//Función que recoge el tamaño del área de la ventana.

CRect rect;rect=tam_ventana;rect.bottom=rect.bottom/2;rect.right=rect.right /2;pDC->SelectObject(&brocha1); //Seleccionamos la brocha con la que dibujaremos a continuaciónpDC->Ellipse(rect);//Dibujamos una elipserect=tam_ventana;rect.top=rect.bottom/2;rect.left=rect.right/2;pDC->SelectObject(&brocha2);pDC->Rectangle(rect);

}

36


5.5. Recursos: Diálogos, controles y menús.

• Menús:– Creación y edición de menús.– Aceleradores.

• Controles:– Creación de controles.– Uso de la clase CButton.– Clase CListBox.– Clase CEdit.– clase CStatic.– Clase CScrollsBar– Clase CComboBox.

• Diálogos modales y no modales.– Creación de un diálogo.– Clase CDialog.


5.5.1.Menús.

• Objeto de la interfaz muy importante.• Teclas de acceso rápido: combinación de teclas que generan el mismo evento que una opción de menú.• Es un recurso de la aplicación (se almacenan en el fichero .rc).

Ejemplo de menú

Acceso al menú desde el entornodel Visual C++.

37


5.5.1. Menús.

• Campos de un menú: – ID: constante numérica que identifica cada opción de menú.– Caption (rótulo): Texto que aparece en el menú.– Prompt (guía): texto que aparece en la barra de estado cuando se

sitúe el cursor sobre el menú.

Tecla aceleradora:\t Ctrl + A


5.5.1. Menús.

• Mensajes asociados al menú:– WM_COMMAND:

• indica que se ha seleccionado un elemento de menú, una tecla aceleradora, o un botón de barra de herramientas.

• Es necesario añadir este mensaje para que el menú realice alguna acción.

– UPDATE_COMMAND_UI: • Sirve para actualizar la apariencia de los menús (que aparezcan

con una marca de selección o no).

• Es optativo.

38


5.5.1. Menús.

Clase a la quese asocia el menú.Normalmente almarco de la aplicación.

Identificador delmenú para el queañadimos un mensaje.

Mensaje queañadimos.


5.5.1. Menús.

int OpcionA=0;void CMainFrame::OnMimenuOpcionA() {

/*Entrará aquí cuando pulsemos el menú*/OpcionA = !OpcionA;

}void CMainFrame::OnUpdateMimenuOpcionA(CCmdUI* pCmdUI) {

if(OpcionA)pCmdUI->SetCheck(1);

elsepCmdUI->SetCheck(0);

}

39


5.5.1. Menús.

•Asociar una tecla de método abreviado a un menú:

Identificador del menú.

Combinación de teclas.


5.5.2. Cuadros de diálogo.

• Se usan para mostrar información y recibir entradas de datos del usuario.

• Incluyen controles (botones, ventanas de edición, etc.) para realizar esta tarea-> controles hijo.

• Gestionados por la clase CDialog de las MFC.• Visual C++ incluye un editor gráfico de diálogos:

– Crear plantillas de diálogo.– Añadir o eliminar controles al diálogo.– Modificar la distribución y el tamaño de los controles.

– Editar las propiedades de los controles.– Establecer el orden de las fichas de los controles.– Probar un diálogo.

40



• Dos formas de utilizarlos:– Crear un proyecto basado en cuadros de diálogo.– Crear un diálogo dentro de un proyecto con arquitectura

documento/vista.

Aplicación basada en cuadro de diálogo.

Aplicación que incluye diálogos.


5.5.2. Cuadros de diálogo.Editor de diálogos.

Barra de herramientasde controles

Modificación de la distribución de los controle.s

41



• Se puede crear una clase derivada de CDialog que gestionará nuestro diálogo.



• Clase CDialog.• Permite crear dos tipos de diálogos:

– Modales: windows no permite que se introduzcan datos en la ventana padre cuando el diálogo está abierto.

– No modales. El usuario puede introducir datos en cualquier ventana.

• Creación de un diálogo modal:CMiDialogo dial; //Creamos un objeto de nuestra clase diálogo. Esta

//variable puede ser local.dial.DoModal(); //Abrimos el diálogo de forma modal

Hasta que no se cierra el diálogo no continua ejecutándose elcódigo que pongamos a continuación.

42



• Creación de un diálogo no modal.CMiDialogo *dial; //Deberá ser global o pertenecer a una clase

dial = new CMiDialogo(); dial->Create(IDD_DIALOG1, this );dial->ShowWindow(SW_NORMAL);

Al cerrar el diálogo tendremos que liberar la memoria con delete.



• Intercambio de información de diálogo y validación:– DDX: Dialog Data Exchange: permite crear variables miembro en

la clase derivada de CDialog que se asocian a los controles.– Dos tipos:

• De control: asocia una variable de tipo clase control con un control. Ej: control tipo boton-> asocia variable tipo CButton.

• De valor: asocia una variable de valor al control. Ej: control tipo cuadro de edición-> variable tipo entero o cadena...

– Actualización de controles:• BOOL UpdateData( BOOL bSaveAndValidate = TRUE );

Si el parámetro es TRUE actualiza la variable con el contenido del control.Si el parámetro es FALSE actualiza el control con el valor de lavariable.

43



• m_edit1 es la variable de tipo int asociado a la ventana de edición.• OnKillfocusEdit1 es la función que responde al evento de pérdida de foco de la ventana de edición.void CMiDialogo::OnKillfocusEdit1() {int valor;

UpdateData(TRUE);valor = m_edit1; //Después de esto valor = 126

}


5.5.3. Controles.

• Son ventanas hijas unidas a su ventana padre.• Son ventanas especializadas: derivan de CWnd.• Si incluimos un control en un diálogo se destruye con éste.

SCROLLBARCScrollBarBarra de desplazamiento

STATICCStaticControl estático

EDITCEditControl de edición.

COMBOBOXCComboBoxCuadro de lista combinado

LISTBOXCListBoxCuadro de lista

BUTTONCButtonBotón

Clase de VentanaClase MFCControl

44


5.5.3. Controles. Clase CButton.

• Deriva de CWnd.• Permite crear tres tipos de botones:

– Casillas de verificación (checkbox).– Botones de opción (radiobutton).– Botones de comando (pushbutton).

• Mensajes que pueden recibir:– BN_CLICKED– BN_DOUBLE_CLICKED

• Algunas operaciones útiles:– voidSetCheck( int nCheck ); Pone el botón como pulsado o no.– int GetCheck( ) const; Devuelve el estado del botón, pulsado o no


5.5.3. Controles. CEdit.

• Ventanas de edición.• Permite introducir una o más líneas de texto.• CEdit à otras funcionalidades:

– Cortar y pegar texto.– Deshacer acciones.– Inserción.– Formato básico de texto.

45


5.5.3. Controles CEdit.

• Mensajes que puede recibir.

Desplazamiento vertical.EN_VSCROLL

Desplazamiento horizontal mediante la barraEN_HSCROLL

Memoria insuficiente para realizar la operciónEN_ERRSPACE

Se ha introducido la cantidad máxima de texto.EN_MAXTEXT

El control pierde el foco de entrada de datos.EN_KILLFOCUS

El control recibe el foco de entrada de datos.EN_SETFOCUS

El texto del control ha cambiado.EN_CHANGE

El texto del control va a cambiarEN_UPDATE

Evento activadorNotificación


5.5.3. Controles. CEdit.

• Crear un control de edición:– BOOL Create( DWORD dwStyle, const RECT& rect, CWnd*

pParentWnd, UINT nID );

• Limitar el número de caracteres que acepta:– void SetLimitText( UINT nMax );

• Añadir y borrar texto desde el código:– CWnd :: void SetWindowText( LPCTSTR lpszString );– CWnd:: void GetWindowText( CString& rString ) const;– CEdit:: int GetLine( int nIndex, LPTSTR lpszBuffer ) const;

• Cortar, copiar y deshacer:– void Cut( );– void Copy( );– BOOL Undo( );– void Paste( );

46


5.5.3. Controles. Ejemplo.

• Creamos un diálogo con diferentes botones y una ventana deedición.• Creamos una clase asociada al diálogo->CMiDialogo.



• Asociamos mensajes a los controles• Asociamos variables los controles.

47



• Añadimos el evento WM_INITDIALOG a la clase CMiDialogo.BOOL CMiDialogo ::OnInitDialog() {

CDialog::OnInitDialog();//Inicializamos las variables asociadas a los controles. Dos posibilidades:m_check1 = 1; //m_check1 es una variable de tipo entero.m_radio1.SetCheck(TRUE);//m_radio1 es una variable de control de tipo

//CButtonm_edit1 = 300; //m_edit1 es una variable de tipo entero.UpdateData(FALSE); //actualiza el valor del control con el contenido de las

//variables.return TRUE; }

Cuando se abra el diálogo aparecerá asi


5.5.3. Controles. CListBox.

• Ventana con una lista de cadenas de texto.• Mensajes:

Falta de memoria.LBN_ERRSPACE

Doble click sobre un elemento.LBN_DBCLK

El control pierde el foco de entrada.LBN_KILLFOCUS

El control recibe el foco de entrada.LBN_SEFOCUS

Selección cancelada.LBN_SELCANCEL

Cambios en la selección actual.LBN_SELCHANGE

Evento activador.Notificación

48


5.5.3. Controles. CListBox.

• Añadir y eleminar elementos a la ventana:– int AddString( LPCTSTR lpszItem ); Añade un nuevo elemento a

la lista. Si la lista es ordenada se añade en su posición, sino, al final.

– int InsertString( int nIndex, LPCTSTR lpszItem ); Inserta un nuevo elemento en una posición determinada.

– int DeleteString( UINT nIndex ); Elimina elemento

• Seleccionar y buscar elementos:– int GetCurSel( ) const; Devuelve la posición del elemento

seleccionado (0 el primero).– int SetCurSel( int nSelect ); Selecciona el elemento situado en la

posición nSelect.


5.5.3. Controles. CComboBox.

• Cuadro de lista combinado: funcionalidades de CEdit y CListBox.

49


5.5.3. Ejemplo CList.

•Añadimos un ListBox a nuestro diálogo.•Le asociamos una variable -> m_list1•Le asociamos un mensajeà LBN_SELCHANGE



BOOL CMiDialogo::OnInitDialog() {

CDialog::OnInitDialog();........................

//Inicilizamos la lista con una serie de opciones cuando se//abre el diálogo

m_list1.AddString("Opcion 1");m_list1.AddString("Opcion 2");

m_list1.AddString("Opcion 3");

UpdateData(false);

return TRUE;}

50



• Cuando se recibe el mensaje de que ha cambiado la selección, vemos qué línea hay seleccionada:

void CMiDialogo ::OnSelchangeList1() {int seleccion = m_list1.GetCurSel();}

Tema 5. Entornos de Desarrollo de Interfaces. - Muralmural.uv.es/miexsan/Tema 5.pdf · 1 5....

Documents

Transcript of Tema 5. Entornos de Desarrollo de Interfaces. - Muralmural.uv.es/miexsan/Tema 5.pdf · 1 5....