Execute Territory Assignment Rules when update or insert Accounts.

Account Assignment Rules in Salesforce.com via webservice

To run the Territory rule assignment
We need to use webservice call out

To do this, we must import the partner wsdl and generate helper apex classes.

http://developer.force.com/cookbook/recipe/calling-salesforce-web-services-using-apex


And then after insert or update of Account, pass the all accounts in fireTerritoryManagementViaSoap method.

global class TerritoryMangRule
{    
    webService static void fireTerritoryManagementViaSoap(List<Account> lstAccountToUpdate)
    {
        partnerSoapSforceCom.Soap obj = new partnerSoapSforceCom.Soap();
        partnerSoapSforceCom.LoginResult loginResult = obj.login('org@username.com', 'Password');  
        obj.SessionHeader = new partnerSoapSforceCom.SessionHeader_element();
        obj.endpoint_x =loginResult.ServerUrl;
        obj.Sessionheader.sessionid = loginResult.sessionid;
        List<sobjectPartnerSoapSforceCom.sObject_x> lst = new List<sobjectPartnerSoapSforceCom.sObject_x>();
        for(Account ac:lstAccountToUpdate)
        {
            sobjectPartnerSoapSforceCom.sObject_x tmpObj = new sobjectPartnerSoapSforceCom.sObject_x();
            tmpObj.type_x = 'Account';
            tmpObj.Id = ac.Id;
            lst.add(tmpObj);
        }
        partnerSoapSforceCom.AssignmentRuleHeader_element  obj1 = new partnerSoapSforceCom.AssignmentRuleHeader_element();
        obj1.useDefaultRule = true;
        obj.AssignmentRuleHeader = obj1;
        partnerSoapSforceCom.SaveResult[] lst1 =obj.update_x(lst);
    }
}

Google Static map

Simple map
Documentation: https://developers.google.com/maps/documentation/staticmaps/

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400">
</img>

-------------------------------------------

Map with

<img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap\&markers=size:mid%7Ccolor:red%7CMumbai,Maharastra%7CPune,Maharastra%7CNavi+mumbai,Maharastra">

------------------------------------------------------------------------------------------
Map with route


<img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap\&markers=size:mid%7Ccolor:red%7CMumbai,Maharastra%7CPune,Maharastra%7CNavi+mumbai,Maharastra\&path=Mumbai|Navi+Mumbai|pune">

With diffrent color

<img src="https://maps.googleapis.com/maps/api/staticmap?size=1024x600&maptype=roadmap\&markers=size:mid%7Ccolor:red%7CMumbai,Maharastra%7CPune,Maharastra%7CNavi+mumbai,Maharastra\&path=weight:10%7Ccolor:red%7CMumbai|Navi+Mumbai|pune">

Print Google map with direction

First create google map with direction
Follow below link
http://sforcedc.blogspot.in/2015/06/google-map-and-direction-api-with.html

then convert google map into canvas using HTML2Canvas plugin

http://sforcedc.blogspot.in/2015/06/visualforce-page-screenshots-with.html

after that print the page.

Visualforce page

<apex:page showHeader="false">
    <input type="button" value="Print" onclick="javascript:this.style.display='none';window.print();this.style.display='';" />
 
    <div style="width: 100%;" id="mapDiv">
         <div id="map" style="width: 70%; height: 600px; float: left;margin:0px;color:black;"></div>
         <div id="panel" style="width: 30%; float: left;margin:0px;"></div>
    </div>
 
 
    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
 
    <script type="text/javascript">
        window.onload = function(){
            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();
         
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom:7,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
         
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('panel'));
         
            var request = {
                origin: 'Mumbai',
                destination: 'Navi Mumbai',
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
         
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
            setTimeout(myfunction, 4000);
        }
        function myfunction()
        {
            html2canvas(document.body,
            {
                useCORS: true,
                onrendered: function(canvas)
                {
                    document.body.appendChild(canvas);
                    document.getElementById("mapDiv").style.display = 'none';
                }
            });
        }
   </script>
</apex:page>

Visualforce page screenshots with JavaScript - html2canvas

html2canvas

Website: http://html2canvas.hertzen.com/

This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

Demo: http://html2canvas.hertzen.com/examples.html 

Demo:  http://jsfiddle.net/Ratan_Paul/6bfjf559/

In Visualforce page

<apex:page showHeader="false">

<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<div>

    Hello world !

</div>

<script>

