LCUI
ユーザー インターフェイスを構築するための C ライブラリ
目次
- 目次
- 導入
- クイックスタート
- ドキュメント
- ロードマップ
- 貢献
- よくある質問
- ライセンス
導入
中文版说明文档
LCUI は、グラフィカル ユーザー インターフェイスを構築するために C で書かれたライブラリです。その目標は、サイズが小さく、使いやすく、開発者がグラフィカル ユーザー インターフェイスを備えたデスクトップ アプリケーションを迅速に作成できるようにする便利な開発ツールの提供を特徴とするユーザー インターフェイス開発の新しい方法を探索し実践することです。
LC は著者名の頭文字に由来します。このライブラリは当初、作成者が小規模なプロジェクトを開発し、開発経験を積むのに役立つように設計されました。しかし、著者は C/C++ の専門家がひしめく就職市場で競争力を得ることができず、Web フロントエンド開発で働かざるを得なくなりました。その結果、LCUI は現在、Web フロントエンド ドメインのテクノロジーを統合することに傾いています。
主な特長
- クロスプラットフォーム: Windows と Linux をサポートします。
- 完全にカスタム描画されたコンポーネント:コンポーネントは、複数のプラットフォーム間で一貫した外観と動作を維持します。
- 組み込みの CSS エンジン: CSS を使用したユーザー インターフェイスのスタイルとレイアウトの定義をサポートし、Web 開発の経験がある人が簡単に開始できるようにします。
- 最新の開発ツールを提供:このツールを使用すると、JSX 構文を備えた TypeScript 言語、React ライブラリ、およびその他の Web フロントエンド テクノロジを使用してユーザー インターフェイスを作成できます。
機能の概要
次のスクリーンショットから、LCUI アプリケーションの開発エクスペリエンスについて学ぶことができます。
- React のようなスタイルでのコンポーネント開発: TypeScript を使用して UI 構成ファイルを作成します。 TypeScript、JSX 構文、LCUI React ライブラリの利点を組み合わせることで、インターフェイス構造、リソースの依存関係、コンポーネントの状態、データ バインディング、およびイベント バインディングを簡潔に記述することができます。
- さまざまなスタイルシートの記述方法: Tailwind CSS、CSS モジュール、Sass、グローバル CSS。
- ファイル システム ベースのルーター:アプリケーション ページをディレクトリ形式で編成し、各ページがディレクトリに対応します。ディレクトリのパスは、そのページのルートとして機能します。内蔵のアプリケーション ルーターを使用すると、手動でルートを設定しなくても、ページの切り替えやナビゲーションを簡単に実装できます。
- ユーザーフレンドリーでモダンなアイコン ライブラリ:アイコンは fluentui-system-icons ライブラリから取得されており、LCUI の特性に合わせて部分的にカスタマイズされており、同様の使用パターンを提供します。
- コマンドライン開発ツール:
lcui buildコマンドを実行してアプリ ディレクトリ内の構成ファイルを前処理し、対応する C ソース コードとリソース ファイルを生成します。
建築
時間の経過とともに、LCUI はさまざまなライブラリに基づいて構築されてきました。
- lib/yutil: 共通のデータ構造と関数を提供するユーティリティ ライブラリ。
- lib/pandagl: PandaGL (Panda Graphics Library)。フォント管理、テキスト レイアウト、画像 I/O、グラフィック処理、およびレンダリング機能を提供します。
- lib/css: CSS 解析および選択機能を提供する CSS パーサーおよびセレクター エンジン。
- lib/ptk: メッセージ ループ、ウィンドウ管理、入力メソッドなどを含む、クロスプラットフォームの統合システム関連 API を提供するプラットフォーム ツールキット ライブラリ。
- lib/thread: クロスプラットフォームのマルチスレッド機能を提供するスレッド ライブラリ。
- lib/timer: 定期的な間隔でタスクを実行する機能を提供するタイマー ライブラリ。
- lib/ui: UI コンポーネント管理、イベント キュー、スタイル計算、描画などの重要な UI 機能を提供する UI コア ライブラリ。
- lib/ui-xml: XML ファイルのコンテンツから UI を作成する機能を提供する XML 解析ライブラリ。
- lib/ui-cursor: カーソル描画機能を提供するカーソル ライブラリ。
- lib/ui-server: UI コンポーネントをシステム ウィンドウにマップする機能を提供する UI サーバー。
- lib/ui-router: ルート マッピングとナビゲーション機能を提供するルーター マネージャー。
- lib/ui-widgets: テキスト、ボタン、スクロールバーなどの基本的な UI コンポーネントを提供する事前定義された基本コンポーネント ライブラリ。
- lib/worker: 単純なワーカー スレッド通信および管理機能を提供するワーカー スレッド ライブラリ。
クイックスタート
始める前に、次のソフトウェアをコンピュータにインストールする必要があります。
- Git: サンプル プロジェクトのソース コードをダウンロードするために使用されるバージョン管理ツール。
- XMake: プロジェクトのビルドに使用されるビルド ツール。
- Node.js: LCUI コマンドライン開発ツールを実行するために使用される JavaScript ランタイム環境。
次に、コマンドライン ウィンドウで次のコマンドを実行します。
# Install the LCUI command-line development tool
npm install -g @lcui/cli
# Create an LCUI application project
lcui create my-lcui-app
後は、コマンドによって表示されるプロンプトに従います。
ドキュメント
- オンラインドキュメント
- コメント要求 (RFC)
- 変更履歴
- 貢献ガイドライン
チュートリアル
- Todo リスト: LCUI の基本概念と使用法、およびそれを使用してインターフェイスを構築し、状態管理、インターフェイスの更新、および対話を実装する方法を学びます。
- ファブリック アニメーションのレンダリング: 既存のファブリック シミュレーション プログラムの JavaScript ソース コードを C 言語で書き直し、ファブリック レンダリングに cairo グラフィック ライブラリを使用します。次に、LCUI を適用して、ファブリック アニメーションの再生とインタラクションを実装します。
- ブラウザ: Web ブラウザを参照し、LCUI を使用して同様のインターフェイス構造、レイアウト、スタイル、およびマルチタブ管理機能を実装します。 LCUI のルーティング管理機能を利用して、複数タブのページ状態管理とナビゲーション、および単純なファイル参照ページを実装します。 (このチュートリアルは古いため、更新への貢献を歓迎します)
参考文献
LCUI および関連プロジェクトの一部の機能は、他のオープンソース プロジェクトからインスピレーションを得ています。基本的な概念と使用法を理解するには、ドキュメントを参照してください。
- DirectXTK: ステップ タイマーのソース コード リファレンス。
- Vue Router: ルーターマネージャーのリファレンス。一部の機能は Vue Router のソース コードも参照します。
- Next.js: ルート定義メソッドのリファレンス。
ロードマップ
今後のアイテムは次のとおりです。
- LCUI
- API 設計を改善します。
- CSS エンジンを拡張して、
inherit 、 !important 、およびエスケープ文字をサポートします。 - SDL バックエンドを追加して、lib/ptk ライブラリを置き換えます。
- レンダリング パフォーマンスを向上させるために、他のオープンソース グラフィックス ライブラリに適応します。
- コマンドラインツール
lcui build --watch : ファイルの変更を継続的に監視し、自動的に再構築します。-
lcui dev-server : webpack-dev-server と同様に、開発者がブラウザーでインターフェイスをプレビューするための Web サイトとして LCUI アプリケーションを構築します。 - 変更されたファイルのみを再構築するには、ビルド キャッシュを追加します。
- React コンポーネント ライブラリ: いくつかの Web フロントエンド コンポーネント ライブラリ (radix、shadcn/ui など) を参照し、LC Design コンポーネント ライブラリのコンポーネントを再利用して、LCUI アプリケーションに適した TypeScript + React コンポーネント ライブラリを開発します。
- ドキュメント
貢献
LCUI の更新が遅いと思いますか? LCUI に貢献するにはさまざまな方法があります。
- バグを送信し、修正がチェックインされる際の検証にご協力ください。
- GUI 開発に関連する興味深いアイデアを問題ページで共有してください。
- ソース コード内で FIXME コメントを検索し、修正してみます。
- IssueHunt で興味のある問題に資金を提供し、他の開発者に貢献してもらいましょう。
- ソースコードの変更を確認します。
- バグ修正に貢献します。
LCUI は、貢献者規約によって定義された行動規範を採用しています。この文書は多くのオープンソース コミュニティで使用されており、私たちの価値観がよく表現されていると考えています。詳細については、行動規範を参照してください。
よくある質問
これはブラウザカーネルですか?それともブラウザ環境を統合する Electron のような開発ライブラリでしょうか?
いいえ、Web テクノロジーを応用した従来の GUI 開発ライブラリと考えることができます。
TypeScript言語の使用をサポートしているので、Electronを使用しないのはなぜですか?
はい、Web 開発の経験があり、Electron を学習する意欲がある場合は、明らかに Electron が最良の選択です。
LCUI の現在の機能を考慮すると、主に作成者の個人的なニーズを満たし、単純なツールを開発するのに適しています。
他の GUI ライブラリ/フレームワークではなく LCUI を選択する必要があるのはなぜですか?
他の GUI ライブラリ/フレームワークを優先することをお勧めします。
CSS サポートについてはどうですか?
以下は、サポートされている CSS 機能のリストです。チェックが入っている場合はサポートされます (ただし、完全なサポートを意味するわけではありません)。リストにないプロパティはデフォルトではサポートされていません。
CSS 機能の範囲
ライセンス
LCUI プロジェクトは MIT ライセンスに基づいてリリースされています。
