1
00:00:00,150 --> 00:00:03,480
Vamos a crear la clase hija concreta input form.

2
00:00:03,630 --> 00:00:10,380
En el mismo package acá en el evento click derecho new yaba class input form.

3
00:00:10,980 --> 00:00:17,750
Entonces una implementación tiene que la edad de la clase abstracta extends elemento form.

4
00:00:20,220 --> 00:00:26,250
Malcon error está perfecto porque nos dice que tenemos que implementar el método abstracto se fija en

5
00:00:26,250 --> 00:00:31,920
clase input for debe declarar el método o implementar este método abstracto.

6
00:00:31,950 --> 00:00:38,100
Entonces hay dos formas o dorta nativa 1 Que esta clase hija sea abstracta y si es abstracta no está

7
00:00:38,100 --> 00:00:40,530
obligada a implementar el método del padre abstracto.

8
00:00:40,950 --> 00:00:45,150
Se aplican entonces no lo hagan, no lo hagan solamente para el ejemplo.

9
00:00:45,150 --> 00:00:48,360
Nada más se coloco abstracto.

10
00:00:48,420 --> 00:00:54,510
Se fijan si se quita el error y esto indica que esta clase sería tracta y las clases hijas de input

11
00:00:54,540 --> 00:01:01,830
for o ancestro del elemento formulario nietas estarían obligada a implementar el método abstracto de

12
00:01:01,830 --> 00:01:03,660
la clase abuela de elementos form.

13
00:01:03,900 --> 00:01:04,560
Este método.

14
00:01:05,500 --> 00:01:10,660
Pero solamente para el ejemplo, para que lo puedan visualizar y también saber que una clase abstracta

15
00:01:10,660 --> 00:01:15,010
hija no requiere que implemente los métodos abstractos de la clase padre.

16
00:01:15,940 --> 00:01:21,310
Pero bueno, en este ejemplo, obviamente Input Form es una clase concreta, así que vamos a implementar

17
00:01:21,310 --> 00:01:24,400
este método de forma implementar el método acá te fijan.

18
00:01:24,460 --> 00:01:25,690
Hacemos un clic acá.

19
00:01:26,260 --> 00:01:27,580
Lo hace de forma automática.

20
00:01:27,700 --> 00:01:28,900
Dibujar html.

21
00:01:28,990 --> 00:01:30,810
Ok, bueno, ahí desaparece el error.

22
00:01:30,940 --> 00:01:34,510
O bien otra forma con generate.

23
00:01:35,170 --> 00:01:36,700
Nos vamos a hover right?

24
00:01:36,850 --> 00:01:39,500
Sobreescribir método o implementa el método.

25
00:01:39,590 --> 00:01:39,820
Perdón.

26
00:01:39,910 --> 00:01:43,520
Implementar método del padre dibujar html.

27
00:01:43,690 --> 00:01:46,270
Ok, que al final también es sobreescribir.

28
00:01:46,330 --> 00:01:47,200
Es un over right.

29
00:01:48,390 --> 00:01:55,770
Bien, entonces acá esta clase tiene que implementar su propia forma del input form, pero apartado

30
00:01:55,770 --> 00:02:00,870
primero con los atributos private del tipo string.

31
00:02:01,500 --> 00:02:03,570
El tipo en HTML.

32
00:02:03,600 --> 00:02:08,070
Los elementos formulario del tipo de input tienen un atributo que es type.

33
00:02:08,400 --> 00:02:16,560
El tipo por defecto es del tipo text y lo podemos colocar acá texto por defecto sería de ese tipo.

34
00:02:16,770 --> 00:02:21,910
Lo dejamos así del tipo tex por defecto, pero también podría tener otro tipo number.

35
00:02:21,930 --> 00:02:25,710
Por ejemplo, email, password, submit, checkbox.

36
00:02:25,920 --> 00:02:30,300
Irradio button diferente como categoría de campo de texto o input.

37
00:02:30,720 --> 00:02:34,890
Entonces colocamos el tipo un atributo importante como es private.

