Ionic práctico: App con REST

Vista de detalle de un elemento en la Home

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
La conexión de un elemento concreto de un listado con la vista de detalle en la Home de ese registro se puede hacer de varias maneras. En este vídeo utilizaremos las variables globales que hemos preparado previamente y las aplicaremos para lograrlo.

Transcripción

El comportamiento de esta vista de lista es el siguiente, voy a tener toda esta zona, que me va a servir para hacer clic dentro del Home, aquí dentro, el Slide corresponiendo al elemento sobre el cual he hecho clic. El botón de editar, obviamente me abrirá un formulario de editar, y el botón borrar me lo borrará. Vamos a ver como podemos programar esta parte. En realidad voy a seguir dos estrategias distintas, con este botón y con este otro, y lo voy a hacer a drede, para que se vean diferentes formas de pasar datos entre páginas. En este caso lo que haré va a ser pasarme parámetros entre una vista y otra, y en el caso que voy a grabar ahora, el caso de hacer de clic sobre el nombre de los pájaros, voy a hacer que se guarde un valor en una variable global, y luego lo voy a reutilizar. De hecho, ya hemos creado previamente esas variables globales. Voy a cerrarlos, y tenemos archivo que se llama "Var-globales.ts" dentro del cual tenemos la variable Slide y tenemos los métodos "Set Slide" y "Get Slide" estos son los que voy a utilizar. Me voy primero que todo, a la lista, y dentro de la lista necesito añadir un clic, puedo copiarlo de cualquier parte donde haya uno, copiar, y voy a poner ese clic en la etiqueta P, le voy a programar para que llame al método "Go home" y le va a pasar el ID de Index, es decir el elemento del listado correspondiente. Ahora me voy a ir a Lista y voy a crear... esa función "Go Home". Voy a mover un poco más abajo, para que quede un poco más arriba y quede más visual. ¿Qué necesito? Ponder un log... y en él pasar el Index que estoy recibiendo, bien, es una posiblidad. Esto viene bien por cuestiones de depuración para comprobar que efectivamente funciona. Pero realmente lo que debería hacer es llamar a este "Vars-globales.ts", ahora le voy a decir que haga un "This.vars-globales" y voy a pedirle que haga un Set Slide y voy a guardar entonces en esas variables globales, el valor de ese índice, y por último, necesito... que la aplicación se vaya al apartado Home. Así que puedo utilizar el "NavController" y aquí podría utilizar diferentes técnicas. Por hacerlo lo más simple posible, porque realmente no es la mejor manera, pero para hacerlo lo más simple posible voy a utilizar un Push, y voy a pedirle que se vaya al Home, pero claro, aquí me encuentro con un problema, y es que esta página no sabe quien es la Home, así que voy a necesitar importar dentro de esta página ese apartado, y una vez que esté importado ya podré utilizarlo. La mejor forma de realizar esa importación es utilizar importaciones que ya hay, puedo irme a los módulos o a los componentes, y de hecho, en realidad voy a necesitar Update, Add y Home, así que voy a copiarlos, voy a venirme aquí, voy a pegarlos, voy a eliminar ese Lista y no necesito bajar de nivel tanto, es decir, todos estos ya están en la carpeta Page, así puedo eliminar toda esa parte de la ruta. Bueno, pues ya tengo esta clase Home, lista para utilizarla, así que efectivamente la puedo utilizar en este Push. Esta es la primera parte del trabajo, pero no la última, de hecho, bueno, esto es un pelin complicado, yo me voy a ir de nuevo al Home, me voy a ir al Home.ts, a este archivo de aquí cuando cambie la Home, el controlador debería encargarse de cargar la diapositiva correcta. Yo cuando estoy dentro del Constructor, estoy pidiendo que se cargue la diapositiva y todos los datos en concreto de la cero, pero no debería ser la cero, aquí debería de recuperar el valor que he pasado previamente, así que puedo copiar este código, puedo pegar aquí este código, solo que en vez de "Set Slide" puedo poner un "Get Slide" y gracias a esto, nada más al entrar en la primera diapositiva le voy a pedir que me cargue los datos de ella, pero no es lo único que tengo que hacer, debería conseguir también que el Slider se vaya a esa diapositiva en concreto, y para conseguir hacer eso, necesitaré utilizar las opciones de los Sliders, o sea, necesitaré crear un objeto en el cual especifique esa diapositiva. Para ello, voy a hacer que se cargue, de hecho, voy a hacer un objeto que sea, por ejemplo, "My Slide Options," y que como digo, va a ser un objeto, que va a tener dentro de él, en realidad la única opción que me interesa que es el "Initial Slide", y le voy a poner como parámetro este valor que estoy recuperando. Otra posibilidad podría ser guardar aquí otra variable, la que guarde la referencia al Slide correspondiente. Podría valerme exactamente igual. Ahora, esta variable también tendría que nombrarla y por último lo que tengo que hacer es conseguir que este "My Slide Options" realmente sirva de algo. Así que para poder hacer que realmente lo ejecute el Slider, lo que necesito aquí, añadir además... el atributo Options y este atributo lo voy a igualar con ese objeto. Ahora me voy a volver atras y voy a modificar otros detalles que no son obvios, pero que son importantes, básicamente, voy a tener un problema y es que nada más comenzar se va a hacer una llamada a este método "On Slide Change" ¿Por qué? Pues porque nada más comenzar, le estoy pidiendo a las opciones que cambie de Slide, entonces se va a lanzar ese evento, pero ese evento no me interesa que se ejecute hasta la segunda vez, es decir, la primera vez no va a estar disponible, no me interesa que esté disponible, más que nada, porque si permito que se ejecute nada más arrancar, es bastante probable, que a este ViewChild no le de tiempo de recuperar este Slide. Voy a hacer que haya una variable Start que va a estar puesto como Verdadera, y voy a usar esa variable Start para impedir que se pueda ejecutar ese código nada más arrancar. Voy a pedirle que en caso de que no sea Start, es decir, en caso de que no sea el principio, pues entonces sí, sí me gustaría que ejecute ese código. Me parece perfecto. Pero no antes. Ahora, necesito que nada más arrancar entonces, cuando ya tenga todos los datos, se llame a los datos de la primera de las diapositivas, esta de aquí, eso está todo configurado, va a llamar a la diapositiva que es, porque este Get Slide, si me muevo a las variables globales veremos que ya de entrada va a tener un valor cero, con lo cual va a cargar lo que corresponde, así que voy a guardar comprobaré si efectivamente compila bien, veo que no, porque se me ha olvidado poner el This delante, aquí tengo que poner "This.Start" y luego para que vuelva a funcionar tendré que hacer que ese Start, por cierto... sea "False", entonces a partir de ese momento deje ejecutar el código. Bien, pues ahora sí está compilando correctamente. Y volviéndome de nuevo al navegador, vamos a esperar unos segundos, y ahora, pues haciendo clic sobre Ver mapa, le cuesta un poco refrescar, pero me cargará... ese mapa, como digo está un poco saturado, y me tarda un poco en dibujarlo pero deberá hacerlo sin mayor problema. Aquí lo tengo, ya me está cargando los mapas, vale, pues ahora me voy a la lista, y ahora le pido que me muestre la gaceta común, y aquí vemos que sale efectivamente la gaceta común y si le pido que me muestre el mapa, ya está. O sea que ya hemos conseguido enlazar la vista de lista con la vista de Home, la vista de detalle.

Ionic práctico: App con REST

Practica creando una aplicación con Ionic, gracias a la combinación de AngularJS, HTML5 y un back-end basado en PHP para servir datos a tu app así como modificar registros.

3:00 horas (38 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.