Bruke AJAX i OutSystems Agile-plattformen

Les de forrige installasjonene i serien: Komme i gang med OutSystems Agile Platform, Lære det grunnleggende i OutSystems Agile Platform, beskrive OutSystems Agile Platform Service Studio-opplevelse, Arbeide med OutSystems Agile Platforms Integration Studio, distribuere en applikasjon opprettet med OutSystems Agile Platform, Legge ECT til et eSpace med OutSystems Agile Platform, og Arbeide med planlagte jobber i OutSystems Agile Platform.

Jeg har alltid vært forsiktig med AJAX. Da AJAX først ble utbredt, var det en kongelig smerte å gjøre arbeid, og det var ikke verdt det. Det er også for enkelt å skjule verdifull informasjon bak AJAX på en måte som søkemotorer ikke finner den. I tillegg er det spørsmål rundt tilgjengelighet og brukervennlighet som ikke er godt besvart med AJAX.

Imidlertid er det mange veldig passende anvendelser av AJAX. Selv ved å bruke et av de populære AJAX-bibliotekene som Dojo eller jQuery, blir utviklere tvunget til å lage et backend-system skrevet på et språk som Java eller C # med et program på klientsiden skrevet i JavaScript, noe som gir kompleksitet. (Merk at det er en læringskurve for bruk av disse bibliotekene.)

Så jeg hadde ingen intensjoner om å bruke AJAX i Rat Catcher med det første fordi det ikke er nødvendig i applikasjonen. Jeg kunne tross alt leve med tilbakeblikkene i applikasjonen hvis det betydde at jeg ikke måtte gjøre mer arbeid. Men jeg så hvor fin AJAX fungerte på OutSystems-siden, så jeg bestemte meg for å gi den en sjanse. Det var flott å finne ut at det krever omtrent fem minutter å lære å jobbe med AJAX i Agile-plattformen, en liten endring i logikken din og litt dra-n-drop. Og fra det som er blitt sagt, vil versjon 5.1 forbedre dette enda mer.

Da jeg bestemte meg for å prøve AJAX i applikasjonen, var det med mindre funksjonalitet: Jeg ønsket å bytte ut etikettene på innloggingsområdet med kontrollkontrolletikettene som forsvinner når du begynner å skrive. Dette vil spare litt horisontal skjermplass og gjøre skjermoppsettet litt renere. Du kan se resultatene i figur A. Figur A

Bruke Input_SetPrompt AJAX widgeten i påloggingsdelen

Det er et skrin å gjøre denne effekten. Først måtte jeg legge til en referanse til RichWidgets-utvidelsen til eSpace. Hvis du planlegger å bruke mye AJAX, gjør det enkelt for deg selv og bare ta alt i RichWidgets Extension. Jeg prøvde å velge og velge hva jeg vil henvise til, men add-referansesystemet gjør det ikke klart hvilke enheter og handlinger som er nødvendig for hver widget. Dokumentasjonen hjelper, men for et prosjekt som vil bruke mange av widgetene (og når du først er i gang, er det vanskelig å motstå fristelsen til å bruke mer av RichWidgets-samlingen), kan du like godt skaffe dem alle.

Deretter trengte jeg å ha feltet på skjermen. Dette er veldig viktig: Du må absolutt oppgi et Navn-attributt for feltet. Deretter dro jeg Input_SetPrompt Web Block til webskjermen eller blokkeringen fra RichWidgets-skjermflyten til høyre. (For organisasjonens skyld foreslås det, men ikke obligatorisk, at utviklere legger elementet ved siden av widgeten som det vil påvirke.) Til slutt trengte jeg å fortelle Input_SetPrompt hvilken tekst som skal vises, og gi den IDen til widgeten Jeg ville at den skulle handle på (dette er grunnen til at den trenger et navn) ( figur B ). Figur B

Input_SetPrompt-widgeten og dens egenskaper i Service Studio

Når jeg så hvor enkelt dette var, gikk jeg videre med å bruke Popup_Editor-kontrollen kombinert med Feedback_Message og AjaxRefresh for å tillate redigering av brukerinformasjon i et fint overleggsvindu. Jeg ville gjøre dette fordi brukerinformasjonsredigereren ikke hadde nok felt til at en egen webskjerm kunne føles riktig. I Rat Catcher er brukerne tilknyttet en konto. Dette gjør at hver kunde (representert av kontoen) har så mange brukere av systemet de vil, uten å betale ekstra penger. Jeg bryr meg ikke hvor mange brukere det er fordi det er antall dokumenter som er lagt inn i systemet som legger belastningen på serverne. Fra der jeg sitter gjør flere brukere per konto det faktisk lettere for kundene å trenge en dyrere konto! Men dette betyr at jeg trenger en måte for kontoadministratorer å redigere brukerinformasjon, tilbakestille passord og opprette nye brukere; Jeg vil tross alt heller la brukerne ringe noen i selskapet deres for å få hjelp og ikke meg.

For å lage brukerredaktøren, var alt jeg trengte å lage en webskjerm som utførte den nødvendige funksjonaliteten. Jeg fikk EditUser-skjermen til å se ren ut, fordi den er designet for å være et popup-vindu over resten av skjermen ( figur C ). Jeg ga den en valgfri inngangsparameter med bruker-ID. Hvis det ikke er spesifisert noen bruker-ID, vil systemet opprette en ny bruker; Hvis en bruker-ID er spesifisert, vil skjermen ha muligheten til å slette brukeren. Figur C

