Creating Browser UIs
As described in Requiring Objects, the
content-studio object's createPanel()
method returns
a PanelControl
object representing a
Content Studio
side panel, and the PanelControl.show('browser')
method can then be used to create a BrowserModel
object. A BrowserModel
object represents a browser
component. It has two properties:
content
-
This property is a string to which you can supply HTML that you want to display in the panel.
uri
-
This property can be used to specify the URI of an HTML file that you want to display in the panel.
So in order to display your own own user interface component in a side
panel using the BrowserModel
's uri
property, all you need to do is:
-
Create an HTML file containing the user interface component you want to display.
-
Store the HTML file in a location that will be accessible from Content Studio.
-
Write the Javascript code needed to create the panel and display your component in it.
To create a "hello world" panel, for example, you would need to make an HTML file something like this:
<!DOCTYPE html> <html> <head> <title>Hello</title> <script type="text/javascript"> function sayHello() { var script = 'require("notifier").notify("Hello world!");'; scriptExecutor.executeScript(script); } </script> </head> <body> <input type="button" value="Say it" onclick="sayHello()" /> </body> </html>
If you save the file on your local machine as
hello.html
(and you have a web server running) then
you might display it in
Content Studio
by entering the following code into your Javascript console:
var cs = require('content-studio'); var mypanel = 'http://example.com/studio/sidepanel/hello'; var browserui; cs.on('panel-init', function(panelcontrol) { if (panelcontrol.uri == mypanel) { browserui = panelcontrol.show('browser'); browserui.uri = "http://localhost:8080/hello.html"; } }); cs.createPanel(mypanel, '&Hello', 'shift F9');
The result in Content Studio looks something like this:
and clicking on the button displays a "Hello world" notification.