Can't seem to see my newly created panel


#1

I’m following the manual to create a new panelItem. I’ve pasted in the default code into a js file called remote-menu.js, and then for the registration step, I copied all of the code under the comment ‘static’ into the /src/client/index.js file and then the runtime code into the /src/server/index.js

When I run osjs, I can’t see a panel item with ‘hello world’ in it, when inspecting the code through chrome’s element analyser, I cannot see anything resembling the panelItem.

I assume my panel hasn’t been registered yet, how do you register it properly?


#2

Can’t see your code so can’t help.


#3

You have to add the item to the panel as well. Registering it only makes it “available”.


#4

First create the panel item source, register it (statically recommended). Then add this to your src/client/config.js file:

  desktop: {
    settings: {
      panels: [{
        position: 'top',
        items: [
          {name: 'menu'},
          {name: 'windows'},
          {name: 'myitem'}, // <- NEW
          {name: 'tray'},
          {name: 'clock'}
        ]
      }]
    }
  },

This will not override the original panel, but add a new one. To make sure the old one is overwritten instead, head into your src/client/index.js, file and modify the osjs instance:

const osjs = new Core(config, {
  omit: ['desktop.settings.panels']
});

NB If your user has modified their settings, changes will not take effect. Clear your browser data or localStorage manually.


#5

What do you mean by statically register? Do you mean go to /src/client/index.js, and then where the PanelServiceProvider is registered, add in the args(as specified by the manual)? Do I need to also register it on runtime too? If so how do I do that?

Below are the exact steps I am taking, even putting these steps in place, I do not see the panelItem:

$OSJS = root folder of OSJS
term1 means the first terminal window I open on the host machine, term2 means the 2 terminal I open on the host machine.

term1 at $OSJS: npm run watch
term2 at $OSJS: npm run serve

  1. go to $OSJS/src/client/index.js, where the line osjs.register(PanelServiceProvider); is, I replace it with:

    osjs.register(PanelServiceProvider, {
    args: {
    registry: {
    ‘remote-menu-panel-item’: RemoteMenuPanelItem
    }
    }
    });

where RemoteMenuPanelItem is:

import {PanelItem} from '@osjs/panels';

export class RemoteMenuPanelItem extends PanelItem {
  render(state, actions) {
    return super.render('remote-menu-panel-item', [
      h('span', {}, 'Hello World!')
    ]);
  }
}

located in …/panels/items/remote-menu.js

next I go to $OSJS/src/client/config.js and type in the following (this is the code for the entire file):

module.exports = {
  //auth: {
  //  login: {
  //    username: 'demo',
  //    password: 'demo'
  //  }
  //}
  desktop: {
settings: {
  panels: [{
    position: 'top',
    items: [
      {name: 'menu'},
      {name: 'windows'},
      {name: 'remote-menu-panel-item'}, // <- NEW
      {name: 'tray'},
      {name: 'clock'}
    ]
  }]
}
  }
};

that’s it (i assume) I am expecting a big black rectangle somewhere on the osjs web browser with the remote menu panel item on it along with the other panel items.

When I log in and try it(by typing in the url into the browser and logging in), nothing is seen.

Do note that on term2 I get an error saying that it cannot watch the code because there is already a process doing it.

What am I missing here?


#6

also I have tried the step where you can omit the original panel, but that step did nothing.


#7

I followed your steps exactly and it works for me. I’m guessing that you’re missing import {h} from hyperapp in your panel item source code.

Yes

No

If it still doesn’t work after adding the missing import. Try clearing the user settings (as mentioned in my previous comment)

Not really sure… as far as I know you can start as many watches as you want.


#8

I found this by looking at the browser developer tools btw. It gave an error.


#9

great thanks! It must have been both the cache problem and the hyperapp import problem together. It worked after adding the import and clearing the cache data.


#10

If you go into your browser developer tools, then the “Network” tab, you can check the “disable cache” to prevent that :slight_smile:


#11

will do, thanks! Will this have to be done, if I modify only the panel item source?


#12

No, you don’t have to, but I would recommend it so you don’t have to worry about cache (only works when devtools is open)