1

I have been trying to use a textBrowser in order to display chat messages in my application. I've set the textBrowser with HTML enabled. I'm then appending each message to the textBrowser like so:

ui->textBrowser->append(QString().sprintf("<div style=\"border-bottom:1px solid #eeeeee; background-color:#ffffff;display:block;\"><font color=\"red\"> %s</font></div>",msg.toStdString().c_str()));

However, I am limited in what CSS i can apply to each appended element. For example; - Border does not work - Display block does not work - etc.

I'm now fairly certain that the textBrowser just does not have the power that i need, I'm aiming in creating a chat message much like Skype is doing it.

What would be the best control to use for this purpose?

Some ideas I have so far: - Use a scrollArea and append widgets inside of them - Use a listView (not sure if its possible to style it the way i want)

Key elements i want to include in each chat message are:
- Time
- Avatar picture
- Name
- Text message

Any ideas what the best approach would be here?

Edit

Unfortunately i cant attach an image yet since I'm still new here.

user3082584
  • 167
  • 1
  • 10

1 Answers1

2

I think you could simply use the WebKit (WebView) component. That will allow you to do anything you need and more. Styling and layout is done like a regular HTML/CSS page, then you can integrate it to the application backend via JavaScript.

laurent
  • 88,262
  • 77
  • 290
  • 428
  • Yes, `QWebView` is powerful and easy-to-use control. But a) not all HTML code will work the same way as in Chrome/Firefox/etc. b) it append additional dependency (QtWebkit library) c) don't work under mobile platforms yet. But i think OP don't care about this :) – eraxillan Dec 09 '13 at 12:08
  • So i would append a new div for each message into the `WebView`? – user3082584 Dec 09 '13 at 12:11
  • Is this the best approach for inserting? http://stackoverflow.com/questions/17865040/qt-how-to-insert-html-into-an-editable-qwebview-at-the-cursor-position – user3082584 Dec 09 '13 at 12:31
  • @user3082584, there are several ways to do it. What I would suggest it to put the HTML for the chat messages in a template then insert them using, for example, jQuery (you can load jQuery since what's running in the WebKit component is basically a website). You could use a templating library such as Mustache to make it easier. – laurent Dec 09 '13 at 14:37
  • @Laurent Sounds like a great idea with jQuery, have u succeeded in loaded jquery.js from a resource? I keep getting `ReferenceError: Can't find variable: $` – user3082584 Dec 09 '13 at 15:09
  • @user3082584, yes I got it working, you need to specify the absolute path to the jQuery.js file, in the form `file:///path/to/jquery.js`. – laurent Dec 09 '13 at 15:41
  • Would that not be problematic when i will release my application to clients? or do i simply include jquery in the installer? – user3082584 Dec 09 '13 at 16:58
  • @user3082584, sure, you'll need to package it as part of your application. What I did for mine is that I put all the HTML/JS/CSS files in an "html" folder next to the executable. Then you can refer to the file using something like `"file:///" + QFileInfo(qApp->applicationFilePath()).path() + "/html/js/jquery.js"` – laurent Dec 09 '13 at 18:19
  • @Laurent Very nice solution! Thank you a bunch for this. I've now almost completed my control and it looks and work precisely the way I wanted it to. – user3082584 Dec 10 '13 at 06:42