38
00:02:35,160 --> 00:02:36,780
Vamos a implementarlo metodo tras Z.

39
00:02:37,650 --> 00:02:41,190
Entonces por acá giene doit gué teran setter.

40
00:02:42,110 --> 00:02:47,720
Marcamos ambos perfecto y lo siguiente constructor vamos a tener un constructor generate.

41
00:02:49,420 --> 00:02:52,480
Constructor está acá elemento for?

42
00:02:52,990 --> 00:02:53,590
Con el nombre.

43
00:02:53,980 --> 00:03:00,790
Ok, acá nos dice si queremos agregar el tipo ya le colocamos no solamente el nombre, entonces va a

44
00:03:00,790 --> 00:03:06,010
inicializar el objeto con el nombre campo y el tipo por defecto sería el del tipo texto.

45
00:03:06,370 --> 00:03:12,250
Pero también podríamos agregar otro más con clic derecho generai constructor.

46
00:03:12,370 --> 00:03:14,460
Nuevamente el nombre OK.

47
00:03:15,100 --> 00:03:17,120
Y ahora si agregamos el tipo OK.

48
00:03:17,920 --> 00:03:24,070
De forma automática y crea un constructor que pasa el nombre y el tipo en nombre lo pasa por súper al

49
00:03:24,070 --> 00:03:25,210
padre que está bien.

50
00:03:25,300 --> 00:03:28,300
Recuerden que el padre tiene constructor que pasa el nombre acá.

51
00:03:29,250 --> 00:03:34,170
Además, el tipo lo inicializa con Tiz ÂQuà atributo propio de la clase?

52
00:03:34,350 --> 00:03:37,650
Ya tenemos dos constructora, entonces se forma uno con el nombre tipo.

53
00:03:37,680 --> 00:03:42,500
Por ejemplo Yussef Einem y el tipo Text o bien Yussef Name.

54
00:03:42,630 --> 00:03:44,910
Acá y por defecto el tipo es texto.

55
00:03:45,420 --> 00:03:53,520
Otro campo, por ejemplo password, nombre, password, tipo password o edad tipo number.

56
00:03:53,700 --> 00:03:55,020
Se fijan bien.

57
00:03:55,170 --> 00:03:56,730
Implementemos el método dibujar.

58
00:03:56,790 --> 00:03:58,380
Cómo sería el HTML?

59
00:03:58,740 --> 00:04:00,200
No importa que no sepan html.

60
00:04:00,510 --> 00:04:02,830
Recuerden input.

61
00:04:03,420 --> 00:04:04,440
Vamos a cerrar acá.

62
00:04:04,860 --> 00:04:05,730
Bueno, eso es lo primero.

63
00:04:05,820 --> 00:04:08,940
Una etiqueta XML y también HTML.

64
00:04:08,970 --> 00:04:12,960
Por supuesto, un documento web con la etiqueta input, pero tiene atributos.

65
00:04:13,020 --> 00:04:14,340
Por ejemplo, el tipo.

66
00:04:15,150 --> 00:04:15,390
Bien.

67
00:04:15,540 --> 00:04:16,050
Qué más?

68
00:04:16,920 --> 00:04:23,580
El name o nombre vamos a colocar comillas simple type igual comillas simple name igual comillas simple

69
00:04:23,820 --> 00:04:25,140
para que no se rompa acá.

70
00:04:25,440 --> 00:04:30,660
Otra alternativa es colocar comillas doble, pero es capaz, por ejemplo, baxa latch.

71
00:04:30,750 --> 00:04:32,610
Acá baques, latch.

72
00:04:32,700 --> 00:04:34,620
Acá se fijan y acá también.

73
00:04:35,790 --> 00:04:36,690
Acá me agregó uno.

74
00:04:36,700 --> 00:04:45,420
Además lo voy a quitar un Bachelard, un paquete lastre Venky, otro atributo value valor igual y lo

75
00:04:45,420 --> 00:04:45,810
mismo.

76
00:04:46,110 --> 00:04:48,210
Un Bax larch comilla doble.

