TTMSFMXWebBrowser parenting issues

FMX TMS FMX UI Pack
1

I've used the TTMSFMXTableViewEx as the main view in an application for Android & iPhone. As for the item detail view, I've used a TFrame. However I needed to put a web browser control on the frame. Unfortunately I discovered that the TFrame can't be the parent/host for the webbrowser. So I tried to use a TForm as the detailview. Oops! The detailview property is looking for a TComponent descendant. So I can't directly host a TForm inside the detailview.


Next I tried to create the form inside of a TFrame, and have the TFrame be the detailview control. That doesn't work either, as the call to create() and parent doesn't complain, but nothing shows up in the frame when I display the item detail view.

If I try to use CreateNew() for the form, I get another access violation. I have several content areas that need to be swapped out based on a button push. But the header and footer sections will remain essentially the same. Since the data is mostly unstructured I though that I could do custom formatting with html/css using a web browser as a content host.

Can you recommend a way to do this?

Thank you.
2

Hi, 


A TFrame or TForm cannot be used as a detailview. Please use the TTMSFMXWebBrowser as a child directly and use the following code:

procedure TForm1.TMSFMXTableViewEx1ItemAfterDetail(Sender: TObject;
  AItem: TTMSFMXTableViewItem);
begin
  TMSFMXWebBrowser1.Navigate('http://www.tmssoftware.com');
end;

procedure TForm1.TMSFMXTableViewEx1ItemBeforeReturnDetail(Sender: TObject;
  AItem: TTMSFMXTableViewItem);
begin
  TMSFMXWebBrowser1.Visible := False;
end;
3

In my experience, a tframe works perfectly as a detail item. It just doesn't work as a host to a web browser control. I built my entire detail item on a frame, have had no problems whatsoever.


I didn't get from your code examples who is hosting the web control... is it using the detail item as a parent? The trackview control itself? The hosting form? Please clarify.

Also, because I have to have a combination of read only and user interaction with a back end server, I don't think the web control would suffice for every task. It would probably be sufficient for the read only tasks.
4
The TTMSFMXWebBrowser inherits from TWebBrowser, are you able to reproduce this issue with TWebBrowser as well?
5

Incidentally the explosion happens on line 918 of FMX.TMSWebBrowser.Win.pas, 


procedure TTMSFMXWinWebBrowser.Initialize;
begin
  {$IFDEF DELPHIXE9_LVL}
    {$IF DEFINED(USECHROMIUM) or DEFINED(USEFMXWEBBROWSER)}
      FWebBrowser.Parent := FWebControl;  explodes here

Haven't tried with straight IE, as this is an FMX project for Android and iPhone.

Really need a better understanding of the parent part; is there a display control that can act as
6

parent to your web control and be displayed as part of the detail item view?

7

Only for Windows the TWebBrowser is used, for iOS and Android, a native window is displayed on top of all other FireMonkey controls, therefore you cannot use the TTMSFMXWebBrowser on a frame. You can try to re-parent the TTMSFMXWebBrowser to the detailview, but you will still need to manually toggle the visibility.

8

Thanks, with this I'm making progress.


I'm floating the web browser control over the content area on the tframe. I'm creating html in code and displaying it in the web control. I need to do some fine-grained styling on the html, but so far it seems that only html 1 style tags work. This means that I can only take the font size, for example, down to 1.

Should I be able to style the content using css? I tried using css inside of a style tag placed before the body, but that didn't seem to work.

Thanks.
9

Hi, 


Yes you should be able to style the content using CSS, can you specify the HTML/CSS you are using?

10
<style>
th, td {border: 1px solid black; font-size:small}
table {font-size:small}
</style>
11

Hi, 


We have tested this here and the code works as expected:

<!DOCTYPE html>
<html>
<head>
<style>
th, td {border: 1px solid black; font-size:small}
table {font-size:small}
</style>
</head>
<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>
</body>
</html>

Saved to a new file and loaded with LoadFile call.

12

Thanks I think I'm getting it.

