差分

このページの2つのバージョン間の差分を表示します。

--- fltk:widget-basic-texts [2025/05/30 13:50] – [テキスト] Set a link to fltk: page for FLTK logo freemikan
+++ fltk:widget-basic-texts [2025/06/12 11:50] (現在) – [参照] Simplify freemikan
@@ 行 2: / 行 2: @@
 [[fltk:|{{:fltk:fltk_shadow.png?200|}}]]
+このページではテキストの入力をするためのウィジェットと、表示するためのウィジェットを紹介します。
+最も基本となるのはFl_Inputクラスです。
+ボタンと同じように、そこからより特化された用途のウィジェットが派生クラスとして提供されています。
+しかし、Fl_Inputクラスをベースとしたウィジェット以外にもテキストの入力と表示に利用できるウィジェットがあるります。
+そこで、このページではFl_Inputクラスの派生クラスに限定しないでそれらを紹介したいと思います。
-===== Fl_Inputクラス =====
-Fl_Inputクラス前後のクラス階層図
+===== Fl_Inputクラス =====
+<WRAP centeralign>
 {{ https://www.fltk.org/doc-1.4/classFl__Input.png |Fl_Inputクラス前後のクラス階層図}}
+Fl_Inputクラス前後のクラス階層図
+</WRAP>
+[{{ :fltk:fltk_widget_demo_input1.jpg |Fl_Inputクラスを使ったサンプルプログラム}}]
-===== Fl_Outputクラス =====
+<code cpp>
+#include <FL/Fl.H>
+#include <FL/Fl_Input.H>
+#include <FL/Fl_Window.H>
-Fl_Outputクラス前後のクラス階層図
+int main(int argc, char **argv) {
-{{ https://www.fltk.org/doc-1.4/classFl__Output.png |Fl_Inputクラス前後のクラス階層図}}
+  auto window = new Fl_Window{400, 300, "Fl_Input demo"};
+  auto input1 = new Fl_Input{150, 85, 200, 30, "Your name"};
+  auto input2 = new Fl_Input{150, 135, 200, 30, "Your e-mail address"};
+  auto input3 = new Fl_Input{150, 185, 200, 30, "Message body"};
+  window->end();
+  window->show(argc, argv);
+  return Fl::run();
+}
+</code>
-===== Fl_Multiline_Inputクラス =====
+==== Fl_Multiline_Inputクラス ====
+<WRAP centeralign>
-Fl_Multiline_Inputクラス前後のクラス階層図
 {{ https://www.fltk.org/doc-1.4/classFl__Multiline__Input.png |Fl_Multiline_Inputクラス前後のクラス階層図 }}
+Fl_Multiline_Inputクラス前後のクラス階層図
+</WRAP>
+[{{ :fltk:fltk_widget_demo_multiline_input1.jpg |Fl_Multiline_Inputクラスを使ったサンプルプログラム}}]
-===== Fl_Multiline_Outputクラス =====
+<code cpp>
+#include <FL/Fl.H>
+#include <FL/Fl_Multiline_Input.H>
+#include <FL/Fl_Window.H>
-Fl_Multiline_Outputクラス前後のクラス階層図
+int main(int argc, char **argv) {
+  auto window = new Fl_Window{400, 400, "Fl_Multiline_Input demo"};
+  auto input1 = new Fl_Multiline_Input{150, 85, 200, 30, "Your name"};
+  auto input2 = new Fl_Multiline_Input{150, 135, 200, 30, "Your e-mail address"};
+  auto input3 = new Fl_Multiline_Input{150, 185, 200, 100, "Message body"};
+  window->end();
+  window->show(argc, argv);
+  return Fl::run();
+}
+</code>
+==== Fl_Outputクラス ====
+<WRAP centeralign>
+{{ https://www.fltk.org/doc-1.4/classFl__Output.png |Fl_Inputクラス前後のクラス階層図}}
+Fl_Inputクラス前後のクラス階層図
+</WRAP>
+[{{ :fltk:fltk_widget_demo_output1.jpg |Fl_Outputクラスを使ったサンプルプログラム}}]
+<code cpp>
+#include <FL/Fl.H>
+#include <FL/Fl_Output.H>
+#include <FL/Fl_Window.H>
+int main(int argc, char **argv) {
+  auto window = new Fl_Window{400, 300, "Fl_Output demo"};
+  auto output1 = new Fl_Output{130, 85, 200, 30, "Message 1"};
+  auto output2 = new Fl_Output{130, 135, 200, 30, "Message 2"};
+  auto output3 = new Fl_Output{130, 185, 200, 30, "Mesasge 3"};
+  output1->value("Hello, SMALL world! 入力不可");
+  output2->value("Hello, MEDIUM world! 入力不可");
+  output3->value("Hello, LARGE world! 入力不可");
+  window->end();
+  window->show(argc, argv);
+  return Fl::run();
+}
+</code>
+=== Fl_Multiline_Outputクラス ===
+<WRAP centeralign>
 {{ https://www.fltk.org/doc-1.4/classFl__Multiline__Output.png |Fl_Multiline_Outputクラス前後のクラス階層図 }}
+Fl_Multiline_Outputクラス前後のクラス階層図
+</WRAP>
+[{{ :fltk:fltk_widget_demo_multiline_output1.jpg |Fl_Multiline_Outputクラスを使ったサンプルプログラム}}]
-===== Fl_Text_Displayクラス =====
+<code cpp>
+#include <FL/Fl.H>
+#include <FL/Fl_Multiline_Output.H>
+#include <FL/Fl_Window.H>
-Fl_Text_Displayクラス前後のクラス階層図
+int main(int argc, char **argv) {
+  auto window = new Fl_Window{400, 400, "Fl_Multiline_Output demo"};
+  auto output1 = new Fl_Multiline_Output{130, 85, 200, 30, "Message 1"};
+  auto output2 = new Fl_Multiline_Output{130, 135, 200, 30, "Message 2"};
+  auto output3 = new Fl_Multiline_Output{130, 185, 200, 100, "Mesasge 3"};
+  output1->value("Hello, SMALL world!");
+  output2->value("Hello, MEDIUM world!");
+  output3->value("Hello, LARGE world!\nHello, more LARGE world!\nHello, X-LARGE world!\n入力不可です。");
+  window->end();
+  window->show(argc, argv);
+  return Fl::run();
+}
+</code>
+===== Fl_Text_Displayクラス =====
+<WRAP centeralign>
 {{ https://www.fltk.org/doc-1.4/classFl__Text__Display.png |Fl_Text_Displayクラス前後のクラス階層図}}
+Fl_Text_Displayクラス前後のクラス階層図
+</WRAP>
+[{{ :fltk:fltk_widget_demo_text_display1.jpg |Fl_Text_Displayクラスを使ったサンプルプログラム}}]
-===== Fl_Text_Editorクラス =====
+<code cpp>
+#include <FL/Fl.H>
+#include <FL/Fl_Text_Display.H>
+#include <FL/Fl_Window.H>
-Fl_Text_Editorクラス前後のクラス階層図
+int main(int argc, char **argv) {
+  auto window = new Fl_Window{400, 400, "Fl_Text_Display demo"};
+  auto disp1 = new Fl_Text_Display{50, 50, 300, 50, "Label 1 shown on upper"};
+  auto disp2 = new Fl_Text_Display{50, 130, 300, 50, "Label 2 shown on upper"};
+  auto disp3 = new Fl_Text_Display{50, 220, 300, 100, "Label 3 shown on upper"};
+  auto buffer1 = new Fl_Text_Buffer;
+  auto buffer2 = new Fl_Text_Buffer;
+  auto buffer3 = new Fl_Text_Buffer;
+  disp1->buffer(buffer1);
+  disp2->buffer(buffer2);
+  disp3->buffer(buffer3);
+  disp1->insert("Hello, SMALL world!");
+  disp2->insert("Hello, MEDIUM world!");
+  disp3->insert("Hello, LARGE world!");
+  disp3->insert("Hello, LARGE world!");
+  disp3->insert("\nHello, X-LARGE world! Hello, lager than X-LARGE world!");
+  disp3->insert("\nテキストは編集不可です。");
+  disp3->insert("\n編集領域から溢れたらスクロールバーが表示されます。");
+  window->end();
+  window->show(argc, argv);
+  return Fl::run();
+}
+</code>
+==== Fl_Text_Editorクラス ====
+<WRAP centeralign>
 {{ https://www.fltk.org/doc-1.4/classFl__Text__Editor.png |Fl_Text_Displayクラス前後のクラス階層図}}
+Fl_Text_Displayクラス前後のクラス階層図
+</WRAP>
+[{{ :fltk:fltk_widget_demo_text_editor1.jpg |Fl_Text_Editorクラスを使ったサンプルプログラム}}]
-===== Fl_Help_Viewクラス =====
+<code cpp>
+#include <FL/Fl.H>
+#include <FL/Fl_Text_Editor.H>
+#include <FL/Fl_Window.H>
+int main(int argc, char **argv) {
+  auto window = new Fl_Window{400, 400, "Fl_Text_Editor demo"};
+  auto editor1 = new Fl_Text_Editor{50, 50, 300, 50, "Label 1 shown on upper"};
+  auto editor2 = new Fl_Text_Editor{50, 130, 300, 50, "Label 2 shown on upper"};
+  auto editor3 = new Fl_Text_Editor{50, 220, 300, 100, "Label 3 shown on upper"};
+  auto buffer1 = new Fl_Text_Buffer;
+  auto buffer2 = new Fl_Text_Buffer;
+  auto buffer3 = new Fl_Text_Buffer;
+  editor1->buffer(buffer1);
+  editor2->buffer(buffer2);
+  editor3->buffer(buffer3);
+  editor1->insert("Hello, SMALL world!");
+  editor2->insert("Hello, MEDIUM world!");
+  editor3->insert("Hello, LARGE world!");
+  editor3->insert("\nHello, X-LARGE world! Hello, lager than X-LARGE world!");
+  editor3->insert("\nテキストは編集できます。");
+  editor3->insert("\n編集領域から溢れたらスクロールバーが表示されます。");
+  window->end();
+  window->show(argc, argv);
+  return Fl::run();
+}
+</code>
+===== Fl_Help_Viewクラス =====
+<WRAP centeralign>
+{{ https://www.fltk.org/doc-1.4/classFl__Help__View.png |Fl_Help_Viewクラス前後のクラス階層図}}
 Fl_Help_Viewクラス前後のクラス階層図
-{{ https://www.fltk.org/doc-1.4/classFl__Help__View.png |}}
+</WRAP>
+[{{ :fltk:fltk_widget_demo_help_view1.jpg |Fl_Help_Viewクラスを使ったサンプルプログラム}}]
+<code cpp>
+#include <FL/Fl.H>
+#include <FL/Fl_Help_View.H>
+#include <FL/Fl_Window.H>
+#include <cassert>
+#include <string>
+using namespace std::string_literals;
+int main(int argc, char **argv) {
+  auto window = new Fl_Window{400, 400, "Fl_Help_View demo"};
+  auto help_view1 = new Fl_Help_View{50, 50, 300, 50, "Label1"};
+  auto help_view2 = new Fl_Help_View{50, 120, 300, 50, "Label2"};
+  auto help_view3 = new Fl_Help_View{50, 200, 300, 150, "Label3"};
+  help_view1->value(R"(<p>Hello, <font size="1" color="red" face="sans"><b>SMALL</b></font> world!</p>)");
+  help_view2->value(R"(<p>Hello, <font size="4" color="red" face="sans"><b>MEDIUM</b></font> world!</p>)");
+  help_view3->value(R"(
+<head>
+  <title>Lorem Ipsum</title>
+</head>
+<body bgcolor="#a0e0f0">
+  <p>
+    Hello, <font size="7" color="red" face="sans"><b>LARGE</b></font> world!
+  </p>
+  <h1>Lorem Ipsum</h1>
+  <p>
+    Lorem <a href="https://example.com">ipsum</a> dolor sit amet, consectetur adipiscing elit.
+    Morbi id <kbd>tortor</kbd> nibh. <i><strong>Donec luctus</strong></i> mauris quis purus
+    pretium, sit amet dapibus nisi sodales. Donec id dolor ut
+    metus suscipit iaculis eu interdum orci. Cras quis odio
+    ullamcorper velit mollis egestas vitae quis purus. Nam et
+    justo ipsum. Nam pellentesque maximus magna ut blandit.
+    Suspendisse aliquam nunc mauris, vitae lacinia mauris
+    tristique vitae. Donec nec malesuada lectus, nec ultrices
+    justo.
+  </p>
+</body>
+)");
+  assert(help_view3->title() == "Lorem Ipsum"s);
+  window->end();
+  window->show(argc, argv);
+  return Fl::run();
+}
+</code>
-===== 参照 =====
+===== リファレンス文書へのリンク =====
-  * [[https://www.fltk.org/doc-1.4/classFl__Input.html|Fl_Inputクラスのリファレンス]]
+  * [[https://www.fltk.org/doc-1.4/classFl__Input.html|Fl_Inputクラス]]
-  * [[https://www.fltk.org/doc-1.4/classFl__Output.html|Fl_Outputクラスのリファレンス]]
+  * [[https://www.fltk.org/doc-1.4/classFl__Output.html|Fl_Outputクラス]]
-  * [[https://www.fltk.org/doc-1.4/classFl__Multiline__Input.html|Fl_Multiline_Inputクラスのリファレンス]]
+  * [[https://www.fltk.org/doc-1.4/classFl__Multiline__Input.html|Fl_Multiline_Inputクラス]]
-  * [[https://www.fltk.org/doc-1.4/classFl__Multiline__Output.html|Fl_Multiline_Outputクラスのリファレンス]]
+  * [[https://www.fltk.org/doc-1.4/classFl__Multiline__Output.html|Fl_Multiline_Outputクラス]]
-  * [[https://www.fltk.org/doc-1.4/classFl__Text__Display.html|Fl_Text_Displayクラスのリファレンス]]
+  * [[https://www.fltk.org/doc-1.4/classFl__Text__Display.html|Fl_Text_Displayクラス]]
-  * [[https://www.fltk.org/doc-1.4/classFl__Text__Editor.html|Fl_Text_Editorクラスのリファレンス]]
+  * [[https://www.fltk.org/doc-1.4/classFl__Text__Editor.html|Fl_Text_Editorクラス]]
-  * [[https://www.fltk.org/doc-1.4/classFl__Help__View.html|Fl_Help_Viewクラスのリファレンス]]
+  * [[https://www.fltk.org/doc-1.4/classFl__Help__View.html|Fl_Help_Viewクラス]]