How to Create a Widget

Widgetci's widgets based on JavaScript and Qt's QML Language.

Requirements

• Just a simple text editor.

For more comfortable Editing (with IDE Powers):

• Install Qt 5.7.1 (or >=) and QtCreator
• Clone the widgetci to your computer

After that, when you want to edit or create a widget:

• First open the widgetci project in QtCreator
• Then open the main.qml file of your widget
• Then edit with IDE powers :)

Creating a widget

1. Open widgetci app
2. Click the folder icon at bottom-right

You are in the widgets folder.

3. Create a new folder. (Name of the folder will be name of the widget)
4. Create an empty main.qml inside of it.

An empty main.qml:

import QtQuick 2.5

// Widget's root object
Item {
    width: 70
    height: 30
}

Design

Add Text:

import QtQuick 2.5

// Widget's root object
Item {
    width: 70
    height: 30
    
    
    // A Text element
    Text {
        x: 20
        y: 5
        text: "Hey!"
    }
}

Add Color:

    // A Red colored Text element
    Text {
        x: 20
        y: 5
        text: "Hey!"
        
        color: "#FF0000" // RGB
    }

---

Add & Draw Rectangle:

// Rectangle Example
Rectangle{
    width: 30
    height: 30
    
    color: "#FFFF0000" // ARGB, Opaque Red Rectangle
    radius: 5 // Border radius
}

For more examples, check the "Examples" default widget's qml file in widgets folder.

And Qt's QML Documents: Getting Started to QML