77
00:04:48,390 --> 00:04:50,190
Un Bax larch comilla doble.

78
00:04:50,610 --> 00:04:51,540
Bien, el type.

79
00:04:51,750 --> 00:04:55,190
Este atributo lo tenemos acá, propio de la clase input.

80
00:04:56,010 --> 00:04:56,580
El tipo.

81
00:04:57,670 --> 00:05:03,130
El name lo tenemos en la clase padre el protected, por lo tanto lo podemos acceder y el valor también

82
00:05:03,640 --> 00:05:04,110
en valor.

83
00:05:04,660 --> 00:05:06,980
Entonces acá simplemente podemos concatenar.

84
00:05:07,120 --> 00:05:13,660
Entonces cerramos con doble comilla, espacio más, espacio más.

85
00:05:13,840 --> 00:05:17,830
Y acá que lo quería 10 punto tipo.

86
00:05:18,970 --> 00:05:23,450
Voy a bajar para que no sea tan extenso y faltaría el NAICM acá.

87
00:05:23,570 --> 00:05:32,200
Entonces doble comilla 10 punto nombre concatenados.

88
00:05:32,590 --> 00:05:35,200
Voy a bajar de acá también.

89
00:05:40,720 --> 00:05:41,100
Valor.

90
00:05:41,440 --> 00:05:41,830
Valor.

91
00:05:42,280 --> 00:05:43,240
El tipo con tipo.

92
00:05:43,330 --> 00:05:47,160
Nombre con nombre value con valor está listo.

93
00:05:47,250 --> 00:05:48,010
Está implementado.

94
00:05:48,340 --> 00:05:51,790
Bien, continuemos con la siguiente clase hija concreta.

95
00:05:51,970 --> 00:05:54,260
Ahora vamos a crear text area form.

96
00:05:54,560 --> 00:05:58,630
Entonces campismo el mismo package new yaba class

97
00:06:01,630 --> 00:06:02,860
text area form.

98
00:06:03,340 --> 00:06:03,680
Ok.

99
00:06:04,090 --> 00:06:05,500
Variedad extends

100
00:06:07,960 --> 00:06:14,530
elemento form perfecto sobre el error colocábamos implementar método dibujar html.

101
00:06:14,630 --> 00:06:15,300
Ok.

102
00:06:16,330 --> 00:06:19,450
Bien va a tener atributos propios del tex.

103
00:06:19,490 --> 00:06:23,800
Área privat del tipo entero.

104
00:06:26,110 --> 00:06:26,680
Filas.

105
00:06:31,030 --> 00:06:31,600
Columnas.

106
00:06:31,810 --> 00:06:39,370
Bueno, estos dos atributos nos permiten definir el ancho o largo y alto la altura de la caja de texto.

107
00:06:39,460 --> 00:06:43,990
El área apareció el input, pero el input es para colocar una cantidad limitada de texto.

108
00:06:44,080 --> 00:06:49,510
Mientras que el text area nos permite colocar una gran cantidad texto cientos y miles de caracteres.

109
00:06:50,000 --> 00:06:52,630
Entonces guié transceptor por acá.

110
00:06:55,510 --> 00:06:56,500
Marcamos los dos.

111
00:06:57,380 --> 00:07:04,940
Ok, constructores generad constructor, elemento form para pasar en nombre.

112
00:07:06,100 --> 00:07:08,350
Del padre y nada más.

113
00:07:08,470 --> 00:07:11,170
Sólo para asignar el nombre, el campo mediante el padre.

114
00:07:12,430 --> 00:07:18,130
Seleccionar nada, selección, listo, ahí tenemos el súper para el padre, nada más.

115
00:07:18,230 --> 00:07:21,400
Listo, otro conductor muy parecido.

116
00:07:24,360 --> 00:07:26,700
Elemento Fore que pasa en nombre del padre.

117
00:07:26,990 --> 00:07:27,480
Ok.

118
00:07:28,290 --> 00:07:28,920
Y ahora así.

119
00:07:29,100 --> 00:07:30,120
Filas y columnas.

