PDF de programación - Programación visual en KDE KDevelop3 + KDevDesigner

K Desktop Enviroment

Programación visual en KDE

KDevelop3 + KDevDesigner

Matías Costa
[email protected]

14 de Marzo de 2005

Matías Costa 2005
CC Attribution-ShareAlike

Contenidos

➔ C++ Básico
➔ Creación de proyectos y clases en KDevelop3
➔ Poniendo controles con el ratón: KDevDesigner
➔ Objetos Qt
➔ Señales y ranuras
➔ Eventos
➔ Acciones KDE
➔ Configuración de aplicaciones: QConfig y

KConfig XT

C++ básico

¿Porque C++?

➔ Velocidad
➔ Compatible C

– Utilización directa de librerías en C
– Reutilización de código
– Reutilización de conocimientos

➔ Herencia multiple
➔ Templates
➔ Sobre todo: ¡funciona!

C++ básico

Objetos

class MiClase {

MiClase::MiClase(int valor){

public:

miEntero = valor;

MiClase(int valor);
~MiClase();
int miMetodo();

private:

}

MiClase::~MiClase(){}

int MiClase::miMetodo(){

return miEntero;

int miEntero;

}

}

C++ básico

Objetos “estaticos”

void UnaClase::unMetodo() {

MiClase miObjeto( 5 );
int unEntero = miObjeto.miMetodo();

}
➔ Objeto creado en la pila
➔ Estos objetos se destruyen

implicitamente

C++ básico

Objetos “dinamicos” y punteros

void UnaClase::unMetodo() {

MiClase *miObjeto = new MiClase( 5 );
int unEntero = miObjeto->miMetodo();
delete miObjeto;

}
➔ Estos objetos usan memoria dinamica y

deben ser destruidos explicitamente
➔ Normalmente usados como objetos

miembro

➔ Si haces un new QObject, y este tiene

padre, no hace falta hacer el delete

➔ Si haces un new QWidget, procurar que
tenga siempre padre, así seguro que no
tendrás una fuga de memoria

C++ básico

Referencias

MiClase miObjeto( 5 );

MiClase &mismoObjeto = miObjeto;

int unEntero = miObjeto.miMetodo();

int otroEnteroIgual = mismoObjeto.miMetodo();
➔ Conceptualmente iguales a un puntero,

pero con diferente sintaxis

➔ Útiles para cambiar parámetros sin

tener que retocar código

C++ básico

Constantes

➔ Punteros constantes
MyClass* const MyClass

➔ Punteros a constantes

const MyClass *myClass

➔ Referencias constantes

const MyClass &myClass
➔ Metodos constantes

int someProperty() const;

K Desktop Enviroment

El primer proyecto

Creación de proyectos

➔ Hacer un «¡Hola mundo!» es realmente

fácil

Hola mundo

Creación de proyectos

Configurando el proyecto

➔ Proyecto > Opciones del proyecto
➔ General

– Poner nuestro nombre y email

➔ Extensiones

– Activar grupos de archivos

➔ Opciones de configure

– Añadir '-pipe' a los parámetros del

compilador

Creación de proyectos

Completado automático de código

➔ Especifico de C++

Creación de proyectos

➔ Navegador de clases y métodos

El entorno

Creación de proyectos

main.cpp

➔ Se crea un KApplication
➔ Se procesan los argumentos y

parámetros con KCmdLineArgs::init()

➔ Se instancia el widget principal.
➔ Se le especifica a la aplicación el

widget principal con setMainWidget()
➔ Se muestra dicho widget con show()

Creación de proyectos

holamundowidget.cpp

➔ El widget principal hereda de

KMainWindow.

➔ KMainWindow proporciona una barra de

estado, de herramientas, menú... etc

➔ En nuestro sencillo hola mundo solo se

coloca un widget central con
setCentralWidget()

Creación de proyectos

El entorno

