Una interfaz más limpia con PowerApps - Parte 2

Tan divertido que no puedo esperar para dejar de jugar. Esta vez, sin embargo, trabajemos en un objetivo más desafiante.

Aplicación móvil de Finnair

Esto es algo que he querido hacer durante mucho tiempo. La aplicación tiene un aspecto elegante y ofrece un reto adecuado para su creador.

Implementemos las dos pantallas principales de la aplicación (imágenes a continuación)

1. Detalles del viaje
2. Navegación / selección de viaje

Pantalla 1 – Navegación / selección de viaje

Empecemos por el más fácil. Crear una aplicación móvil en blanco con una página en blanco con

• taustaväriksi asetetaan esikuvasta poimittu harmaa (HEX: 2B2C2D)
• oikeaan reunaan lisätään valkoinen laatikko

Navigaatio

Tarvitsemme navigaatioelementeille (Tutustu, Varaa lentoja jne) ikonit. Kopioidaan ne alkuperäisestä sovelluksesta ja tallennetaan PowerAppsiin kuvina.

Luodaan kokoelma (colNavigation), joka sisältää kustakin navigaatioelementistä seuraavat tiedot

• Id
• Otsikko (title)
• Ikoni (icon)
• Ikoni elementin ollessa valittu (iconSelected)

Toteutetaan navigaatio galleriana, jonka tietolähteenä on tekemämme kokoelma. Gallerian riveillä näytetään otsikko ja sitä vastaava ikoni.

Otsikko kirjoitetaan isoilla kirjaimilla (Upper).

Valitun navigaatiorivin korostaminen

Valittua riviä korostetaan valkoisella ikonilla (ThisItem.iconSelected).

Myös otsikon fontti vaihdetaan valkoiseksi.

Color: If(ThisItem.IsSelected;White; RGBA(176; 177; 179; 1))

Omat matkat

Seuraavaksi toteutetaan ”Omat matkat” otsikon alla näytettävä lista käyttäjän tulevista matkoista.

Yksityiskohdat ovat tärkeitä:

• Matka koostuu meno- ja paluulennosta, jotka on visuaalisesti niputettu yhteen (pystyviiva sekä tyhjä väli matkojen välissä)
• Käyttäjän valitessa lennon, korostetaan
  • valittu lento valkoisella värillä
  • pystyviiva valkoisella värillä koko matkan (ei yksittäisen lennon) osalta

Luodaan lennoista oma kokoelma (colMyTrips). Oikeasti tiedot haettaisiin sopivasta tietovarastosta, mutta oikaistaan hieman. Tässä riittää hommaa muutenkin.

Kokoelman tietueet sisältävät seuraavat tiedot:

• Id
• Matkan tunniste (tripid), jolla yhdistetään samaan matkaan liittyvät lennot
• Lähtöpäivä (departure)
• Lentoreitti (route)

Lisätään sivulle uusi galleria (galMyTrips), jossa näytetään seuraavat elementit

• lähtöaika (departure)
• reitti (route)
• harmaa pystyviiva

Fonttikokojen ja värien säätämisen jälkeen lopputulos näyttää tältä.

Lisätään joka toisen reitti-kentän korkeutta. Näin saadaan erotettua matkat visuaalisesti toisistaan.

Korostetaan valittu lento valkoisella värillä. Tämä on helppoa. Mutta miten muutetaan pystyviivan väri valkoiseksi koko matkan kohdalta?

Tämä onnistuu matkan tunnistetta (tripId) hyödyntämällä. Vaihdetaan viiva valkoiseksi, mikäli rivin tripId on sama kuin valitun lennon tripId.

Ahkeralla matkaajalla tulevia matkoja voi olla paljon. Rajoitetaan gallerian korkeudeksi kolmen matkan viemä tila (korkeus = 1002).

Height: Min(1002;CountRows(colMyTrips)/2 *167)

Lisää matka -painike

Lisätään gallerian perään teksti ”Lisää matka”, sekä sitä vastavaa ikoni. Teksti ja ikoni sijoittuvat suoraan gallerian alle riippumatta gallerian korkeudesta.

Käyttäjän nimi ja linkki yhteydenottolomakkeeseen

Viimeistellään näyttö lisäämällä sen alareunaan

• käyttäjän nimi
• käyttäjän bonustaso
• linkki yhteydenottolomakkeeseen

Sekä tietenkin kivat ikonit, jotka poimitaan alkuperäisestä sovelluksesta.

Seuraavaksi voidaankiin siirtyä harjoituksen hankalampaan osuuteen.

Näyttö 2  – Matkan tiedot

