You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@jena.apache.org by ij...@apache.org on 2014/06/05 15:57:46 UTC
svn commit: r1600662 - in /jena/Experimental/jena-fuseki2/src/main/webapp:
./ css/ js/app/ js/app/controllers/ js/app/models/ js/app/views/ js/lib/
Author: ijd
Date: Thu Jun 5 13:57:45 2014
New Revision: 1600662
URL: http://svn.apache.org/r1600662
Log:
Initial integration of qonsole into new layout
Modified:
jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css
jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/query-controller.js
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/main.dataset.js
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/models/fuseki-server.js
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/dataset-selector.js
jena/Experimental/jena-fuseki2/src/main/webapp/js/lib/qonsole.js
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css
URL: http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css?rev=1600662&r1=1600661&r2=1600662&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css Thu Jun 5 13:57:45 2014
@@ -124,4 +124,8 @@ a.navbar-brand img {
.tab-pane > div {
background-color: white;
border-radius: 3px;
+}
+
+#sparqlEndpoint {
+ min-width: 300px;
}
\ No newline at end of file
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html
URL: http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html?rev=1600662&r1=1600661&r2=1600662&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html Thu Jun 5 13:57:45 2014
@@ -85,144 +85,132 @@
<div class="no-dataset">Please select a dataset.</div>
<div class="with-dataset hidden">
<div class="row">
- <h1>SPARQL query form</h1>
- <p>To try out some SPARQL queries against the data in this Fuseki instance, enter your
- query below. You can select one of the active datasets to run the query against using the
- <span class="btn btn-custom-2">Select endpoint</span> button.</p>
-
- <div class="qonsole">
- <div class="col-md-12 well">
- <h2 class="">Example queries</h2>
- <ul class="list-inline examples">
- </ul>
- </div>
-
- <div class="col-md-12 well vertical">
- <h2 class="">Prefixes</h2>
- <ul class="list-inline prefixes">
- <li class="keep">
- <a data-toggle="modal" href="#prefixEditor" class="button" title="Add a SPARQL prefix">
- <i class="fa fa-plus-circle"></i>
- </a>
- </li>
- </ul>
- </div>
-
- <div class="col-md-12 well">
- <div class="query-edit">
- <div id="query-edit-cm" class=""></div>
+ <div class="col-md-12">
+ <h2>SPARQL query</h2>
+ <p>To try out some SPARQL queries against the selected dataset, enter your
+ query here.</p>
+
+ <div class="qonsole">
+ <div class="col-md-12 well">
+ <h2 class="">Example queries</h2>
+ <ul class="list-inline examples">
+ </ul>
</div>
- <div class="query-chrome">
- <form class="form-inline" role="form">
- <div class="form-group">
- <label>SPARQL endpoint</label>
- <div class="dropdown ">
- <a data-toggle="dropdown" class="btn btn-custom2" href="#">
- Select endpoint <i class="icon-collapse"></i>
- </a>
- <ul class="dropdown-menu endpoints" role="menu" aria-labelledby="dropdownMenu1">
- </ul>
- </div>
- </div>
- <div class="form-group">
- <label></label>
- <div>
- <input type="text" class="form-control" id="sparqlEndpoint" />
+
+ <div class="col-md-12 well vertical">
+ <h2 class="">Prefixes</h2>
+ <ul class="list-inline prefixes">
+ <li class="keep">
+ <a data-toggle="modal" href="#prefixEditor" class="button" title="Add a SPARQL prefix">
+ <i class="fa fa-plus-circle"></i>
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ <div class="col-md-12 well">
+ <div class="query-edit">
+ <div id="query-edit-cm" class=""></div>
+ </div>
+ <div class="query-chrome">
+ <form class="form-inline" role="form">
+ <div class="col-md-4">
+ <div class="form-group">
+ <label>SPARQL endpoint</label>
+ <div class="">
+ <input type="text" class="form-control" id="sparqlEndpoint" />
+ </div>
+ </div>
</div>
- </div>
- <div class="form-group">
- <label>Results</label>
- <div class="dropdown ">
- <a data-toggle="dropdown" class="btn btn-custom2 display-format" href="#" data-value="tsv">
- <span>table</span> <i class="icon-collapse"></i>
- </a>
- <ul class="dropdown-menu formats " role="menu" aria-labelledby="dropdownMenu2">
- <li role='presentation' class="" ><a data-value="tsv" role='menuitem' tabindex='-1' href='#'>table</a></li>
- <li role='presentation' class="" ><a data-value="text"role='menuitem' tabindex='-1' href='#'>plain text</a></li>
- <li role='presentation' class="" ><a data-value="json"role='menuitem' tabindex='-1' href='#'>JSON</a></li>
- <li role='presentation' class="" ><a data-value="xml"role='menuitem' tabindex='-1' href='#'>XML</a></li>
- </ul>
+ <div class="form-group">
+ <label>Results</label>
+ <div class="dropdown ">
+ <a data-toggle="dropdown" class="btn btn-custom2 display-format" href="#" data-value="tsv">
+ <span>table</span> <i class="icon-collapse"></i>
+ </a>
+ <ul class="dropdown-menu formats " role="menu" aria-labelledby="dropdownMenu2">
+ <li role='presentation' class="" ><a data-value="tsv" role='menuitem' tabindex='-1' href='#'>table</a></li>
+ <li role='presentation' class="" ><a data-value="text"role='menuitem' tabindex='-1' href='#'>plain text</a></li>
+ <li role='presentation' class="" ><a data-value="json"role='menuitem' tabindex='-1' href='#'>JSON</a></li>
+ <li role='presentation' class="" ><a data-value="xml"role='menuitem' tabindex='-1' href='#'>XML</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="form-group">
- <label></label>
- <div>
- <a id="perform-btn" href="#" class="btn btn-success run-query form-control">perform query</a>
+ <div class="form-group">
+ <label></label>
+ <div>
+ <a id="perform-btn" href="#" class="btn btn-success run-query form-control">perform query</a>
+ </div>
</div>
- </div>
- </form>
+ </form>
+ </div>
</div>
- </div>
- <!-- results -->
- <div id="results-block" class="row sparql sparql-results">
- <div class="col-md-12">
- <div class="well">
- <div class="row">
- <div class="col-md-12">
- <span class="loadingSpinner hidden">
- <img src="images/wait30.gif" alt="waiting for server action to complete" />
- </span>
- <span class="timeTaken hidden"></span>
+ <!-- results -->
+ <div id="results-block" class="row sparql sparql-results">
+ <div class="col-md-12">
+ <div class="well">
+ <div class="row">
+ <div class="col-md-12">
+ <span class="loadingSpinner hidden">
+ <img src="images/wait30.gif" alt="waiting for server action to complete" />
+ </span>
+ <span class="timeTaken hidden"></span>
+ </div>
</div>
- </div>
- <div class="row">
- <div class="col-md-12" id="results">
- <h2 class="col-md-12">Query results</h2>
+ <div class="row">
+ <div class="col-md-12" id="results">
+ <h2 class="col-md-12">Query results</h2>
+ </div>
</div>
</div>
</div>
</div>
- </div>
-
- <div class="row clearfix"></div>
+ </div><!-- /.qonsole-->
- <footer>
- </footer>
- </div><!-- /.qonsole-->
-
- <!-- modal dialogue -->
- <div class="modal fade" id="prefixEditor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title">Add a SPARQL prefix</h4>
- </div>
- <div class="modal-body">
- <form class="form-horizontal" role="form">
- <div class="form-group">
- <label for="inputPrefix" class="col-lg-2 control-label">Prefix</label>
- <div class="col-lg-10">
- <input type="text" class="form-control" id="inputPrefix" placeholder="Prefix" autofocus>
+ <!-- modal dialogue -->
+ <div class="modal fade" id="prefixEditor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h4 class="modal-title">Add a SPARQL prefix</h4>
+ </div>
+ <div class="modal-body">
+ <form class="form-horizontal" role="form">
+ <div class="form-group">
+ <label for="inputPrefix" class="col-lg-2 control-label">Prefix</label>
+ <div class="col-lg-10">
+ <input type="text" class="form-control" id="inputPrefix" placeholder="Prefix" autofocus>
+ </div>
</div>
- </div>
- <div class="form-group">
- <div class="col-lg-offset-2 col-lg-10">
- <button class="btn btn-sm btn-primary" id="lookupPrefix">Lookup <span></span> on prefix.cc</button>
+ <div class="form-group">
+ <div class="col-lg-offset-2 col-lg-10">
+ <button class="btn btn-sm btn-primary" id="lookupPrefix">Lookup <span></span> on prefix.cc</button>
+ </div>
</div>
- </div>
- <div class="form-group">
- <label for="inputURI" class="col-lg-2 control-label">URI</label>
- <div class="col-lg-10">
- <input type="text" class="form-control" id="inputURI" placeholder="URI">
+ <div class="form-group">
+ <label for="inputURI" class="col-lg-2 control-label">URI</label>
+ <div class="col-lg-10">
+ <input type="text" class="form-control" id="inputURI" placeholder="URI">
+ </div>
</div>
- </div>
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
- <button type="button" class="btn btn-primary" data-dismiss="modal" id="addPrefix">add prefix</button>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal-dialog -->
- </div><!-- /.modal -->
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
+ <button type="button" class="btn btn-primary" data-dismiss="modal" id="addPrefix">add prefix</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
- </div>
+ </div>
+ </div> <!-- .col-md-12 -->
</div> <!-- /.with-dataset -->
</div>
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js
URL: http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js?rev=1600662&r1=1600661&r2=1600662&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js Thu Jun 5 13:57:45 2014
@@ -8,7 +8,8 @@ define(
_ = require( "underscore" ),
fui = require( "fui" ),
DatasetSelectorView = require( "views/dataset-selector" ),
- TabbedViewManagerView = require( "views/tabbed-view-manager" );
+ TabbedViewManagerView = require( "views/tabbed-view-manager" ),
+ QueryController = require( "controllers/query-controller" );
var DatasetController = function() {
this.initEvents();
@@ -16,18 +17,30 @@ define(
// add the behaviours defined on the controller
_.extend( DatasetController.prototype, {
+
initEvents: function() {
_.bindAll( this, "onServerModelReady" );
- fui.vent.on( "models.fuseki-server.ready", this.onServerModelReady );
+
+ if (fui.models.fusekiServer && fui.models.fusekiServer.get( "ready" )) {
+ this.onServerModelReady();
+ }
+ else {
+ fui.vent.on( "models.fuseki-server.ready", this.onServerModelReady );
+ }
},
- /** When the fuseki server is ready, we can list the initial datasets */
- onServerModelReady: function( event ) {
+ /**
+ * When the fuseki server is ready, we can list the initial datasets, and
+ * start the tab manager to manage the tabbed content.
+ **/
+ onServerModelReady: function() {
fui.views.datasetSelectorView = new DatasetSelectorView( {model: fui.models.fusekiServer} )
fui.views.datasetSelectorView.render();
fui.views.tabbedViewManagerView = new TabbedViewManagerView();
fui.views.tabbedViewManagerView.render();
+
+ fui.controllers.queryController = new QueryController();
}
} );
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/query-controller.js
URL: http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/query-controller.js?rev=1600662&r1=1600661&r2=1600662&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/query-controller.js (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/query-controller.js Thu Jun 5 13:57:45 2014
@@ -1,4 +1,10 @@
-/** Controller for the main index.html page */
+/**
+ * Controller for the embedded Qonsole component.
+ *
+ * Note: unlike some Qonsole installations, the endpoint URL selector dropdown
+ * has been removed in favour of the dataset selector control higher up the page.
+ **/
+
define(
function( require ) {
var Marionette = require( "marionette" ),
@@ -6,8 +12,7 @@ define(
_ = require( "underscore" ),
fui = require( "fui" ),
qonsole = require( "lib/qonsole" ),
- pageUtils = require( "util/page-utils" ),
- DatasetsDropdownListView = require( "views/datasets-dropdown-list" );
+ pageUtils = require( "util/page-utils" );
var QueryController = function() {
this.initEvents();
@@ -15,41 +20,25 @@ define(
// add the behaviours defined on the controller
_.extend( QueryController.prototype, {
+
initEvents: function() {
- _.bindAll( this, "onServerModelReady" );
- fui.vent.on( "models.fuseki-server.ready", this.onServerModelReady );
- },
+ _.bindAll( this, "onServerModelReady", "onDatasetChanged" );
- /** Return a hashmap of datasets, in a form we can pass to qonsole */
- datasetsConfig: function( endpoints, datasets ) {
- _.each( datasets, function( ds ) {
- var queryURL = ds.queryURL();
- if (queryURL) {
- endpoints[ds.name()] = queryURL;
-
- if (!endpoints["default"]) {
- endpoints["default"] = queryURL;
- }
- }
- } );
+ if (fui.models.fusekiServer && fui.models.fusekiServer.get( "ready" )) {
+ this.onServerModelReady();
+ }
+ else {
+ fui.vent.on( "models.fuseki-server.ready", this.onServerModelReady );
+ }
- return endpoints;
+ fui.vent.on( "dataset.changed", this.onDatasetChanged );
},
/** Initialise the qonsole component */
initQonsole: function( datasetsConfig ) {
var qonfig = require( "qonsole-config" );
- qonfig.endpoints = datasetsConfig;
qonsole.init( qonfig );
- },
-
- /** Set the default endpoint, if it was passed in the URL */
- setDefaultEndpoint: function( fusekiServer, endpoints ) {
- var dsName = pageUtils.queryParam( "ds" );
- if (dsName) {
- var ds = fusekiServer.dataset( dsName );
- endpoints["default"] = ds.queryURL();
- }
+ this.setEndpointURL( fui.models.fusekiServer.selectedDatasetName() );
},
/** When the fuseki server is ready, we can init the qonsole */
@@ -58,12 +47,18 @@ define(
var endpoints = {};
var datasets = fusekiServer.datasets();
- this.setDefaultEndpoint( fusekiServer, endpoints );
- this.initQonsole( this.datasetsConfig( endpoints, datasets ) );
+ this.initQonsole( {} );
+ },
+
+ /** When notified that the selected dataset name has changed, update the endpoint URL */
+ onDatasetChanged: function( dsName ) {
+ this.setEndpointURL( dsName );
+ },
- var ddlv = new DatasetsDropdownListView( {model: datasets} );
- ddlv.render();
- ddlv.setCurrentDatasetName( pageUtils.queryParam("ds") );
+ /** Set the endpoint URL based on the selected dataset name */
+ setEndpointURL: function( dsName ) {
+ var dataset = fui.models.fusekiServer.dataset( dsName );
+ $( "#sparqlEndpoint" ).val( dataset.queryURL() );
}
} );
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/js/app/main.dataset.js
URL: http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/js/app/main.dataset.js?rev=1600662&r1=1600661&r2=1600662&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/js/app/main.dataset.js (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/js/app/main.dataset.js Thu Jun 5 13:57:45 2014
@@ -6,8 +6,9 @@ define( ['require', '../common-config'],
['underscore', 'jquery', 'backbone', 'marionette', 'fui', 'controllers/dataset-controller',
'sprintf',
'lib/bootstrap-select.min',
+ 'controllers/query-controller',
'models/fuseki-server', 'models/dataset',
- 'views/dataset-selector',
+ 'views/dataset-selector', 'views/tabbed-view-manager',
'services/ping-service',
'lib/jquery.xdomainrequest',
'lib/jquery.form'
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/js/app/models/fuseki-server.js
URL: http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/js/app/models/fuseki-server.js?rev=1600662&r1=1600661&r2=1600662&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/js/app/models/fuseki-server.js (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/js/app/models/fuseki-server.js Thu Jun 5 13:57:45 2014
@@ -87,7 +87,7 @@ define(
return new Dataset( d, bURL, mgmtURL );
} );
- this.set( {server: serverDesc.server, datasets: datasets} );
+ this.set( {server: serverDesc.server, datasets: datasets, ready: true} );
},
/**
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/dataset-selector.js
URL: http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/dataset-selector.js?rev=1600662&r1=1600661&r2=1600662&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/dataset-selector.js (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/dataset-selector.js Thu Jun 5 13:57:45 2014
@@ -34,24 +34,45 @@ define(
"change .dataset-selector select": "onChangeDataset"
},
+ /**
+ * After rendering, set up the dataset picker and notify the rest of the
+ * app if the default dataset name is known.
+ */
onRender: function() {
var selector = $('.selectpicker');
selector.selectpicker('refresh');
if (selector.val()) {
this.unHideDatasetElements();
+ this.notifyDatasetName();
}
},
+ /**
+ * Respond to a change in the dataset name selection by updating
+ * the underlying model. TODO: should also update the application
+ * URL.
+ */
onChangeDataset: function( e ) {
var newDatasetName = this.ui.select.val();
this.model.set( "selectedDatasetName", newDatasetName );
- fui.vent.trigger( "dataset.changed", newDatasetName );
+ this.notifyDatasetName( newDatasetName );
},
+ /**
+ * Ensure that elements that should be visible when a dataset is known
+ * are not hidden, and vice-versa.
+ */
unHideDatasetElements: function() {
$(".no-dataset").addClass( "hidden" );
$(".with-dataset").removeClass( "hidden" );
+ },
+
+ /** Trigger an event to notify other components that the dataset
+ * name has been selected.
+ */
+ notifyDatasetName: function( dsName ) {
+ fui.vent.trigger( "dataset.changed", dsName || this.ui.select.val() );
}
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/js/lib/qonsole.js
URL: http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/js/lib/qonsole.js?rev=1600662&r1=1600661&r2=1600662&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/js/lib/qonsole.js (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/js/lib/qonsole.js Thu Jun 5 13:57:45 2014
@@ -115,14 +115,6 @@ var qonsole = function() {
$("a.run-query").on( "click", runQuery );
- $(document)
-// .ajaxStart(function() {
-// elementVisible( ".loadingSpinner", true );
-// })
-// .ajaxStop(function() {
-// elementVisible( ".loadingSpinner", false );
-// });
-
// dialogue events
$("#prefixEditor").on( "click", "#lookupPrefix", onLookupPrefix )
.on( "keyup", "#inputPrefix", function( e ) {
@@ -196,16 +188,18 @@ var qonsole = function() {
/** Set up the drop-down list of end-points */
var initEndpoints = function( config ) {
- var endpoints = $("ul.endpoints");
- endpoints.empty();
-
- $.each( config.endpoints, function( key, url ) {
- var html = sprintf( "<li role='presentation'><a role='menuitem' tabindex='-1' href='#'>%s</a></li>",
- url );
- endpoints.append( html );
- } );
+ if (config.endpoints) {
+ var endpoints = $("ul.endpoints");
+ endpoints.empty();
+
+ $.each( config.endpoints, function( key, url ) {
+ var html = sprintf( "<li role='presentation'><a role='menuitem' tabindex='-1' href='#'>%s</a></li>",
+ url );
+ endpoints.append( html );
+ } );
- setCurrentEndpoint( config.endpoints["default"] );
+ setCurrentEndpoint( config.endpoints["default"] );
+ }
};
/** Successfully loaded the configuration */