데스크톱 소개

데스크톱은 이른바 Cinamon의 데스크톱 위젯이다.
이것은 데스크톱에 붙여 넣는 작은 프로그램입니다. 예를 들어 시계와 달력입니다.
데스크톱은 자바스크립트를 기반으로 한 CJS로 의외로 간단합니다.
CJS 자체의 기초는 GJS라는 Gnome Shell Extensions가 사용하는 물건이다.

간단한 테이블을 만들어 보도록 하겠습니다.

데스크톱에 가장 필요한 파일은 다음 두 개입니다.desklet.js metadata.json desklet.js는 프로그램 주체이고 metadata.json는 데스크톱에 대한 정보와 설정 등이 기록되었다.
그리고×48픽셀의 이미지 파일을 준비하면 바탕 화면 관리 화면에 아이콘이 표시됩니다.icon.png스타일시트stylesheet.css, 설정 파일settings-schema.json 등도 사용할 수 있다.
이번엔 stylesheet.css 포함 구성으로 만들려고 합니다.

프로파일 준비

홈 디렉터리의 데스크톱 디렉터리에 프로필을 만듭니다.
디렉터리 이름은 데스크톱 이름@저자의 고유 ID를 사용하여 만듭니다.
이번에 사용해 봤어요mydesklet@urushibara.적당히 고쳐 쓰세요.
폴더 만들기

mkdir -p ~/.local/share/cinnamon/desklets/mydesklet@urushibara

구성 파일 생성

cd ~/.local/share/cinnamon/desklets/mydesklet@urushibara
touch desklet.js metadata.json stylesheet.css

파일 내용 추가

편집기에서 완성된 파일을 열고 다음 내용을 쓰십시오.
metadata.json

{
    "uuid": "mydesklet@urushibara",
    "name": "Hello, world! desklet",
    "description": "Displays Hello, World!",
    "prevent-decorations": false
}

stylesheet.css

.my-desklet-label {
    font-size: 96px;
}

desklet.js

const Desklet = imports.ui.desklet;
const St = imports.gi.St; //Shell Toolkitのインポート

//デスクレットクラスを定義
class HelloWorld extends Desklet.Desklet {

    constructor(metadata, desklet_id) {
        super(metadata, desklet_id);

        this.window = new St.Bin(); //コンテナの作成
        this.text = new St.Label({style_class: "my-desklet-label"}); //cssのクラス名を指定してラベルを初期化
        this.text.set_text("Hello world!"); //表示するテキストをセット
        this.window.add_actor(this.text); //ラベルをコンテナに追加

        this.setHeader(_("Hello world"));
        this.setContent(this.window);
    }
}

//エントリーポイント
function main(metadata, desklet_id) {
    return new HelloWorld(metadata, desklet_id);
}

extend classui.desklet.Desklet로 반을 계승하고 있습니다.
여기에 Gtk+Shell ExtensionSt(Shell Toolkit)에 포함된 다양한 이름actor의 UI를 추가할 수 있습니다.actorDesklet은 Clutter사용하기 때문에 번거롭기 때문에 <<<
이번에는 사용하지 않았지만 actor를 많이 추가하려면 StBoxLayout 컨테이너를 사용하면 배치가 수월할 것으로 보인다.
참고로 위의 소스 코드는 Cinamon의 기본 "Clock"의 소스 코드를 참조합니다.ECMascript 2015 표준에 부합되는 것 같습니까? 자바스크립트라기보다는 자바와 유사한 맞춤법입니다.낡은 데스크톱의 원본 코드와 공식 샘플 코드를 보면 프로타입 선언을 사용하여 클래스 정의를 하고 있지만, 어떤 작법이든 상관없다.그러나 나는 상술한 문법이 앞으로 아마도 주류가 될 것이라고 생각한다.

데스크톱 시작

메뉴에서 설정 - 데스크톱을 열고 목록에 데스크톱이 제대로 표시되면 실제로 표시합니다.

위에서 그렇게 표시하면 성공!
오류가 발생하거나 데스크톱이 시작되지 않으면 [Super] + [L]에서 Melange를 통해 로그를 보면 그 원인을 알 수 있습니다.
파일을 수정한 후 [ALT] + [F2]를 누르고 r를 입력하여 Enter로 Cinamon을 다시 시작합니다.
재부팅하지 않으면 Cinamon 캐시가 되고 파일만 업데이트되면 더 이상 읽히지 않습니다.

이벤트 프로세서

이번에는 사용하지 않았지만ui.desklet.Desklet Class에는 Cinamon이 데스크톱을 추가하거나 삭제할 때 필요한 이벤트가 준비되어 있습니다.

    on_desklet_clicked() {
        //クリックイベント
    }

    on_desklet_added_to_desktop() {
        //デスクトップに追加された時、deskletManagerによって呼び出されます。
    }

    on_desklet_removed() {
        //デスクトップから削除されたときに呼び出されます。
        //タイマーや無限ループ処理がある場合、ここで必ず終了処理を行う必要があります。
        //※deskletManagerで終了やアンインストールを行って非表示に見えていても
        //　Cinnamonが終了しない限り非同期なスレッドは破棄されずに残り続けます。
    }

오른쪽 단추를 눌렀을 때Desklet 클래스 속성_menu 기본 저장ui.PopupMenu의actor, 기본적으로 팝업 메뉴를 엽니다.
추가 항목을 원한다면this._menu.addAction("text", func) 추가 항목이 가능하다.

데스크톱 구성 화면

팝업 메뉴의 [설정]과 데스크톱 관리 화면의 [설정] 버튼에 표시되는 GUI가 어떻게 만들어지는지 궁금하다.그러나 GUI는 기본적으로 필요한 구성 파일에 쓰여진settings-schema.json만 추가하면 표시됩니다.
프로젝트 유형 목록 설정 - Linux Mint Development Center
그러나 DeskletManager는 데스크톱 클래스settings 속성을 참조하여 GUI를 만듭니다.따라서 다음과 같이 구조기 내settings에서 속성을 업데이트해야 한다.

const Settings = imports.ui.settings; //インポートを忘れずに
                ・
                ・
                ・
        //settingsの初期化
        this.settings = new Settings.DeskletSettings(this, this.metadata["uuid"], desklet_id);

이 설정은 다음과 같습니다. 이렇게 표시됩니다.

설정 반영하기

일반 설정 추출 방법

let font_size = this.settings.getValue("font-size");

정적 설정을 꺼내려면 이 방법으로 해도 되지만 설정 화면에서 내용을 바로 반영하려면 아래처럼 이벤트 처리 프로그램을 연결할 수 있습니다.

this.settings.bind("font-size", "size", this._onSettingsChanged);

끝말

기본적으로 작은 프로그램도 똑같이 만들 수 있다.
설정 파일의 시작과 읽기 등 기능성이 완벽하기 때문에 진정한 데스크톱과 애플릿도 쉽게 만들 수 있다.

사이트 축소판 그림

Linux Mint Development Center - Writing applets
Gnome wiki - GnomeShell Development
Cinnamon Javascript Reference Manual - Desklet.Desklet
이 글은 이 사이트를 바탕으로 최신 리눅스 민트의 표준 데스크톱'clock'의 출처를 참고했다.
Tutorial: Hello, world! Cinnamon desklet - OrangeShark