Development/Tutorials/Plasma4/JavaScript/API: Difference between revisions
(adding gridlayout api) |
m (More format fixage) |
||
Line 182: | Line 182: | ||
=== UI Element Gallery === | === UI Element Gallery === | ||
====BusyWidget==== | |||
*boolean running | |||
*string label | |||
*function clicked() | |||
====CheckBox==== | |||
*string text | |||
*string image | |||
*string styleSheet | |||
*boolean isChecked | |||
*function toggled(bool) | |||
====ComboBox==== | |||
*string text | |||
*string styleSheet | |||
*function activated(QString) | |||
*function textChanged(QString) | |||
*function clear() | |||
====FlashingLabel==== | |||
*boolean autohide | |||
*object color | |||
*number duration | |||
*function kill() | |||
*function fadeIn() | |||
*function fadeOut() | |||
*function flash(QString,int,QTextOption) | |||
*function flash(QString,int) | |||
*function flash(QString) | |||
*function flash(QPixmap,int,Qt::Alignment) | |||
*function flash(QPixmap,int) | |||
*function flash(QPixmap) | |||
====Frame==== | |||
*number frameShadow | |||
*string text | |||
*string image | |||
*string styleSheet | |||
*number Plain | |||
*number Raised | |||
*number Sunken | |||
====GroupBox==== | |||
*string text | |||
*string styleSheet | |||
====IconWidget==== | |||
*string text | |||
*string infoText | |||
*object icon | |||
*object textBackgroundColor | |||
*object iconSize | |||
*string svg | |||
*undefined action | |||
*number orientation | |||
*number numDisplayLines | |||
*function pressed(bool) | |||
*function clicked() | |||
*function doubleClicked() | |||
*function activated() | |||
*function changed() | |||
*function setPressed(bool) | |||
*function setPressed() | |||
*function setUnpressed() | |||
*function setIcon(QString) | |||
====ItemBackground==== | |||
*object target | |||
*object targetItem | |||
*function appearanceChanged() | |||
*function animationStep(qreal) | |||
*function targetReached(QRectF) | |||
*function targetItemReached(QGraphicsItem*) | |||
====Label==== | |||
*string text | |||
*string image | |||
*number alignment | |||
*boolean hasScaledContents | |||
*string styleSheet | |||
*function linkActivated(QString) | |||
*function linkHovered(QString) | |||
*function dataUpdated(QString,Plasma::DataEngine::Data) | |||
====LineEdit==== | |||
*string text | |||
*boolean isClearButtonShown | |||
*string styleSheet | |||
*function editingFinished() | |||
*function returnPressed() | |||
*function textEdited(QString) | |||
*function textChanged(QString) | |||
====Meter==== | |||
*number minimum | |||
*number maximum | |||
*number value | |||
*string svg | |||
*number meterType | |||
*function dataUpdated(QString,Plasma::DataEngine::Data) | |||
*number BarMeterHorizontal | |||
*number BarMeterVertical | |||
*number AnalogMeter | |||
====PushButton==== | |||
*string text | |||
*string image | |||
*undefined action | |||
*object icon | |||
*boolean checkable | |||
*boolean checked | |||
*boolean down | |||
*function pressed() | |||
*function released() | |||
*function clicked() | |||
*function toggled(bool) | |||
====RadioButton==== | |||
*string text | |||
*string image | |||
*string styleSheet | |||
*boolean isChecked | |||
*function toggled(bool) | |||
====ScrollWidget==== | |||
*object widget | |||
*number horizontalScrollBarPolicy | |||
*number verticalScrollBarPolicy | |||
*object scrollPosition | |||
*object contentsSize | |||
*object viewportGeometry | |||
*string styleSheet | |||
*function ensureRectVisible(QRectF) | |||
*function ensureItemVisible(QGraphicsItem*) | |||
*function registerAsDragHandle(QGraphicsWidget*) | |||
*function unregisterAsDragHandle(QGraphicsWidget*) | |||
====ScrollBar==== | |||
*number singleStep | |||
*number pageStep | |||
*number value | |||
*number minimum | |||
*number maximum | |||
*function valueChanged(int) | |||
*function setValue(int) | |||
*function setOrientation(Qt::Orientation) | |||
====Separator==== | |||
*number orientation | |||
====SignalPlotter==== | |||
*string title | |||
*string unit | |||
*boolean useAutoRange | |||
*number horizontalScale | |||
*boolean showVerticalLines | |||
*object verticalLinesColor | |||
*number verticalLinesDistance | |||
*boolean verticalLinesScroll | |||
*boolean showHorizontalLines | |||
*object horizontalLinesColor | |||
*object fontColor | |||
*number horizontalLinesCount | |||
*boolean showLabels | |||
*boolean showTopBar | |||
*object backgroundColor | |||
*string svgBackground | |||
*boolean thinFrame | |||
*boolean stackPlots | |||
====Slider==== | |||
*number maximum | |||
*number minimum | |||
*number value | |||
*number orientation | |||
*string styleSheet | |||
*function sliderMoved(int) | |||
*function valueChanged(int) | |||
*function setMaximum(int) | |||
*function setMinimum(int) | |||
*function setRange(int,int) | |||
*function setValue(int) | |||
*function setOrientation(Qt::Orientation) | |||
====SpinBox==== | |||
*number maximum | |||
*number minimum | |||
*number value | |||
*string styleSheet | |||
*function sliderMoved(int) | |||
*function valueChanged(int) | |||
*function editingFinished() | |||
*function setMaximum(int) | |||
*function setMinimum(int) | |||
*function setRange(int,int) | |||
*function setValue(int) | |||
====SvgWidget==== | |||
*undefined svg | |||
*string elementID | |||
*function clicked(Qt::MouseButton) | |||
====TabBar==== | |||
*number currentIndex | |||
*number count | |||
*string styleSheet | |||
*boolean tabBarShown | |||
*function currentChanged(int) | |||
*function setCurrentIndex(int) | |||
*function insertTab(int,QIcon,QString,QGraphicsLayoutItem*) | |||
*function insertTab(int,QIcon,QString) | |||
*function insertTab(int,QString,QGraphicsLayoutItem*) | |||
*function insertTab(int,QString) | |||
*function addTab(QIcon,QString,QGraphicsLayoutItem*) | |||
*function addTab(QIcon,QString) | |||
*function addTab(QString,QGraphicsLayoutItem*) | |||
*function addTab(QString) | |||
*function removeTab(int) | |||
*function takeTab(int) | |||
*function tabAt(int) | |||
*function setTabText(int,QString) | |||
*function tabText(int) | |||
*function setTabIcon(int,QIcon) | |||
*function tabIcon(int) | |||
====TextEdit==== | |||
*string text | |||
*boolean readOnly | |||
*function textChanged() | |||
*function dataUpdated(QString,Plasma::DataEngine::Data) | |||
====ToolButton==== | |||
*string text | |||
*boolean autoRaise | |||
*string image | |||
*undefined action | |||
*function clicked() | |||
*function pressed() | |||
*function released() | |||
====TreeView==== | |||
*undefined model | |||
*string styleSheet | |||
====VideoWidget==== | |||
*string url | |||
*number currentTime | |||
*number totalTime | |||
*number remainingTime | |||
*number usedControls | |||
*boolean controlsVisible | |||
*string styleSheet | |||
*function tick(qint64) | |||
*function aboutToFinish() | |||
*function nextRequested() | |||
*function previousRequested() | |||
*function play() | |||
*function pause() | |||
*function stop() | |||
*function seek(qint64) | |||
*function mediaObject() | |||
*function audioOutput() | |||
*number NoControls | |||
*number Play | |||
*number Pause | |||
*number Stop | |||
*number PlayPause | |||
*number Previous | |||
*number Next | |||
*number Progress | |||
*number Volume | |||
*number OpenFile | |||
*number DefaultControls | |||
====WebView==== | |||
*object url | |||
*string html | |||
*boolean dragToScroll | |||
*object scrollPosition | |||
*object contentsSize | |||
*object viewportGeometry | |||
*function loadProgress(int) | |||
*function loadFinished(bool) | |||
=== Layouts === | === Layouts === | ||
==== LinearLayout ==== | ==== LinearLayout ==== | ||
* number spacing | |||
* QtOrientation setOrientation | |||
* function removeAt | |||
* function addStretch | |||
* function setStretchFactor | |||
* function setAlignment | |||
* function insertStretch | |||
* function setItemSpacing | |||
* function setContentsMargins | |||
* function addItem | |||
* function removeItem | |||
* function insertItem | |||
* function toString | |||
==== AnchorLayout ==== | ==== AnchorLayout ==== | ||
* number horizontalSpacing | |||
* number verticalSpacing | |||
* function setSpacing | |||
* function removeAt | |||
* function addAnchor | |||
* function anchor | |||
* function addAnchors | |||
* function addCornerAnchors | |||
* function toString | |||
==== GridLayout ==== | ==== GridLayout ==== | ||
* number horizontalSpacing | |||
* number verticalSpacing | |||
* function rowSpacing | |||
* function setRowSpacing | |||
* function columnSpacing | |||
* function setColumnSpacing | |||
* function rowMinimumHeight | |||
* function setRowMinimumHeight | |||
* function rowPreferredHeight | |||
* function setRowPreferredHeight | |||
* function rowMaximumHeight | |||
* function setRowMaximumHeight | |||
* function rowFixedHeight | |||
* function setRowFixedHeight | |||
* function columnMinimumWidth | |||
* function setColumnMinimumWidth | |||
* function columnPreferredWidth | |||
* function setColumnPreferredWidth | |||
* function columnMaximumWidth | |||
* function setColumnMaximumWidth | |||
* function columnFixedWidth | |||
* function setColumnFixedWidth | |||
* function remoteAt | |||
* function setAlignment | |||
* function setSpacing | |||
* function setContentsMargins | |||
* function addItem | |||
* function toString | |||
=== Creating Items From UI Files === | === Creating Items From UI Files === | ||
Line 557: | Line 556: | ||
Two classes are provide: Svg and FrameSvg. Svg allows loading and painting entire SVG documents or individual elements in an SVG document. FrameSvg extends Svg with methods to paint bordered frames from specially crafted SVG documents (see the Plasma Desktop Theme documentation for more information on this). | Two classes are provide: Svg and FrameSvg. Svg allows loading and painting entire SVG documents or individual elements in an SVG document. FrameSvg extends Svg with methods to paint bordered frames from specially crafted SVG documents (see the Plasma Desktop Theme documentation for more information on this). | ||
====Svg==== | |||
*Constructors | |||
**Svg(fileName): fileName can be a file in the desktop theme or the plasmoid package | |||
*object size | |||
*boolean multipleImages | |||
*string imagePath | |||
*boolean usingRenderingCache | |||
*function repaintNeeded() | |||
*function pixmap(QString) | |||
*function pixmap() | |||
*function paint(QPainter*,QPointF,QString) | |||
*function paint(QPainter*,QPointF) | |||
*function paint(QPainter*,int,int,QString) | |||
*function paint(QPainter*,int,int) | |||
*function paint(QPainter*,QRectF,QString) | |||
*function paint(QPainter*,QRectF) | |||
*function paint(QPainter*,int,int,int,int,QString) | |||
*function paint(QPainter*,int,int,int,int) | |||
*function resize(qreal,qreal) | |||
*function resize(QSizeF) | |||
*function resize() | |||
*function elementSize(QString) | |||
*function elementRect(QString) | |||
*function hasElement(QString) | |||
*function elementAtPoint(QPoint) | |||
*function isValid() | |||
====FrameSvg==== | |||
*Constructors | |||
**FrameSvg(fileName): fileName can be a file in the desktop theme or the plasmoid package | |||
*boolean multipleImages | |||
*function setEnabledBorders(EnabledBorders) | |||
*function enabledBorders() | |||
*function resizeFrame(QSizeF) | |||
*function frameSize() | |||
*function marginSize(Plasma::MarginEdge) | |||
*function getMargins(qreal&,qreal&,qreal&,qreal&) | |||
*function contentsRect() | |||
*function setElementPrefix(Plasma::Location) | |||
*function setElementPrefix(QString) | |||
*function hasElementPrefix(QString) | |||
*function hasElementPrefix(Plasma::Location) | |||
*function prefix() | |||
*function mask() | |||
*function setCacheAllRenderedFrames(bool) | |||
*function cacheAllRenderedFrames() | |||
*function framePixmap() | |||
*function paintFrame(QPainter*,QRectF,QRectF) | |||
*function paintFrame(QPainter*,QRectF) | |||
*function paintFrame(QPainter*,QPointF) | |||
*function paintFrame(QPainter*) | |||
=== Painting on the Canvas === | === Painting on the Canvas === | ||
Line 612: | Line 611: | ||
==== QColor ==== | ==== QColor ==== | ||
*Constructors: | |||
**QColor | |||
**QColor(string colorName) | |||
**QColor(number red, number green, number blue, number alpha) | |||
*number red | |||
*number green | |||
*number blue | |||
*number alpha | |||
*boolean isValid | |||
==== QFont ==== | ==== QFont ==== | ||
*Constructors: | |||
**QFont | |||
**QFont(string fontName) | |||
**QFont(string fontName, number pointSize) | |||
**QFont(string fontName, number pointSize, number weight) | |||
**QFont(string fontName, number pointSize, number weight, boolean italic) | |||
*string key | |||
*string lastResortFamily | |||
*string lastResortFont | |||
*string defaultFamily | |||
*boolean exactMatch | |||
*string toString | |||
*boolean bold | |||
*string family | |||
*boolean fixedPitch | |||
*undefined fromString | |||
*boolean italic | |||
*boolean kerning | |||
*boolean overline | |||
*number pixelSize | |||
*number pointSize | |||
*number pointSizeF | |||
*boolean strikeOut | |||
*number stretch | |||
*boolean underline | |||
*number weight | |||
*function isCopyOf | |||
*function resolve | |||
====QPainter ==== | ====QPainter ==== | ||
* Constructors | |||
** QPainter | |||
** QPainter(object paintDevice): used to start a painter on a specific QWidget; rarely if ever needed in a JavaScript Plasmoid | |||
* object background | |||
* number backgroundMode | |||
* object brush | |||
* undefined setBrush | |||
* object brushOrigin | |||
* undefined clipping | |||
* object clipPath | |||
* object clipRegion | |||
* number compositionMode | |||
* object font | |||
* number layoutDirection | |||
* number opacity | |||
* object pen | |||
* number renderHints | |||
* undefined transform | |||
* object viewport | |||
* boolean viewTransformEnabled | |||
* object window | |||
* object worldMatrix | |||
* object worldTransform | |||
* boolean worldMatrixEnabled | |||
* object combinedMatrix | |||
* object combinedTransform | |||
* boolean isActive | |||
* function begin | |||
* function end | |||
* function boundingRect | |||
* function drawChord | |||
* function drawConvexPolygon | |||
* function drawArc | |||
* function drawEllipse | |||
* function drawImage | |||
* function drawLine | |||
* function drawLines | |||
* function drawPath | |||
* function drawPicture | |||
* function drawPie | |||
* function drawPixmap | |||
* function drawPoint | |||
* function drawPoints | |||
* function drawPolygon | |||
* function drawPolyline | |||
* function drawRect | |||
* function drawRects | |||
* function drawRoundRect | |||
* function drawText | |||
* function drawTiledPixmap | |||
* function eraseRect | |||
* function fillPath | |||
* function fillRect | |||
* function resetMatrix | |||
* function resetTransform | |||
* function restore | |||
* function rotate | |||
* function save | |||
* function scale | |||
* function setClipRect | |||
* function setRenderHint | |||
* function shear | |||
* function strokePath | |||
* function testRenderHint | |||
* function toString | |||
* function translate | |||
==== QPen ==== | ==== QPen ==== | ||
*Constructors: | |||
**QPen | |||
* object brush | |||
* object color | |||
* number capStyle | |||
* number joinStyle | |||
* number style | |||
* number dashOffset | |||
* number miterLimit | |||
* number width | |||
* boolean isSolid | |||
* number red | |||
* number green | |||
* number blue | |||
* number alpha | |||
* boolean isValid | |||
==== QRectF ==== | ==== QRectF ==== | ||
*Constructors: | |||
**QRectF | |||
**QRectF(number x, number y, number width, number height) | |||
*function adjust | |||
*object adjusted | |||
*function translate | |||
*function setCoords | |||
*function setRect | |||
*function contains | |||
*function moveBottom | |||
*function moveLeft | |||
*function moveRight | |||
*function moveTo | |||
*function moveTop | |||
*boolean isEmpty | |||
*boolean isNull | |||
*boolean isValid | |||
*number left | |||
*number top | |||
*number bottom | |||
*number right | |||
*number height | |||
*number width | |||
*number x | |||
*number y | |||
==== QSizeF ==== | ==== QSizeF ==== | ||
*Constructors: | |||
**QSizeF | |||
**QSizeF(number width, number height) | |||
*number height | |||
*number width | |||
==== QPoint ==== | ==== QPoint ==== | ||
*Constructors: | |||
**QPoint | |||
**QPoint(number x, number y) | |||
*bool isNull | |||
*number manhattanLength | |||
*number x | |||
*number y | |||
<br> | <br> | ||
Line 796: | Line 795: | ||
=== DataEngine === | === DataEngine === | ||
* object sources | |||
* boolean valid | |||
* string icon | |||
* function destroyed(QObject*) | |||
* function destroyed() | |||
* function deleteLater() | |||
* function sourceAdded(QString) | |||
* function sourceRemoved(QString) | |||
* function scheduleSourcesUpdated() | |||
* function removeSource(QString) | |||
* function updateAllSources() | |||
* function forceImmediateUpdateOfAllVisualizations() | |||
* function sources() | |||
* function serviceForSource(QString) | |||
* function name() | |||
* function connectSource(QString,QObject*,uint,Plasma::IntervalAlignment) | |||
* function connectSource(QString,QObject*,uint) | |||
* function connectSource(QString,QObject*) | |||
* function connectAllSources(QObject*,uint,Plasma::IntervalAlignment) | |||
* function connectAllSources(QObject*,uint) | |||
* function connectAllSources(QObject*) | |||
* function disconnectSource(QString,QObject*) | |||
* function containerForSource(QString) | |||
* function query(QString) | |||
=== Service === | === Service === | ||
* function finished(Plasma::ServiceJob*) | |||
* function operationsChanged() | |||
* function serviceReady(Plasma::Service*) | |||
* function setDestination(QString) | |||
* function destination() | |||
* function operationNames() | |||
* function operationDescription(QString) | |||
* function startOperationCall(KConfigGroup,QObject*) | |||
* function startOperationCall(KConfigGroup) | |||
* function isOperationEnabled(QString) | |||
* function name() | |||
* function associateWidget(QWidget*,QString) | |||
* function disassociateWidget(QWidget*) | |||
* function associateWidget(QGraphicsWidget*,QString) | |||
* function disassociateWidget(QGraphicsWidget*) | |||
* function parametersFromDescription(KConfigGroup) | |||
== Other Functions and Classes == | == Other Functions and Classes == |
Revision as of 22:50, 29 November 2009
Introduction to Plasmoids JavaScript API
If you have not done so already, please read the "plasmoid" design document first.
What Is A Simplified JavaScript Plasmoid?
This document describes the native Plasma API available to Simplified JavaScript Plasmoids. What makes them "Simplified" is that they do not have access to the entire C++ API in the Plasma, KDE and Qt libraries (let alone things lower in the API stack). This helps ensure that these Plasmoids are more likely to work properly between releases as changes in underlying API don't affect them as well as allowing Plasma to offer stronger security guarantees around them.
To denote that this Plasmoid is a Simplified JavaScript widget, ensure that in the metadata.desktop file there is this line:
X-Plasma-API=javascript
What follows is a description of the runtime environment available to a Simplified JavaScript Plasmoid.
QtScript
The Simplified JavaScript API is powered by Qt's QtScript system which provides access to a full featured ECMA Script interpreter. If it works in ECMA Script, it will work in a Simplified JavaScript Plasmoid. As an interesting implementation note, QtScript uses the high performance ECMA Script interpreter from WebKit and shares this code with QtWebKit.
On top of the ECMA Script language, QtScript provides Qt integration features. Probably the most useful one in this context is the use of signals and slots which is Qt's callback mechanism. Signals may be emitted in QtScript by calling the signal method in question, a signal can be connected to a slot by using the connect() method (and disconnected with diconnnect()) and any function defined in the Plasmoid may be used as a slot. For example:
function onClick()
{
print("We got clicked!")
}
function onFirstClick()
{
print("First click!")
button.clicked.disconnect(onFirstClick)
}
button = new PushButton
button.clicked.connect(onClick)
button.clicked.connect(onFirstClick)
button.clicked()
This will print out:
We got clicked!
First click!
on the console when the Plasmoid starts, and the "We got clicked!" again whenever the button is clicked by the user.
The Global plasmoid Object
There is a global object available to the Plasmoid called, appropriately, "plasmoid". It has a number of useful properties (some of which are read only, but many of which are read/write), functions, constant values and callbacks. Each are enumerated below.
Callbacks
There are some events that are generated by Plasma for the Plasmoid. These can often be caught by providing a function assigned to a specific name in the plasmoid object. For instance, to get notified of form factor changes, one would provide a formFactorChanged method as follows:
plasmoid.formFactorChanged = function() {
print("the form factor has changed to: " + plasmoid.formFactor())
}
Environment
A set of read-only properties (and in most cases notification functions) that tell the plasmoid about its current environment:
- apiVersion: the integer version of the Simlified JavaScript API in the current execution environment; can be used to change behaviour or usage of functions depending on the version number.
- formFactor: one of Planar (e.g. on a desktop or in an application main view), Horizontal, Vertical or MediaCenter. When the form factor changes, the plasmoid.formFactorChanged function, if defined in the Plasmoid, is called.
- location: one of Floating (no specific location), Desktop (on the application's main view are), FullScreen, LeftEdge, RightEdge, TopEdge or ButtomEdge. When the location changes, the plasmoid.locatationChanged function, if defined in the Plasmoid, is called.
- immutable: this property is set to true when the Plasmoid is set to not be movable or otherwise changeable, and false otherwise. Configuration is still usually allowed in this state. When the immutability changes, the plasmoid.immutabilityChanged function, if defined in the Plasmoid, is called.
- currentActivity: the current contextual activity name. When the current activity changes, the plasmoid.currentActivityChanged function, if defined in the Plasmoid, is called.
- shouldConserveResources: true if the plasmoid should not be doing anything that would create too much draw on power, e.g. when on a device with low battery power it may be a good idea not to run a computationally expensive but optional animation
Properties
A set of read/write properties that allow the Plasmoid to set various visual or functional properties:
- aspectRatioMode: defines how to treat the aspect ratio of a Plasmoid when resizing it, one of:
- IgnoreAspectRatio: The Plasmoid can be freely resized
- KeepAspectRatio: The Plasmoid keeps a fixed aspect ratio
- Square: The Plasmoid is always a square
- ConstrainedSquare: The Plasmoid is no wider (in horizontal formfactors) or no higher (in vertical ones) than a square
- FixedSize: The Plasmoid cannot be resized
- busy: set to true when the Plasmoid is currently processing or waiting for data and the user interface should be blocked while doing so; will generally show a full-Plasmoid animated overlay to denote business
Geometry
Functions:
- resize(width, height)
- setMinimumSize(width, height)
- setPreferredSize(width, height)
Properties:
- rect: the current rect of the Plasmoid; note that the top left may be not be the origin point (0,0); this property is read only
Painting and Layout
To paint directly on to the canvas, a widget may implement the paintInterface function in the plasmoid object:
plasmoid.paintInterface = function(painter) { /* painting code goes here*/ }
See the Painting section below for information about helpful classes and functions that can be used when implementing a paintInterface function.
Functions:
- update() triggers a full repaint of the Plasmoid.
- update(QRectF rect) triggers a repaint of the rect area of the Plasmoid.
- failedToLaunch(bool failed, string reason) sets the launch status of the Plasmoid; if set to true, the script will stop executing and the reason message, if any, will be displayed to the user.
Properties:
- layout: the QGraphicsLayout associated with the Plasmoid for laying out top level items; this property is read-write, though the property is not usually set as one can simply do "new LinearLayout" (or one of the other layout classes provided) and it will be automatically associated with the Plasmoid.
Access To Packaged Files
Functions:
- string file(string type, string fileName): returns the path to a file named fileName in the Plasmoid package of the given type; e.g. file("images", "mypixmap.png")
- string file(string type): returns the path to a file named as part of the package, e.g.: file("mainscript")
- bool include(string filename): attempts to include the script defined from the package's scripts directory
Configuration Data
Declaring Config Values
KConfigXt XML -> main.xml
Accessing Configuration Data
- activeConfig
- readConfig(string key)
- writConfig(string key, var value)
User Customization
Qt UI file
- plasmoid.configChanged() callback function called when the configuration is changed external to the Plasmoid, e.g. when the user changes settings in a configuration dialog.
User Interface Elements
Plasma Widgets
The Plasma framework provides a set of standard user interface elmenets such as pushbuttons and checkboxes for use in Plasmoids, and these are available from the Simplified Javascript API as well. These elements follow the Plasma style and other conventions so that widgets blend well both visually and functionally with other Plasma elements.
Properties
By default, all of the Plasma user interface elements have the following properties:
- string stylesheet
A CSS stylesheet describing visual properties to apply to the widget; see the Qt Documentation for more information
- objectName
- opacity
- enabled
- visible
- pos
- x
- y
- z
- rotation
- scale
- transformOriginPoint
- palette
- font
- size
- focusPolicy
- geometry
Signals
- opacityChanged()
- visibleChanged()
- enabledChanged()
- xChanged()
- yChanged()
- zChanged()
- rotationChanged()
- scaleChanged()
Undocumented Properties and Functions
There are a handful of other undocumented properties and functions available to UI elements. These are not supported or guaranteed to exist in future versions however, and as such should be used or relied upon.
UI Element Gallery
BusyWidget
- boolean running
- string label
- function clicked()
CheckBox
- string text
- string image
- string styleSheet
- boolean isChecked
- function toggled(bool)
ComboBox
- string text
- string styleSheet
- function activated(QString)
- function textChanged(QString)
- function clear()
FlashingLabel
- boolean autohide
- object color
- number duration
- function kill()
- function fadeIn()
- function fadeOut()
- function flash(QString,int,QTextOption)
- function flash(QString,int)
- function flash(QString)
- function flash(QPixmap,int,Qt::Alignment)
- function flash(QPixmap,int)
- function flash(QPixmap)
Frame
- number frameShadow
- string text
- string image
- string styleSheet
- number Plain
- number Raised
- number Sunken
GroupBox
- string text
- string styleSheet
IconWidget
- string text
- string infoText
- object icon
- object textBackgroundColor
- object iconSize
- string svg
- undefined action
- number orientation
- number numDisplayLines
- function pressed(bool)
- function clicked()
- function doubleClicked()
- function activated()
- function changed()
- function setPressed(bool)
- function setPressed()
- function setUnpressed()
- function setIcon(QString)
ItemBackground
- object target
- object targetItem
- function appearanceChanged()
- function animationStep(qreal)
- function targetReached(QRectF)
- function targetItemReached(QGraphicsItem*)
Label
- string text
- string image
- number alignment
- boolean hasScaledContents
- string styleSheet
- function linkActivated(QString)
- function linkHovered(QString)
- function dataUpdated(QString,Plasma::DataEngine::Data)
LineEdit
- string text
- boolean isClearButtonShown
- string styleSheet
- function editingFinished()
- function returnPressed()
- function textEdited(QString)
- function textChanged(QString)
Meter
- number minimum
- number maximum
- number value
- string svg
- number meterType
- function dataUpdated(QString,Plasma::DataEngine::Data)
- number BarMeterHorizontal
- number BarMeterVertical
- number AnalogMeter
PushButton
- string text
- string image
- undefined action
- object icon
- boolean checkable
- boolean checked
- boolean down
- function pressed()
- function released()
- function clicked()
- function toggled(bool)
RadioButton
- string text
- string image
- string styleSheet
- boolean isChecked
- function toggled(bool)
ScrollWidget
- object widget
- number horizontalScrollBarPolicy
- number verticalScrollBarPolicy
- object scrollPosition
- object contentsSize
- object viewportGeometry
- string styleSheet
- function ensureRectVisible(QRectF)
- function ensureItemVisible(QGraphicsItem*)
- function registerAsDragHandle(QGraphicsWidget*)
- function unregisterAsDragHandle(QGraphicsWidget*)
ScrollBar
- number singleStep
- number pageStep
- number value
- number minimum
- number maximum
- function valueChanged(int)
- function setValue(int)
- function setOrientation(Qt::Orientation)
Separator
- number orientation
SignalPlotter
- string title
- string unit
- boolean useAutoRange
- number horizontalScale
- boolean showVerticalLines
- object verticalLinesColor
- number verticalLinesDistance
- boolean verticalLinesScroll
- boolean showHorizontalLines
- object horizontalLinesColor
- object fontColor
- number horizontalLinesCount
- boolean showLabels
- boolean showTopBar
- object backgroundColor
- string svgBackground
- boolean thinFrame
- boolean stackPlots
Slider
- number maximum
- number minimum
- number value
- number orientation
- string styleSheet
- function sliderMoved(int)
- function valueChanged(int)
- function setMaximum(int)
- function setMinimum(int)
- function setRange(int,int)
- function setValue(int)
- function setOrientation(Qt::Orientation)
SpinBox
- number maximum
- number minimum
- number value
- string styleSheet
- function sliderMoved(int)
- function valueChanged(int)
- function editingFinished()
- function setMaximum(int)
- function setMinimum(int)
- function setRange(int,int)
- function setValue(int)
SvgWidget
- undefined svg
- string elementID
- function clicked(Qt::MouseButton)
TabBar
- number currentIndex
- number count
- string styleSheet
- boolean tabBarShown
- function currentChanged(int)
- function setCurrentIndex(int)
- function insertTab(int,QIcon,QString,QGraphicsLayoutItem*)
- function insertTab(int,QIcon,QString)
- function insertTab(int,QString,QGraphicsLayoutItem*)
- function insertTab(int,QString)
- function addTab(QIcon,QString,QGraphicsLayoutItem*)
- function addTab(QIcon,QString)
- function addTab(QString,QGraphicsLayoutItem*)
- function addTab(QString)
- function removeTab(int)
- function takeTab(int)
- function tabAt(int)
- function setTabText(int,QString)
- function tabText(int)
- function setTabIcon(int,QIcon)
- function tabIcon(int)
TextEdit
- string text
- boolean readOnly
- function textChanged()
- function dataUpdated(QString,Plasma::DataEngine::Data)
ToolButton
- string text
- boolean autoRaise
- string image
- undefined action
- function clicked()
- function pressed()
- function released()
TreeView
- undefined model
- string styleSheet
VideoWidget
- string url
- number currentTime
- number totalTime
- number remainingTime
- number usedControls
- boolean controlsVisible
- string styleSheet
- function tick(qint64)
- function aboutToFinish()
- function nextRequested()
- function previousRequested()
- function play()
- function pause()
- function stop()
- function seek(qint64)
- function mediaObject()
- function audioOutput()
- number NoControls
- number Play
- number Pause
- number Stop
- number PlayPause
- number Previous
- number Next
- number Progress
- number Volume
- number OpenFile
- number DefaultControls
WebView
- object url
- string html
- boolean dragToScroll
- object scrollPosition
- object contentsSize
- object viewportGeometry
- function loadProgress(int)
- function loadFinished(bool)
Layouts
LinearLayout
- number spacing
- QtOrientation setOrientation
- function removeAt
- function addStretch
- function setStretchFactor
- function setAlignment
- function insertStretch
- function setItemSpacing
- function setContentsMargins
- function addItem
- function removeItem
- function insertItem
- function toString
AnchorLayout
- number horizontalSpacing
- number verticalSpacing
- function setSpacing
- function removeAt
- function addAnchor
- function anchor
- function addAnchors
- function addCornerAnchors
- function toString
GridLayout
- number horizontalSpacing
- number verticalSpacing
- function rowSpacing
- function setRowSpacing
- function columnSpacing
- function setColumnSpacing
- function rowMinimumHeight
- function setRowMinimumHeight
- function rowPreferredHeight
- function setRowPreferredHeight
- function rowMaximumHeight
- function setRowMaximumHeight
- function rowFixedHeight
- function setRowFixedHeight
- function columnMinimumWidth
- function setColumnMinimumWidth
- function columnPreferredWidth
- function setColumnPreferredWidth
- function columnMaximumWidth
- function setColumnMaximumWidth
- function columnFixedWidth
- function setColumnFixedWidth
- function remoteAt
- function setAlignment
- function setSpacing
- function setContentsMargins
- function addItem
- function toString
Creating Items From UI Files
TODO
Animations
An animation object can be retrieved by calling the animation(string) method. The string corresponds to the Plasma::Animator::Animation enumeration, and currently the following are supported (case insensitive) along with a list of their properties:
- fade
- grow
- expand
- pause
- pulse
- rotate
- rotateStacked
- slide
All animations support the following properties:
- duration (int): length of the animation in ms.
- widgetToAnimate: the QGraphicsWidget (e.g. a Plasma::Widget) to operate on.
- forwards (bool): true if the animation should play forwards or false if backwards (rewind).
- visible (bool): whether or not the animation is currently visible (??!?!)
By default the animation object is associated with the plasmoid itself. By setting the widgetToAnimate property, however, it can be re-assigned to any QGraphicsWidget (e.g. Plasma widgets such as push buttons, sliders, etc) one wants.
Animations may also be put into groups for convenient sequential or parallel running by creating an AnimationGroup object and then calling add(widget) on it. The parallel (bool) property holds whether or not the animations should be run in parallel or sequentially. The default is sequential.
Painting
See the "Painting and Layout" section, part of the Global Plasmoid chapter, for information on using these classes within a widget.
Pixmaps
The QPixmap object allows widgets to use pixmaps for painting. Widgets may include pixmaps in various common formats (PNG, JPEG, GIF, etc.) in the contents/images/ directory of the Plasmoid package and load them by passing the name of the file into the pixmap contrustor:
var pixmap = new QPixmap("myimage.png")
In addition to being used as a file load, some objects return or take pixmaps and the QPixmap object facilitates that as well.
- Properties
- bool isNull: returns true if the pixmap is empty or not
- QRectF rect: the rect of the pixmap
- QPixmap scaled(width, height): returns a scaled version of the pixmap with width and height dimensions.
SVG Images
Plasma makes heavy usage of SVG images. More information on this industry standard scalable vector format can be found here:
Free and Open Source Software tools for creating SVGs include Inkscape and Karbon13. Widgets may include their own SVG files in the contents/images/ directdory or may use SVG images that are part of the standard Plasma Desktop Theme as documented here:
Two classes are provide: Svg and FrameSvg. Svg allows loading and painting entire SVG documents or individual elements in an SVG document. FrameSvg extends Svg with methods to paint bordered frames from specially crafted SVG documents (see the Plasma Desktop Theme documentation for more information on this).
Svg
- Constructors
- Svg(fileName): fileName can be a file in the desktop theme or the plasmoid package
- object size
- boolean multipleImages
- string imagePath
- boolean usingRenderingCache
- function repaintNeeded()
- function pixmap(QString)
- function pixmap()
- function paint(QPainter*,QPointF,QString)
- function paint(QPainter*,QPointF)
- function paint(QPainter*,int,int,QString)
- function paint(QPainter*,int,int)
- function paint(QPainter*,QRectF,QString)
- function paint(QPainter*,QRectF)
- function paint(QPainter*,int,int,int,int,QString)
- function paint(QPainter*,int,int,int,int)
- function resize(qreal,qreal)
- function resize(QSizeF)
- function resize()
- function elementSize(QString)
- function elementRect(QString)
- function hasElement(QString)
- function elementAtPoint(QPoint)
- function isValid()
FrameSvg
- Constructors
- FrameSvg(fileName): fileName can be a file in the desktop theme or the plasmoid package
- boolean multipleImages
- function setEnabledBorders(EnabledBorders)
- function enabledBorders()
- function resizeFrame(QSizeF)
- function frameSize()
- function marginSize(Plasma::MarginEdge)
- function getMargins(qreal&,qreal&,qreal&,qreal&)
- function contentsRect()
- function setElementPrefix(Plasma::Location)
- function setElementPrefix(QString)
- function hasElementPrefix(QString)
- function hasElementPrefix(Plasma::Location)
- function prefix()
- function mask()
- function setCacheAllRenderedFrames(bool)
- function cacheAllRenderedFrames()
- function framePixmap()
- function paintFrame(QPainter*,QRectF,QRectF)
- function paintFrame(QPainter*,QRectF)
- function paintFrame(QPainter*,QPointF)
- function paintFrame(QPainter*)
Painting on the Canvas
QColor
- Constructors:
- QColor
- QColor(string colorName)
- QColor(number red, number green, number blue, number alpha)
- number red
- number green
- number blue
- number alpha
- boolean isValid
QFont
- Constructors:
- QFont
- QFont(string fontName)
- QFont(string fontName, number pointSize)
- QFont(string fontName, number pointSize, number weight)
- QFont(string fontName, number pointSize, number weight, boolean italic)
- string key
- string lastResortFamily
- string lastResortFont
- string defaultFamily
- boolean exactMatch
- string toString
- boolean bold
- string family
- boolean fixedPitch
- undefined fromString
- boolean italic
- boolean kerning
- boolean overline
- number pixelSize
- number pointSize
- number pointSizeF
- boolean strikeOut
- number stretch
- boolean underline
- number weight
- function isCopyOf
- function resolve
QPainter
- Constructors
- QPainter
- QPainter(object paintDevice): used to start a painter on a specific QWidget; rarely if ever needed in a JavaScript Plasmoid
- object background
- number backgroundMode
- object brush
- undefined setBrush
- object brushOrigin
- undefined clipping
- object clipPath
- object clipRegion
- number compositionMode
- object font
- number layoutDirection
- number opacity
- object pen
- number renderHints
- undefined transform
- object viewport
- boolean viewTransformEnabled
- object window
- object worldMatrix
- object worldTransform
- boolean worldMatrixEnabled
- object combinedMatrix
- object combinedTransform
- boolean isActive
- function begin
- function end
- function boundingRect
- function drawChord
- function drawConvexPolygon
- function drawArc
- function drawEllipse
- function drawImage
- function drawLine
- function drawLines
- function drawPath
- function drawPicture
- function drawPie
- function drawPixmap
- function drawPoint
- function drawPoints
- function drawPolygon
- function drawPolyline
- function drawRect
- function drawRects
- function drawRoundRect
- function drawText
- function drawTiledPixmap
- function eraseRect
- function fillPath
- function fillRect
- function resetMatrix
- function resetTransform
- function restore
- function rotate
- function save
- function scale
- function setClipRect
- function setRenderHint
- function shear
- function strokePath
- function testRenderHint
- function toString
- function translate
QPen
- Constructors:
- QPen
- object brush
- object color
- number capStyle
- number joinStyle
- number style
- number dashOffset
- number miterLimit
- number width
- boolean isSolid
- number red
- number green
- number blue
- number alpha
- boolean isValid
QRectF
- Constructors:
- QRectF
- QRectF(number x, number y, number width, number height)
- function adjust
- object adjusted
- function translate
- function setCoords
- function setRect
- function contains
- function moveBottom
- function moveLeft
- function moveRight
- function moveTo
- function moveTop
- boolean isEmpty
- boolean isNull
- boolean isValid
- number left
- number top
- number bottom
- number right
- number height
- number width
- number x
- number y
QSizeF
- Constructors:
- QSizeF
- QSizeF(number width, number height)
- number height
- number width
QPoint
- Constructors:
- QPoint
- QPoint(number x, number y)
- bool isNull
- number manhattanLength
- number x
- number y
Accessing Sources of Data
See the JavaScript Plasmoid DataEngine tutorials
Global Functions
- dataEngine(string name): returns a DataEngine object
- service(string dataEngineName, string sourceName): returns a ServiceObject, see also DataEngine::serviceForSource
DataEngine
- object sources
- boolean valid
- string icon
- function destroyed(QObject*)
- function destroyed()
- function deleteLater()
- function sourceAdded(QString)
- function sourceRemoved(QString)
- function scheduleSourcesUpdated()
- function removeSource(QString)
- function updateAllSources()
- function forceImmediateUpdateOfAllVisualizations()
- function sources()
- function serviceForSource(QString)
- function name()
- function connectSource(QString,QObject*,uint,Plasma::IntervalAlignment)
- function connectSource(QString,QObject*,uint)
- function connectSource(QString,QObject*)
- function connectAllSources(QObject*,uint,Plasma::IntervalAlignment)
- function connectAllSources(QObject*,uint)
- function connectAllSources(QObject*)
- function disconnectSource(QString,QObject*)
- function containerForSource(QString)
- function query(QString)
Service
- function finished(Plasma::ServiceJob*)
- function operationsChanged()
- function serviceReady(Plasma::Service*)
- function setDestination(QString)
- function destination()
- function operationNames()
- function operationDescription(QString)
- function startOperationCall(KConfigGroup,QObject*)
- function startOperationCall(KConfigGroup)
- function isOperationEnabled(QString)
- function name()
- function associateWidget(QWidget*,QString)
- function disassociateWidget(QWidget*)
- function associateWidget(QGraphicsWidget*,QString)
- function disassociateWidget(QGraphicsWidget*)
- function parametersFromDescription(KConfigGroup)
Other Functions and Classes
print(string) debug(string) GraphicsItem Timer Url
Extensions
An API extension is a security controlled set of functions and objects that are loaded on demand. These extensions are requested by the widget by listing the required and the optional extensions (if any) it wants loaded in its metadata.desktop file. This way, even prior to the widget being loaded, Plasma can know what it will want.
Required extensions are requested using the X-Plasma-RequiredExtensions key, and optional extensions with the X-Plasma-OptionalExtensions. For example:
X-Plasma-RequiredExtensions=FileDialog,MyCustomQScriptExtension
X-Plasma-OptionalExtensions=LaunchApp,HTTP
The Simplified Javascript Engine then decides if the widget will actually get that extension or not. Failure to load a required extension will result in script execution being aborted.
Each of the built-in extensions provided are described below.
FileDialog
Provides access to open and save dialog classes: OpenFileDialog and SaveFileDialog. Both are non-modal and run asynchronously, so the signals must be used. Other than the name difference (and resulting UI variance) the API for each is identical:
- Constructors
- OpenFileDialog
- SaveFileDialog
- Properties
- Read Only
- array(Url) urls: the selected file, as a Url object
- Url baseUrl, the current path (minus filename) as a Url
- string file: the selected file, as a string
- array(string) files: selected files (plural), as an array of strings
- Read/Write
- Url url: the current Url, can be read from when the user is done or assigned before to set the starting path
- string filter: a string representing the mimetype filter; e.g. "*.cpp|C++ Source Files\n*.h|Header files" or "*.cpp" or "*.cpp|*h"
- boolean localOnly: true to show only local files, false if network locations are Ok as well
- boolean directoriesOnly: true to only allow selection of a directory (not a file)
- boolean existingOnly: true if only existing files/directories may be selected
- Read Only
- Functions
- show(): when called, the dialog will be shown to the user
- Signals
- accepted(FileDialogProxy): emitted when the file dialog has been successfully accepted by the user with one or more files/directories.
- finished(FileDialogProxy): emitted when the file dialog closes, included when cancelled/closed without being accepted
LocalIO
NetworkIO
HTTP
LaunchApp
Adds methods to the global plasmoid object that allow launching applications, running commands and opening files and urls.
- bool runApplication(string application[, array files])
Runs an application by name (can reference an installed .desktop file as well as an executable in the user's $PATH) with an optional array of files. The file array may contain either Urls or strings. Returns true on success, false on failure. - bool runApplication(string exe[, array args])
Runs the executable with the given arguments. Returns true on success, false on failure. - bool openUrl([string|Url] url):
Opens the url in the default application (or asks the user if there is no default application for the file). The url parameter may be either a string or a Url. Returns true on success, false on failure.