DOCSLIB.ORG

Preview Polymer Tutorial (PDF Version)

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Preview Polymer Tutorial (PDF Version) Polymer About the Tutorial Polymer.js is a JavaScript library created by Google that allows reusing the HTML elements for building applications with components. This tutorial covers most of the topics required for a basic understanding of Polymer.js and to get a feel of how it works. Audience This tutorial is designed for software programmers who want to learn the basics of Polymer.js and its programming concepts in a simple and easy way. This tutorial will give you enough understanding on the components of Polymer.js with suitable examples. Prerequisites Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Document Object Model (DOM) and any text editor. As we are going to develop web-based application using Polymer.js, it will be good the readers have understanding on how internet and web-based applications work. Copyright & Disclaimer Copyright 2017 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected] i Polymer Table of Contents About the Tutorial .................................................................................................................................... i Audience .................................................................................................................................................. i Prerequisites ............................................................................................................................................ i Copyright & Disclaimer ............................................................................................................................. i Table of Contents .................................................................................................................................... ii 1. POLYMER ─ OVERVIEW ........................................................................................................ 1 2. POLYMER ─ INSTALLATION .................................................................................................. 2 Installing Polymer Using Polymer CLI ...................................................................................................... 2 Installing Polymer Using Bower ............................................................................................................... 3 Building for Deployment ......................................................................................................................... 4 3. POLYMER ─ ELEMENTS ........................................................................................................ 5 App Elements .......................................................................................................................................... 6 Polymer - App Layout .............................................................................................................................. 6 Polymer - App Route ............................................................................................................................. 12 Iron Elements ........................................................................................................................................ 14 Iron A11y Keys ...................................................................................................................................... 15 Iron Ajax ................................................................................................................................................ 18 Iron Collapse ......................................................................................................................................... 20 Iron Image ............................................................................................................................................. 24 Iron Dropdown ...................................................................................................................................... 29 Iron Flex Layout ..................................................................................................................................... 32 Iron Form .............................................................................................................................................. 34 Iron Icon ................................................................................................................................................ 39 ii Polymer Iron Swipeable Container ...................................................................................................................... 42 Paper Elements ..................................................................................................................................... 45 Paper Badge .......................................................................................................................................... 47 Paper Button ......................................................................................................................................... 51 Paper Card ............................................................................................................................................ 55 Paper Checkbox..................................................................................................................................... 59 Paper Drawer Panel .............................................................................................................................. 62 Paper Dropdown Menu ......................................................................................................................... 68 Paper Fab .............................................................................................................................................. 70 Paper Icon Button ................................................................................................................................. 74 Paper Input ........................................................................................................................................... 77 Paper Listbox......................................................................................................................................... 80 Paper Material ...................................................................................................................................... 83 Paper Progress ...................................................................................................................................... 89 Paper Radio Button ............................................................................................................................... 93 Paper Ripple .......................................................................................................................................... 95 Paper Slider ........................................................................................................................................... 99 Paper Spinner ...................................................................................................................................... 101 Paper Tabs .......................................................................................................................................... 104 Paper Toast ......................................................................................................................................... 107 Paper Toggle Button ............................................................................................................................ 111 Google Web Components.................................................................................................................... 114 Google Analytics Query ....................................................................................................................... 115 Google Client Loader ........................................................................................................................... 120 Google Chart ....................................................................................................................................... 122 Google Hangout Button ....................................................................................................................... 125 iii Polymer Google Map......................................................................................................................................... 128 Google Signin ...................................................................................................................................... 132 Google Streetview Pano ...................................................................................................................... 133 Google Youtube .................................................................................................................................
Load more

