Arkitektur för HTML5-formulär architecture-of-html-forms

Arkitektur architecture

HTML 5-formulärsfunktionen distribueras som ett paket i den inbäddade AEM och visas som en REST-slutpunkt över HTTP/S med RESTful Apache Sling Architecture.

02-aem-forms-architecture_large

Använda Sling Framework using-sling-framework

Apache Sling är resurscentrerad. Den använder en begärande URL för att först matcha resursen. Varje resurs har en sling:resourceType (eller sling:resourceSuperType). Baserat på den här egenskapen, förfrågningsmetoden och egenskaperna för begärande-URL:en, väljs sedan ett sling-skript för att hantera begäran. Det här snedstrecksskriptet kan vara en JSP eller en servlet. För HTML5-formulär Profil fungerar som säljresurser och Profilåtergivning fungerar som ett snedstreck som hanterar begäran om att återge mobilformuläret med en viss profil. A Profilåtergivning är en JSP som läser parametrar från en begäran och anropar Forms OSGi Service.

Mer information om REST-slutpunkten och parametrar för begäran som stöds finns i Återger formulärmall.

När en användare gör en begäran från en klientenhet som webbläsaren iOS eller Android™, löser Sling först profilnoden baserat på den begärda URL:en. Från den här profilnoden läses sling:resourceSuperType och sling:resourceType för att fastställa alla tillgängliga skript som kan hantera den här formuläråtergivningsbegäran. Sedan används väljare för Sling-begäran tillsammans med begärandemetoden för att identifiera det skript som lämpar sig bäst för att hantera denna begäran. När begäran når en profilåtergivnings-JSP anropar JSP:n Forms OSGi-tjänsten.

Mer information om SLING-skriptupplösningen finns i AEM Sling Cheat Sheet eller Apache Sling Url-nedbrytning.

Vanligt anropsflöde för formulärbearbetning typical-form-processing-call-flow

HTML5-formulär cache-lagrar alla mellanliggande objekt som krävs för att bearbeta (återge eller skicka) ett formulär vid den första begäran. Objekten som är beroende av data cachelagras inte eftersom sådana objekt troligtvis ändras.

Mobilformulär upprätthåller två olika cachenivåer, PreRender-cache och Render Cache. Cacheminnet för preRender innehåller alla fragment och bilder i en löst mall och Render-cachen innehåller återgivet innehåll som HTML.

HTML5-formulärarbetsflöde

HTML5-formulärarbetsflöde

HTML5-formulär cache-lagrar inte mallar som saknar referenser till fragment och bilder. Om HTML5-formulär tar längre tid än normalt kontrollerar du om det finns referenser och varningar som saknas i serverloggarna. Se även till att objektets maximala storlek inte nås.

Forms OSGi-tjänsten bearbetar en begäran i två steg:

  • Skapa layout och ursprungligt formulärtillstånd: Forms OSGi-renderingstjänsten anropar Forms Cache-komponenten för att avgöra om formuläret redan har cache-lagrats och inte har ogiltigförklarats. Om formuläret är cache-lagrat och giltigt, skickas det genererade HTML från cachen. Om formuläret blir ogiltigt genererar Forms OSGi-renderingstjänsten den första formulärlayouten och formulärläget i XML-format. Denna XML omvandlas till HTML layout och inledande JSON-formulärtillstånd av tjänsten Forms OSGi och cachas sedan för efterföljande förfrågningar.
  • Förifylld Forms: Vid återgivning och om en användare begär formulär med förifyllda data, anropar Forms OSGi-renderingstjänsten Forms tjänstbehållare och genererar ett nytt formulärtillstånd med sammanfogade data. Eftersom layouten redan genereras i ovanstående steg är anropet snabbare än det första anropet. Detta anrop utför bara datasammanfogningen och kör skripten på data.

Om det finns någon uppdatering i formuläret eller något av resurserna som används i formuläret, upptäcks den av formulärets cachekomponent och cachen för det aktuella formuläret ogiltigförklaras. När Forms OSGi-tjänsten har slutfört bearbetningen lägger Profile Renderer jsp till JavaScript-biblioteksreferenser och format i det här formuläret och returnerar svaret till klienten. En vanlig webbserver som Apache kan användas här med HTML-komprimering aktiverat. En webbserver skulle minska svarsstorleken, nätverkstrafiken och den tid som krävs för att strömma data mellan servern och klientdatorn avsevärt.

När en användare skickar formuläret skickar webbläsaren formulärets status i JSON-format till skicka tjänstproxy; skickar tjänstproxyn data-XML med JSON-data och skickar XML-data till slutpunkten.

Komponenter components

Du behöver AEM Forms tilläggspaket för att kunna aktivera HTML5-formulär. Mer information om hur du installerar AEM Forms tilläggspaket finns i Installera och konfigurera AEM Forms.

