Category: ui

Google Polymer – Override Style

Here in this post, we will understand how we can override the default style in Google Polymer.Step 1 -Create the web component Hello-World-Override-Style.html as shown below -<link rel=”import” href=”../bower_components/polymer/polymer.html”><polymer-element name=”Hello-World-Override-Style” noscript> <style type=”text/css”> p { color: red; } </style> <template> <style type=”text/css”> p { font-family: Verdana; color: blue; } </style> <p>Hello Sudipta Deb</p> </template></polymer-element>As you can see we have two styles defined. Style 1 (Outside template tag) is just making the color of the font red and Style 2 (inside template tag) is making the font color as blue as well as set the font to Verdana.Source Code @ 2 -Create the html page to refer the web component. Name of the html page is: testHello-World-Override-Style.html.<!DOCTYPE html><html><head> <title>Hello World Test with Google Polymer</title> <!– Load the platform support library –> <script type=”text/javascript” src=”bower_components/webcomponentsjs/webcomponents.min.js”></script> <!– Load the component –> <link rel=”import” href=”elements/Hello-World-Override-Style.html”></head><body> <!– Declare the element by tag –> <Hello-World-Override-Style></Hello-World-Override-Style> <p>Hello Pradipta Deb</p></body></html>Source Code @ 3 -Let’s check the output -Now as you can see that Style 2 is applied to the text inside the template of the web component. But Style 1 is applied to rest all <p> tags.So this post demonstrated how to override the default style in Google Polymer. Any feedback, please let me know....

Read More

Integrating Google Polymer with VisualForce – Salesforce

I am making myself busy in learning Google Polymer since last 2 weeks. Believe me, Google Polymer is the future, not because of it is developer by Google, because of it’s Web Component development style.Today morning, I was trying to integrate Google Polymer with VisualForce. I searched in Google, but there was hardly any stuffs how to integrate Google Polymer with VisualForce. So I thought why not document the basic steps with a Hello World example to demonstrate the integration of Google Polymer with VisualForce.Let’s start -Step 1:Download Google Polymer on your machine. Please refer my previous blog post to understand the procedure.Google Polymer – How to installStep 2:Once you download the polymer, you will find a folder named “bower_components”. Compress the folder with the name “”. (Note: you can choose any name here :-))Step 3:Upload the as static resource in your development environment as shown below -Step 4:Create your web component(New VisualForce Page) with Label: Hello-World, Name: Hello_World<apex:page contentType=”text/plain”> <link rel=”import” href=”{!URLFOR($Resource.Polymer, ‘/bower_components/polymer/polymer.html’)}”/> <polymer-element name=”Hello-World” noscript=”true”> <template> <p>Hello <b>SUDIPTA DEB</b> from Google Polymer Web Component</p> </template> </polymer-element></apex:page>Note: Created web component “Hello-World”.Step 5:Create the VisualForce Page(testHelloWorld) to refer the Web Component as shown below -<apex:page > <script src=”{!URLFOR($Resource.Polymer, ‘/bower_components/webcomponentsjs/webcomponents.min.js’)}”/> <link rel=”import” href=”/apex/Hello_World”/> <body> <!– Declare the web component by tag –> <Hello-World></Hello-World> </body></apex:page>Note: In the body section, I just referred web component by name. Before that I just imported...

Read More

Google Polymer – First Hello World Component

In this post, we will see how we can create our first web component with Google Polymer. It’s very easy.But before that we should understand what is Web Component?As Google says, which I think is the best way how you can define Web Component -Truely Web Components are the future.Step : Create the Web Component – Below is the code to create the web component “Hello-World” and save it as – “Hello-World.html”<link rel=”import” href=”../bower_components/polymer/polymer.html”><polymer-element name=”Hello-World” noscript> <template> <span>Hello from <b>Hello-World</b>. This is a shadow DOM. </span> </template></polymer-element>You can save it under <PROJECT ROOT DIRECTORY>elementsHello-World.html.Two important things to remember here -name attribute is must and it must contain “-“. It specifies the name of the element and this is the name we should refer in other parts of the project.noscript indicates that this is a simple html file and it doesn’t require any script.Source Code @ : Create the Web Component – Here we will create the html page “testHello-World.html” and inside that we will refer the newly created web component as shown below -<!DOCTYPE html><html><head> <title>Hello World Test with Google Polymer</title> <!– Load the platform support library –> <script type=”text/javascript” src=”bower_components/webcomponentsjs/webcomponents.min.js”></script> <!– Load the component –> <link rel=”import” href=”elements/Hello-World.html”></head><body> <!– Declare the element by tag –> <Hello-World></Hello-World></body></html>As you can see that in the body section we have only declared the newly created web component. In this way we can refer this web...

Read More

Google Polymer – How to Install

There are many ways how you can install polymer. But I prefer the recommended way i.e. Installing with Bower. Bower is a very powerful tool which manages all your dependencies. So when you will install Polymer, all dependencies will be installed automatically. You don’t need to install them one by one. At the same time, Bower handles any future update also.Below are the steps you need to do -Install Node and npm first from Git from you have installed Node and npm, Git, install Bower by issuing the below command -npm install -g bowerOnce done, Bower is installed in your machine.You need to create bower.json file for your application. Run the below command from root of your project (It will ask few questions which are very much self explanatory)-bower initNow install Polymer by -bower install –save Polymer/polymerThat’s all. Note: In order to update, issue the command bower...

Read More