html2canvas(document.body, 

 {

    useCORS: true,

    onrendered: function(canvas) 

    {

        document.body.appendChild(canvas);

    }

 })

</script>

</apex>

Using Parallax JS

Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.

Website:- http://pixelcog.github.io/parallax.js/

Parallax Picture Scrolling

Basic scrolling parallax text 

Parallax Foreground Scrolling

Google map and Direction API with Visualforce page

Google map API : https://developers.google.com/maps/documentation/javascript/tutorial

Google Direction API: https://developers.google.com/maps/documentation/directions/

Demo: http://jsfiddle.net/vc1zwft0/

Same i want to use in salesforce with dynamic addresses.

So This is the code.

Implement same and write some logic in controller side.

<apex:page showHeader="false" >
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <title>Google Maps API v3 Directions Example</title>
   <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">

    <div style="width: 100%;" id="mapDiv">
        <div id="map" style="width: 70%; height: 600px; float: left;margin:0px;color:black;"></div>
        <div id="panel" style="width: 30%; float: left;margin:0px;"></div>
    </div>
    <script type="text/javascript">

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
               zoom:7,
               mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));

     var request = {
       origin: 'Mumbai',
       destination: 'Navi Mumbai',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });
   </script>
</body>
</apex:page>


Here instead of using hard coded value you can create string at controller level and pass here.

origin: {!start address }
destination:- {end address}

Source :- http://stackoverflow.com/questions/3896871/google-map-driving-direction-source-code-for-their-example

Google Polymer Paper Toolbar with visualforce page

VF Page

<apex:page >
<head>
  <meta charset="UTF-8"/>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>

  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"/>



  <link rel="import" href="https://www.polymer-project.org/0.5/components/font-roboto/roboto.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/core-icons/core-icons.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/core-media-query/core-media-query.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/paper-icon-button/paper-icon-button.html"/>

  <style>

    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      margin: 0;
   
    }

    core-toolbar {
      color: #f1f1f1;
      fill: #f1f1f1;
    }
 
  </style>

</head>
<body unresolved="">

  <core-toolbar style="background: #4285f4;">
    <paper-icon-button icon="menu"></paper-icon-button>
    <span flex="">Title</span>
    <paper-icon-button icon="refresh"></paper-icon-button>
    <paper-icon-button icon="more-vert"></paper-icon-button>
  </core-toolbar>

  <br/>

  <core-toolbar style="background: #3f51b5;">
    <paper-icon-button icon="menu"></paper-icon-button>
    <span flex="">Title</span>
    <paper-icon-button icon="refresh"></paper-icon-button>
    <paper-icon-button icon="more-vert"></paper-icon-button>
  </core-toolbar>

  <br/>

  <core-toolbar class="tall" style="background: #0f9d58;">
    <paper-icon-button icon="menu"></paper-icon-button>
    <span flex="">Title</span>
    <paper-icon-button icon="refresh"></paper-icon-button>
    <paper-icon-button icon="more-vert"></paper-icon-button>
  </core-toolbar>

  <br/>

  <core-toolbar class="tall" style="background: #ffeb3b; color: #333; fill: #333;">
    <paper-icon-button icon="menu" class="bottom"></paper-icon-button>
    <span flex="" class="bottom">Title</span>
    <paper-icon-button icon="refresh" class="bottom"></paper-icon-button>
    <paper-icon-button icon="more-vert" class="bottom"></paper-icon-button>
  </core-toolbar>

  <br/>

  <core-toolbar class="medium-tall" style="background: #ff5722;">
    <paper-icon-button icon="menu"></paper-icon-button>
    <span flex=""></span>
    <paper-icon-button icon="refresh"></paper-icon-button>
    <paper-icon-button icon="more-vert"></paper-icon-button>
    <span class="bottom indent">Title</span>
  </core-toolbar>

  <br/>

  <core-toolbar class="tall" style="background: #9c27b0;">
    <paper-icon-button icon="menu"></paper-icon-button>
    <div flex=""></div>
    <paper-icon-button icon="refresh"></paper-icon-button>
    <paper-icon-button icon="more-vert"></paper-icon-button>
    <div flex="" class="middle indent">Title</div>
    <div flex="" class="bottom indent" style="font-size: 18px;">Title2</div>
  </core-toolbar>

  <core-media-query id="mediaQuery" query="max-width: 800px"></core-media-query>

  <script>

    document.querySelector('#mediaQuery').addEventListener('core-media-change',
      function(e) {
        document.body.classList.toggle('core-narrow', e.detail.matches);
      });

  </script>

</body>

</apex:page>

Demo: https://www.polymer-project.org/0.5/components/paper-elements/demo.html#core-toolbar
--------------------------------------------------------------------------------------------------------------------------

Google Polymer Paper Tabs with Visualforce page

Visualforce page:-

<apex:page showheader="false">

<head>
  <title>paper-tabs</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"/>

  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="https://www.polymer-project.org/0.5/components/core-icons/core-icons.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/font-roboto/roboto.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/paper-tabs/paper-tabs.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/core-media-query/core-media-query.html"/>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/paper-icon-button/paper-icon-button.html"/>

  <style shim-shadowdom="">

    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      margin: 0;
      /*padding: 24px;*/
      color: #333;
    }
 
    body.core-narrow {
      padding: 8px;
    }
 
    paper-tabs, core-toolbar {
      background-color: #00bcd4;
      color: #fff;
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
    }
 
    core-toolbar paper-tabs {
      box-shadow: none;
    }
 
    paper-tabs[noink][nobar] paper-tab.core-selected {
      color: #ffff8d;
    }
 
    paper-tabs.transparent-teal {
      background-color: transparent;
      color: #00bcd4;
      box-shadow: none;
    }
 
    paper-tabs.transparent-teal::shadow #selectionBar {
      background-color: #00bcd4;
    }
 
    paper-tabs.transparent-teal paper-tab::shadow #ink {
      color: #00bcd4;
    }
 
    h3 {
      font-size: 16px;
      font-weight: 400;
    }
 
  </style>

</head>
<body unresolved="">

  <h3>A. No ink effect and no sliding bar</h3>

  <paper-tabs selected="0" noink="" nobar="">

    <paper-tab>ITEM ONE</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>ITEM THREE</paper-tab>
 
  </paper-tabs>

  <br/>
  <br/>

  <h3>B. The bottom bar appears to indicate the selected tab, but without sliding effect.</h3>

  <paper-tabs selected="0" noink="" noslide="">

    <paper-tab>ITEM ONE</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>ITEM THREE</paper-tab>
 
  </paper-tabs>

  <br/>
  <br/>

  <h3>C. The bar slides to the selected tab</h3>

  <paper-tabs selected="0" noink="">

    <paper-tab>ITEM ONE</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>ITEM THREE</paper-tab>
 
  </paper-tabs>

  <br/>
  <br/>

  <h3>D. Inky Tabs</h3>

  <paper-tabs selected="0">

    <paper-tab>ITEM ONE</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>ITEM THREE</paper-tab>
 
  </paper-tabs>

  <br/>
  <br/>

  <paper-tabs selected="0" class="transparent-teal">

    <paper-tab>ITEM ONE</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>ITEM THREE</paper-tab>
 
  </paper-tabs>

  <br/>
  <br/>

  <h3>E. Scrollable Tabs</h3>

  <paper-tabs id="scrollableTabs" selected="0" scrollable="">

    <paper-tab>NUMBER ONE ITEM</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>THE THIRD ITEM</paper-tab>
    <paper-tab>THE ITEM FOUR</paper-tab>
    <paper-tab>FIFTH</paper-tab>
    <paper-tab>THE SIXTH TAB</paper-tab>
    <paper-tab>NUMBER SEVEN</paper-tab>
    <paper-tab>EIGHT</paper-tab>
    <paper-tab>NUMBER NINE</paper-tab>
    <paper-tab>THE TENTH</paper-tab>
    <paper-tab>THE ITEM ELEVEN</paper-tab>
    <paper-tab>TWELFTH ITEM</paper-tab>
 
  </paper-tabs>

  <br/>
  <br/>

  <h3>F. Link Tabs</h3>

  <paper-tabs selected="0" link="">

    <paper-tab><a href="#item1" horizontal="" center-center="" layout="">ITEM ONE</a></paper-tab>
    <paper-tab><a href="#item2" horizontal="" center-center="" layout="">ITEM TWO</a></paper-tab>
    <paper-tab><a href="#item3" horizontal="" center-center="" layout="">ITEM THREE</a></paper-tab>
 
  </paper-tabs>

  <br/>
  <br/>

  <h3>G. Tabs in Toolbar</h3>

  <core-toolbar class="medium-tall">

    <paper-icon-button icon="menu"></paper-icon-button>
    <div flex="">Title</div>
    <paper-icon-button icon="search"></paper-icon-button>
    <paper-icon-button icon="more-vert"></paper-icon-button>
 
    <div class="bottom fit" horizontal="" layout="">
 
      <paper-tabs selected="0" flex="" style="max-width: 600px;">
 
        <paper-tab>ITEM ONE</paper-tab>
        <paper-tab>ITEM TWO</paper-tab>
        <paper-tab>ITEM THREE</paper-tab>
     
      </paper-tabs>
   
    </div>

  </core-toolbar>

  <br/>
  <br/>

  <core-toolbar class="tall">

    <paper-tabs selected="0" class="bottom" self-end="" style="width: 300px;">

      <paper-tab>ITEM ONE</paper-tab>
      <paper-tab>ITEM TWO</paper-tab>
   
    </paper-tabs>
 
    <div class="bottom" flex=""></div>
 
    <paper-icon-button class="bottom" icon="search"></paper-icon-button>
   
  </core-toolbar>

  <br/>
  <br/>

  <h3>H. Tabs aligned to bottom</h3>

  <paper-tabs selected="0" alignBottom="">

    <paper-tab>ITEM ONE</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>ITEM THREE</paper-tab>
 
  </paper-tabs>

  <!-- detect when window is narrow -->
  <core-media-query id="mediaQuery" query="max-width: 640px"></core-media-query>

  <script>

    document.querySelector('#mediaQuery').addEventListener('core-media-change',
      function(e) {
        document.body.classList.toggle('core-narrow', e.detail.matches);
        document.querySelector('#scrollableTabs').updateBar();
      });

  </script>

