CODEWITHSUNDEEP
textcolorssubstringjavafx-8
Karo
Karo

Reputation: 273

Change substring color in JavaFX Text Area

I need to change substring text from Text Area in JavaFX for example in text below static and void be red.

public static void main(String[] args) {

}

I don't know about CSS is there any simple code or tutorial?

Upvotes: 0

Views: 3811

Answers (1)

Robert Rohm
Robert Rohm

Reputation: 341

The TextArea does not support anything like rich text different formatting within one component. I would propose you look into directions of

  1. TextFlow - see http://docs.oracle.com/javase/8/javafx/api/javafx/scene/text/TextFlow.html.
    It is meant for static display of rich text, but it does not provide editing. The Oracle tutorial may be a viable starting point: http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/text-settings.htm
  2. WebView - see http://docs.oracle.com/javase/8/javafx/api/javafx/scene/web/WebView.html.
    WebView can be used to display HTML content. There are several ways to utilize this. You may construct your formatted and colored text as HTML code and set it as WebView content - or you even load one of the popular JavaScript source code formatters/highlighters into the WebView component.

If you are about to create something like a java source code view in JavaFX, you might want to have a look on the 2nd approach. A short sketch (using the ACE Editor libraries, done for JavaScript syntax coloring) might look like this:

First, initialize the WebView with your HTML, here done in an FXML controller: 

@Override
public void initialize(URL url, ResourceBundle rb) {

    WebEngine engine = this.webView.getEngine();
    engine.setJavaScriptEnabled(true);
    engine.setOnAlert(new EventHandler<WebEvent<String>>() {

      @Override
      public void handle(WebEvent<String> t) {
        String data = t.getData();
        System.out.println("alert: " + data);
        textArea.appendText(data);
      }
    });
    engine.load(this.getClass().getResource("content/basics-javascript.html").toExternalForm());
  }

Second part: content/basics-javascript.html contains an HTML page that loads the JavaScript libraries necessary for the formatting and highlighting: 

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css" media="screen">
        #editor { 
            position: absolute;
            top: 30px;
            right: 5px;
            bottom: 5px;
            left: 5px;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>
  </head>
  <body>
    <div>ACE-Editor</div>
    <div id="editor">
    function foo(items) {
        var x = "All this is syntax highlighted";
        return x;      

    </div>
    <script type="text/javascript" src="js/libs/ace/ace.js" ></script>
    <script type="text/javascript">
      var editor = ace.edit('editor');

      editor.getSession().setMode("ace/mode/javascript");
    </script>
  </body>
</html>

Hope that helps!

Upvotes: 4

Related Questions