➔ KDevelop3 maneja autoconf / automake
➔ make con F8 o
➔ make y ejecutar con F9 o
➔ KDevelop nos preguntara amablemente
si queremos ejecutar './configure' si no
encuentra un archivo 'Makefile'

➔ Podemos filtrar la salida de make y el

compilador

Creación de proyectos

El entorno

➔ Grupos de archivos

K Desktop Enviroment

Señales y ranuras

( Signals/Slots )

Señales y ranuras

Problemas

➔ Hacer un programa grafico es más

dificil que uno de consola
– Ejecución no secuencial
– Las acciones del usuario son impredecibles
– Normalmente la interfaz y comportamiento

no esta bien definida al principio del
proyecto

➔ Problema: ¿como responder a los

eventos de los controles?

Señales y ranuras

void on_click(void *(*handler)(void));

void do_something(void) { .... }

int main(int argc, char **argv){

La vieja escuela C

cwidget.h

CWidget *my_widget=cwidget_new_button(“Button text”);

my_widget->on_click(do_something);

....

}

app.c

Señales y ranuras

El modelo Java (I)

public class MyDialog extends JDialog {

....

public MyDialog(Frame owner, String title, boolean modal) {

super(owner, title, modal);
try {

JButton myButton = new Jbutton();
myButton1.setText("Button text");
myButton1.addActionListener(new

MyDialog_myButton_actionAdapter(this));

....

} catch (Exception exception) { .... }

}

public void MyButton_actionPerformed(ActionEvent e) { .... }

}

MyDialog.java

Señales y ranuras

El modelo Java (II)

➔ Objeto “pegamento”

class MyDialog_myButton_actionAdapter implements ActionListener {

private MyDialog adaptee;

Dialog1_jButton1_actionAdapter(Dialog1 adaptee) {

this.adaptee = adaptee;

}

public void actionPerformed(ActionEvent e) {

adaptee.jButton1_actionPerformed(e);

}

}

MyDialog.java

Señales y ranuras

public signals:

void click();

public slots:

void doSomething();

void MyClass::doSomething() { .... }

“The Qt's way”

qpushbutton.h

myclass.h

void MyClass(QWidget *parent, const char *name)

:ParentClass(parent, name) {

QPushButton *myButton = new QPushButton(this);

connect(myButton, SIGNAL( clicked() ),

this, SLOT( doSomething() ) );

}

....

myclass.cpp

➔ Intuitivo y flexible
➔ Sin codigo pegamento: menos código
que mantener, implementaciones más
claras

➔ Seguro, un objeto conectado eliminado

no provoca segfault

➔ Type safe: si no coinciden, o no existe

una señal o ranura, simplemente se
avisa por la salida de error

K Desktop Enviroment

El diseñador de interfaces

KDevDesigner

Diseñador de interfaces

➔ Diseñador

El entorno

Etiqueta
(Qlabel)

Botón

(QPushButton)

Diseñador de interfaces

➔ Qt puede manejar el tamaño y colocación
de los widgets automáticamente (QLayout)

“Layouting”

➔ Alinea los widgets de manera

horizontal, vertical o en cuadricula

➔ Alinea los widgets de manera

horizontal o vertical con separadores
(QSplitter)

➔ Rompe la alineación

Diseñador de interfaces

“Layouting”

➔ Pinchar en el fondo del formulario y

romper la alineación

➔ Redimensionar la etiqueta y moverla

abajo

➔ Colocar cuatro casillas de selección

– Doble click en el botón para colocar varios

widgets

– Un solo click en el formulario, o arrastrar para

especificar tamaño

Diseñador de interfaces

“Layouting”

➔ Volver a pinchar en el fondo del

formulario y alinear verticalmente

Señales y ranuras

Convención de nombres

➔ Los objetos o variables miembro se

preceden con 'm_', 'm' o '_' .
Ej: MyClass::m_myProperty

➔ Las propiedades se cambian con set*.

Ej: MyClass::setProperty()

➔ Para consultar, simplemente el nombre.

