Using Polymer in Visual Studio 2012
A friend of mine at work had asked if I had ever heard of Polymer before...I hadn't. I took a look at http://www.polymer-project.org/ and watched a few videos and was interested in throwing together a HelloWorld project.
Here's a quick walk-through of that exercise. I thought it was pretty cool:
1. Create an empty MVC project.
2. Right-Click on the MVC Project and select "Manage NuGet Packages" 3. Search for "Bower" in the Online > nuget.org section 4. Select the latest version of Bower and install it. (I used version 1.3.5.2, published on 6/24/2014) 5. Right-Click on your MVC Project and select "Open Folder in File Explorer". 6. Hold Shift down and right click in the new explorer window that popped up and select "Open command window here" 7. type "bower init" and follow the prompts. 8. type "bower install --save Polymer/polymer" to install the base Polymer package. 9. type "bower install --save Polymer/core-elements" to install the Polymer Core elements collection. (http://www.polymer-project.org/docs/elements/core-elements.html) 10. type "bower install --save Polymer/paper-elements" to install the Paper elements collection. (http://www.polymer-project.org/docs/elements/paper-elements.html) 11. Close the command window. 12. Right-Click on Controllers in the MVC project and select "Add > Controller" Create a "HomeController" with empty methods. 13. Open the newly created "HomeController" and make it look like this:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;
namespace PolymerMVCPlayground.Controllers { public class HomeController : Controller { // // GET: /Home/
public ActionResult Index() { return View(); }
} }
14. Right-Click on the "Index" method and select "Add View" 15. Make "Index.cshtml" look like this:
<!DOCTYPE html> <html> <head> <!-- 1. Load platform.js for polyfill support. --> <script src="bower_components/platform/platform.js"></script>
<!-- 2. Use an HTML Import to bring in the element. --> <link rel="import" href="bower_components/core-scaffold/core-scaffold.html"> <link rel="import" href="bower_components/core-header-panel/core-header-panel.html"> <link rel="import" href="bower_components/core-menu/core-menu.html"> <link rel="import" href="bower_components/core-item/core-item.html"> <link rel="import" href="bower_components/paper-button/paper-button.html"> <link rel="import" href="bower_components/paper-toast/paper-toast.html"> </head> <body> <!-- 3. Declare the element. Configure using its attributes. -->
<core-scaffold> <core-header-panel navigation flex mode="seamed"> <core-toolbar>Demo</core-toolbar> <core-menu theme="core-light-theme"> <core-item icon="folder" label="Folder 1"></core-item> <core-item icon="folder" label="Folder 2"></core-item> <core-item icon="settings" label="Settings"></core-item> </core-menu> </core-header-panel> <div tool>Hello World</div> <div class="content"> <paper-button label="flat button" id="flatButton"></paper-button> <paper-button label="raised button" id="raisedButton" raisedbutton></paper-button>
</div> </core-scaffold>
<paper-toast id="toast" text="Your draft has been discarded."></paper-toast>
<script> // Wait for 'polymer-ready'. Ensures the element is upgraded. window.addEventListener('polymer-ready', function (e) {
// Store the toast object in a variable for easy reference. var toast = document.getElementById('toast');
// Add a listener for "click" on the flat button document.getElementById('flatButton').addEventListener('click', function (e) { toast.text = 'You clicked the FLAT button.'; toast.show(); }); // Add a listener for "click" on the raised button document.getElementById('raisedButton').addEventListener('click', function (e) { toast.text = 'You clicked the RAISED button.'; toast.show(); });
}); </script> </body> </html>
16. Run the project.
Tips:
List of core elements: http://www.polymer-project.org/docs/elements/core-elements.html
List of paper elements: http://www.polymer-project.org/docs/elements/paper-elements.html
List of core icons can be found here: http://polymer.github.io/core-icons/components/core-icons/demo.html
You can see the elements in the













