spdustin/.-What is this about -.md

## .-What is this about -.md

      
    Raw
  

              .-What is this about -.md
            
          
    What is this about?

If you're not in my SharePoint Web Developer Experience class, you're missing out. This is just some of the sample code we're discussing in the February 2013 delivery. There's another one coming up in May. And you get even more code than is shared here to the public.
Feel free to poke around. Geek out a bit. And if your curiosity is piqued, sign up for the next one.

  
## .gitignore
webdev201302.sublime-project
/stylesheets
webdev201302.sublime-workspace
webdev201302.xpr
/sass
/.sass-cache
config.rb

## 0 - Welcome.md

      
    Raw
  

              0 - Welcome.md
            
          
    Welcome!

Yes, your welcome is in a text editor and not a slide deck. It's gonna get geeky in here.
[content snipped]

  
## 1 - XML - Sample.xml
<vehicles>
  <cars>
    <car make="Ford" model="Pinto"/>
    <car make="Toyota" model="Prius"/>
    <car make="Lexus" model="RX350"/>
  </cars>
  <trucks>
    <truck make="Ford" model="F150"/>
    <truck make="Toyota" model="Tacoma"/>
  </trucks>
</vehicles>

## 1 - XSL - Sample.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">
    <ul>
      <xsl:apply-templates />
    </ul>
  </xsl:template>


  <xsl:template match="truck">
    <li>
      <xsl:value-of select="@make"/>
      <xsl:value-of select="@model"/>
    </li>
  </xsl:template>

</xsl:stylesheet>

## 2 - XML - Employee Directory.xml
<Employees>
	<Row FirstName="John" LastName="Doe" Email="john@doe.com" URLToPhoto="http://placehold.it/75x75" Department="Accounting"/>
	<Row FirstName="Jane" LastName="Smith" Email="jane@smith.com" URLToPhoto="http://placehold.it/75x75" Department="Accounting"/>
	<Row FirstName="Jack" LastName="Anderson" Email="jack@andersoncorp.com" URLToPhoto="http://placehold.it/75x75" Department="Sales"/>
	<Row FirstName="Joe" LastName="Miller" Email="joe@millerinc.com" URLToPhoto="http://placehold.it/75x75" Department="Sales"/>
	<Row FirstName="Jim" LastName="Bo" Email="jim@boenterprises.com" URLToPhoto="http://placehold.it/75x75" Department="IT"/>
</Employees>


## 2 - XSL - Employee Directory.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <ul class="peopledirectory">
      <xsl:apply-templates/>
    </ul>
  </xsl:template>
  <xsl:template match="Row">
    <li>
      <h2>
        <xsl:value-of select="@LastName"/>,
        <xsl:value-of select="@FirstName"/>
      </h2>
      <img alt="Photo of {@FirstName} {@LastName}" src="{@URLToPhoto}" title="Photo of {@FirstName} {@LastName}"/>
      <a href="mailto:{@Email}">
        <xsl:value-of select="@Email"/>
      </a>
      <p>Department:
        <xsl:value-of select="@Department"/>
      </p>
    </li>
  </xsl:template>
</xsl:stylesheet>

## 3 - Sample Grouping with Tabs.html
<!DOCTYPE html>
<html>

    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
        </script>
        <meta charset=utf-8 />
        <title>
            SharePoint Experience
        </title>
    </head>

    <body>
        <div id="tabs">
            <ul>
                <li>
                    <a href="#tabs-1">Accounting</a>
                </li>
                <li>
                    <a href="#tabs-2">Sales</a>
                </li>
                <li>
                    <a href="#tabs-3">IT</a>
                </li>
            </ul>
            <div id="tabs-1">
                <ul class="peopledirectory">
                    <li>
                        <h2>
                            Doe, John
                        </h2>
                        <img src="http://placehold.it/75x75" alt="Photo of John Doe" title="Photo of John Doe"
                        />
                        <a href="mailto:john@doe.com">john@doe.com</a>
                        <p>
                            Department: Accounting
                        </p>
                    </li>
                    <li>
                        <h2>
                            Smith, Jane
                        </h2>
                        <img src="http://placehold.it/75x75" alt="Photo of Jane Smith" title="Photo of Jane Smith"
                        />
                        <a href="mailto:jane@smith.com">jane@smith.com</a>
                        <p>
                            Department: Accounting
                        </p>
                    </li>
                </ul>
            </div>
            <div id="tabs-2">
                <ul class="peopledirectory">
                    <li>
                        <h2>
                            Anderson, Jack
                        </h2>
                        <img src="http://placehold.it/75x75" alt="Photo of Jack Anderson" title="Photo of Jack Anderson"
                        />
                        <a href="mailto:jack@andersoncorp.com">jack@andersoncorp.com</a>
                        <p>
                            Department: Sales
                        </p>
                    </li>
                    <li>
                        <h2>
                            Miller, Joe
                        </h2>
                        <img src="http://placehold.it/75x75" alt="Photo of Joe Miller" title="Photo of Joe Miller"
                        />
                        <a href="mailto:joe@millerinc.com">joe@millerinc.com</a>
                        <p>
                            Department: Sales
                        </p>
                    </li>
                </ul>
            </div>
            <div id="tabs-3">
                <ul class="peopledirectory">
                    <li>
                        <h2>
                            Bo, Jim
                        </h2>
                        <img src="http://placehold.it/75x75" alt="Photo of Jim Bo" title="Photo of Jim Bo"
                        />
                        <a href="mailto:jim@boenterprises.com">jim@boenterprises.com</a>
                        <p>
                            Department: IT
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

