# Desarrollo Interfaces (Borj)
###### tags: `RET`
###### tags: `Borj`
# Martes 26 Octubre
Gradle
Editor grafico
gluon scene builder
Creando proyecto
.
Stage>Scene>Nodes>Container
.
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.
Para encontrar los elementos @fx button y la mismda id
# Lunes 2 de Marzo
subir una imagen a resourcers > com
regenerar el proyecto
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
Border pane y dentro grid pane
Refactor name >>> cambia el nombre en todo
Cuando se ejecuta y sale pequeño
# 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
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
Y continuacion hay que requerirla
# 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
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
Sign in with Wallet
Connect another wallet