At the moment of writing, it’s only Chrome and Opera that natively support Web Components in their entirety.
Well, actually the hosting page should add one more reference if you want your HTML Imports to work in all modern browsers. The only thing it should do to embed the panel is add a reference to the launcher.js file that does the job of creating the constraining div and embedding the launcher’s HTML page inside that div. So, to sum it up - the hosting application has no idea about what’s going on in the launcher panel. When the “X” icon is clicked, the panel collapses via some smooth animation into a “burger” icon which is always rendered in the top right corner to give user quick access to the panel and the applications inside: Imagine it could be anything inside that panel, really - a weather widget, Google Analytics for your site, stock quotes, pictures of cute unicorns - it’s all down to your imagination (but remember - your boss is probably looking over your shoulder, so be careful). This is how it looks when opened directly in the browser: The Launcher panel itselfĪs you can see, the page itself is taking up the entire available height and width when opened directly, but when embedded inside an app it’s constrained by the container div with fixed width which makes it look like a panel. See the panel titled “Demo” on the right-hand side? Well, this is actually a separate HTML page. Pretty fancy, huh? Almost as beautiful as Picasso’s work except here you don’t have to pretend that you like it to look smart. …and when expanded from inside of our Content Studio: Content Studio with expanded Launcher panel I’ll leave out the intriguing details of building the launcher panel itself, but that’s how it ended up looking when expanded inside the main admin dashboard: Main dashboard with expanded Launcher panel Not only that, but it also should have been extremely simple to embed this launcher by simply adding a reference to the application’s entry point. So what we needed was some kind of a launcher, basically a window or a panel that would list all available apps so that user could quickly switch between them. Visual implementationĪdministration module of Enonic XP can host unlimited number of fullscreen applications - internal (created by us here at Enonic) and external (made by customers or members of our community). First off, I’ll briefly talk about the challenge that I was tasked with. We’ll discuss technical details a bit later. The idea is that you use the good old tag to add a reference to the page you want to embed, like this: ”> There are 4 cornerstones to the Web Components, but there’s one I’ve been particularly interested in - HTML Imports. Seriously, Google it because it was them who initially proposed the concept of encapsulating reusable components and they rarely go wrong. I started doing some research and - hallelujah! - stumbled upon the Web Components. Hasn’t anyone come up with a better idea YET, seriously? Vehicles have landed on Mars and I have an AI woman living in my cellphone, yet still we have to use iframes to embed an external HTML page? No way.
So when I faced a challenge that would normally require me to use an iframe, I was very reluctant. With its own and ! Ready to burst out and rip my precious page apart! When my perfect_page.html embedded - via an iframe - another HTML page, I couldn’t help the feeling there was an Alien living inside my document. Of course, I used iframes numerous times in my work but have never been comfortable with the idea. No inheritance for you anytime soon, pal. And yes, this tag was allowed into HTML5 so it will live on for another decade at least. If I were to associate each HTML tag with a person (and I should definitely copyright this idea), iframe would end up being an old great-grandma who has been around since the last century and persistently does a decent job of forgetting your name and falling asleep at random times, so everybody kind of got used to it.