App Setup

Overview


When a user launches a workspace, all apps in the workspace are given an oppurtunity to initialize itself, which may include adding its icon to the workpace icon list. This is accomplished through the $setup method, which is called on all apps that provide one.

Setup Parameters


The $setup function uses the same dependency injection framework available to components. This means that you list the objects that you need to use in your app in the setup method and they will be passed to the method when it is called.

In addition to the standard services available to components, apps have a $desktop object available to them which has app specific functions.

Because you will want to make these services avaliable to any code within your app module, you will typically declare the objects you need outside the $setup function. 


let _desktop;
let _page;
export function $setup($desktop, $page) {
  _desktop = $desktop;
  let _page = $page;
}

Basic Implementation


The $setup function is called when the app is loaded. Typically there isnt much that the setup method needs to accomplish. In the following code, the setup accomplishes the following tasks

  1. creates a unique id for the app, using the $util guid method
  2. adds an icon to the list of icons (on the left of the workspace).
  3. runs the $run method when the user clicks the icon.
  4. creates the html that contains the app, and inserts it into the _center div, then hides the HTML. (the app is not currently the active app) 



import * as $util from "/lib/app/v1.0.0/util.mjs";
let guid = $util.guid();

export function $setup(services, $services) {
  let html = '<div class="icon-div" id="' + guid + '-icon"><img class="_icon" src="/icons/stats-icon.png"/></div>'
  $('#_icons').append(html);

  //run the app if the user clicks the icon
  $('#' + guid + '-icon').click(function (ev) {
    services.activate(guid + '-icon');
    $run();
  });

  //add necessary html to the center pane
  let html1 = `
  <div id="`+ guid + `" style="display:flex;flex-direction:row;height:100%;width:100%">
	<div id="`+ guid + `-controls-left" style="background-color:#F8F8F8;width:320px;height:100%;border:solid;border-width:1px;border-color:lightgrey;padding:20px;display:flex;flex-direction:column">
	</div>
	<div id="`+ guid + `-controls-right" style="flex:1;height:100%;display:flex;flex-direction:column;padding:10px;overflow:auto">		
	</div>
  <div>
`
  $('#_center').append(html1);
  $('#' + guid).hide();
}


The services object contains methods that are used to interact with the environment. In this code, the activate method will add style info to the icon to indicate that it has been activated.

The html here is inserted to the div with id "center". Then the html is hidden. When the icon is clicked, typically an app will then show its html.



Listening for Events


The $setup method is most likely the place to register event handlers to listen for page events, such as when a component has been added to the workspace. 


export function $setup($page) {
  $page.on('add', config=>{
	//do something
  });
}