120
00:07:31,590 --> 00:07:36,070
Entonces, si pasamos el nombre del padre, pero también nos permite asignar filas y columnas, dos

121
00:07:36,090 --> 00:07:38,640
constructores, dos implementaciones sobrecarga.

122
00:07:38,820 --> 00:07:42,970
Bueno, igual lo que hicimos acá se fijan, acá tenemos el atributo tipo.

123
00:07:43,110 --> 00:07:48,510
Entonces tenemos dos constructores, uno asigna el nombre del campo y el otro el nombre y el tipo.

124
00:07:49,110 --> 00:07:49,860
Y haga lo mismo.

125
00:07:50,260 --> 00:07:54,960
Uno es solamente el nombre y el otro, y el otro sin el nombre y también filas y columnas.

126
00:07:55,050 --> 00:08:00,480
Bien, vamos a implementar el método abstracto dibujar HTML un poco más abajo por acá.

127
00:08:02,260 --> 00:08:07,630
Retorno en Streak la etiqueta HTML es text area, todo junto.

128
00:08:07,750 --> 00:08:11,170
Text area abrimos y cerramos aca.

129
00:08:11,770 --> 00:08:20,290
Text area se es distinto si tiene que abrir aca acaba un contenido dentro de esta etiquetas va el valor

130
00:08:20,440 --> 00:08:21,250
y aca cerramos.

131
00:08:21,340 --> 00:08:23,650
A diferencia el input que es uno solo.

132
00:08:24,630 --> 00:08:26,190
Se fijan, no es necesario cerrar.

133
00:08:27,750 --> 00:08:29,670
Ver cuáles serían los atributos bueno.

134
00:08:30,390 --> 00:08:30,760
Name.

135
00:08:31,170 --> 00:08:32,220
Acá no tiene tipo.

136
00:08:32,790 --> 00:08:36,270
Acá lo vamos a colocar con comillas simple, pero también tiene cols.

137
00:08:36,540 --> 00:08:39,990
Las columnas y rousse filas.

138
00:08:40,770 --> 00:08:42,720
Y qué faltaría el value, el valor.

139
00:08:42,750 --> 00:08:49,800
Pero el valor vaca entre medio, entre los dos etiquetas, entre la etiqueta de apertura con los atributos

140
00:08:49,860 --> 00:08:51,630
y la etiqueta de cierre, acaba el valor.

141
00:08:51,840 --> 00:09:00,180
Entonces podemos colocar acá artir el valor doble comilla para separar y concatenados punto valor.

142
00:09:05,150 --> 00:09:12,520
Podríamos bajar e nombre doble comilla, dis punto.

143
00:09:12,650 --> 00:09:13,220
Nombre.

144
00:09:19,380 --> 00:09:21,810
Despuntó cols sería Columnas.

145
00:09:24,230 --> 00:09:25,340
Acá vamos a bajar.

146
00:09:29,030 --> 00:09:29,660
Y filas

147
00:09:33,560 --> 00:09:34,000
Miletto.

148
00:09:34,130 --> 00:09:37,060
Ahí tenemos la presentación distinta al input form.

149
00:09:37,370 --> 00:09:43,160
Al final lo que estamos modelando y llevando o convirtiendo el código HTML de formulario.

150
00:09:43,250 --> 00:09:48,320
Los elementos a una programación orientada, objetos con clases, objeto o atributo, pero al final

151
00:09:48,440 --> 00:09:48,980
lo mismo.

152
00:09:49,400 --> 00:09:51,680
De esta forma también nos permite validar.

153
00:09:51,770 --> 00:09:54,380
Después vamos a implementar el API de validación.

154
00:09:54,500 --> 00:09:55,970
Así que por ahora quedamos hasta acá.

155
00:09:56,060 --> 00:09:59,600
Continuamos la siguiente clase con la otra clase hija.

156
00:09:59,720 --> 00:10:04,040
Select form o combobox o lista desplegable como le quieran llamar.

157
00:10:04,220 --> 00:10:04,930
Nos vemos.