Recommended publications
  • PDF-LATEX 2Ε Abstract
    Universität Ulm | 89069 Ulm | Germany Faculty of Engineering, Computer Science and Psychology Databases and Information Systems Department Evaluating State-of-the-Art Web Component Frameworks Bachelor’s thesisat Universität Ulm Submitted by: Stefan Engelmayer [email protected] Reviewer: Prof. Dr. Manfred Reichert Supervisor: Dr. Johannes Schobel 2019 Version from May 29, 2019 c 2019 Stefan Engelmayer This work is licensed under the Creative Commons. Attribution-NonCommercial-ShareAlike 3.0 License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/de/ or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA. Composition: PDF-LATEX 2ε Abstract Websites are getting more complex over the years because it is not just used to display information, but to use some applications. One challenge is to maintain these services and keep them up to date. To reuse existing code, Web Components are introduced to outsource complex structures as an HTML element including its functionality. Therefore, some frameworks available which help to create Web Components by providing some useful tools and make the development process easier for developers. Because there are numerous different frameworks available for the development, it is not easy to find the right one for the own project. Because the standards are changing fast in computer science, the development process should always be State-of-the-Art. The aim of this thesis is to give a brief overview over Web Component frameworks and find out which framework is a good choice for given use cases. First some frameworks are introduced.
    [Show full text]
  • Detecting and Exploiting Misexposed Components of Android Applications
    POLITECNICO DI TORINO Corso di Laurea in Ingegneria Informatica Tesi di Laurea Magistrale Detecting and exploiting misexposed components of Android applications Relatori prof. Antonio Lioy prof. Ugo Buy Francesco Pinci December 2018 To my parents, my sister, and my relatives, who have been my supporters throughout my entire journey, always believing in me, and providing me with continous encouragement. This accomplishment would not have been possible without them. Thank you. Summary Smartphones and tablets have become an essential element in our everyday lives. Everyone use these devices to send messages, make phone calls, make payments, manage appointments and surf the web. All these use cases imply that they have access to and collect user sensitive information at every moment. This has attracted the attention of attackers, who started targetting them. The attraction is demon- strated by the continuous increase in the sophistication and number of malware that has mobile devices as the target [1][2]. The Android project is an open-source software which can be downloaded and studied by anyone. Its openness has allowed, during the years, an intensive in- spection and testing by developers and researches. This led Google to constantly updating its product with new functionalities as well as with bug fixes. Various types of attacks have targetted the Android software but all of them have been mitigated with the introduction of new security mechanisms and extra prevention methods. Starting from September 2018, 16 major versions of the OS have been realized, reducing incredibly the attack surface exposed by the system. The application ecosystem developed by the Android project is a key factor for the incredible popularity of the mobile devices manufactured and sold with the OS.
    [Show full text]
  • Google AMP and What It Can Do for Mobile Applications in Terms of Rendering Speed and User-Experience
    URI: urn:nbn:se:bth-17952 Google AMP and what it can do for mobile applications in terms of rendering speed and user-experience Niklas Andersson Oscar B¨ack June 3, 2019 Faculty of Computing Blekinge Institute of Technology SE-371 79 Karlskrona Sweden This thesis is submitted to the Faculty of Computing at Blekinge Institute of Technology in partial fulfillment of the requirements for the bachelor degree in Software Engineering. The thesis is equivalent to 10 weeks of full time studies. The authors declare that they are the sole authors of this thesis and that they have not used any sources other than those listed in the bibliography and identi- fied as references. They further declare that they have not submitted this thesis at any other institution to obtain a degree. Contact Information: Authors: Niklas Andersson [email protected] Oscar B¨ack [email protected] External Advisor: Simon Nord, Prisjakt [email protected] University Advisor: Michel Nass [email protected] Faculty of Computing Internet: www.bth.se Blekinge Institute of Technology Phone: +46 455 38 50 00 SE-371 79 Karlskrona, Sweden Fax: +46 455 38 50 57 1 1 Abstract On today’s web, a web page needs to load fast and have a great user experience in order to be successful. The faster the better. A server side rendered web page can have a prominent initial load speed while a client side rendered web page will have a great interactive user experience. When combining the two, some users with a bad internet connection or a slow device could receive a poor user experience.
    [Show full text]
  • Web Components in Action MEAP
    MEAP Edition Manning Early Access Program Web Components in Action Version 2 Copyright 2018 Manning Publications For more information on this and other Manning titles go to www.manning.com ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. https://forums.manning.com/forums/web-components-in-action welcome Thank you very much for purchasing the MEAP for Web Components in Action. I’ve been speaking and blogging for over a decade now, and the common thread throughout has been that there hasn’t really been a common thread. I get excited about new technologies and techniques, but ultimately move to the next new thing. Web Components have been a bit different for me. I spoke at a few conferences and wrote some blog posts about them, and I did move on to other new and exciting things, but the difference here is that I never stopped building with Web Components. They’ve been a staple of my web development workflow for four years now. Like many web developers, I too have cycled through many frameworks and libraries that help with application development. Most we really good! It’s easy to laugh at a three or four year old framework years later, but it’s been very interesting to see how we as web developers progress as we try to make better and better applications with better and better tools. I’ve also been fortunate enough to use many other programming languages and platforms as well.
    [Show full text]
  • Realizing Elastic Design Principles for User Exploration in Bayesian Analysis
    Realizing Elastic Design Principles for User Exploration in Bayesian Analysis Master’s Thesis submitted to the Media Computing Group Prof. Dr. Jan Borchers Computer Science Department RWTH Aachen University by Devashish Jasani Thesis advisor: Prof. Dr. Jan Borchers Second examiner: Dr. Matthias Kaiser, SAP SE Registration date: 01.07.2016 Submission date: 13.02.2017 Eidesstattliche Versicherung ___________________________ ___________________________ Name, Vorname Matrikelnummer Ich versichere hiermit an Eides Statt, dass ich die vorliegende Arbeit/Bachelorarbeit/ Masterarbeit* mit dem Titel __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ selbständig und ohne unzulässige fremde Hilfe erbracht habe. Ich habe keine anderen als die angegebenen Quellen und Hilfsmittel benutzt. Für den Fall, dass die Arbeit zusätzlich auf einem Datenträger eingereicht wird, erkläre ich, dass die schriftliche und die elektronische Form vollständig übereinstimmen. Die Arbeit hat in gleicher oder ähnlicher Form noch keiner Prüfungsbehörde vorgelegen. ___________________________ ___________________________ Ort, Datum Unterschrift *Nichtzutreffendes bitte streichen Belehrung: § 156 StGB: Falsche Versicherung an Eides Statt Wer vor einer zur Abnahme einer Versicherung an Eides Statt zuständigen Behörde eine solche Versicherung falsch abgibt oder unter Berufung auf eine solche Versicherung
    [Show full text]
  • Web Components the Lego Bricks of Web Developers
    Web Components The Lego bricks of web developers Aaron Czichon • Aaron Czichon • Head of Software Development • NodeJS & Web Components The basic problem of HTML elements Building a login form… <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dev Days Europe 2019</title> <meta name="description" content="Example for Web Components"> <meta name="author" content="Aaron Czichon"> <link rel="stylesheet" href="./assets/edel-elements.css"> </head> <body> <!-- CONTENT HERE --> </body> </html> <div class="login-card card"> <div class="card-meta"> <h3>Login</h3> <p>Please login first</p> </div> <div class="login-card-form"> <div class="form form--grid"> <div class="form-item"> <label>Username or email</label> <input placeholder="Username or email" type="text"> </div> <div class="form-item"> <label>Password</label> <input placeholder="Super Secret Password" type="password"> </div> <div class="form-item"> <button type=“submit“ class="button button--primary">Login</button> </div> </div </div> </div> Want using it in multiple applications? Multiple Framework Options • Mostly only usable inside the framework Downsides • (Angular has export options for web components) • Sometimes a lot of overhead which is not needed Web Components! „Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags“ Source: webcomponents.org Custom Elements HTML Imports Shadow DOM HTML Template Web Platform APIs Web Component Custom Elements HTML Imports Shadow DOM HTML Template Web Platform APIs
    [Show full text]
  • Liquid Web Applications
    Liquid Web Applications Design and Implementation of the Decentralized Cross-Device Web Doctoral Dissertation submitted to the Faculty of Informatics of the Università della Svizzera Italiana in partial fulfillment of the requirements for the degree of Doctor of Philosophy presented by Andrea Gallidabino under the supervision of Prof. Cesare Pautasso June 2020 Dissertation Committee Prof. Maristella Matera Politecnico di Milano, Italy Prof. Tommi Mikkonen University of Helsinki, Finland Prof. Marc Langheinrich Università della Svizzera italiana, Lugano, Switzerland Prof. Michele Lanza Università della Svizzera italiana, Lugano, Switzerland Dissertation accepted on 25 June 2020 Research Advisor PhD Program Director Prof. Cesare Pautasso Prof. Dr. Walter Binder, Prof. Dr. Silvia Santini i I certify that except where due acknowledgement has been given, the work presented in this thesis is that of the author alone; the work has not been submit- ted previously, in whole or in part, to qualify for any other academic award; and the content of the thesis is the result of work which has been carried out since the official commencement date of the approved research program. Andrea Gallidabino Lugano, 25 June 2020 ii Learn this lesson, that to be self-contented is to be vile and ignorant, and to aspire is better than to be blindly and impotently happy. Edwin A. Abbott iii iv Abstract Web applications are traditionally designed having in mind a server-centric ar- chitecture, whereby the whole persistent data, dynamic state and logic of the application are stored and running on a Web server. The clients running in the Web browsers traditionally render only pre-computed views fetched from the server.
    [Show full text]
  • Google Javascript
    SED 698 Transcript EPISODE 698 [INTRODUCTION] [00:00:00] JM: Google Search is a highly interactive JavaScript application. As you enter a query, results are being automatically suggested to you before you even finish typing. When you press enter, some of your search results may be widgets that represent the weather, or the price of a stock, or a recipe for green bean soup, or a language translation for praise. These complex frontend components are loading dynamically. The Google search application is not pre-fetching every single possible widget that you might ask for. It's not prefetching the weather widget, and the price of a stock widget, and the currency conversion widget. All of these things are a little bit expensive and they would slow down the page of Google were to pre-fetch the JavaScript for all of these different components, but the results do load very quickly. If you search for a currency conversion, Google loads the results of that currency conversion widget quite quickly. So you know that Google is doing some advanced JavaScript engineering to deliver you the code for that currency conversion widget very quickly, and Google has many other examples of advanced JavaScript programming. The company is mostly known for backend engineering inventions like MapReduce, and TensorFlow, and Dremel, and Spanner, and to turn these backend tools into user-facing products, Google develops its own JavaScript frameworks and infrastructure to deliver information from the backend to the frontend. Backend and frontend are terms that are not very precise. A backend is a backend only relative to a frontend, and at Google there are so many layers of infrastructure between a user and the data center, that if you're an engineer working on a service at Google, you probably have several frontends on one side of you and several backends on either side of you.
    [Show full text]
  • Building the Polargrid Portal Using Web 2.0 and Opensocial
    Building the PolarGrid Portal Using Web 2.0 and OpenSocial Zhenhua Guo, Raminderjeet Singh, Marlon Pierce Community Grids Laboratory, Pervasive Technology Institute Indiana University, Bloomington 2719 East 10th Street, Bloomington, Indiana 47408 {zhguo, ramifnu, marpierc}@indiana.edu ABSTRACT service gateway are still useful, it is time to revisit some of the Science requires collaboration. In this paper, we investigate the software and standards used to actually build gateways. Two feasibility of coupling current social networking techniques to important candidates are the Google Gadget component model science gateways to provide a scientific collaboration model. We and the REST service development style for building gateways. are particularly interested in the integration of local and third Gadgets are attractive for three reasons. First, they are much party services, since we believe the latter provide more long-term easier to write than portlets and are to some degree framework- sustainability than gateway-provided service instances alone. Our agnostic. Second, they can be integrated into both iGoogle prototype use case for this study is the PolarGrid portal, in which (Google’s Start Page portal) and user-developed containers. we combine typical science portal functionality with widely used Finally, gadgets are actually a subset of the OpenSocial collaboration tools. Our goal is to determine the feasibility of specification [5], which enables developers to provide social rapidly developing a collaborative science gateway that networking capabilities. Standardization is useful but more incorporates third-party collaborative services with more typical importantly one can plug directly into pre-existing social networks science gateway capabilities. We specifically investigate Google with millions of users without trying to establish a new network Gadget, OpenSocial, and related standards.
    [Show full text]
  • On the Security of Single Sign-On
    On the Security of Single Sign-On Vladislav Mladenov (Place of birth: Pleven/Bulgaria) [email protected] 30th June 2017 Ruhr-University Bochum Horst G¨ortz Institute for IT-Security Chair for Network and Data Security Dissertation zur Erlangung des Grades eines Doktor-Ingenieurs der Fakult¨atf¨urElektrotechnik und Informationstechnik an der Ruhr-Universit¨atBochum First Supervisor: Prof. Dr. rer. nat. J¨org Schwenk Second Supervisor: Prof. Dr.-Ing. Felix Freiling www.nds.rub.de Abstract Single Sign-On (SSO) is a concept of delegated authentication, where an End- User authenticates only once at a central entity called Identity Provider (IdP) and afterwards logs in at multiple Service Providers (SPs) without reauthenti- cation. For this purpose, the IdP issues an authentication token, which is sent to the SP and must be verified. There exist different SSO protocols, which are implemented as open source libraries or integrated in commercial products. Google, Facebook, Microsoft and PayPal belong to the most popular SSO IdPs. This thesis provides a comprehensive security evaluation of the most popular and widely deployed SSO protocols: OpenID Connect, OpenID, and SAML. A starting point for this research is the development of a new concept called malicious IdP, where a maliciously acting IdP is used to attack SSO. Generic attack classes are developed and categorized according to the requirements, goals, and impact. These attack classes are adapted to different SSO proto- cols, which lead to the discovery of security critical vulnerabilities in Software- as-a-Service Cloud Providers, eCommerce products, web-based news portals, Content-Management systems, and open source implementations.
    [Show full text]
  • The Android Platform Security Model∗
    The Android Platform Security Model∗ RENÉ MAYRHOFER, Google and Johannes Kepler University Linz JEFFREY VANDER STOEP, Google CHAD BRUBAKER, Google NICK KRALEVICH, Google Android is the most widely deployed end-user focused operating system. With its growing set of use cases encompassing communication, navigation, media consumption, entertainment, finance, health, and access to sensors, actuators, cameras, or microphones, its underlying security model needs to address a host of practical threats in a wide variety of scenarios while being useful to non-security experts. The model needs to strike a difficult balance between security, privacy, and usability for end users, assurances for app developers, and system performance under tight hardware constraints. While many of the underlying design principles have implicitly informed the overall system architecture, access control mechanisms, and mitigation techniques, the Android security model has previously not been formally published. This paper aims to both document the abstract model and discuss its implications. Based on a definition of the threat model and Android ecosystem context in which it operates, we analyze how the different security measures in past and current Android implementations work together to mitigate these threats. There are some special cases in applying the security model, and we discuss such deliberate deviations from the abstract model. CCS Concepts: • Security and privacy → Software and application security; Domain-specific security and privacy architectures; Operating systems security; • Human-centered computing → Ubiquitous and mobile devices. Additional Key Words and Phrases: Android, security, operating system, informal model 1 INTRODUCTION Android is, at the time of this writing, the most widely deployed end-user operating system.
    [Show full text]
  • Web Components— What's the Catch?
    Web Components— What’s the Catch? TJ VanToll | @tjvantoll Kendo UI jQuery UI UI libraries are seen as the ideal use case for web components Proof-of-concept rewrite of a few jQuery UI widgets to use web components hps://github.com/tjvantoll/ui-web-components Web components’ public image • “[T]he Web Components revoluOon” – hEp://webcomponents.org/presentaons/polymer-and- the-web-components-revoluOon-at-io/ • “Web components are a game changer” – hEp://webcomponents.org/presentaons/polymer-and- web-components-change-everything-you-know-about-web- development-at-io/ • “Web Components Are The Future Of Web Development” – http://techcrunch.com/2013/05/19/google- believes-web-components-are-the-future-of- web-development/ Web components’ public image • “A Tectonic ShiW for Web Development” – hEps://developers.google.com/events/io/2013/ sessions/318907648 • “Join the Web Components revoluOon” – hEp://www.ibm.com/developerworks/library/wa- polymer/ • “Web Components usher in a new era of web development” – https://www.polymer-project.org/ Web components’ public image • “Web Components - A Quantum Leap in Web Development” – hEp://lanyrd.com/2014/qconsf/sddqc/ • “The Dawn of the Reusable Web” – hEp://www.codemash.org/session/the-dawn-of-the- reusable-web-diving-into-web-components/ • “Web Components are ushering in a HTML renaissance” – hEp://addyosmani.com/blog/video-componenOze- the-web-talk-from-lxjs/ The catch • Polyfilling shadow DOM • Resolving HTML import dependencies • Changing form elements’ UI • Browser support The catch • Polyfilling shadow DOM • Resolving HTML import dependencies • Changing form elements’ UI • Browser support Shadow DOM (nave behavior in Chrome) Shadow DOM (polyfilled behavior in Safari) Shimming DOM APIs https://github.com/webcomponents/webcomponentsjs/blob/4c5f21610c6cea02c74beaa3a25cd8075807ce31/src/ ShadowDOM/querySelector.js#L193-209 Shim all the things! https://github.com/Polymer/ShadowDOM/tree/master/src/wrappers Polyfilling CSS selectors • The shadow DOM specificaon introduces a lot of new CSS things.
    [Show full text]