I'm experimenting with Polymer. I love how the web components work. Now I want to build a web app. My question is: Should I have a main element (called app-element for example) that hosts all other elements and works as an orchestrator? One big element in the main html document that contains the JS code to handle all other elements? If yes do these elements exist in iron-elements or something? If not then how do I manage the JS code that handles the elements? pure js?
For people that used Angular 1, I remember the "app" controller? that was set to the body tag? This was a global controller to control all directives inside that html document. My question is do I follow a similar pattern with Polymer?
Taylor Savage (Polymer Product Manager) addresses this in the Polymer Summit 2015 opening keynote (the video is timed to kick off exactly where Taylor discusses the topic).
Up to now the Polymer team has viewed Polymer as "legos". You can put them together however you want. E.g. if you want routing, you can wrap your favorite routing library in an element. Polymer is a "swiss army knife" of tools that you use as you need. It's not a framework. It doesn't enforce app-level architecture. It's up to you decide. Which makes it hard on developers to know where to start.
So, here's three options off the top of my head:
Design your own architecture however you see fit
Wait for the "Carbon" elements that are designed to address application architecture (mentioned in the keynote)
Check out the Polymer Starter Kit. You'll see a lot of "container" or "parent" elements (e.g. elements that contain and unite children or "leaf node" elements). The main document is essentially just a declaration of all of these top-level container elements.
Related
I am using Vue & Bootstrap for an app where I generate web components according to the official Vue documentation (https://cli.vuejs.org/guide/build-targets.html#web-component). For the most part Bootstrap and my business logic is working fine within the #shadow-roots of the web components as if it were in the light DOM.
However, Bootstrap tooltips (which are based on Popper.js https://popper.js.org/) are not working within the Shadow DOM at all. I have also tried to invoke tooltips directly with Popper.js and Tippy.js (https://atomiks.github.io/tippyjs/) in the Shadow DOM encapsulated code, sidestepping Bootstrap altogether, and I still cannot get them to work.
See example here: https://jsfiddle.net/mfep6rg9/
I can guess why -- the 3rd party tooltip libraries most likely aren't finding the target DOM element because it's in a Shadow DOM.
Is there a 3rd party solution out there that accounts for Shadow DOM / web component encapsulation?
Your guess is correct. 3party solutions using document. are not querying shadowDOM.
And there probably is no 3rd party solution as a solution requires either
WebComponents to communicate Mouse positions to the outside world.
Host querying shadowDOM (and nested shadowDOMs and nested shadowDOMs)
Not much different from an (even more restricted) IFRAME
I had the same problem while building LitElement-based Web Components and found the following solution:
$(this.shadowRoot.querySelectorAll("[data-toggle='tooltip']")).tooltip();
Make sure to target the respective element's shadowRoot and run a querySelectorAll to listen to all shadowRoot child elements that listen to "data-toggle='tooltip'".
Is it possible to create dynamic templates/pages with TVML without relying on Apple's standard templates?
Say I'd like to create a template that has 2 images next to each other and on top of these images a couple of textfields that I want to position based on some parameters.
Could I create a template/view i UIKit and populate it from JS as an alternative?
How would I go about this?
I think you're talking about a mix of "divTemplate", which exists precisely to let you use whatever layout you want with no predefined structure or placement, and using native code to define your own custom TVML elements.
From Apple's documentation, "There is no built-in layout for the contained elements. Use the style properties listed in TVML Styles to personalize the elements placed inside of the div template." It's for completely free-form by-hand element layout.
As for the other path: the way to add a UIKit view to TVML is by defining a custom element. That's how the TVML system knows where your custom view is supposed to go within the TVML "page". If you go down that path, you'll want to read up on TVMLKit, not just TVML and TVJS. You make a class that conforms to the TVInterfaceCreating protocol, potentially create a subclass of TVViewElement (if one of the existing classes isn't enough for your needs), register the element with [TVElementFactory registerViewElementClass: [MyTVViewElement class] forElementName:#"mycustomelement" ], and register your TVInterfaceCreating class with [[TVInterfaceFactory sharedInterfaceFactory] setExtendedInterfaceCreator: myInterfaceCreator].
So the way I see it, you could use a divTemplate and a ton of carefully crafted style info to do it entirely without any custom code or UIView objects, or you could make one or a small number of custom elements for the part you're talking about. I do not know if you can make a new "template" that is itself a custom element, however -- that's something I haven't tried yet.
If you decide to go down the native code path and you find that the TVViewElement-related APIs aren't rich enough for the coordination you want between JavaScript and your custom view, you may also need to read up on the JavaScriptCore APIs. Those let you expose arbitrary native-backed functionality via JavaScript, via the APIs on JSContext. In a TVML app, a good place to hook into all this is by implementing the - appController:(TVAppController *) evaluateAppJavaScriptInContext:(JSContext *) method from the TVApplicationControllerDelegate protocol.
I've been hearing about Shadow DOM recently. While watching a video about the release of Angular 2 the presenter repeatedly made mention of Shadow DOM without clear expressions. What does Shadow DOM really mean?
The best explanation I've found is this from What the Heck is Shadow DOM? shown below:
Shadow DOM refers to the ability of the browser to include a subtree
of DOM elements into the rendering of a document, but not into the
main document DOM tree.
An important use case would be with video controls on a web page. The markup only shows a video tag, with some attributes and source tags. The addtional code for all the video operations to work is hidden in the Shadow DOM and not available to the rest of the page. The actual markup, javascript, and styles for the tag are encapsulated, which hides the implementation details of the video controls that each browser vendor has already written.
So while it's there in the DOM, its hidden from the page that renders it. So, to view the Shadow DOM, you can enable it under Dev Tools in Chrome.
The short answer is that the Shadow DOM is one of four technologies that make up Web Components.
For a definition, Web Components are: A component platform from the W3C that allows Web sites to be constructed from standardized building blocks. Web Components comprise Custom Elements, Shadow DOM and HTML Imports and Templates.
Shadow DOM is a technology of Web Components (although each can be used separately):
Custom Elements: is a capability for creating your own custom HTML tags and elements. They can have their own scripted behavior and CSS styling. They are part of Web Components but they can also be used by themselves.
HTML Templates: The HTML template element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document.
Shadow DOM: provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.
HTML Imports: is intended to be the packaging mechanism for Web Components, but you can also use HTML Imports by itself. You import an HTML file by using a tag in an HTML document.
See Introduction to the Shadow DOM.
It refers to the ability to create a "child" DOM completely sandboxed from the rest of the page. Useful for web components, reusable "widgets" which allow to not worry about their css/js affecting things they shouldn't. http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
Check out https://www.polymer-project.org/ if you want to see it in action.
Think of shadow DOM is as an encapsulated (private) DOM.
You can't access the shadow DOM in the manner you access regular DOM, like 'document.querySelector()'.
Let's say, you defined a reusable custom element, (which contains its DOM trees). Then you use the custom element within your app HTML.
Now, the DOM under (which is now called a "host element") has become a shadow DOM subtrees (under a shadow root), hidden from the parent structure!
I hope this help you a bit.
First of all I warn you i am new in HTML development...
I am creating a website using Bootstrap. I have some buttons on the left as you can see in the screenshot and I want to content on the right to change without having to load the whole page.
Any help here? Thanks a lot!
You'll need to use JavaScript, which is the standard programming language that ships with all modern web browsers. In JavaScript, there is an API called the DOM (Document Object Model) which represents the current page as an object. You can use that API to change the text contained in the div tag.
Here is the W3Schools page on the DOM.
There are a few JavaScript libraries that try to abstract and simplify DOM manipulation. The most famous is jQuery.
You can try using AngularJS or any MVC framework/library. These might be a little heavy-handed for something simple, but they'll help achieve what you're looking for. Pretty good to learn these anyway as they're in high demand.
Here's AngularJS's homepage with docs and tutorials. You'd want to look at information on routing view templates using the ngView module, or you can use ui-router, created by Angular's UI team (my personal favorite) for nested views.
PS: Stay away from W3Schools
http://www.w3fools.com/
How can I test extjs application when there are pregerated ids for components or compoent parts like in a grid.
I can add ids to each component but what if I miss one or more, and the application is big and complex?
Is there a function or some module in ExtJS/Siesta which allows you to locate components/elements in the application without beign dependent on predefined ids for each component
First of all be very careful using IDs on the components. I have seen my fair share of problems with them.
Second, ExtJS provides several ways of targeting Components and Elements. Don't mix the two.
For Components:
Ext.getCmp(id)
Ext.ComponentQuery.query()
up()
down()
nextSibling()
previousSibling()
child()
previousNode()
plus various find.. methods
For Elements:
Ext.get()
Ext.dom.Query()
more on DOM Query http://docs.sencha.com/core/manual/content/domquery.html
With Siesta you have loads of options when targeting a place to click etc:
Dom node id (same as Ext Component id)
Any component query
Any CSS query
A coordinate
Real Ext Component JS instance
Real DOM node instance
Composite Query (combination of Component Query and CSS query, '.x-grid => .x-grid-cell'
A function, returning any of the above.
More info in my slides here: https://speakerdeck.com/mats/testing-sencha-touch
You may want to look at the automated functional GUI testing tool RIATest.
RIATest knows how to ignore ids dynamically generated by ExtJS, yet if you manually assign ids to the components the tool will use them for identification (see e.g. #tree2 in the sample below).
The tests in RIATest operate in terms of ExtJS UI widgets.
Examples of RIATest scripts that work with ExtJS widgets:
The following clicks on an ExtJS button with label "Next Page":
ExtButton("Next Page")=>click();
And the following does drag-n-drop of a row from one ExtJS tree to another:
ExtRow("Controller.js")=>dragAndDropTo(
ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));
And this collapses the header of an ExtJS box:
ExtBox("Feeds")->ExtHeader("FeedsВ")->ExtCollapser()=>click();
(All sample code above is from real test scripts that run on ExtJS sample applications).
(Disclaimer: I am a RIATest team member).