2. Solid UI know how

For general Solid-ui know-how head over to the solid-ui readme.

Note: We are trying our best to keep this documentation up to date. If you see something outdated we invite you to make a ticket over at Solid-ui GitHub issues.

Authorization and current user

• webId's
• login/logout
• more: https://github.com/solid/solidos/blob/main/documentation/Using_Private_Resources_In_SolidOS.md

UI concepts

Refresh of UI

• doing a refresh of the whole UI is not ideal because of a lot of recalculations, the reason why UI element/component level refresh is advised or resource refresh.
• UI element refresh:
  • a good example in Solid is maybe the activity of login, when a user is logged in, you are able to do more things: chat, add a friend... So how to do this?
  • the Solid-ui takes care of element refresh through the refresh functions which are available on the div itself. Example code here
  • if one needs to refresh more elements part of the same div, refreshTree(div) triggers that all refresh functions of each div is called. Example here
  • in a nutshell:

 const parentDiv = dom.createElement('div')
 const div = dom.createElement('div')
 div.refresh = function () {
      div.innerHTML = "updated";
    }
 parentDiv.appendChild(div)
 UI.widgets.refreshTree(parentDiv)

• resource refresh:
  • in general javascript elements can have eventListeners. One can make use of eventListeners (like 'click') to change a UI element's look and text, for example.
  • a good example is when we delete a file or folder the whole display of the folder-pane must change/rerender to show that the file/folder disappeared. This is achieved through the kb.updater.addDownstreamChangeListener(folder, refresh) function. Code example here