fltk:widget-basic-texts [HYPER MIKAN BOX]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== テキスト ======
[[fltk:|{{:fltk:fltk_shadow.png?200|}}]]

このページではテキストの入力をするためのウィジェットと、表示するためのウィジェットを紹介します。
最も基本となるのは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クラスを使ったサンプルプログラム}}]

<code cpp>
#include <FL/Fl.H>
#include <FL/Fl_Input.H>
#include <FL/Fl_Window.H>

int main(int argc, char **argv) {
  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クラス ====
<WRAP centeralign>
{{ 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クラスを使ったサンプルプログラム}}]

<code cpp>
#include <FL/Fl.H>
#include <FL/Fl_Multiline_Input.H>
#include <FL/Fl_Window.H>

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クラスを使ったサンプルプログラム}}]

<code cpp>
#include <FL/Fl.H>
#include <FL/Fl_Multiline_Output.H>
#include <FL/Fl_Window.H>

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クラスを使ったサンプルプログラム}}]

<code cpp>
#include <FL/Fl.H>
#include <FL/Fl_Text_Display.H>
#include <FL/Fl_Window.H>

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クラスを使ったサンプルプログラム}}]

<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クラス前後のクラス階層図
</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__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__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__Editor.html|Fl_Text_Editorクラス]]
  * [[https://www.fltk.org/doc-1.4/classFl__Help__View.html|Fl_Help_Viewクラス]]