## 3 - Sample Links Grouping Template.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <!--
    XSL Key
    name = the name for your group-by key. You'll refer to this by name later
    match = the element you're grouping (For SharePoint, this is ALWAYS "Row")
    use = The attribute by which you want to group
  -->

  <xsl:key name="group-by-department" match="Row" use="@Category"/>

  <xsl:template match="/">
    <ul>
      <xsl:apply-templates/>
    </ul>
  </xsl:template>
  <!-- For SharePoint, change "NavLinks" to "Rows" -->
  <xsl:template match="NavLinks">
    <!--
      Unique grouped rows:
        Change "group-by-department" to the name of your key
        Change "@Category" to the field by which you are grouping
        That's it
    -->
  	<xsl:for-each
  		select="Row[count(. | key('group-by-department', @Category)[1]) = 1]">
  		<xsl:sort select="@Category"/>
      <!-- here's the "parent" content for each unique group -->
      <xsl:comment>BEGIN Group for <xsl:value-of select="@Category"/></xsl:comment>
  		<li class="group-{translate(@Category, ' ','')}">
  			<h1>
  				<xsl:value-of select="@Category"/>
  			</h1>
  			<ul>
  				<xsl:for-each select="key('group-by-department', @Category)">
            <!-- Here's the repeating section for each actual row -->
  					<xsl:sort select="@Title"/>
  					<li>
  						<a href="{@href}">
  							<xsl:value-of select="@Title"/>
  						</a>
  					</li>
  				</xsl:for-each>
  			</ul>
  		</li>
      <xsl:comment>/END/ Group for <xsl:value-of select="@Category"/></xsl:comment>
  	</xsl:for-each>
  </xsl:template>
</xsl:stylesheet>

## 3 - Sample Links.xml
<NavLinks>
	<Row Category="Information" href="#" Title="Sub Link 1 for Third Menu"/>
	<Row Category="Information" href="#" Title="Sub Link 2 for Third Menu"/>
	<Row Category="Products" href="#" Title="Sub Link 1"/>
	<Row Category="Products" href="#" Title="Sub Link 2"/>
	<Row Category="Services" href="#" Title="Cleaning"/>
	<Row Category="Services" href="#" Title="Deodorizing"/>
	<Row Category="Services" href="#" Title="Disinfecting"/>
</NavLinks>

## 4 - Sample Links Tabbed Template.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <!--
    XSL Key
    name = the name for your group-by key. You'll refer to this by name later
    match = the element you're grouping (For SharePoint, this is ALWAYS "Row")
    use = The attribute by which you want to group
  -->

  <xsl:key name="group-by-department" match="Row" use="@Category"/>

  <xsl:template match="/">
  <body>
    <div class="spe-tabs">
      <style scoped="">
        a{
            text-decoration:none;
        }</style>
      <xsl:apply-templates select="//Row[count(. | key('group-by-department', @Category)[1]) = 1]"
        mode="tabs"/>
    </div>
    <a href="#">Outside link</a>
  </body>
  </xsl:template>

  <xsl:template match="Row" mode="tabs">
    <div class="spe-tab">
      <input type="radio" id="tab-{position()}" name="tab-group">
        <xsl:if test="position() = 1">
          <xsl:attribute name="checked"/>
        </xsl:if>
      </input>
      <label for="tab-{position()}">
        <xsl:value-of select="@Category"/>
      </label>
      <div class="spe-tab-content">
        <ul>
          <xsl:apply-templates select="key('group-by-department', @Category)" mode="content"/>
        </ul>
      </div>
    </div>
  </xsl:template>

  <xsl:template match="Row" mode="content">
    <li>
      <a href="{@href}" title="Link to {@Title}">
        <xsl:value-of select="@Title"/>
      </a>
    </li>
  </xsl:template>
</xsl:stylesheet>

## 6 - Objects.md

      
    Raw
  

              6 - Objects.md
            
          
    Objects