13

If you can envision a content area in the center of a rectangular frame with the long access oriented vertically, a display rectangle at the top and a button array on a rectangle on the bottom, with a gap in between that will be used for the content area, that is what I'm attempting to float the web browser over, and contain the web browser dimensions completely within the unused space in the center of the frame. All within/as the item detail view.


I've experienced some challenges that I'm hoping you can assist with. 

First, in floating the browser over the unused center section of the frame, trying to match the positioning coordinates and size is difficult. How can I match the size and position of the web browser parented by the detailview itself to the center content area on the frame, and have it do this on both the phone and on windows so that it is wysiwyg? I'm sure the browsers work with different set of rules.

Secondly, I worked out some nice styled html, looks great on win32. But it is way too small on android. If I double tap the browser on android, I can expand or shrink the content. I can also swipe left and have the content disappear altogether.  I want the size of the browser's content area to be the size of the center content area of the frame. And I want the magnification of the content itself to fit within the content area itself, without the need to swipe left and right to see all of the content.

Third, I was trying to use a style section inside of a head section inside of the html doc. I didn't specifiy a doctype node, but the rest was fully(properly) formed html. Yet css class identifiers didn't work. Only specifying a style attribute on the nodes themselves seem to allow the styles to be applied.

Thanks for any answers/assistance.
14

Hi, 


You can add a dummy panel as an invisible control to the unused center section of the frame, which can then be used as a reference for positioning your webbrowser.

To further finetune the settings for Android you can use the following code:
It includes settings for the content view of the browser.

uses
  AndroidApi.JNI.Embarcadero;

procedure TForm135.FormCreate(Sender: TObject);
begin
  TJWebBrowser.Wrap(TMSFMXWebBrowser1.NativeBrowser).getSettings.setLoadWithOverViewMode(False);
end;

It's unclear why the HTML doesn't display, it could be an Android specific issue, please note that the webbrowser uses an emulated version and not a fully functional webbrowser. You could try to apply a registry patch in order to use a newer IE version, if the issue was related to Windows.

http://stackoverflow.com/questions/25843845/how-to-have-delphi-twebbrowser-component-running-in-ie9-mode
15

Thanks for your help with this. Let me provide an update:


I have the HTML display working. I had tried to put a panel in the center content area before, but was trying to use the panel as the parent for the browser, this of course doesn't work.

When I put the panel back in at your suggestion, with the item as the parent to the browser, it sort of worked, but not completely. Turns out that the problem lied in the fact that I was using the OnResize event of the TableViewEx to resize the browser. This caused issues that were only resolved with explicit sizing of the browser outside of the onresize event.

I implemented your above suggestion (setLoadWithOverviewMode), but the browser still has a client area large enough horizontally that I can swipe left and my content completely disappears. 

So I still need to figure out how to have the content determine the size of the client area, or if push comes to shove and there seems to be no better way to do it, somehow measure the content size and explicitly set the content area size of the browser session.

Thanks again.
16

What you can try to fit the content is to use the following code:


procedure TForm1.FormCreate(Sender: TObject);
begin
  TJWebBrowser.Wrap(TMSFMXWebBrowser1.NativeBrowser).getSettings.setLoadWithOverViewMode(True);
TJWebBrowser.Wrap(TMSFMXWebBrowser1.NativeBrowser).getSettings.setUseWideViewPort(True);
end;

If the above code does not fit the content inside the webbrowser then you will need to add additional meta-tags to your HTML:

17

Using both of these:



procedure TForm1.FormCreate(Sender: TObject);
begin
  TJWebBrowser.Wrap(TMSFMXWebBrowser1.NativeBrowser).getSettings.setLoadWithOverViewMode(True);
TJWebBrowser.Wrap(TMSFMXWebBrowser1.NativeBrowser).getSettings.setUseWideViewPort(True);
end;

Solved the problem. Thanks!
18

Oh, I almost forgot, needed to set the parameters to false, not true.

19

Hi, 


Thank you for your feedback on this matter.