pcjs/docs/pcjs/panel

layout	title	permalink
page	PCjs <panel> Element	/docs/pcjs/panel/

PCjs Control Panel Component

Format

<panel>...</panel>

Purpose

Creates an instance of the Control Panel component, which simply acts as a container for controls that the machine wants to bind to the Computer, CPU, Keyboard and/or Debugger components.

Attributes

None.

Bindings

Refer to available bindings in the Computer, CPU, Keyboard and Debugger components.

Example

<panel id="panel" pos="center" width="900px" padleft="8px">
    <name>Control Panel</name>
    <control type="container" width="500px" pos="left" padbottom="10px">
        <control type="textarea" class="output" binding="print" width="480px" height="200px"/>
        <control type="container">
            control type="text" class="input" binding="debugInput" width="360px"/>
            <control type="button" class="input" binding="debugEnter">Enter</control>
            <control type="button" class="input" binding="clear">Clear</control>
        </control>
    </control>
</panel>

See /devices/pc/panel/default.xml for a more complete example.

Output

<div id="..." class="pc-panel pc-component">
    <div class="pc-container">
        <div class="pcjs-panel" data-value="id:'...',name:'...'">
        </div>
    </div>
</div>

Also, if any controls are defined, another <div> of class="pc-controls" is created in the container <div>, with each control inside a <div> of class="pc-control".

[Return to PCjs Documentation]