AEM kan du använda en responsiv layout för dina sidor med Layoutbehållare -komponenten.
Detta ger ett styckesystem där du kan placera komponenter i ett responsivt rutnät. Rutnätet kan ändra layouten beroende på enhetens/fönstrets storlek och format. Komponenten används tillsammans med Layout läge, vilket gör att du kan skapa och redigera din responsiva layout beroende på enhet.
Layoutbehållaren:
Tillhandahåller vågrät fäst mot rutnät, tillsammans med möjligheten att placera komponenter i rutnätet sida vid sida och definiera när de ska komprimeras/omformas.
Använder fördefinierade brytpunkter (till exempel för telefon, surfplatta och så vidare) för att du ska kunna definiera önskat beteende för innehåll för relaterade enheter/orientering.
Kan kapslas så att kolumnkontroll tillåts.
Användaren kan sedan se hur innehållet återges för specifika enheter med emulatorn.
Även om Layout Container-komponenten är tillgänglig i det klassiska användargränssnittet är dess fullständiga funktioner bara tillgängliga och stöds i det beröringsaktiverade användargränssnittet.
AEM realiserar responsiv layout för dina sidor med en kombination av mekanismer:
Layoutbehållare komponent
Den här komponenten är tillgänglig i komponentwebbläsare och har ett rutnätsstyckesystem där du kan lägga till och placera komponenter i ett responsivt rutnät. Den kan också anges som standardstyckesystem på sidan.
När layoutbehållaren är placerad på sidan kan du använda Layout läge för att placera innehåll i det responsiva rutnätet.
Emulator
På så sätt kan du skapa och redigera responsiva webbplatser som ändrar layouten beroende på enhetens/fönstrets storlek genom att ändra komponenternas storlek interaktivt. Användaren kan sedan se hur innehållet återges med emulatorn.
Med dessa responsiva rutnätsmekanismer kan du:
Beroende på vilket projekt du arbetar med kan Layoutbehållaren användas som standardstyckesystem för sidorna eller som en komponent som kan läggas till på sidan via komponentwebbläsaren (eller båda).
Adobe tillhandahåller GitHub-dokumentation av den responsiva layouten som en referens som kan ges till gränssnittsutvecklare så att de kan använda det AEM rutnätet utanför AEM, till exempel när de skapar statiska HTML-modeller för en framtida AEM.
Användningen av ovanstående mekanismer aktiveras av mallens konfiguration. Se Konfigurera responsiv layout för ytterligare information.
När du skapar webbplatsinnehåll vill du se till att innehållet visas på rätt sätt för den enhet som används för att visa det.
Med AEM kan du definiera layouter beroende på enhetens bredd:
Med emulatorn kan du emulera dessa layouter på en mängd olika enheter. Förutom enhetstypen är orienteringen vald av Rotera enhet kan påverka den markerade brytpunkten när bredden ändras.
Brytpunkter är de punkter som skiljer layoutdefinitionerna åt.
Enheten Skrivbord, som inte har någon specifik bredd, relaterar till standardbrytpunkten (d.v.s. allt ovanför den senast konfigurerade brytpunkten).
Det skulle vara möjligt att definiera brytpunkter för varje enskild enhet, men detta skulle drastiskt öka den insats som krävs för att definiera och underhålla layout.
När du använder emulatorn väljer du en specifik enhet för emulerings- och layoutdefinition och den relaterade brytpunkten markeras också. Alla layoutändringar du gör gäller för andra enheter som brytpunkten gäller för, det vill säga alla enheter som är placerade till vänster om den aktiva brytpunktsmarkören, men före nästa brytpunktsmarkör.
När du t.ex. väljer enheten iPhone 6 Plus (definierat med en bredd på 540 pixlar) för emulering och layout, brytpunkten Telefon (definierat som 768 pixlar) aktiveras också. Alla layoutändringar du gör för IPHONE 6 kommer att gälla för andra enheter enligt Telefoner brytpunkt, som IPHONE 5 (definierat som 320 pixlar).
Öppna den sida du vill redigera. Till exempel:
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html
Välj Emulator ikonen i det övre verktygsfältet:
Emulatorverktygsfältet öppnas.
Emulatorverktygsfältet innehåller ytterligare layoutalternativ:
Rotera enhet - Du kan rotera en enhet från lodrät (stående) orientering till vågrät (liggande) orientering och tvärtom.
Välj enhet - Definiera en specifik enhet som ska emuleras från en lista (mer information finns i nästa steg)
Om du vill välja en specifik enhet som ska emuleras kan du antingen:
När en viss enhet har valts kan du:
A Layoutbehållare är ett styckesystem som
Om den inte redan är tillgänglig Layoutbehållare måste anges explicit aktiverad för ett styckesystem/en styckesida (till exempel genom att använda Design läge).
Layoutbehållaren är tillgänglig som en standardkomponent i komponentläsaren. Härifrån kan du dra den till önskad plats på sidan och sedan ser du platshållaren Dra komponenter hit.
Du kan sedan lägga till komponenter i layoutbehållaren. De här komponenterna innehåller det faktiska innehållet:
Precis som med andra komponenter kan du markera och sedan vidta åtgärder för (klippa ut, kopiera, ta bort) en layoutbehållare (när de är Redigera läge):
När en layoutbehållare är ett styckesystem tas både layoutstödrastret och alla komponenter (och deras innehåll) som finns i behållaren bort om komponenten tas bort.
Om du för musen över eller trycker på platshållaren för stödrastret visas åtgärdsmenyn.
Du måste välja Överordnad alternativ.
Om layoutkomponenten är kapslad väljer du Överordnad Med det här alternativet visas en listruta där du kan välja den kapslade layoutbehållaren eller dess överordnade behållare.
När du för musen över behållarnamnen i listrutan visas deras konturer på sidan.
Då markeras hela stödrastret med dess innehåll. Åtgärdsverktygsfältet visas, där du kan välja en åtgärd som t.ex. Ta bort.
Du kan definiera en separat layout för varje brytpunkt (enligt emulerad enhetstyp och orientering).
Om du vill konfigurera layouten för ett responsivt rutnät som implementeras med layoutbehållaren måste du använda Layout läge.
Layout kan startas på två sätt.
Genom att använda lägesmenyn i verktygsfältet och välja layoutläget
När redigera en enskild komponent.
I layoutläget kan du utföra olika åtgärder på ett rutnät:
Ändra storlek på innehållskomponenterna med de blå punkterna. Storleksändring fästs alltid mot stödrastret. När du ändrar storlek visas bakgrundsstödrastret som stöd för justering:
Proportionerna och proportionerna bevaras när komponenter som Bilder storleksändras.
Klicka/peka på en innehållskomponent så kan du göra följande i verktygsfältet:
Överordnad
Gör att du kan markera hela layoutbehållarkomponenten för att utföra en åtgärd i sin helhet.
Flyt till ny rad
Komponenten flyttas till en ny rad, beroende på vilket utrymme som är tillgängligt i rutnätet.
Dölj komponent
Komponenten blir osynlig (den kan återställas från verktygsfältet i layoutbehållaren).
I Layout läge där du kan trycka/klicka på Dra komponenter hit om du vill markera hela komponenten. Då visas verktygsfältet för det här läget.
Verktygsfältet har olika alternativ beroende på layoutkomponentens läge och vilka komponenter som hör till det. Till exempel:
Överordnad - Markera den överordnade komponenten.
Visa dolda komponenter - Visa alla eller enskilda komponenter. Siffran visar hur många dolda komponenter det finns för närvarande. Räknaren visar hur många komponenter som är dolda.
Återställ brytpunktslayout - Återgå till standardlayout. Det innebär att ingen anpassad layout kommer att användas.
Flyt till ny rad - Flytta komponenten uppåt en position om avstånd tillåter.
Dölj komponent - Dölj den aktuella komponenten.
I exemplet ovan är åtgärderna float och hide tillgängliga eftersom den här layoutbehållaren är kapslad i en överordnad layoutbehållare.
Visa komponenter
Välj de överordnade komponenterna för att visa åtgärdsverktygsfältet med Visa dolda komponenter alternativ. I det här exemplet är två komponenter dolda.
Om du väljer alternativet Visa dolda komponenter visas de dolda komponenterna i blått i sina ursprungliga positioner.
Markera Återställ alla visar alla dolda komponenter.