SemwidgJS / Example

Code

<div data-sw-config="endpoint" 
     data-swp-id="dbpedia" 
     data-swp-url="//dbpedia.org/sparql" 
     data-swp-default-graph-uri="http://dbpedia.org" 
     data-swp-default-lang="en"
     data-swp-proxy="none">
</div>

<div data-sw-config="resource"
     data-swp-id="city"
     data-swp-uri="http://dbpedia.org/resource/Vienna"
     data-swp-endpoint="dbpedia">
</div>

<div data-sw-config="namespace"
     data-swp-id="dbpprop"
     data-swp-uri="http://dbpedia.org/property/">
</div>

<div data-sw-config="mapping"
     data-swp-id="language"
     data-swp-value="en">
</div>

<div>Enter the resource URI of a city. Press ENTER to confirm:</div>
<div data-sw-widget="SwInputText"
     data-swp-id="resourceUriInput"
     data-swp-target="city.uri"
     data-swp-title="Enter the resource uri of a city"
     data-swp-style="width: 256px; margin: 8px 8px;">
</div>

<h3 data-sw-widget="SwLabel"
    data-swp-id="heading"
    data-swp-value="{city.rdfs:label(@lang = '$$language$$')}"
    data-swp-style="color: #111111;"
    data-swp-title="Label of {city.rdfs:label(@lang = '$$language$$')}">
</h3>

<div data-sw-widget="SwLink"
     data-swp-id="website"
     data-swp-value="{city.dbpprop:website}"
     data-swp-label="Website: {city.dbpprop:website}"
     data-swp-target="_blank"
     data-swp-style="color: #222222;"
     data-swp-title="Website of {city.rdfs:label(@lang = '$$language$$')}">
</div>

<div data-sw-widget="SwLabel"
     data-swp-id="population"
     data-swp-value="Population: {city.dbpedia-owl:populationTotal}"
     data-swp-style="color: #111111;"
     data-swp-title="Population of {city.rdfs:label(@lang = '$$language$$')}">
</div>

<div data-sw-widget="SwImage"
     data-swp-id="image"
     data-swp-value="{city.dbpedia-owl:thumbnail}"
     data-swp-alt="Image of {city.rdfs:label(@lang = '$$language$$')}"
     data-swp-title="Image of {city.rdfs:label(@lang = '$$language$$')}"
     data-swp-style="height: auto; width: auto; max-width: 200px; max-height: 200px; margin-top: 16px;; border:; 1px; solid; #ddd;; padding:; 2px;">
</div>

<div data-sw-widget="SwLabel"
     data-swp-id="abstract"
     data-swp-value="{city.dbpedia-owl:abstract(@lang = '$$language$$')}"
     data-swp-style="color: #111111;"
     data-swp-title="Abstract of {city.rdfs:label(@lang = '$$language$$')}"
     style="clear: both;">
</div>

<h4 data-sw-widget="SwLabel"
     data-swp-id="famousPeopleHeading"
     data-swp-value="Famous people born in {city.rdfs:label(@lang = '$$language$$')}"
     data-swp-style="color: #111111;"
     style="clear: both;">
</h4>

<div data-sw-widget="SwSimpleList"
     data-swp-id="famousPeople"
     data-swp-value="{city.^dbpedia-owl:birthPlace.rdfs:label(@lang = '$$language$$')}"
     data-swp-max="10"
     data-swp-title="List of famous people born in {city.rdfs:label(@lang = '$$language$$')}">
</div>

<div data-sw-widget="SwOpenStreetMap"
     data-swp-id="map"
     data-swp-lat="{city.geo:lat}"
     data-swp-long="{city.geo:long}"
     data-swp-zoom="10"
     data-swp-style="height: 400px;">
</div>

Result

Enter the resource URI of a city. Press ENTER to confirm: