Skip to content

Convert to a website look and feel

The desktop alike applications looks nice and they are necessary to understand how CodeCoupler is working. In real life they could be useful in some cases, but in the most cases we want to implement applications that looks more like a website instead like a desktop.

For this we will start our applications maximized and without a titlebar.

We could set this on each application with the following panel options:

Maximize only one Application

1
2
3
4
5
6
7
{
  app: TestingButtonsApp,
  panel: {
    setStatus: "maximized",
    header: false
  }
},

But we want to set this panel options for all applications. So we set this into the system default panel options:

index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { System, Sidebar } from "@codecoupler/cc-ui";
import HeaderStage from "./stages/header.js";
import apps from "./apps.js";
import "./style.css";
import "./sidebar.css";
let system = new System({
  id: "codecoupler-walkthrough",
  apps: apps,
  stages: [
    {
      stage: Sidebar,
      options: { logo: "logo.png" }
    },
    {
      stage: HeaderStage,
      options: { header: "Test" }
    }
  ],
  panel: {
    setStatus: "maximized",
    header: false
  }
});
system.initialized
  .then((system) => {
    console.info("System is Ready!", system.id);
  })
  .catch((e) => {
    console.error(e);
    if (!e.systemBlocked)
      document.body.innerHTML = "Oops, Something went wrong!";
  });

And now try to start the applications, navigate with the back and the forward button or reload the page.

Now we have a application environment that behaves looks like a "normal" website.

Please note that the close button will behave like a back navigation. This is in the most cases usefull but in general this button makes no sense in this mode.