Properties

* Color
* Smell
* Make
* Model
* WheelCondition(0-5)
* BodyType
* EngineDisplacement
* EngineCylinders
* FuelLevel
* LowFuelLamp
* Cleanliness
* BodyCondition
* TirePressure
* Velocity['speed|direction']
* Location['lat|long|alt']
* NumPassengers

Methods

* Wash()
* TuneUp(serviceType) - one of OilChange, SparkPlugChange, TransFluidChange
* ChangeIgnitionStatus(status) - one of off, acc, on, start
* Accelerate(speed,direction) - speed can be negative
* ShiftGears(gear)
* Refuel(fuelAmount)
* WindowChange(window,height)
* Wiper(placement,speed)
* LightingToggle(light)
* Crash()
* CallOnstar()

Events

* MIL (check engine light)
* FuelWarning
* DoorAjar(e.door)
* Crash
* AirbagsDeployed
* MaintenanceIndicator

Inheritance

* Genes passed down to descendants
* e.g. Opacity, position context, font-size

Propagation

* Events are propagated to ancestors


## Baseline DVWP.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- This XSL Stylesheet created by SharePoint Experts, Inc. -->
<!-- http://sharepointexperience.com -->

    <xsl:output method="html" indent="yes"/>
    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">
        <!-- This is the actual wrapper element that will be emitted -->
        <div>
            <!-- This will tell the data view to look for the actual content
and come back when it's done. -->
            <xsl:apply-templates/>
        </div>
        <!-- end wrapper -->
    </xsl:template>
    <xsl:template match="/dsQueryResponse/Rows/Row">
        <!-- This markup is used for each item in the list -->
        <p><xsl:value-of select="@Title"/></p>
    </xsl:template>
