Multiple changes: (refs #1)

* Adding views
* Providing template for views
* Fixes in structure

.gitignore

@@ -0,0 +1,10 @@
+/.tscache
+/.idea
+/build/
+/dist/
+node_modules/
+/src/**/*.js
+/tests/**/*.js
+*.map
+*.css
+*.log

phovea.js

@@ -8,7 +8,9 @@
 module.exports = function(registry) {
  //registry.push('extension-type', 'extension-id', function() { return System.import('./src/extension_impl'); }, {});
  // generator-phovea:begin
-
+ registry.push('app', 'valid', function() { return System.import('./src/'); }, {
+ 'name': 'VALID'
+ });
  // generator-phovea:end
 };
 

src/app.ts

@@ -1,19 +1,68 @@
 /**
- * Created by Caleydo Team on 31.08.2016.
+ * Main entry point of the whole application, where all views are loaded and created.
+ *
+ * Created by Valid Team on 10.04.2016.
+ * Framework Created by Caleydo Team on 31.08.2016.
  */
 
 import * as d3 from 'd3';
+import * as plugins from 'phovea_core/src/plugin';
 import {HELLO_WORLD} from './language';
 
 /**
- * The main class for the App app
+ * Interface for all valid views
  */
-export class App {
+export interface MAppViews {
+ /**
+ * Initialize the view and return a promise
+ * that is resolved as soon the view is completely initialized.
+ * @returns {Promise<MAppViews>}
+ */
+ init():Promise<MAppViews>;
+}
+
+/**
+ * Boilerplate for the views that are loaded
+ */
+interface MAppViewsDesc {
+ /**
+ * Consists of the view id, the parent node, and optional options to the view.
+ */
+ view: string;
+ parent: string;
+ options: any;
+}
+
+/**
+ * The main class for the Valid app
+ */
+export class App implements MAppViews {
 
  private $node;
 
+ /**
+ * Enter here the views you want to append. You can choose between either the
+ * 'dataLoadingView' --> Here the file dialog and load for data is placed
+ * 'dataVizView' --> This contains the final visualization
+ *
+ * @type {[{view: string; parent: string; options: {cssClass: string; eventName: string}}]}
+ */
+ private views:MAppViewsDesc[] = [
+ {
+ view: 'Example',
+ parent: 'app',
+ options: {
+ cssClass: 'test',
+ eventName: 'testEvent'
+ }
+ }
+ ];
+
  constructor(parent:Element) {
  this.$node = d3.select(parent);
+
+ this.$node.append('div').classed('dataLoadingView', true);
+ this.$node.append('div').classed('dataVizView', true);
  }
 
  /**
@@ -22,16 +71,55 @@ export class App {
  * @returns {Promise<App>}
  */
  init() {
+ //This method is used to add the event listeners to the view
+ this.addListeners();
+ //This method calls the build function which fills the DOM with elements
  return this.build();
  }
 
+ /**
+ * Initialize all necessary listeners here
+ */
+ private addListeners() {
+ //Add listeners here
+ }
+
  /**
  * Load and initialize all necessary views
  * @returns {Promise<App>}
  */
  private build() {
- this.$node.html(HELLO_WORLD);
- return Promise.resolve(null);
+ this.setBusy(true); // show loading indicator before loading
+
+ // wrap view ids from package.json as plugin and load the necessary files
+ const pluginPromises = this.views
+ .map((d) => plugins.get('validView', d.view))
+ .filter((d) => d !== undefined) // filter views that does not exists
+ .map((d) => d.load());
+
+ // when everything is loaded, then create and init the views
+ const buildPromise = Promise.all(pluginPromises)
+ .then((plugins) => {
+ this.$node.select('h3').remove(); // remove loading text from index.html template
+
+ const initPromises = plugins.map((p, index) => {
+ const view = p.factory(
+ this.$node.select(`.${this.views[index].parent}`).node(), // parent node
+ this.views[index].options || {} // options
+ );
+ return view.init();
+ });
+
+ // wait until all views are initialized, before going to next then
+ return Promise.all(initPromises);
+ })
+ .then((viewInstances) => {
+ // loading and initialization has finished -> hide loading indicator
+ this.setBusy(false);
+ return this;
+ });
+
+ return buildPromise;
  }
 
  /**

src/index.ts

@@ -7,10 +7,10 @@ import 'file-loader?name=404.html-loader!./404.html';
 import 'file-loader?name=robots.txt!./robots.txt';
 import 'phovea_ui/src/_bootstrap';
 import './style.scss';
-import {create as createApp} from './app';
+import * as app from './app';
 import {create as createHeader, AppHeaderLink} from 'phovea_ui/src/header';
 import {APP_NAME} from './language';
 
 
 const parent = document.querySelector('#app');
-createApp(parent).init();
+app.create(parent).init();

src/style.scss

@@ -3,3 +3,11 @@
  */
 @import 'styles/vars';
 @import 'styles/base';
+
+.dataLoadingView {
+
+}
+
+.dataVizView {
+
+}