fils/iodputil.dart

## iodputil.dart
library iodputil;
import 'dart:html';
import "dart:json";

class iodputil {

String encodeComponent(String component) {
  if (component == null) return component;
  return component.replaceAll(':', '%3A')
                   .replaceAll('/', '%2F')
                   .replaceAll('?', '%3F')
                   .replaceAll('=', '%3D')
                   .replaceAll('&', '%26')
                   .replaceAll(' ', '%20')
                   .replaceAll('}', '%7D')
                   .replaceAll('{', '%7B')
                   .replaceAll('#', '%23')
                   .replaceAll('(', '%28')
                   .replaceAll(')', '%29');
}

}


## select.html
<!DOCTYPE html>

<html>
  <head>
    <title>index</title>
        <link rel="import" href="xjanusleg.html">

  </head>

  <body>

    <h5>Test of facet call 2</h5>

    <div class="container">
            <template id="leg_template" bind>
               <janus-leg id="janus_leg"></janus-leg>
           </template>
    </div>


    <script type="application/dart" src="select_app.dart"></script>
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
    <script src="packages/polymer/boot.js"></script>

  </body>
</html>

## select_app.dart
import 'dart:html';
import 'package:mdv/mdv.dart' as mdv;
import 'package:fancy_syntax/syntax.dart';
import 'package:observe/observe.dart';


main() {

 // mdv.initialize();
  //TemplateElement.syntax['fancy'] = new FancySyntax();

  var template = query('#leg_template');
  template.bindingDelegate = new FancySyntax();
  //query("#leg_template").fruits =  ['apples', 'oranges', 'pears'];


}

## xjanusleg.dart
import 'dart:html';
import 'dart:json' as json;
import 'package:polymer/polymer.dart';
import './iodputil.dart';


@CustomTag("janus-leg")
class JanusLegComponent extends PolymerElement  with ObservableMixin {

  @observable String serverResponse = 'Calling server';
  @observable List legs = ['apples', 'oranges', 'pears'];

  HttpRequest request;

//  void init() {
//    query('#fruitlist').model = fruits;
//    List fruits = toObservable([]);
//    query('#fruitlist').model = fruits;
//    fruits = ['apples', 'oranges', 'pears'];
//  }

  void onUpdate() {
  iodputil iou = new iodputil();
  String k1 = null;

  k1 = iou.encodeComponent("""
      PREFIX qb:  <http://purl.org/linked-data/cube#>
      PREFIX iodp: <http://data.oceandrilling.org/core/1/>
      PREFIX janus: <http://data.oceandrilling.org/janus/>
      PREFIX sdmx-dimension:  <http://purl.org/linked-data/sdmx/2009/dimension#>
      SELECT DISTINCT  ?leg   count(?slice) as ?count
      FROM <http://data.oceandrilling.org/janus/>
      WHERE {
      ?slice qb:sliceStructure ?sliceKey .
      ?sliceKey iodp:leg ?leg .
      }
  """);

  var callURl = "http://data.oceandrilling.org/sparql?default-graph-uri=&format=applicatiapplication%2Fsparql-results%2Bjson&should-sponge=&query=$k1";

  request.onReadyStateChange.listen(onData);

  request.open('GET', callURl);
  request.send();


  }

  void onData(_) {
    if (request.readyState == HttpRequest.DONE &&
       request.status == 200) {
     // Data saved OK.
     serverResponse = 'Server Sez: ' + request.responseText;
    } else if (request.readyState == HttpRequest.DONE &&
        request.status == 0) {
      // Status is 0...most likely the server isn't running.
        serverResponse = 'No server';
    }
  }

}


## xjanusleg.html
<!DOCTYPE html>
<html>
  <body>
    <polymer-element name="janus-leg" attributes="legs">
      <template>
        <div>
          <p>The facet:   {{ serverResponse }}</p>
         <select style="height:200px;width:200px" bind-value="legs"  id="janusqueryitems" multiple="multiple">
           <template id="leg" repeat>
               <option>{{}}</option>
            </template>
         </select>
        </div>
      </template>
      <script type="application/dart" src="xjanusleg.dart"></script>
    </polymer-element>
  </body>
</html>
	library iodputil;
	import 'dart:html';
	import "dart:json";

	class iodputil {

	String encodeComponent(String component) {
	if (component == null) return component;
	return component.replaceAll(':', '%3A')
	.replaceAll('/', '%2F')
	.replaceAll('?', '%3F')
	.replaceAll('=', '%3D')
	.replaceAll('&', '%26')
	.replaceAll(' ', '%20')
	.replaceAll('}', '%7D')
	.replaceAll('{', '%7B')
	.replaceAll('#', '%23')
	.replaceAll('(', '%28')
	.replaceAll(')', '%29');
	}

	}
	<!DOCTYPE html>

	<html>
	<head>
	<title>index</title>
	<link rel="import" href="xjanusleg.html">

	</head>

	<body>

	<h5>Test of facet call 2</h5>

	<div class="container">
	<template id="leg_template" bind>
	<janus-leg id="janus_leg"></janus-leg>
	</template>
	</div>


	<script type="application/dart" src="select_app.dart"></script>
	<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
	<script src="packages/polymer/boot.js"></script>

	</body>
	</html>
	import 'dart:html';
	import 'package:mdv/mdv.dart' as mdv;
	import 'package:fancy_syntax/syntax.dart';
	import 'package:observe/observe.dart';


	main() {

	// mdv.initialize();
	//TemplateElement.syntax['fancy'] = new FancySyntax();

	var template = query('#leg_template');
	template.bindingDelegate = new FancySyntax();
	//query("#leg_template").fruits = ['apples', 'oranges', 'pears'];


	}
	import 'dart:html';
	import 'dart:json' as json;
	import 'package:polymer/polymer.dart';
	import './iodputil.dart';


	@CustomTag("janus-leg")
	class JanusLegComponent extends PolymerElement with ObservableMixin {

	@observable String serverResponse = 'Calling server';
	@observable List legs = ['apples', 'oranges', 'pears'];

	HttpRequest request;

	// void init() {
	// query('#fruitlist').model = fruits;
	// List fruits = toObservable([]);
	// query('#fruitlist').model = fruits;
	// fruits = ['apples', 'oranges', 'pears'];
	// }

	void onUpdate() {
	iodputil iou = new iodputil();
	String k1 = null;

	k1 = iou.encodeComponent("""
	PREFIX qb: <http://purl.org/linked-data/cube#>
	PREFIX iodp: <http://data.oceandrilling.org/core/1/>
	PREFIX janus: <http://data.oceandrilling.org/janus/>
	PREFIX sdmx-dimension: <http://purl.org/linked-data/sdmx/2009/dimension#>
	SELECT DISTINCT ?leg count(?slice) as ?count
	FROM <http://data.oceandrilling.org/janus/>
	WHERE {
	?slice qb:sliceStructure ?sliceKey .
	?sliceKey iodp:leg ?leg .
	}
	""");

	var callURl = "http://data.oceandrilling.org/sparql?default-graph-uri=&format=applicatiapplication%2Fsparql-results%2Bjson&should-sponge=&query=$k1";

	request.onReadyStateChange.listen(onData);

	request.open('GET', callURl);
	request.send();


	}

	void onData(_) {
	if (request.readyState == HttpRequest.DONE &&
	request.status == 200) {
	// Data saved OK.
	serverResponse = 'Server Sez: ' + request.responseText;
	} else if (request.readyState == HttpRequest.DONE &&
	request.status == 0) {
	// Status is 0...most likely the server isn't running.
	serverResponse = 'No server';
	}
	}

	}