</body>


</apex:page>

Demo: https://www.polymer-project.org/0.5/components/paper-elements/demo.html#paper-tabs
--------------------------------------------------------------------------------------------------------------------------

Google Polymer Paper Snipper with Visualforce page

Visualforce page

<apex:page >
<head>
  <meta charset="UTF-8"/>
  <title></title>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/paper-spinner/paper-spinner.html"/>
  <style shim-shadowdom="">
  paper-spinner.blue::shadow .circle {
    border-color: #4285f4;
  }

  paper-spinner.red::shadow .circle {
    border-color: #db4437;
  }

  paper-spinner.yellow::shadow .circle {
    border-color: #f4b400;
  }

  paper-spinner.green::shadow .circle {
    border-color: #0f9d58;
  }
  </style>
</head>
<body>
  <paper-spinner class="blue" active=""></paper-spinner>
  <paper-spinner class="red" active=""></paper-spinner>
  <paper-spinner class="yellow" active=""></paper-spinner>
  <paper-spinner class="green" active=""></paper-spinner>
  <paper-spinner active=""></paper-spinner>
  <button>Toggle</button>
  <script>
    document.querySelector('button').addEventListener('click', function() {
      var spinners = document.querySelectorAll('paper-spinner');
      Array.prototype.forEach.call(spinners, function(spinner) {
        spinner.active = !spinner.active;
      });
    });
  </script>
</body>

</apex:page>

Demo: https://www.polymer-project.org/0.5/components/paper-elements/demo.html#paper-spinner
--------------------------------------------------------------------------------------------------------------------------

Use Google Polymer Paper buttons in Visualforce page

Visulforce page:

<apex:page showHeader="false">
<head>

  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"/>

  <title>paper-button</title>

  <script src="https://www.polymer-project.org/1.0/components/webcomponentsjs/webcomponents.js"></script>

  <link href="https://www.polymer-project.org/1.0/components/font-roboto/roboto.html" rel="import"/>
  <link href="https://www.polymer-project.org/1.0/components/core-icon/core-icon.html" rel="import"/>
  <link href="https://www.polymer-project.org/1.0/components/core-icon/core-icon.html" rel="import"/>
  <link href="https://www.polymer-project.org/1.0/components/paper-button/paper-button.html" rel="import"/>

  <style shim-shadowdom="shim-shadowdom">
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      font-size: 14px;
      margin: 0;
      padding: 24px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-touch-callout: none;
    }

    section {
      padding: 20px 0;
    }

    section > div {
      padding: 14px;
      font-size: 16px;
    }

    paper-button.colored {
      color: #4285f4;
    }

    paper-button[raised].colored {
      background: #4285f4;
      color: #fff;
    }

    paper-button.custom > core-icon {
      margin-right: 4px;
    }

    paper-button.hover:hover {
      background: #eee;
    }

    paper-button.blue-ripple::shadow #ripple {
      color: #4285f4;
    }

  </style>
