---
# System prepended metadata

title: Desarrollo Interfaces (Borj)
tags: [RET, Borj]

---

# Desarrollo Interfaces (Borj)

###### tags: `RET`
###### tags: `Borj`



# Martes 26 Octubre
Gradle 


Editor grafico

gluon scene builder

Creando proyecto

![](https://i.imgur.com/LvVReZL.png)
.

Stage>Scene>Nodes>Container

![](https://i.imgur.com/559eNJu.png)



.

Vamos por aqui el dia de hoy (https://github.com/DevelopSys/ClaseDI/tree/master/T2-Java/T4)


## Tipos de Eventos




Para asociar la controladora a la parte grafica.

![](https://i.imgur.com/R7Z40uA.png)

Para encontrar los elementos @fx button y la mismda id


# Lunes 2 de Marzo

subir una imagen a resourcers > com

regenerar el proyecto

![](https://i.imgur.com/JBVYj9E.png)


Personalizamos un boton

```java=
private void personalizarBotones(){
        boton3.setBackground(null);
        boton3.setBorder(null);
        boton3.setText("");
        boton3.setGraphic(new ImageView());
    }
```

Para llamar a una imagen 

```java=
boton3.setGraphic(new ImageView(HelloApplication.class.getResourceAsStream("playbtn.png"));
```


BordePane, te deja poner cosas a la izquierda derecha, arriba y abajo (right, left, top y bottom)

FORMAS DE GESTIONAR EVENTOS:

1. Gestion Directa 

btn.sectonAction >> vas a lo directo (solo se pude gestionar action), como parametro me pide un evento de tipo NEW, NEW EVENTHANDLERACTION, handler(actionEvent)
boton1.setOnAction(new EventHandler<Action event(){
										   override

SETON ES ESPECIFICO

2. btn.setOn >> para muchos a la vez

3. btn.addEventHandler

GENERICO!!! 

Tipo de Evento, y quien maneja ese evento(this), sino un new event handler tipado como event (lo de mas arriba)

# Jueves 4 de Noviembre

Practica Calculadora

![](https://i.imgur.com/d0dxE53.png)

Border pane y dentro grid pane


Refactor name >>> cambia el nombre en todo


Cuando se ejecuta y sale pequeño

![](https://i.imgur.com/ZR8g4hB.png)


# Viernes 5 de Noviembre

Seguimos con la practica de la calculadora

Le damso un id en la parte grafica y con el @ los llamamos en la controladora

setText se reemplazara

append se añade y se junta


# Jueves 11 Noviembre


## Elementos

Border pane permite tener objetos arriba abajo derecho izquierda

![](https://i.imgur.com/6BixsBl.png)


Tab pane, panel de pestañas


Anchor pane es una posicion absoluta

Toggle button tiene estado pulsado y estado no pulsado

# Martes 16 Noviembre

setear datos de una nueva clase, en este caso la clase persona y darselos al checkbox.


Combo box y choicebox


choice.setItems(le agregamos una lista)



iniciar lista (listachoice.addall(new persona))


creas dos listas las cuales al seleccionar un nombre, realmente esta llamando a la clase persona la cual tiene, nombre, apellido y telefono


## API

API significa interfaz de programación de aplicaciones. Permite que dos aplicaciones se comuniquen entre sí para acceder a los datos. Cada acción que realizas en tu teléfono, como enviar un mensaje directo o consultar el resultado del partido de béisbol, utiliza una API para acceder a esa información y entregarla


# Martes 23 Noviembre


Listas

https://developers.themoviedb.org/3

Para API



BEAUTIFY PARA JSON

https://codebeautify.org/jsonviewer




Para poder utilizar JSON debemos de descargar una libreria mavven

https://mvnrepository.com/artifact/org.json/json/20210307

la requerimos y de esa forma se descarga

![](https://i.imgur.com/FMBq5c6.png)


Y  continuacion hay que requerirla

![](https://i.imgur.com/Uegxre6.png)


# Martes 30 Noviembre



Listas,

Para arrancar Stage


Crear controladora y dentro de ella poner todos los datos


imagen overview titulo y label con popularidad



# Jueves 9 de Diciembre



los get resource hacen referencia a los que esta dentro

Detalle control esta en el loader, no hace falta ningun constructor para comunicarlo,

hay que crear un puntero, despues del load se crea un DetailController = loader(lo que tiene el xml), get controller

public void Comunicarpelicula(objeto de tipo pelicula).

Un label distinto para cada uno


</br>

#  *SEGUNDO TRIMESTRE*
--------------------------------------------------
---------------------------------------------


# JUEVES 27 DE ENERO (REGRESO DE DON BORJA)



funcion de flecha

function nombre (param){

	//
}

name()



funcion de flecha en el mismo momento que pides las cosas lo estas ejecutando


cuando solo tiene una linea, no es obligatorio poner llaves (se convierte eso en el return)

si tienes mas de una linea 


# Martes 1 Febrero

GESTION DE OBJETOS



manipulaciones de DOM


CDN 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


todo esta lleno de nodos, son arboles de distinto tipos



Siempre la suma de las columnas, tiene que ser menor a 12 si no empieza a hacer cosas raras

![](https://i.imgur.com/R605r9o.png)


los nodos se pueden identificar por:

etiqueta (tag), id y clase


En bootstrap hay ayuda para ver ayuda de columnas y ver los tipo de botones

layout para ver las ayudas de como se ponen margenes


mb-4 un margen de 4 pixeles


hare busqueda por id si pongo #nombre y por clase si pongo .claseBuscar, y si no pongo nada por tag


```javascript=
botonesQuery.forEach((element, index)=> {

    element.innerText = `Pulsado ${index+1}`

});

```


Para que cada elemento boton, se sume uno


selector combinado, dame todos los inputs que no tengan cierta clase

.elements input //busqueda avanzada


div.elemetns (cogemos todos los divs y que tengan clase element)

```javascript=

let lista = document.querySelector("#lista-elementos");
lista.innerHTML += "<li>Elemento nuevo</li>"
```



# EXAMEN SEGUND EV (primer examen)

* Peticiones asincronas 

* Modificacion de dump



# JUEVES 10 FEBRERO


Repaso para el examen, ejercicio hacer en clase:

cuando des al boton que tiene las cartas del usuario salga un alert con algo de informacion del usuario (pulsando).


```javascript=


```


# 14 de FEBRERO


node js

npm install

npm install typescritp -g


sudo npm install @angular/cli -g


ng --version



ng new inicio

en caso de que de fallo

npm install

npm start


# 15 de FEBRERO

ANGULAR

framework de java propiedad de google


TYPESCRIPT TS

cd para ver el directorio actual

https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh/related

https://chrome.google.com/webstore/detail/angular-state-inspector/nelkodgfpddgpdbcjinaaalphkfffbem/related



# MARTES 22 DE FEBRERO

if html
```java=
<h2>Directiva IF</h2>
<p>
la directiva
</p>
<ng-container *ngif="mostar"; elseTemplate>
<div class="alert alert-sucess" role="alert">


```

if TS

```java=


```

------


crear un nuevo componente
ng g c components/switch


# REPASO EXAMEN DE DESARROLLO DE INTERFACES


EJERCICIO DE PRUEBA

https://github.com/DevelopSys/ClaseDI/tree/master/T3-Angular/T4/codigos%20clase

EJERCICIO CLASE COMPLETO

https://github.com/DevelopSys/ClaseDI/tree/master/T3-Angular/T3/codigos2021/rutas/src/app/services

OTRO EJERCICIO EJEMPLO
https://github.com/DevelopSys/ClaseDI/tree/master/T3-Angular/T3/codigos%20clase/02_directivas/src/app

PIPES

esto se hace con la direccion de la imagen, las imagenes dentro de assets

uppercase todo a mayusculas
lowercase todo a minusculas 

Para crear los pipes
ng g p pipes/imagn



las imagenes tendran que tener un pipes que se pondra con un | en el cual contendra un if para lo que nosotros queramos
 <img class="card-img-top" [src]="item.imagen | pipePerso(el pipes)" alt=" ">
 
 crear servicio ng g services/asignatura
 
 
 servicio gestionar el arraylist
 
 como capturar inputs-> se hace con la almohadilla
 
 
 
 # APUNTES EXAMEN
 
 
**Para crear un proyecto**
 
 ng new inicio
 
**Para crear componentes**
 
 ng g c components/switch
 
**Para crear los pipes**

ng g p pipes/imagn

**Para crear un servicio**

ng g services/asignatura
 
**Para utils crear un folder**

En assets se meteran las imagenes y esto se crea al iniciar