OSGi Components (adobe-lc-forms-core.jar) osgi-components-adobe-lc-forms-core-jar

Adobe XFA Forms Renderer (com.adobe.livecycle.adobe-lc-forms-core) är visningsnamnet för HTML 5-formulären OSGi-paketet när det visas från Bundle View i Felix Admin Console (https://[värd]:[port]/system/console/bundles).

Den här komponenten innehåller OSGi-komponenter för rendering, cachehantering och konfigurationsinställningar.

Forms OSGi Service forms-osgi-service

Denna OSGi-tjänst innehåller logik för att återge en XDP som HTML och hanterar överföringen av ett formulär för att generera data-XML. Den här tjänsten använder Forms tjänstbehållare. Forms servicebehållare anropar intern komponent XMLFormService.exe som utför bearbetningen.

Om en återgivningsbegäran tas emot anropar den här komponenten Forms tjänstbehållare för att generera layout- och lägesinformation som bearbetas ytterligare för att generera DOM-tillstånd för HTML och JSON.

Den här komponenten ansvarar också för att generera data-XML från det inskickade formulärtillståndet JSON.

Cachekomponent cache-component

HTML5-formulär använder cachelagring för att optimera dataflödet och svarstiden. Du kan konfigurera cachetjänstens nivå för att finjustera avvägningen mellan prestanda och utrymmesanvändning.

Cachestrategi
Beskrivning
Ingen
Cachelagra inte artefakter
Konservativ
Cachelagra endast mellanliggande artefakter som genereras före återgivningen av formuläret, som en mall som innehåller textbundna fragment och bilder
Aggressiv
Cachelagra återgivet HTML-innehåll
Cachelagra alla artefakter som cachelagrats på den konservativa nivån.
Anteckning: Den här strategin ger bästa prestanda men kräver mer minne för att lagra cachelagrade artefakter.

HTML5-formulär utför cachelagring i minnet med LRU-strategi. Om cachestrategin är inställd på Ingen skapas ingen cache och befintliga cachedata rensas, om det finns några. Förutom cachelagringsstrategin kan du även konfigurera den totala cachestorleken i minnet, vilket kan bidra till att få den maximala gränsen för cachestorleken och om den går längre kommer LRU-läget att frigöra cacheresurser.

NOTE
Cacheminnet i minnet delas inte mellan klusternoder.

Konfigurationstjänst configuration-service

Med konfigurationstjänsten kan du justera konfigurationsparametrar och cacheinställningar för HTML5-formulär.

Om du vill uppdatera inställningarna går du till CQ Felix Admin Console (finns på https://<'[server]:[port]'/system/console/configMgr), sök efter och välj Mobile Forms Configuration.

Du kan konfigurera cachestorleken eller inaktivera cacheminnet med hjälp av konfigurationstjänsten. Du kan även aktivera felsökning med parametern Felsökningsalternativ. Mer information om felsökning av formulär finns på Felsöka HTML5-formulär.

Körningskomponenter (adobe-lc-forms-runtime-pkg.zip) runtime-components-adobe-lc-forms-runtime-pkg-zip

Körningspaketet innehåller de klientbibliotek som används för att återge HTML-formulär.

Viktiga komponenter som är tillgängliga som en del av körtidspaketet:

Skriptmotor scripting-engine

Adobe XFA-implementeringen stöder två typer av skriptspråk för att möjliggöra användardefinierad logikkörning i formulär: JavaScript och FormCalc.

Skriptmotorn i HTML Forms är skriven i JavaScript som stöder XFA-skriptprogrammeringsgränssnittet på båda dessa språk.

Vid återgivning översätts (och cachelagras) FormCalc-skriptet till JavaScript på servern som är genomskinligt för användaren eller designern.

Den här skriptmotorn använder en del av funktionen i ECMAScript5 som Object.defineProperty. Motorn/biblioteket levereras som CQ-klientbibliotek med kategorinamnet xfaforms.profile. Den innehåller även FormBridge API om du vill att externa portaler eller appar ska kunna interagera med formuläret. Med FormBridge kan ett externt program programmässigt dölja vissa element, hämta eller ange deras värden eller ändra deras attribut.

Mer information finns i Form Bridge artikel.

Layoutmotor layout-engine

Layouten och den visuella aspekten av HTML5-formulären baseras på SVG 1.1-, jQuery-, BackBone- och CSS3-funktioner. Det ursprungliga utseendet för ett formulär genereras och cachelagras på servern. Den inledande layouten och eventuella ytterligare ändringar av formulärlayouten hanteras på klienten. För att uppnå detta innehåller körtidspaketet en layoutmotor som är skriven i JavaScript och baserad på jQuery/Backbone. Den här motorn hanterar allt dynamiskt beteende, som Lägg till/ta bort repeterbara instanser och Utbyggbar objektlayout. Den här layoutmotorn återger ett formulär en sida i taget. Inledningsvis visar en användare bara en sida och den vågräta rullningslisten bara första sidan. När en användare rullar nedåt börjar dock nästa sida återgivningen. Den här återgivningen sida för sida minskar den tid som krävs för att återge den första sidan i en webbläsare och förbättrar formulärets upplevda prestanda. Motorn/biblioteket är en del av CQ-klientbiblioteket med kategorinamnet xfaforms.profile.

Layoutmotorn innehåller också en uppsättning widgetar som används för att hämta värdet för formulärfält från en användare. Dessa widgetar är modellerade som Gränssnittswidgetar för jQuery som implementerar vissa ytterligare kontrakt som fungerar smidigt med Layout Engine.

Mer information om widgetar och motsvarande kontrakt finns i Anpassade widgetar för HTML5-formulär.

Stilar styling

Det format som är associerat med elementen i HTML läggs till antingen textbundet eller baserat på det inbäddade CSS-blocket. Vissa vanliga format som inte är beroende av formulär är en del av CQ Client Lib med kategorinamnet xfaforms.profile.

Förutom standardegenskaper för format innehåller varje formulärelement även vissa CSS-klasser baserade på elementtyp, namn och andra egenskaper. Med hjälp av dessa klasser kan du omformatera element genom att ange deras egen CSS.

Mer information om standardformat och klasser finns i Introduktion till format.

Serverskript och webbtjänster server-side-script-and-web-services

Skript som har markerats för att köras på servern eller som har markerats för att anropa en webbtjänst (oavsett var den har markerats för att köras) körs alltid på servern.

Klientskriptmotorn:

  1. Gör ett synkront anrop till servern som skickar det aktuella formulärtillståndet i form av JSON
  2. Kör skriptet eller webbtjänsten på servern
  3. Skapar ett nytt JSON-läge
  4. Sammanfogar det nya JSON-läget på klienten när svaret returneras.

Resurspaket för lokalisering localization-resource-bundles

HTML 5-formulär har stöd för italienska (it), spanska (es), brasiliansk portugisiska (pt_BR), förenklad kinesiska (zh_CN), traditionell kinesiska (endast begränsat stöd) (zh_TW), koreanska (ko_KR), engelska (en_US), franska (fr_FR), tyska (de_DE) och japanska (ja). Beroende på vilket språkområde som tas emot i begärandehuvudet skickas motsvarande resurspaket till klienten. Det här resurspaketet läggs till i profil-JSP som ett CQ-klientbibliotek med kategorinamn xfaforms.I18N. Du kan åsidosätta logiken för att hämta språkpaketet i profilen.

Sling Components (adobe-lc-forms-content-pkg.zip) sling-components-adobe-lc-forms-content-pkg-zip

Sling-paketet innehåller innehåll som är relaterat till profiler och profilåtergivning.

Profiler profiles

Profiler är resursnoder som representerar ett formulär eller Forms-familjen. På CQ-nivå är dessa profiler JCR-noder. Noderna finns under /content -mappen i JCR-databasen och kan finnas i alla undermappar under /content mapp.

Profilåtergivare profile-renderers

Profilnoden har en egenskap sling:resourceSuperType med värde xfaforms/profile. Den här egenskapen skickar begäranden internt till snedställningsskriptet för profilnoder i /libs/xfaforms/profile mapp. Dessa skript är JSP-sidor, som är behållare för att sätta ihop HTML-formulären och obligatoriska JS/CSS-artefakter. Sidorna innehåller referenser till:

  • xfaforms.I18N.<locale>: Detta bibliotek innehåller lokaliserade data.
  • xfaforms.profile: Det här biblioteket innehåller implementering för XFA Scripting and Layout Engine.

Dessa bibliotek är modellerade som CQ Client Libraries, som utnyttjar automatisk sammanfogning, miniatyrbildnings- och komprimeringsfunktioner i JavaScript-bibliotek för CQ-ramverket.
Mer information om CQ Client Libs finns på CQ Clientlib-dokumentation.

Så som beskrivs ovan anropar profilåtergivaren JSP Forms Service via en sling include. Denna JSP anger också olika felsökningsalternativ baserat på administratörskonfigurationen eller frågeparametrarna.

Med HTML5-formulär kan utvecklare skapa profil- och profilåtergivning för att anpassa formulärens utseende. Med HTML-formulär kan utvecklare till exempel integrera formulär på en panel eller <div> i en befintlig HTML-portal.
Mer information om hur du skapar anpassade profiler finns i Skapa en anpassad profil.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2