</head>
<body unresolved="unresolved">

  <template is="auto-binding">
    <div id="clicker" on-tap="{{clickAction}}">
  <section>

    <div>Flat buttons</div>

    <paper-button>button</paper-button>
    <paper-button class="colored">colored</paper-button>
    <paper-button disabled="disabled">disabled</paper-button>
    <paper-button noink="noink">noink</paper-button>

  </section>

  <br/>

  <section>

    <div>Raised buttons</div>

    <paper-button raised="raised">button</paper-button>
    <paper-button raised="raised" class="colored">colored</paper-button>
    <paper-button raised="raised" disabled="disabled">disabled</paper-button>
    <paper-button raised="raised" noink="noink">noink</paper-button>

  </section>

  <section>

    <div>Custom button content</div>

    <paper-button class="colored custom">
      <core-icon icon="check"></core-icon>
      ok
    </paper-button>
    <paper-button class="custom">
      <core-icon icon="clear"></core-icon>
      cancel
    </paper-button>
    <br/>
    <paper-button>
      <a href="https://www.polymer-project.org" target="_blank">link</a>
    </paper-button>

  </section>

  <section>

    <div>Toggle buttons</div>

    <paper-button toggle="toggle">button</paper-button>

    <paper-button toggle="toggle" raised="raised" noink="noink">noink</paper-button>

    <paper-button toggle="toggle" active="active" class="colored">active</paper-button>

    <paper-button toggle="toggle" raised="raised" active="active" class="colored">active</paper-button>

  </section>

  <section>

    <div>Styling options</div>

    <paper-button class="hover">hover</paper-button>
    <paper-button class="blue-ripple">custom ripple</paper-button>

  </section>
</div>
</template>

  <script>

    function clickAction(e) {
      var t = e.target;
      if (t.localName === 'paper-button') {
        if (t.hasAttribute('disabled')) {
          console.error('should not be able to click disabled button', t);
        } else {
          console.log('click', t);
        }
      }
    }

    addEventListener('template-bound', function(e) {
      e.target.clickAction = clickAction;
    });

  </script>

</body>

</apex:page>

Demo: https://www.polymer-project.org/0.5/components/paper-elements/demo.html#paper-button
--------------------------------------------------------------------------------------------------------------------------

Using Google Polymer component in Visualforce page.

Recently google released Polymer 1.0.

Hope you will like it

In 0.5 Polymer element collection:  https://www.polymer-project.org/0.5/docs/elements/

Polymer's core elements - https://www.polymer-project.org/0.5/docs/elements/core-ajax.html

Polymer's paper elements - https://www.polymer-project.org/0.5/docs/elements/paper-button.html

For using polymer in visualforce page. We need to add 
 <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>

Webcomponent script

Below is the Polymer core-pages example

