having jQuery UI framework in TWebBrowser in Delphi

Question

I am working on an application, lots of the UI elements will be in a TWebBrowser. So I thought I add a jQuery UI to make it easy for me.

I was able to insert JQuery and UI javascript file thanks to http://www.jasontpenny.com/blog/2008/11/21/jquery-in-a-twebbrowser-in-a-self-contained-delphi-app/

I am stuck at stylesheets, I did

  doc2 := Web.Document as IHTMLDocument2;
  doc2.createStyleSheet(FileProtocol(AppPath( 'templates\css\' + JQueryUITheme + '\jquery-ui-1.7.1.custom.css')), 0);
  // FileProtocol and AppPath are to return a current application path and converted to FileProtocol URL format.

the Javascripts ran fine, but I unable to get the images to work. I also tried to StringReplace all images references, but no result.

 stylesheet.cssText := StringReplace(stylesheet.cssText,
    'url(images/','url(' + FileProtocol(AppPath('templates/css/' +
    JQueryUITheme + '/images/')), [rfReplaceAll]);

Anyone tried something similar?

Answer 1

Running a quick test, this seems to work.

Are you sure FileProtocol() and AppPath() are working as they should?

these seem to work for me:

function FileProtocol(const s: String): String;
begin
   Result := 'file:///' + StringReplace(s, '\', '/', [rfReplaceAll]); // '
end;

function AppPath(const s: String): String;
begin
   Result := IncludeTrailingPathDelimiter( ExtractFilePath(Forms.Application.ExeName) ) + s;
end;

[Update]

I downloaded JQuery UI from the homepage download link [Current (stable)], and got the animated image from http://jqueryui.com/demos/progressbar/#animated

See demo project on GitHub: http://github.com/jasonpenny/democode/tree/057f0ad22fc5c3272909de346b6e67b0444d8981/JQueryUIProgBar

Answer 2

Does your HTML have a <base href="" /> tag? Since it looks like relative paths are bust.