Ej: MiClass::property()
– Si es bool a veces se precede con 'is'

Ej: MiClass::isEmpty()

Señales y ranuras

“Layouting”

➔ Para cambiar la etiqueta de
las casillas pulsar dos veces
sobre ellas.

➔ Podemos usar el carácter '&'

para usar la letra siguiente
como “acelerador”
– El propio diseñador elegirá

uno por nosotros

– No nos dejara repetir letra

Señales y ranuras

➔ Cambiamos el nombre de los widgets
en el campo 'name' abajo a la derecha

Señales y ranuras

Programando con una mano y el ratón (I)

➔ Seleccionar la herramienta de conexión

de señales/ranuras

➔ Pinchar sobre m_kde y arrastrar hasta

m_gnuLinux

➔ Conectar toggled() con setChecked()

Señales y ranuras

Programando con una mano y el ratón (II)

➔ Repetir con toggled()  setDisabled()
➔ Conectar también estas señales a m_pretty
➔ Guardar ( ) y ejecutar ( )

K Desktop Enviroment

KMyPeople

KMyPeople

➔ Vamos a hacer
una aplicación
mas o menos
útil “full KDE”

KMyPeople

➔ La aplicación es

un visor html

➔ Podemos abrir
una página en
Internet gracias a
la transparencia
de red de KDE
(KIO)

KMyPeople

➔ Quitamos KMyPeople::m_printer y

cualquier referencia a el
– También KMyPeople::filePrint()

➔ Eliminamos KMyPeopleView::print()
➔ En KMyPeople::setupActions()

eliminamos KStdAction::print(this,
SLOT(filePrint())...

KMyPeople

➔ Para que los textos aparezcan en

español simplemente colocamos la línea
KLocale::setMainCatalogue("kdelibs");
la primera de main() en main.cpp

➔ Deberíamos escribir todas las cadenas

con i18n(), en ingles, generar un
catalogo y traducirlo. Pero vamos a
obviarlo y escribiremos los textos
directamente en español

KMyPeople

➔ Creamos un nuevo

widget en la barra de
nuevos archivos a la
izquierda

➔ Lo llamamos

KMyPeopleViewBase

➔ Aceptamos el siguiente
dialogo para añadirlo al
proyecto

KMyPeople

➔ Llamamos al formulario

KMyPeopleViewBase

➔ Editar > Form Settings...

– Nombre de la clase: KMyPeopleViewBase
– Podemos rellenar otros campos como el

autor o los comentarios

KMyPeople

➔ Lo abrimos y añadimos widgets

– Un KListBox ( View (KDE) )
– Tres QLabel ( Display )
– Tres KLineEdit ( Input (KDE) )

KMyPeople

➔ Seleccionamos los KlineEdit y QTextLabel

y los alineamos verticalmente
– Arrastrando el ratón
– Con la tecla mayusculas pulsada

KMyPeople

➔ Seleccionamos el KListBox y el grupo
recién creado y los alineamos con un
splitter
– Para seleccionar el grupo hay que pinchar

en la linea roja

KMyPeople

➔ Ahora simplemente pinchamos en el
fondo del formulario y seleccionamos
alineación vertical

➔ Podemos ver el resultado con

Ventana > Previsualizar formulario
– O pulsando Crtl+T

KMyPeople

➔ Eliminamos KParts::ReadOnlyPart

*m_html de la clase KMyPeopleView
➔ Cambiamos la definicion de la clase
KMyPeopleView para que herede de
KMyPeopleViewBase en vez de QWidget
➔ En el constructor lo eliminamos todo y

también cambiamos QWidget por
KMyPeopleViewBase

KMyPeople

➔ Ejecutamos y vemos el resultado

KMyPeople

➔ Poner texto a los QTextLabel y darle
nombre a los KLineEdit y el KListBox

m_listBox

m_name

m_surname

m_phone

KMyPeople

➔ Vamos quitando las alineaciones y

añadimo