<apex:page showHeader="false">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>core-pages</title>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/core-pages/core-pages.html"/>
  <style>
    html, body {
      height: 100%;
    }
    body {
      font-family: sans-serif;
    }
    core-pages {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      -webkit-user-select: none;
      border-radius: 5px;
    }
    core-pages > div {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: inherit;
    }
    core-pages.fancy {
      border: none;
      margin-left: 2em;
    }
    core-pages.fancy > div {
      opacity: 0;
      -webkit-transform: translate3d(-100px, 0, 0) scale(0.9);
      transform: translate3d(-100px, 0, 0) scale(0.9);
      transition: all 1s cubic-bezier(.03,.56,.7,.98);
      color: white;
    }
    core-pages.fancy > .one {
      background-color: red;
    }
    core-pages.fancy > .two {
      background-color: green;
    }
    core-pages.fancy > .three {
      background-color: blue;
    }
    core-pages.fancy > .four {
      background-color: purple;
    }
    core-pages.fancy > .five {
      background-color: black;
    }
    core-pages.fancy .core-selected + div {
      -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
      transform: translate3d(100px, 0, 0) scale(1);
    }
    core-pages.fancy .core-selected {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    core-pages.fancy div.begin {
      -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
      transform: translate3d(100px, 0, 0) scale(0.9);
    }
  </style>
</head>
<body unresolved="unresolved" fullbleed="fullbleed" horizontal="horizontal" center="center" center-justified="center-justified" layout="layout">
  <core-pages id="first" selected="0">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </core-pages>

  <core-pages class="fancy" selected="0">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
    <div class="five">Five</div>
  </core-pages>

  <script>
    document.querySelector('#first').onclick = function(e) {
      this.selected = (this.selected + 1) % this.items.length;      
    };

    document.querySelector('core-pages.fancy').onclick = function(e) {
      this.selected = (this.selected + 1) % this.items.length;
      this.async(function() {
        if (this.selectedIndex == 0) {
          this.selectedItem.classList.remove('begin');
        } else if (this.selectedIndex == this.items.length - 1) {
          this.items[0].classList.add('begin');
        }
      });
    };
  </script>

</body>


</apex:page>

Demo: https://www.polymer-project.org/0.5/components/core-elements/demo.html#core-pages

--------------------------------------------------------------------------------------------------------------------------

Salesforce Inbound Email Service

First create Apex classes that implement the Messaging.InboundEmailHandler interface.

global class myHandler implements Messaging.InboundEmailHandler {
 global Messaging.InboundEmailResult handleInboundEmail(Messaging.InboundEmail email, Messaging.InboundEnvelope envelope) {
 Messaging.InboundEmailResult result = new Messaging.InboundEmailresult();
          return result;
      }
  }

Controller

global class TestEmailServices implements Messaging.InboundEmailHandler
{
    global Messaging.InboundEmailResult handleInboundEmail(Messaging.inboundEmail email, Messaging.InboundEnvelope env)
    {
        //Initialize the variables
        Messaging.InboundEmailResult result = new Messaging.InboundEmailResult();
        //Check whether email subject startsWith NEW: or not
        if(email.subject.startsWith('NEW:'))
        {
            Case objCase = new Case(Subject = email.subject., Description = email.body, Status = 'New');
            insert objCase;//insert the task
            //create task for newly created task with same subject and email body
            Task objTask = new Task(Subject = email.subject, Description =  email.body , Status='Not Started', whatId = objCase.Id );
            insert objTask;
            esult.message = 'Successfully created Case and Task';
            result.success = true;
            return result;
        }
        else
        {
result.message = 'Please try again.';
result.success = true;
return result;
        }
}
}

This Apex class will create a case an task with email subject and email body.
And return a message to user.

IN Setup part

First Goto Setup --> Develop --> Email Service

Create new email service and choose this apex class.

and save and new Email address

Here you can provide any email address :- example
Click on active and Context User 

II

In Accept email from - You can set any domain or any email address like example@gmail.com or gmail.com

then save it.

Below you can find the addresses
like
example@1kz9xrgxvig77xehrsq4duu3puip1c1r38wgk8t03f7mjdcqwr.9-vzoieaq.ap1.apex.salesforce.com

Now Activate your email service.
Open your gmail and send an email to above address with subject starts with NEW:

Done.

Access Cookies from different visualforce pages

Working with Cookie

This is the Cookie class
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/apex_classes_sites_cookie.htm

PageReference methods:-
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/apex_System_PageReference_methods.htm

For example;- I have 2 VF pages.

1. CookieTest1
2. CookieTest2

We will create cookies in CookieTest1 page level and access those cookies in CookieTest2 page level.

Below the code checkout.

1. CookieTest1

<apex:page controller="CookieTest1Controller">
<apex:form >
    <apex:commandButton value="Click" action="{!createCookies}"/>
</apex:form>
</apex:page>

Controller:-

public class CookieTest1Controller
{
    public CookieTest1Controller()
    {
    }
    public pagereference createCookies()
    {
        Account objAccount = [SELECT Id from Account limit 1];
        Cookie objCookies = new Cookie('accId',objAccount.Id ,null,-1,false);
        pagereference pg = new pagereference('/apex/CookieTest2');
        pg.setCookies(new Cookie[]{objCookies});
        return pg;
    }
}

Here we are creating cookie and setCookies.
After that we will get this cookie in second page.

2. CookieTest2

<apex:page controller="CookieTest2Controller">
    <apex:detail subject="{!AccId}"/>
</apex:page>

Controller:-

public class CookieTest2Controller
{
    public Id AccId {get;set;}
    public CookieTest2Controller()
    {
        Cookie counter = ApexPages.currentPage().getCookies().get('accId');
        AccId =  Id.valueOf(counter.getValue());
    }
}

Based on accId we will get the Account id which was stored in cookie.