Web-skjermen EditUser, som er veldig vanlig uten topptekst eller bunntekst.
Det er ikke noe spesielt med logikken i dette skjermbildet før du ser på SaveUser eller DeleteUser-handlingene for å se hva som skjer når arbeidet er utført ( figur D ). Samtalen til Popup_Editor_Notify lar skjermen som opprettet popup-en vite at arbeidet er ferdig, og det kan gi en returparameter. Jeg oppgir bruker-ID, som blir kassert, men jeg kan trenge den i fremtiden. Samtalen til Popup_Editor_Close lukker vinduet og skal være den endelige handlingen på skjermen ( figur D ). Figur D

Logikken under EditUser-webskjermen - Popup_Editor_Notify og Popup_Editor_Close-handlingene - er nødvendig for at AJAX-funksjonaliteten skal fungere.
Jeg ville knytte popup-en til hovedkontoskjermen. Det første jeg trengte å gjøre var å gi måter å få redaktøren til å vise, så jeg la til en lenke til siden. Koblingen peker til skjermbildet EditUser ( figur E ). Deretter dro jeg Popup_Editor-blokken fra RichWidgets ved siden av lenken (igjen, er plasseringen bare av organisatoriske årsaker). Widgeten trenger et antall attributter som skal fylles ut. det viktigste er ID-en for koblingswidgeten. På grunn av dette kravet er det viktig å oppgi et Navn-attributt for koblingen din (akkurat som med Input_SetPrompt) fordi den ikke lar deg velge en ID i uttrykksredigereren ellers. Du kan også oppgi en tittel og en bredde og en høyde. Hvis du ikke velger bredde eller høyde, bruker den automatisk størrelse. Jeg var ikke 100% fornøyd med automatisk dimensjonering fordi størrelsen er basert på kontrollene, og den tar ikke hensyn til stjernen som ble brukt til å merke obligatoriske felt, så auto-størrelsen har en tendens til å være for liten hvis du har obligatoriske felt. Til slutt oppgir du det navnet på en handling som skal utføres når On Notify-hendelsen blir avfyrt når redaktøren pakker seg opp og ringer Popup_Editor_Notify. Figur E

AccountSettings webskjermbilde og hvor den samhandler med EditUser-skjermen

Alt dette AJAX-arbeidet hadde satt meg i bind: Jeg redigerte informasjon som ble vist til brukeren, men fordi jeg ikke brukte tilbakekoplinger for å gjøre det, ble ikke skjermkopien av informasjonen oppdatert. Det var her ting ble litt vanskeligere, men RichWidgets-samlingen var fremdeles billetten til en fin løsning.

Opprinnelig hadde jeg satt opp bordet mitt for å bli bundet direkte til en spørring som ble kjørt i skjermens forberedelseshandling. Dette var fint og dandy, men det fungerer ikke med AJAX-måten å gjøre ting på. Problemet var at jeg ikke har noen måte å omgjøre forberedelse på nytt. I stedet for å binde tabellen direkte til spørringen, trengte jeg å lage en lokal variabel av typen Record List og deretter bruke Record Editor til å gi den de samme enhetene som spørringen valgte. Deretter bundet jeg tabellens kilde til den variabelen, og deretter gikk jeg inn på Forberedelse og brukte en Tildeling-widget for å angi den variabelen som tilsvarer spørringens utdata. Dette holdt ting sømløst.

Figur F

Brukerredaktøren er i aksjon

For å få tabellen oppdatert da jeg var ferdig med å redigere brukere, lagde jeg en ny handling kalt RefreshUserList. Jeg kopierte spørringen fra Preparation til denne handlingen, samt Tildel til den lokale variabelen. Så la jeg en AjaxRefresh-widget til handlingen, pekte widget-attributtet til tabellen og valgte hvilken spesialeffekt jeg ville at tabellen skulle vise når oppdateringen skjedde. Og jeg var ferdig! En ting jeg oppdaget senere, er at ved å bruke List_LateLoad-widgeten, kunne jeg eliminere spørringen i Preparation, som ville ha fordelen av å gi meg bare ett sted å opprettholde spørringen.

Nå som jeg hadde en AJAX-y tabelloppdatering, bestemte jeg meg for at det ville være en god ide å gå gjennom resten av applikasjonen og gjøre den samme typen makeover. På siden Kontoinnstillinger brukte jeg en popup-redigerer for e-post- og faktureringsadressene og listen over standarddomener til ignorering. Deretter la jeg til Mine brukerinnstillinger som en popup-editor fra Header-blokken. Jeg brukte også tilbakemeldings-widgeten til å gi fine meldinger for å endre passord og noen få andre mindre funksjoner som ikke krevde en fullstendig blåst bekreftelsesside. Jeg evaluerte også et antall tabeller og bestemte meg for å legge til List_LateLoad-widgeten til mange av dem (noe som fører til at innholdet i listen blir lastet inn som en AJAX-hendelse etter at siden er lastet inn i stedet for å bli levert med den første skjermtegningen) samt List_Navigation komponent for å gi rom for AJAX-personsøking / navigering.

Konklusjon

Når jeg fikk taket på å gjøre endringene som trengs for å gå fra postback-metoden til AJAX-metodene, tok det meg mindre enn en time å gjennomgå applikasjonen. I tillegg er jeg nå kjent med mønstrene som trengs for å bruke AJAX i Agile-plattformen.

Jeg ser frem til endringene i versjon 5.1, men selv i gjeldende tilstand er AJAX for lett å bruke, ikke gjør det.

J.Ja

Avsløring av Justin's tilknytning til industrien: Justin James har en kontrakt med Spiceworks for å skrive produktkjøpsguider; han har en kontrakt med OpenAmplify, som eies av Hapax, for å skrive en serie blogger, opplæringsprogrammer og artikler; og han har en kontrakt med OutSystems om å skrive artikler, eksempelskode, etc.

© Copyright 2021 | pepebotifarra.com