</xsl:stylesheet>
	webdev201302.sublime-project
	/stylesheets
	webdev201302.sublime-workspace
	webdev201302.xpr
	/sass
	/.sass-cache
	config.rb
	<vehicles>
	<cars>
	<car make="Ford" model="Pinto"/>
	<car make="Toyota" model="Prius"/>
	<car make="Lexus" model="RX350"/>
	</cars>
	<trucks>
	<truck make="Ford" model="F150"/>
	<truck make="Toyota" model="Tacoma"/>
	</trucks>
	</vehicles>
	<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<xsl:template match="/">
	<ul>
	<xsl:apply-templates />
	</ul>
	</xsl:template>


	<xsl:template match="truck">
	<li>
	<xsl:value-of select="@make"/>
	<xsl:value-of select="@model"/>
	</li>
	</xsl:template>

	</xsl:stylesheet>
	<Employees>
	<Row FirstName="John" LastName="Doe" Email="john@doe.com" URLToPhoto="http://placehold.it/75x75" Department="Accounting"/>
	<Row FirstName="Jane" LastName="Smith" Email="jane@smith.com" URLToPhoto="http://placehold.it/75x75" Department="Accounting"/>
	<Row FirstName="Jack" LastName="Anderson" Email="jack@andersoncorp.com" URLToPhoto="http://placehold.it/75x75" Department="Sales"/>
	<Row FirstName="Joe" LastName="Miller" Email="joe@millerinc.com" URLToPhoto="http://placehold.it/75x75" Department="Sales"/>
	<Row FirstName="Jim" LastName="Bo" Email="jim@boenterprises.com" URLToPhoto="http://placehold.it/75x75" Department="IT"/>
	</Employees>
	<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template match="/">
	<ul class="peopledirectory">
	<xsl:apply-templates/>
	</ul>
	</xsl:template>
	<xsl:template match="Row">
	<li>
	<h2>
	<xsl:value-of select="@LastName"/>,
	<xsl:value-of select="@FirstName"/>
	</h2>
	<img alt="Photo of {@FirstName} {@LastName}" src="{@URLToPhoto}" title="Photo of {@FirstName} {@LastName}"/>
	<a href="mailto:{@Email}">
	<xsl:value-of select="@Email"/>
	</a>
	<p>Department:
	<xsl:value-of select="@Department"/>
	</p>
	</li>
	</xsl:template>
	</xsl:stylesheet>
	<!DOCTYPE html>
	<html>

	<head>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
	</script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
	</script>
	<meta charset=utf-8 />
	<title>
	SharePoint Experience
	</title>
	</head>

	<body>
	<div id="tabs">
	<ul>
	<li>
	<a href="#tabs-1">Accounting</a>
	</li>
	<li>
	<a href="#tabs-2">Sales</a>
	</li>
	<li>
	<a href="#tabs-3">IT</a>
	</li>
	</ul>
	<div id="tabs-1">
	<ul class="peopledirectory">
	<li>
	<h2>
	Doe, John
	</h2>
	<img src="http://placehold.it/75x75" alt="Photo of John Doe" title="Photo of John Doe"
	/>
	<a href="mailto:john@doe.com">john@doe.com</a>
	<p>
	Department: Accounting
	</p>
	</li>
	<li>
	<h2>
	Smith, Jane
	</h2>
	<img src="http://placehold.it/75x75" alt="Photo of Jane Smith" title="Photo of Jane Smith"
	/>
	<a href="mailto:jane@smith.com">jane@smith.com</a>
	<p>
	Department: Accounting
	</p>
	</li>
	</ul>
	</div>
	<div id="tabs-2">
	<ul class="peopledirectory">
	<li>
	<h2>
	Anderson, Jack
	</h2>
	<img src="http://placehold.it/75x75" alt="Photo of Jack Anderson" title="Photo of Jack Anderson"
	/>
	<a href="mailto:jack@andersoncorp.com">jack@andersoncorp.com</a>
	<p>
	Department: Sales
	</p>
	</li>
	<li>
	<h2>
	Miller, Joe
	</h2>
	<img src="http://placehold.it/75x75" alt="Photo of Joe Miller" title="Photo of Joe Miller"
	/>
	<a href="mailto:joe@millerinc.com">joe@millerinc.com</a>
	<p>
	Department: Sales
	</p>
	</li>
	</ul>
	</div>
	<div id="tabs-3">
	<ul class="peopledirectory">
	<li>
	<h2>
	Bo, Jim
	</h2>
	<img src="http://placehold.it/75x75" alt="Photo of Jim Bo" title="Photo of Jim Bo"
	/>
	<a href="mailto:jim@boenterprises.com">jim@boenterprises.com</a>
	<p>
	Department: IT
	</p>
	</li>
	</ul>
	</div>
	</div>
	</body>
	</html>
	<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<!--
	XSL Key
	name = the name for your group-by key. You'll refer to this by name later
	match = the element you're grouping (For SharePoint, this is ALWAYS "Row")
	use = The attribute by which you want to group
	-->

	<xsl:key name="group-by-department" match="Row" use="@Category"/>

	<xsl:template match="/">
	<ul>
	<xsl:apply-templates/>
	</ul>
	</xsl:template>
	<!-- For SharePoint, change "NavLinks" to "Rows" -->
	<xsl:template match="NavLinks">
	<!--
	Unique grouped rows:
	Change "group-by-department" to the name of your key
	Change "@Category" to the field by which you are grouping
	That's it
	-->
	<xsl:for-each
	select="Row[count(. \| key('group-by-department', @Category)[1]) = 1]">
	<xsl:sort select="@Category"/>
	<!-- here's the "parent" content for each unique group -->
	<xsl:comment>BEGIN Group for <xsl:value-of select="@Category"/></xsl:comment>
	<li class="group-{translate(@Category, ' ','')}">
	<h1>
	<xsl:value-of select="@Category"/>
	</h1>
	<ul>
	<xsl:for-each select="key('group-by-department', @Category)">
	<!-- Here's the repeating section for each actual row -->
	<xsl:sort select="@Title"/>
	<li>
	<a href="{@href}">
	<xsl:value-of select="@Title"/>
	</a>
	</li>
	</xsl:for-each>
	</ul>
	</li>
	<xsl:comment>/END/ Group for <xsl:value-of select="@Category"/></xsl:comment>
	</xsl:for-each>
	</xsl:template>
	</xsl:stylesheet>
	<NavLinks>
	<Row Category="Information" href="#" Title="Sub Link 1 for Third Menu"/>
	<Row Category="Information" href="#" Title="Sub Link 2 for Third Menu"/>
	<Row Category="Products" href="#" Title="Sub Link 1"/>
	<Row Category="Products" href="#" Title="Sub Link 2"/>
	<Row Category="Services" href="#" Title="Cleaning"/>
	<Row Category="Services" href="#" Title="Deodorizing"/>
	<Row Category="Services" href="#" Title="Disinfecting"/>
	</NavLinks>
	<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<!-- This XSL Stylesheet created by SharePoint Experts, Inc. -->
	<!-- http://sharepointexperience.com -->

	<xsl:output method="html" indent="yes"/>
	<!-- This template is the "wrapper" or "container" for the custom view. -->
	<xsl:template match="/">
	<!-- This is the actual wrapper element that will be emitted -->
	<div>
	<!-- This will tell the data view to look for the actual content
	and come back when it's done. -->
	<xsl:apply-templates/>
	</div>
	<!-- end wrapper -->
	</xsl:template>
	<xsl:template match="/dsQueryResponse/Rows/Row">
	<!-- This markup is used for each item in the list -->
	<p><xsl:value-of select="@Title"/></p>
	</xsl:template>
	</xsl:stylesheet>