roebe 0.5.122

data/lib/roebe/www/fox/fox.rb

@@ -0,0 +1,890 @@
+english('FOX - the toolkit') {
+autoextend
+favicon 'GUI/FOX/FOX_FAVICON.gif'
+template1 '
+pre      {
+  white-space: pre;
+} 
+div      { margin-bottom:1px}
+li       { margin:0px}
+
+
+'
+body_css_class 'mar0px s2px padt2px VERDANAs wid96'
+body_css_style '
+color: black;
+background-color:#e4f4ff;
+border-top:4px solid black;
+border-left:3px solid black;
+min-height:50em'
+font_size 'def'
+
+# =========================================================================== #
+# === ICON_JAVASCRIPT
+# =========================================================================== #
+ICON_JAVASCRIPT = sg(:square_red, 'bblack1')
+
+# =========================================================================== #
+# === headerColour
+# =========================================================================== #
+headerColour = 'lightblue'
+
+# =========================================================================== #
+# === height_colour
+# =========================================================================== #
+height_colour = 'navy'
+
+# =========================================================================== #
+# === WIDTH_COLOUR
+# =========================================================================== #
+WIDTH_COLOUR = 'darkgreen'
+
+# =========================================================================== #
+# === site_index_link
+# =========================================================================== #
+def site_index_abr(i, id, the_object)
+  abr(
+    dot(110) + i,
+    content: '#'+id,
+    css_class: 'marr5px'
+  )
+end
+
+doc('mar0px pad0px s0_5em') {
+  h1 sg('GUI/FOX/foxlogo_small.jpg','bblack1 marr8px','drag_fox_logo')+
+     'Welcome to the Fox Toolkit','martb1px FI darkblue'
+  div('wid90 martb1em VERD s1em',
+      'top',
+      'background-color:#003000; color:#ceffce') {
+    # ======================================================================= #
+    # === What are the aims of this FAQ?
+    # ======================================================================= #
+    h2 dot(107, 'marr8px')+'What are the aims of this FAQ?',
+       'mart1px'
+    p {
+      e "Provide an easy question-answer style."
+      br
+      e "Focus on <b>html/css</b> and the equivalent in FOX to make it"
+      br
+      e 'easier to learn how to use FOX for anyone who knows
+      html/css.'
+      e "Push the excellent high level language Ruby's
+      popularity."
+    }
+    h2 dot(103, 'marr8px')+
+       'Buttons with FOX',
+       '','fox_buttons'
+    e 'How can we create and use a button in FOX? How to quit? (<b>make button</b>)'
+    br
+    cmd 'FXButton.new(@main_window, "Hello, World!",nil,mainWindow,ID_BUTTON)'
+    br
+  }
+  h2 dot(107, 'marr8px')+
+     'How can we change the message target of an already existing object?'
+  p {
+    cmd 'foo.setTarget(anotherObject)'
+  }
+  p {
+    e dot(107, 'marr8px')+'Which separators can we use in Fox?'
+    cmd 'SEPARATOR_NONE SEPARATOR_GROOVE SEPARATOR_RIDGE SEPARATOR_LINE'
+  }
+  div {
+    h2 dot(107, 'marr8px')+'Can I notify a user about a missing dependency?
+    (<b>missing dep</b>)'
+    e 'Yes. Use:'
+    br
+    cmd "require 'fox16/missingdep'"
+    br
+    cmd 'missingDependency(MSG)'
+  }
+  div {
+    h2 dot(107, 'marr8px')+'What do the different message types mean?'
+    e 'SEL_COMMAND indicates that the command associated with this widget
+    should be invoked'
+  }
+  h2 dot(107, 'marr8px')+
+    'Which colours are to be used for cross-information?'
+  p {
+  }
+  h2 dot(107, 'marr8px')+'Which events get sent with FXText?'
+  pre '
+  The following messages are sent by FXText to its target:<br>
+  SEL_KEYPRESS:	sent when a key is pressed; the message data is an FXEvent instance.<br>
+  SEL_KEYRELEASE:	sent when a key is released; the message data is an FXEvent instance.<br>
+  SEL_LEFTBUTTONPRESS:	sent when the left mouse button goes down; the message data is an FXEvent instance.<br>
+  SEL_LEFTBUTTONRELEASE:	sent when the left mouse button goes up; the message data is an FXEvent instance.<br>
+  SEL_MIDDLEBUTTONPRESS:	sent when the middle mouse button goes down; the message data is an FXEvent instance.<br>
+  SEL_MIDDLEBUTTONRELEASE:	sent when the middle mouse button goes up; the message data is an FXEvent instance.<br>
+  SEL_RIGHTBUTTONPRESS:	sent when the right mouse button goes down; 
+  the message data is an FXEvent instance.<br>
+  SEL_RIGHTBUTTONRELEASE:	sent when the right mouse button goes up; the 
+  message data is an FXEvent instance.<br>
+  SEL_INSERTED:	sent after text is inserted into the text buffer; 
+  the message data is a two-element array indicating the position at which 
+  the text was inserted and the number of characters inserted.<br>
+  SEL_DELETED:	sent before text is removed from the text buffer; the message data is a two-element array indicating the position at which text will be removed and the number of characters to be removed.<br>
+  SEL_CHANGED:	sent when the contents of the text buffer change in 
+  any way; the message data is an integer indicating the 
+  cursor position.<br>
+  SEL_SELECTED:	sent after text is selected; the message data is a 
+  two-element array indicating the starting position of the selected text and the number of characters selected.<br>
+  SEL_DESELECTED:	sent before text is deselected; the message data is a 
+  two-element array indicating the starting position of the deselected text and the number of characters deselected.<br>
+  '
+  # ========================================================================= #
+  # === Some examples
+  # ========================================================================= #
+  h1 'Some examples:',
+     'darkblue FI BLOCK bigger BOLD'
+  div {
+    boldbr '<b> 1) Invoke button and trigger commands </b>'
+    br
+    cmd "require 'fox14'"
+    cmd '@app = FXApp.new; @main_window = FXMainWindow.new(@app, "Hello");'
+    pre '
+    @button_one = FXButton.new(@main_window, "Hey its me")
+    @button_one.connect(SEL_COMMAND) do |sender, selector, data|
+      puts 22* 2222
+    end
+    @main_window.show
+    @app.create
+    @app.run
+
+    <b>2) Invoke 3 buttons and trigger commands showing tooltips as well </b>
+    @app = FXApp.new; @main_window = FXMainWindow.new(@app, "TITLE");
+    @button_one1 = FXButton.new(@main_window, "Hey its me")
+    @button_one1.connect(SEL_COMMAND) do |sender, selector, data|
+      puts 22* 2222
+    end
+    @button_one2 = FXButton.new(@main_window, "Hey its me")
+    @button_one2.connect(SEL_COMMAND) do |sender, selector, data|
+      puts 22* 2222
+    end
+    @button_one3 = FXButton.new(@main_window, "Hey its me")
+    @button_one3.connect(SEL_COMMAND) do |sender, selector, data|
+      puts 22* 2222
+    end    
+    @button_one1.tipText = "Push Me"
+    @button_one2.tipText = "Kick me Me"
+    @button_one3.tipText = "Yeah"
+    FXToolTip.new(@app)
+    @main_window.show
+    @app.create
+    @app.run','VERD FS1em'
+  }
+  # ========================================================================= #
+  # === Shortcuts, keyboarding bindings
+  # shortcuts tag
+  # ========================================================================= #
+  h1 dot(103)+'Shortcuts and KeyBindings',headerColour,'FoxKeybindings'
+  p {
+    e  dot(107, 'marr8px')+'How can I make shortcuts/keyboard bindings?'
+    br
+    e 'Put & in front of the letter that is the shortcut, example for 
+    the key a:'
+    br
+    e '&a'
+  }
+  # ========================================================================= #
+  # === Clipboard TAG
+  #
+  # Copy and pasting things.
+  # ========================================================================= #
+  h1 dot(103)+'Clipboard, Copy and Paste',headerColour,'FoxClipboard'
+  p {
+    e dot(107, 'marr8px')+'How can I use the FOX Clipboard?'
+    br
+    e 'FXText and FXTextField provide <b>clipboard support</b>.
+    Use Ctrl+C to copy text to the system clipboard.'
+  }
+  # ========================================================================= #
+  # === How can I layout all buttons horizontally
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+'How can I layout all buttons horizontally?'
+  h1 '
+  By using <b>FXHorizontalFrame.new</b>  <br>
+  buttons = <b>FXHorizontalFrame.new</b>(self, LAYOUT_SIDE_BOTTOM|LAYOUT_FILL_X|PACK_UNIFORM_WIDTH)
+  <br>
+  Then you can do for example<br>
+  copyButton  = FXButton.new(buttons, "Copy") <br>
+  pasteButton = FXButton.new(buttons, "Paste")
+  '
+  br
+  # ========================================================================= #
+  # === Which Layout Managers exist in FXRuby?
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+'Which Layout Managers exist in FXRuby?'
+  h1 "FXPacker, FXHorizontalFrame, FXVerticalFrame, FXMatrix")
+  br
+  h1 dot(107, 'marr8px')+'Which statusbar decorations exist, and how do I use a status bar?')
+  h1 "STATUSBAR_WITH_DRAGCORNER - Causes the DragCorner to be shown.
+  <br>     # Status bar<br>
+  statusbar = <b>FXStatusBar.new</b>(self, LAYOUT_SIDE_BOTTOM|LAYOUT_FILL_X|STATUSBAR_WITH_DRAGCORNER)
+  <br>
+  You can send message to the statusbar using 
+  variable.helpText = 'Make something with the Status Bar.'"
+  # ========================================================================= #
+  # === Messages. Talking objects. Msg tags. EVENTS
+  # ========================================================================= #    
+  h1 dot(103)+'Messages, Events and Talking Objects',headerColour
+  h2 dot(107, 'marr8px')+
+     'How do we add add a message handler, and which are the SEL options?'+
+     ICON_JAVASCRIPT+' (Pendant zu Javascript onClick();'
+  p {
+    e 'Use <b>.connect</b>'
+    br
+    e 'For example to cause a button to <b>exit on click</b>, do'
+    br
+    cmd '@button_one.connect(SEL_COMMAND) do |sender, selector, data|'
+    cmd '  exit'
+    e 'end<br>
+  This exit is Ruby specific, as far as I know. <br>
+  Most FOX objects send out messages/events when something interesting happens.
+  <br>
+  In the above example, <b>sender is the object that sends the message</b>.<br>
+  The <b>type</b>, such as <b>SEL_COMMAND</b>, is a predefined integer constant 
+  which tells you <b>why</b> a message has been sent.<br>
+  <b>Identifiers</b>, such as <b>ID_SHOW or ID_HIDE</b> are predefined integer constants 
+  that are used to distinguish between different messages of the <b>same type</b>.<br>
+  <b>data</b> is an object containing message-specific information.
+  <br>
+  These SEL options are invoked when its conditions are met, for example
+  SEL_LEFTBUTTONPRESS is called when the user clicks the left mouse button. <br>
+  The SEL options are:<br>
+  <b>
+  SEL_CLIPBOARD_REQUEST 
+  SEL_COMMAND 
+  SEL_CHANGED 
+  SEL_MAXIMIZE 
+  SEL_MINIMIZE 
+  SEL_RESTORE SEL_CLOSE
+  </b><br>
+  They can be found at 
+  <a href="http://fox-toolkit.net/cgi-bin/wiki.pl?FOX_Messages">
+  http://fox-toolkit.net/cgi-bin/wiki.pl?FOX_Messages
+  </a>
+  <table class="FS1em BO">
+    <tr><td><b class="FI">MessageTypes</b></td><td><b class="FI">Description</b></td></tr>
+    <tr><td>SEL_BEGINDRAG</td><td>Start a Drag operation</td></tr>
+    <tr><td>SEL_CLIPBOARD_GAINED</td><td>Gained the selection</td></tr>
+    <tr><td>SEL_CLIPBOARD_LOST</td><td>Lost the selection</td></tr>
+    <tr><td>SEL_CLIPBOARD_REQUEST</td><td>Request for the selection</td></tr>
+    <tr><td>SEL_CONFIGURE</td><td>Configure Notify</td></tr>
+    <tr><td>SEL_COMMAND</td><td> </td></tr>
+    <tr><td>SEL_DND_ENTER</td><td>Drag-and-Drop Enter</td></tr>
+    <tr><td>SEL_DND_LEAVE</td><td>Drag-and-Drop Leave</td></tr>
+    <tr><td>SEL_DND_MOTION</td><td>Drag-and-Drop Motion</td></tr>
+    <tr><td>SEL_DND_DROP</td><td>Drag-and-Drop Drop</td></tr>
+    <tr><td>SEL_DND_REQUEST</td><td>Drag-and-Drop Request</td></tr>
+    <tr><td>SEL_DRAGGED</td><td>Being dragged</td></tr>
+    <tr><td>SEL_ENDDRAG</td><td>End a drag operation</td></tr>
+    <tr><td>SEL_ENTER</td><td>Mouse enters window</td></tr>
+    <tr><td>SEL_FOCUSIN</td><td>Window gaines focus</td></tr>
+    <tr><td>SEL_FOCUSOUT</td><td>Window lost focus</td></tr>
+    <tr><td>SEL_LEAVE</td><td>Mouse leaves window</td></tr>
+    <tr><td>SEL_LEFTBUTTONPRESS</td><td>Left mouse button press</td></tr>
+    <tr><td>SEL_LEFTBUTTONRELEASE</td><td>Left mouse button release</td></tr>
+    <tr><td>SEL_MAP</td><td>Window was mapped to screen</td></tr>
+    <tr><td>SEL_MIDDLEBUTTONPRESS</td><td>Middle mouse button press</td></tr>
+    <tr><td>SEL_MIDDLEBUTTONRELEASE</td><td>Middle mouse button release</td></tr>
+    <tr><td>SEL_MOTION</td><td>Mouse motion</td></tr>
+    <tr><td>SEL_MOUSEWHEEL</td><td>Mouse wheel</td></tr>
+    <tr><td>SEL_KEYPRESS</td><td>Key Press</td></tr>
+    <tr><td>SEL_KEYRELEASE</td><td>Key Release</td></tr>
+    <tr><td>SEL_RIGHTBUTTONPRESS</td><td>Right mouse button press</td></tr>
+    <tr><td>SEL_RIGHTBUTTONRELEASE</td><td>Right mouse button release</td></tr>
+    <tr><td>SEL_SELECTION_GAINED</td><td>Gained the selection</td></tr>
+    <tr><td>SEL_SELECTION_LOST</td><td>Lost the selection</td></tr>
+    <tr><td>SEL_SELECTION_REQUEST</td><td>Request for the selection</td></tr>
+    <tr><td>SEL_UNMAP</td><td>Window was unmapped; The grab is lost</td></tr>
+    <tr><td>SEL_UPDATE</td><td>Update State of Widget</td></tr>
+    <tr><td>SEL_UNGRABBED</td><td>Lost the grab somehow.</td></tr>
+    </table>'
+  }
+  h1 dot(107, 'marr8px')+
+     'How can I use different images with FOX, and can you show me an example?'
+  p {
+    boldbr 'FXJPGIcon for jpg, FXPNGIcon for png, FXGIFIcon for gif'
+    br
+    e '<b class="s1em">Example</b> <br>
+    @button_one1.icon = <b class="darkblue">FXJPGIcon.new</b>(@app, imgFile.read)<br>     <br>
+    It seems Icon allows to take colours, Image doesnt, so this appears to be one difference.<br>
+    In FOX, Images and Icons are objects that represent picture data.  
+    Images are simple pictures, whereas Icons are pictures 
+    with a shape mask that may be used to effectively mask 
+    out a certain area of the picture, and allow part the 
+    background to peek through as if the picture were transparent 
+    in some areas.'
+    br
+    e 'This could be used for a MAP like a Dungeon Viewer.'
+    br
+    e 'Both Icons and Images may have Client side pixel data as 
+    well as an X Server side pixmap representation.  
+    The typical application will construct the client-side pixel 
+    data by filling the Icon or Image with a picture, then 
+    create the server-side representation [after contact with 
+    the X Server has been established] by calling icon->create(), 
+    which creates an server side pixmap and uses a call to 
+    icon->render() to fill the pixmap with the pixel data.'
+    br
+    e 'Anyway, the full list should be (sorted in magnitude of importancy)'
+    br
+    e 'FX::FXXPMImage,  FX::FXXPMIcon,  FX::FXXBMImage, 
+    FX::FXXBMIcon,   FX::FXTIFImage, FX::FXTIFIcon, 
+    FX::FXTGAImage,  FX::FXTGAIcon,  FX::FXRGBImage, 
+    FX::FXRGBIcon,   FX::FXRASImage, FX::FXRASIcon, 
+    FX::FXPPMImage,  FX::FXPPMIcon,  FX::FXPNGImage, 
+    FX::FXPNGIcon,   FX::FXPCXImage, FX::FXPCXIcon, 
+    FX::FXJPGImage,  FX::FXJPGIcon,  FX::FXIFFImage, 
+    FX::FXIFFIcon,   FX::FXICOImage, FX::FXICOIcon, 
+    FX::FXGIFImage,  FX::FXGIFIcon,  FX::FXGIFCursor, 
+    FX::FXCURCursor, FX::FXBMPImage, FX::FXBMPIcon'
+  }
+  # ========================================================================= #
+  # === How do I make the icn transparent?
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+'How do I make the icon transparent?'
+  h1 'IMAGE_ALPHACOLOR tells FOX that some image areas should be treated as transparent.
+       <br>
+       IMAGE_ALPHAGUESS tells Fox to guess the appropriate 
+       transparency colour.<br>
+       Example<br>
+       <b>@button_one.icon.options = IMAGE_ALPHACOLOR | IMAGE_ALPHAGUESS</b>
+       ')
+  # ========================================================================= #
+  # === DECOR options
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+
+     'Which DECOR options exist?'
+  h1 "* DECOR_ALL - All hints are passed to the windowmanager
+  * DECOR_NONE - Borderless window
+  * DECOR_TITLE - Window title
+  * DECOR_MINIMIZE - Minimize button
+  * DECOR_MAXIMIZE - Maximize button
+  * DECOR_CLOSE - Close button
+  * DECOR_BORDER - Border
+  * DECOR_STRETCHABLE - Window is stretchable.
+  * DECOR_SHRINKABLE - Window is shrinkable.
+  * DECOR_RESIZE - Combination of DECOR_STRETCHABLE and DECOR_SHRINKABLE
+  * DECOR_MENU - Window has a menu. <br>
+  You can combine those as in DECOR_TITLE|DECOR_MINIMIZE.
+  I am not sure if + instead of | works too..."
+  h1 '@button_one.icon.options = IMAGE_ALPHACOLOR|IMAGE_ALPHAGUESS)'
+  h1 dot(107, 'marr8px')+'How do I specify the image/icon position and which positions exist?'
+  h1 'You do this by calling <b>iconPosition</b><br>
+  @button_one.iconPosition = ICON_ABOVE_TEXT<br>
+  Use one of <b>ICON_ABOVE_TEXT ICON_UNDER_TEXT ICON_BEFORE_TEXT ICON_AFTER_TEXT ICON_BELOW_TEXT</b>
+  to get the position you desire.'
+  # ========================================================================= #
+  # Layouts tag. Layout tag. Lay tag.
+  # ========================================================================= #
+  h1 dot(103)+'Layouts and Decoration',headerColour,'FoxLayouts'
+  h1 dot(107, 'marr8px')+'
+     How do I use layout hints?'
+  e 'setLayoutHints   Set layout hints for this window.'
+  e 'getLayoutHints   Get layout hints for this window.'
+  # ========================================================================= #
+  # === Which layouts can be used in Fox?
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+
+     'Which layouts can be used in Fox?'
+  h1 "LAYOUT_NORMAL         Default layout mode.        <br>
+  LAYOUT_SIDE_TOP       Pack on top side (default).       <br>
+  LAYOUT_SIDE_BOTTOM    Pack on bottom side (most below). <br>
+  LAYOUT_SIDE_LEFT      Pack on left side.                <br>
+  LAYOUT_SIDE_RIGHT     Pack on right side.               <br>
+  LAYOUT_FILL_COLUMN    Matrix column is stretchable.     <br>
+  LAYOUT_FILL_ROW       Matrix row is stretchable.        <br>
+  LAYOUT_LEFT           Stick on left (default).          <br>
+  LAYOUT_RIGHT          Stick on right.                   <br>
+  LAYOUT_CENTER_X       Center horizontally.              <br>
+  LAYOUT_FIX_X          X fixed.                          <br>
+  LAYOUT_TOP            Stick on top (<b>default</b>)     <br>
+  LAYOUT_BOTTOM         Stick on bottom.                  <br>
+  LAYOUT_CENTER_Y       Center vertically.                <br>
+  LAYOUT_FIX_Y          Y fixed.                          <br>
+  LAYOUT_FIX_WIDTH      Width fixed                       <br>
+  LAYOUT_FIX_HEIGHT     Height fixed                      <br>
+  LAYOUT_MIN_WIDTH      Minimum width is the default      <br>
+  LAYOUT_MIN_HEIGHT     Minimum height is the default     <br>
+  LAYOUT_FILL_X         Stretch or shrink horizontally    <br>
+  LAYOUT_FILL_Y         Stretch or shrink vertically      <br>
+  LAYOUT_FILL           Stretch or shrink in both directions  <br>
+  LAYOUT_EXPLICIT       Explicit placement"
+  # ========================================================================= #
+  # === TOOLTIPS TAG LABELS TAG
+  # ========================================================================= #
+  h1 dot(103)+'Tooltips and Labels',headerColour
+  h2 dot(107, 'marr8px')+'How do I add tooltips? (tool tips)'
+  h2 '@button_one.<b>tipText</b> = "Push Me"<br>
+  <b class="darkblue">FXToolTip.new</b>(@app)<br>
+  You need to call FXToolTip.new only once, and can use
+  something like this too <br>
+  FXToolTip.new(self.getApp())'
+  h2 dot(107, 'marr8px')+'How do I make a label?'
+  h2 'FXLabel.new(@canvasFrame, "Canvas Frame", nil,JUSTIFY_CENTER_X|LAYOUT_FILL_X)'
+  # === How can I pad/use padding?
+  h1 dot(107, 'marr8px')+'How can I pad/use padding?'
+  h1 "
+  top = FXVerticalFrame.new(self, LAYOUT_FILL_X|LAYOUT_FILL_Y,0,0,0,0) do |theFrame| <br>
+    theFrame.padLeft = 3 <br>
+    theFrame.padRight = 3 <br>
+    theFrame.padBottom = 3 <br>
+    theFrame.padTop = 3 <br>
+    theFrame.vSpacing = 5 <br>
+  end<br>
+  vSpacing is Vertical child spacing,
+  hSpacing is Horizontal child spacing "
+  br
+  h1 dot(107, 'marr8px')+'How can I use a save button?'
+  h1 "
+  @blzinp = FXDataTarget.new("") <br>
+    @blz = FXTextField.new(top, 30, @blzinp, FXDataTarget::ID_VALUE) do |theTextField| <br>
+    theTextField.layoutHints = LAYOUT_FILL_X <br>
+    theTextField.setFocus <br>
+    theTextField.resize(210,210) <br>
+  end"
+  # ========================================================================= #
+  # === Fonts tag.
+  # ========================================================================= #
+  h1 dot(103)+'Fonts',headerColour,'FoxFonts'
+  h1 dot(107, 'marr8px')+
+     'How do I create and use Fonts, and which FONT options 
+      can i set? (Equivalent of html font, and CSS settings
+      for color: and font-family)'
+  h1 '# Create the font - you no longer need to call .create <br>
+  @font = FXFont.new(getApp(), "courier", 15, FONTWEIGHT_BOLD)  <br> <br>
+  FONTWEIGHT_DONTCARE    Don\'t care about weight. <br>
+  FONTWEIGHT_THIN      Thin. <br>
+  FONTWEIGHT_EXTRALIGHT  Extra light. <br>
+  FONTWEIGHT_LIGHT      Light. <br>
+  FONTWEIGHT_NORMAL      Normal or regular weight. <br>
+  FONTWEIGHT_REGULAR      Normal or regular weight. <br>
+  FONTWEIGHT_MEDIUM      Medium bold face. <br>
+  FONTWEIGHT_DEMIBOLD    Demi bold face. <br>
+  FONTWEIGHT_BOLD        Bold face. <br>
+  FONTWEIGHT_EXTRABOLD   Extra. <br>
+  FONTWEIGHT_HEAVY       Heavy. <br>
+  FONTWEIGHT_BLACK       Black. <br>  <br>
+  Typical Font Names (font families):
+  courier,arial,helvetica <br>
+  You can setFont, as in  <br>
+  file_drop_down.setFont(FXFont.new(getApp(), "helvetica", 24, FONTWEIGHT_BOLD,FONTSLANT_ITALIC, FONTENCODING_DEFAULT))
+  <br>'
+  e 'Read more about it'
+  br
+  abr 'https://www.fxruby.org/1.2/doc/api/classes/Fox/FXText.html',
+       content: 'here'
+  h1 dot(107, 'marr8px')+'How do I use FXMDIClient und FXDCWindow?')
+  h1 "The MDI client window manages a number of MDI child windows in a 
+  multiple-document interface (MDI) application."
+  br
+  p {
+    e 'MDI child windows usually receive messages from the GUI through
+    delegation via the MDI client, i.e. the MDI client window is set 
+    as the target for most GUI commands; the MDI client filters out 
+    a few messages and forwards all other messages to the active MDI
+    child.'
+    br
+    e 'MDI client can arrange the MDI child windows in various ways - 
+    it may maximize one of the MDI child windows, arrange them 
+    side-by-side, cascade them, or iconify them.'
+    br
+    e 'MDI child windows are notified about changes in the active
+    MDI child window by the MDI client.'
+  }
+  # ================================================= #
+  # col tag color tag colors tag colours tag
+  # c tag.
+  # ================================================= #
+  h1 dot(103)+'Colours / Colors',headerColour,'FoxColours')
+  h1 dot(107, 'marr8px')+'How do I use colours including 
+  background colours? (colors, colour tag)')
+  h1 '@button_one.backColor = FXRGB(0, 128, 0) <br>
+  @button_one.textColor = FXRGB(255, 255, 255)<br>
+  @button_one.setFont = noIdea<br>  
+  @button_one.setHelpText = "hmm"<br>  
+  @button_one.setBackColor("green")<br>
+  @button_one.setTextColor("white")<br>
+  @button_one.hiliteBackColor = FXRGB(255, 255, 255)<br> 
+  @button_one.hiliteTextColor = FXRGB(225, 255, 255)'
+  br
+  e 'I am not sure whether hilite still works. Use with care.'
+  br
+  # ================================================= #
+  # window tag wind tag win tag management tag wintag
+  # ================================================= #
+  h1 dot(103)+'Window Management',headerColour,'FoxWindows'
+  h1 dot(107, 'marr8px')+'How do I get a listing of files?'
+  h1 'Use FXList.new.<br>
+  Example<br>
+  listing = FXList.new(listframe, nil, 0, LIST_EXTENDEDSELECT|LAYOUT_FILL_X|LAYOUT_FILL_Y)
+  <br>
+  To add new entries to it, use <br>
+  listing.appendItem("Bla")  
+  <br>
+  See the next image example.'
+  br
+  dimg 'GUI/FOX/FOX_FILE_LISTING.png',
+                  'bblack1 marl4em'
+  h1 dot(107, 'marr8px')+'How do I create a new window with a title?'
+  br
+  h1 '@main_window = <b class="darkblue">FXMainWindow.new</b>(@app, <b>"Your Title comes here"</b>)'
+  br
+  h1 dot(107, 'marr8px')+WDI+' have to call app.create and app.show?
+  h1 'Fox differs between server and client side. For the client side, 
+  you need to invoke the <b>.create</b> method once. 
+  By calling create() on the application triggers a recursive cascade
+  of creating all owned resources - like the application\'s windows. <br>
+  Additionally, by default, all windows in FXRuby 
+  programs are <i>invisible</i>. This is why you must call 
+  app.show to make them visible'
+  br
+  h1 dot(107, 'marr8px')+'How do I use FXText.new?'
+  h1 "
+  FXText is a <b>multi-line, single-font text widget</b>. 
+  It is used to edit text files and by many programs to show text or allow 
+  the user to edit it.
+  Examples:
+  <br>
+  text = <b>FXText.new</b>(hor, nil, 0, TEXT_READONLY | TEXT_WORDWRAP |
+     LAYOUT_FILL_X | LAYOUT_FILL_Y | FRAME_LINE)
+  "
+  # === How can I make a small FOX window?
+  h1 dot(107, 'marr8px')+
+     'How can I make a small FOX window?'
+  h1 'You must start by invoking (the first thing)
+  <b class="darkblue">FXApp.new</b><br>
+  @app = <b class="darkblue">FXApp.new("Scribble","FoxTest")</b>;
+  @main_window = FXMainWindow.new(@app, "Hello"); @app.create;
+  @main_window.show; @app.run   <br>
+  You see that FXApp.new() accepts two arguments - 
+  the first is an <b>intern name</b>, most often the title,
+  the second is the <b>vendor key</b>
+  which usually shortly describes the way this is intended, so FoxTest
+  is just a Test if Fox works, sort of... :)
+  Those are optional as far as I know.<br>
+  Also, if you want to create a specialized subclass, make it a subclass
+  of FXMainWindow'
+  h1 dot(107, 'marr8px')+'Can I set text?')
+  h1 'Use <b>.text</b>. This should work on most things.')
+# =========================================================================== #
+# Styling things. Style tag
+# =========================================================================== #
+h1 dot(103)+'Styling with FOX','h1',headerColour,'','FoxStyling')
+h1 dot(107, 'marr8px')+'Which style options exist and how do I use them?')
+  h1 '<b>STYLE_UNDERLINE <br>
+  STYLE_STRIKEOUT <br>
+  STYLE_BOLD </b> <br>
+  Here comes an example <br>
+  @hilite_style = FXHiliteStyle.new
+  @hilite_style.normalForeColor = FXColor::Blue
+  @hilite_style.normalBackColor = FXColor::Yellow
+  @hilite_style.selectForeColor = @styledText.selTextColor
+  @hilite_style.selectBackColor = @styledText.selBackColor
+  @hilite_style.hiliteForeColor = @styledText.hiliteTextColor
+  @hilite_style.hiliteBackColor = @styledText.hiliteBackColor
+  @hilite_style.activeBackColor = @styledText.activeBackColor
+  @hilite_style.style = FXText::STYLE_UNDERLINE ')
+  h1 dot(107, 'marr8px')+'How do I use FXMenuTitle.new to make a 
+  title and a menu? (making a menu/build a menu)'
+  h1 '<b>FXMenuTitle</b> is used by passing it the first argument which refers to
+  a <b class="darkblue">FXMenuBar</b>, which is used to initialize the
+  menu bar (most often on top). The FXMenuBar is thus used to
+  display a horizontal line, which you can fill up with
+  buttons and so on. Here is an example: <br>
+  @menu_bar = FXMenuBar.new(self, LAYOUT_SIDE_TOP|LAYOUT_FILL_X)    <br>
+  expandmenu = <b class="darkblue">FXMenuPane.new</b>(self)<br>
+  # Arrangiere die Menubar <br>
+  <b>FXMenuTitle.new</b>(@menu_bar, "&File", nil, expandmenu) <br>
+  FXMenuCommand.new(expandmenu, "Quit\tCtl-Q", nil, getApp(), FXApp::ID_QUIT)  <br>
+  With FXMenuPane you register a new drop-down entry at the menu bar.     <br>
+  Once you assigned the FXMenuBar to a variable,
+  you can refer all subentries to this variable.
+    Example:
+  <br>
+  bla = FXMenuRadio.new(your_variable, "Yada some Desc")<br>
+  Another example<br>
+  <b>
+  @@menu_bar = FXMenuBar.new(self, LAYOUT_SIDE_TOP | LAYOUT_FILL_X)
+  </b>'
+  # ========================================================================= #
+  # === What are the values for FXMainWindow?
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+
+     'What are the values for FXMainWindow?'
+  h1 '
+  FXMainWindow    (     FXApp *      a,
+  const FXString &    name,
+  FXIcon *    ic = NULL,
+  FXIcon *    mi = NULL,
+  FXuint    opts = DECOR_ALL,
+  FXint    x = 0,
+  FXint    y = 0,
+  FXint    w = 0,
+  FXint    h = 0,
+  FXint    pl = 0,
+  FXint    pr = 0,
+  FXint    pt = 0,
+  FXint    pb = 0,
+  FXint    hs = 0,
+  FXint    vs = 0
+  )'    
+  br
+  h1 dot(107, 'marr8px')+'Which options exist for .show()?'
+  h1 '.show(PLACEMENT_SCREEN)'
+  h1 dot(107, 'marr8px')+
+     'How do I connect an existing button to a Selection, which changes its style?'
+  h1 '
+  checkButton = FXCheckButton.new(controls, "Toolbar ") <br>
+  checkButton.connect(SEL_COMMAND) { |sender, sel, checked| <br>
+    if checked <br>
+      @button.<b>buttonStyle</b> |= BUTTON_TOOLBAR <br>
+      @button.<b>frameStyle</b>   = FRAME_RAISED <br>
+    else <br>
+      @button.<b>buttonStyle</b> &= ~BUTTON_TOOLBAR <br>
+      @button.<b>frameStyle</b>   = FRAME_RAISED|FRAME_THICK <br>
+    end <br>
+  }'
+  br
+  h1 dot(107, 'marr8px')+'Which frame modes exist?'
+  h1 'FRAME_NONE|FRAME_SUNKEN|FRAME_RAISED|FRAME_THICK|FRAME_GROOVE|FRAME_RIDGE|FRAME_LINE|FRAME_NORMAL <br>
+  You can combine these'
+    e 'myButton=<b>FXButton.new</b>(parent, "Button Text",optional_icon_pointer_for_this_button,target, 
+  sel=0, BUTTON_NORMAL|LAYOUT_FIX_X|LAYOUT_FIX_Y|LAYOUT_FIX_WIDTH|LAYOUT_FIX_HEIGHT,
+  x, y, w, h)   <br>
+  The button accepts more settings like
+  FRAME_RAISED|FRAME_THICK|LAYOUT_CENTER_X|LAYOUT_CENTER_Y|LAYOUT_FIX_WIDTH|LAYOUT_FIX_HEIGHT<br>
+  <b class="FI">BUTTON specific settings are these: </b><br>
+  BUTTON_NORMAL - DEFAULT<br>
+  BUTTON_AUTOGRAY - Automatically gray out when not updated<br>
+  BUTTON_AUTOHIDE - Automatically hide button when not updated<br>
+  BUTTON_TOOLBAR - Toolbar style button [flat look]<br>
+  BUTTON_DEFAULT - May become <b>default</b> button when receiving focus<br>
+  BUTTON_INITIAL - This button is the <b>initial default button</b> <br>
+  Use <b>setButtonStyle()</b> and <b>getButtonStyle()</b> to set/get the button 
+  style after widget creation. <br>
+  JUSTIFY_BOTTOM and other justify may be used as well.<br>
+  JUSTIFY_NORMAL     Default justification is centered text. <br>
+  JUSTIFY_CENTER_X   Contents centered horizontally. <br>
+  JUSTIFY_LEFT       Contents left-justified. <br>
+  JUSTIFY_RIGHT      Contents right-justified. <br>
+  JUSTIFY_HZ_APART   Combination of JUSTIFY_LEFT & JUSTIFY_RIGHT. <br>
+  JUSTIFY_CENTER_Y   Contents centered vertically. <br>
+  JUSTIFY_TOP        Contents aligned with label top. <br>
+  JUSTIFY_BOTTOM     Contents aligned with label bottom. <br>
+  JUSTIFY_VT_APART   Combination of JUSTIFY_TOP & JUSTIFY_BOTTOM. <br>
+  The documentation for FOX Buttons can be found at 
+  <a href="http://fox-toolkit.net/cgi-bin/wiki.pl?FOX_Reference/FXButton">
+  http://fox-toolkit.net/cgi-bin/wiki.pl?FOX_Reference/FXButton
+  </a>  <br>
+  <b>FXApp::ID_QUIT</b> is used to quit an Fox-application. 
+  You need to connect your button to this message in order to 
+  make it quit.')
+  h1 dot(107, 'marr8px')+'How do I make radiobuttons?'
+  h1 '<b>radio_button = FXRadioButton.new(@main_window,"Was auf dem Button draufsteht")</b>')
+  dimg "GUI/FOX/FOX_FXRadioButton.png","bblack1 marl4em"
+  h1 dot(107, 'marr8px')+'How do I feature a copy button?'
+  h1 ' @button_copy.connect(SEL_COMMAND) do <br>
+  customer = customerList.getItemData(customerList.currentItem) <br>
+    types = [ FXWindow.stringType ] <br>
+    if acquireClipboard(types) <br>
+      @clippedCustomer = customer <br>
+    end <br>
+    end<br>
+    The specified types are predetermined, for example<br>
+    types = [ FXWindow.stringType ]<br>
+    Another way, and probably easier, is to use a text clipboard, and
+    just copy the content into a file<br>
+    # The printButton <br>
+    @button_print = FXButton.new(menuFile, "Print Content")  <br>
+    @button_print.connect(SEL_COMMAND) { |sender, sel, checked| <br>
+      puts @textfield <br>
+    } <br>
+    In that example, @textield would be of  <br>
+    <b>FXText.new</b>, and this looks rather 
+  similar to the html' +ICON_HTML+' textarea tag.'
+  # ========================================================================= #
+  # === How do I create a horizontal Frame and set several options?
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+
+     'How do I create a horizontal Frame and set several options?'
+  h1 "@contents =  <b class=\"darkblue\">FXHorizontalFrame.new</b>(self,LAYOUT_SIDE_TOP | LAYOUT_FILL_X | LAYOUT_FILL_Y, 0, 0, 0, 0, 0, 0, 0, 0)
+  <br>
+  With the FXHorizontalFrame you can align widget windows together.
+  The new method allows these values<br>
+  <b>
+  new(p, 
+   opts=0, 
+   x=0, 
+   y=0,
+   w=0,
+   h=0, 
+   padding_left=DEFAULT_SPACING, 
+   padding_right=DEFAULT_SPACING, 
+   padding_top=DEFAULT_SPACING, 
+   padding_bottom=DEFAULT_SPACING, 
+   horizontal_spacing=DEFAULT_SPACING, 
+   vertical_spacing=DEFAULT_SPACING) {|theHorizontalFrame| ...}   
+  </b>"
+  h1 dot(107, 'marr8px')+'Show me the hello world example briefly.'
+  h1 "require 'fox14';
+  include Fox; @app = FXApp.new;
+   @main_window = FXMainWindow.new(@app, 'Hello'); @app.create; @main_window.show; @app.run")
+  br
+  h1 dot(107, 'marr8px')+HDI + ' nest different windows together?'
+  h1 "
+  There exist several ways. One is to use widgets.
+  First, we creatre the buttons, then we call <b>FX4Splitter</b><br>
+  The four-way splitter is a layout manager which manages four 
+  children like four panes in a window.")
+  br
+  h1 dot(107, 'marr8px')+'Anything to say about FXTextField?'
+  h1 "
+  You can make it readonly (like the html version), as in
+  using TEXTFIELD_READONLY, but this wont work once the
+  object is created - so it seems.
+  Just use 
+  <br>
+  field.enabled = true # or false to gray out the field
+  <br>
+  or
+  <br>
+  field.editable = true # or false to prevent editing<br>
+                        # without graying the field"
+  # ========================================================================= #
+  # === What must I include to get colours working?
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+
+     'What must I include to get colours working?'
+  h1 "  require 'fox14/colors'"
+  h1 dot(107, 'marr8px')+'Which Image Types can I use with FOX?')
+  h1 'CUR, BMP, GIF, ICO, IFF, JPEG, PCX, PNG, PPM, RAS, RGB, 
+  TGA, TIFF, XBM, XPM'
+  br
+  h1 dot(107, 'marr8px')+'How can I make a sunken Frame?'
+  h1 '# Place the list in a sunken frame <br>
+  sunkenFrame = FXVerticalFrame.new(self,LAYOUT_FILL_X|LAYOUT_FILL_Y|FRAME_SUNKEN|FRAME_THICK,
+  0, 0, 0, 0, 0, 0, 0, 0)'
+  br
+  h1 dot(107, 'marr8px')+'How do I use a specific material? (OpenGL)')
+  h1 'require \'fox14/glshapes.rb\' <br>
+  cube=FXGLCube.new(0,0,0,0,0)<br>
+  mat=FXMaterial.new<br>
+  mat.diffuse=FXVec4f.new(0,0,0,0)<br>
+  mat.specular=FXVec4f.new(0,0,0,0)<br>
+  mat.ambient=FXVec4f.new(0,0,0,0)<br>
+  cube.setMaterial(0,mat)<br>
+  mat2=cube.getMaterial(0)<br>
+  p mat2.ambient      # Fox::FXMaterial !!!<br>
+  p mat2.diffuse      # [0,0,0,0]<br>
+  p mat2.specular     # [0,0,0,0]'
+  # ========================================================================= #
+  # === How do I make a subclass and call super correctly?
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+
+     'How do I make a subclass and call super correctly?'
+  p {
+    e "super(app, <b class=\"FI firebrick\">Title of your Window</b>, nil, nil, DECOR_ALL, 0, 0, 
+    <span class=\"#{WIDTH_COLOUR}\">600</span>,<span class=\"#{height_colour}\">400</span>)'
+    br
+    e 'In general form, you use super like this:'
+    br
+    e "super(owner, 'About ' + APPNAME, DECOR_TITLE | DECOR_BORDER | DECOR_CLOSE | DECOR_RESIZE)"
+  }
+  # ================================================== #
+  # === Separator tag. Sep tag. Sliders tag
+  # ================================================== #
+  h1 dot(103)+'Separator and Sliders',headerColour,'FoxSeparator'
+  h1 dot(107, 'marr8px')+
+  'How do I make a separator?'
+  p {
+    e '<b># Separator </b>'
+    br
+    e 'FXVerticalSeparator.new(self, LAYOUT_SIDE_RIGHT|LAYOUT_FILL_Y|SEPARATOR_GROOVE)'
+    br
+    e 'or'
+    br
+    e 'FXHorizontalSeparator.new(self, LAYOUT_SIDE_RIGHT|LAYOUT_FILL_Y|SEPARATOR_GROOVE)'
+  }
+  # ========================================================================= #
+  # === IMAGES
+  #
+  # IMG TAG IMAGES TAG image tag 
+  # All about images and icons.
+  # ========================================================================= #
+  h1 dot(103)+'Images and Icons','h1',headerColour,'','FoxImages'
+  h1 dot(107, 'marr8px')+'How can I use an image?'
+  h1 'This is done by using the <b>.icon</b> 
+  method of all button objects. Example<br>
+  <b>
+  my_imgFile = File.open("/Users/x/DATA/IMG/RPG/STD/BIHANDER.jpg", "rb")<br>
+  @button_one1.icon = FXJPGIcon.new(@app, imgFile.read) 
+  </b><br> 
+  The "rb" mode means read-binary, which is needed for images.
+  If you use .read, make sure to .close after reading.
+  Example:<br>
+  iconFile = File.open("/Users/x/DATA/IMG/RPG/STD/BIHANDER.jpg", "rb") <br>
+  @button_one.icon = FXJPGIcon.new(@app, iconFile.read) <br>
+  iconFile.close'
+  # ========================================================================= #
+  # === How do I make a scrollbar or a slider
+  # ========================================================================= #
+  h1 dot(107, 'marr8px')+'How do I make a scrollbar or a slider?'
+  p {
+    e 'FXSlider.new(self, @intTarget, FXDataTarget::ID_VALUE, (SLIDER_VERTICAL|
+    SLIDER_INSIDE_BAR|LAYOUT_SIDE_RIGHT|LAYOUT_FILL_Y|LAYOUT_FIX_WIDTH),
+    0, 0,32, 0)'
+    br
+    e '32 is the width in x-y axies.'
+  }
+  # ========================================================================= #
+  # === Links
+  # ========================================================================= #
+  h3 'Links'
+  p {
+    abr 'https://www.fox-toolkit.org/',
+         content: dot(105, 'marr8px')+
+                  'Official Fox Homepage',
+         css_class: 's1_5em'
+  }
+  # =========================================================== #
+  # FOX LINKS
+  # =========================================================== #
+  h1 dot(103)+'FOX Links',
+     headerColour+" FI s1em"
+  div('s8px') {
+    div('mart1em') {
+      abr dot(105, 'marr8px')+'Official FXRuby Homepage',
+          content: 'http://www.fxruby.org/',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'Official Fox Classes and Structs',
+          content: 'http://www.fox-toolkit.net/foxdoc-1.2/annotated.html',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'Official FXRuby API Documentation',
+          content: 'http://www.fxruby.org/1.2/doc/api/',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'Official FOX 1.2 API Documentation',
+          content: 'http://www.fox-toolkit.net/foxdoc-1.2/',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'FOX Wiki Examples',
+          content: 'http://fox-toolkit.net/cgi-bin/wiki.pl?Tutorials',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'Fox Documentation',
+          content: 'http://fox-toolkit.net/cgi-bin/wiki.pl?Documentation',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'Fox Classes',
+          content: 'http://www.fox-toolkit.net/foxdoc-1.2/classes.html',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'FXRuby Bug Tracker',
+          content: 'http://rubyforge.org/tracker/index.php?group_id=300&atid=1223',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'FXRuby API - Very good site',
+          content: 'http://fxruby.org/doc/api/classes/Fox/',
+          css_class: 's1_5em'
+      abr dot(105, 'marr8px')+'The famous FXRuby Examples listed here',
+          content: 'http://www.fxruby.org/doc/examples.html',
+          css_class: 's1_5em'
+    }
+  }
+}}