Luodaan toinen näyttö, johon lisätään

• Logo
• Otsikko, joka kertoo monenko päivän kuluttua lähtö tapahtuu
• Otsikko, joka kertoo monenko päivän kuluttua lähtöselvitys alkaa
• Matkakohdetta kuvaava kuva

Päivät lasketaan valitun matkan lähtöajan perusteella.

Text : Upper("Lähtö " & Round(DateValue(galMyTrips.Selected.departure) - Today();0) & " päivän kuluttua")

Gallerian vierittäminen kuvan päälle

Sitten se kinkkinen osuus. Miten toteutetaan näytön alaosa? Sitä pitäisi pystyä liu’uttamaan yläosan päälle näin.

Pienen pohtimisen jälkeen käyttöliittymän toteutustapa hahmottuu.

De nuevo, vamos a crear una colección (colTripInfo), esta vez con tres filas vacías.

Agregue una galería del tamaño de una pantalla (de tipo "altura vacía y flexible") con una colección recién creada como origen de datos.

Usaremos la galería de la siguiente manera.

• Fila 1: una fila transparente en blanco que muestra los elementos agregados previamente a la pantalla
• Fila 2 – Información básica sobre el viaje, incluidos los horarios de salida
• Fila 3 – Detalles del viaje

Agregue una imagen a la galería que cambie con cada línea.

Image: Switch(id;
              2;middle;
              3;bottom)

N.B! En la primera línea, no hay contenido en la imagen.

La altura de la imagen también varía en función de la línea.

Height: Switch(id;
               1;600;
               2;110;
               3;800)

Esto le permite crear filas de diferentes alturas en la galería.

Agregue campos de texto a la galería para obtener información sobre rutas, números de vuelo, etc. Aparecen solo en la fila 2.

Visible: ThisItem.id = 2

Por supuesto, queremos mostrarte los detalles del vuelo seleccionado. Agreguemos la información que falta a la colección (colMyTrips).

ClearCollect(colMyTrips;
  {
    id: 1;
    tripid: 1;
    departure: "20.6.2019";
    route: "Helsinki - Madrid";
    flightno: "AY1661";
    deptime: "16:50";
    depTerminal: "T2";
    arrtime: "20:15";
    arrTerminal: "T4"
  };...)

Cambiemos los campos de texto para utilizar la información del viaje seleccionado.

Difuminar una imagen

¿Cómo puedo atenuar la imagen de un objeto cuando el usuario se desplaza sobre él?

La propiedad VisibleIndex de la galería indica qué fila aparece en la parte superior de la galería. Usemos esta información en la función Transparencia de imagen.

Cuantas más filas de la galería se desplacen, más transparente será la imagen.

La misma idea también se puede utilizar para difuminar el texto sobre la imagen.

Para suavizar el efecto, la primera fila (vacía) de la galería debe dividirse en siete secciones.

En este caso, la translucidez de la imagen se puede establecer en:

Transparency: Gallery1_1.VisibleIndex *0,16

y, en consecuencia, el color de los textos

Color: RGBA(102;102;102;1-(Gallery1_1.VisibleIndex*0,16))

Navegar entre pantallas

¡El final se avecina!

En el ejemplo anterior (Viking Line), se puso mucho esfuerzo en implementar la animación de transición entre pantallas. Había una "pantalla" hecha por uno mismo dentro de la pantalla y un temporizador para deslizar la pantalla hacia adentro y hacia afuera.

El desarrollo está evolucionando y estos trucos pueden olvidarse.

Lisätän molempiin näyttöihin hampurilaisikoni ja lisätään sen toiminnoksi (OnSelect) siirtyminen oikealle näytölle.

OnSelect: Navigate(Screen2;ScreenTransition.CoverRight)

¡Ahora hay animaciones en ambas direcciones!

Resumen

El resultado final se ve así.

Aquellos con ojos agudos notarán una serie de detalles en la implementación que no pude hacer bien. Algunos de ellos simplemente no tenía la energía para frotarlos, mientras que otros superaron los límites de PowerApps.

¿Cuál es el objetivo de estos ejercicios? Después de todo, no se puede usar PowerApps para crear aplicaciones para usuarios fuera del inquilino.

La idea de estos ejercicios es aprender. Aprenda a usar PowerApps para crear interfaces de usuario a las que no cree que se vaya a plegar. Al hacerlo, obtendrá nuevas ideas de interfaz de usuario y siempre aprenderá cosas nuevas sobre los controles básicos de PowerApps y cómo usarlos.

Se lo recomiendo a todo el mundo.