Is WebPageSource dead?

Targets Web
1

I Try to use WebPageSource in a web app. All of the methods, properties etc seem not to exist. Is this element dead, or premature?

2

I am using WebPageSource mainly to add meta to webpages, but I verified it works fine to use HTML image maps or to display HML portions of a page.

What are the properties and methods of that control you cannot use ?

3

It depends on what you are trying to do. The functionality of the WebPageSource control was somewhat diminished when we moved to a single-page, ajax loaded framework. If you need more functionality, look at the WebSDK docs (in the Extras folder) as there is much more flexibility in adding code to the page.

4

Thanks. Maybe you can help Greg.

My web app is building a webpage with a lot of short posts in a column. A bit like a column with Tweets.
Not every tweet has the same length, but it must render text as HTML, as it can contain images and hyperlinks.

So i’m looking for a way to make these controls :

  • fit the length to their content
  • shift other controls down if one of the controls gets more content (in runtime)

So far, no luck.

5

That’s not a very good fit for WebPageSource. Please read the documentation that comes with the WebSDK and I think you’ll find that it gives you the level of control that you need.

6

Will do that. Thanks.

7

Great resource. Had not noticed that earlyer.

One question: How can I make and embed new HTMLarea’s in runtime?

8

Hi Victor,

Personally I use WebContainers that are dynamically created and loaded using the EmbedWithin. I have one particular container control that is exceptionally useful. All it does is have a property that is an array of other WebContainers, a method to add a new web container, a method to remove a web container, and a method to realign the webcontainers on top of each other with proper spacing.

Overall it works great but using the custom WebSDK would be a great tool for using HTML to auto-align this content as well possibly using a table view.

What would be really neat is if we could use the embedWithin a custom control or specified div tag… Any thoughts on this @Greg O’Lone - possible? feature request? (or how to tag Greg properly since there’s an apostrophe in his last name lol)

9

If you use JQuery, you can use:

$(#TheControlDivToEmbed.self.ControlID).appendTo(#TheControlDivToEmbedWithin.self.ControlID);

and in your custom EmbedWithin method store the DIV-IDs in an array for manipulation/updating.

For single items within a DIV, you can use TheControlDIVByElementID.innerHTML to set the DIV contents.

10

@Matthew Combatti

Would be possible (even with a hack) to embed standard WebContainers (built through Xojo) within a custom web control.

Currently webContainers can only be called on a view:
myWebContainer.EmbedWithin(view, left, top, width, height)

It would be cool if we could get a webcontainer to embed within a specified div. This would make autosizing list and creating more dynamic listviews much easier to do.

11

Not currently. WebContainers require the structure of other WebViews as their parent to function properly.

12

Ah. I’m not in front of my laptop so I couldn’t experiment, but I was thinking something like the following might work inside a WebControlWrapper.

Sub EmbedWithin(Left as Integer, Top as Integer, Width as Integer, Height as Integer)
  
  //Create instance of a new Custom Container
  Dim xCont as new myContainer
  
  //Embed the container in the main page webview to make it available for DOM manipulation within the WebView hierarchy
  xCont.EmbedWithin self.Parent, left, top, Width, Height
  
  //Get the new control's DIV ID so we can move it
  Dim newControlDivName as String = xCont.ControlID
  
  //Show that a WebContainer is nothing more than a DIV inside the main page...///////////////////
  //ExecuteJavaScript "alert(document.getElementById('" + newControlDivName + "').innerHTML);"
  ///////////////////////////////////////////////////////////////////////////////////////////////////////
  
  //Move the WebContainer control DIV inside our Custom Control
  ExecuteJavaScript "document.getElementById('" + self.ControlID + "').appendChild(document.getElementById('" + newControlDivName + "'));"
  
  //Make the DIV/WebContainer visible
  xCont.Visible = true
End Sub

I was thinking the Web framework was more DOM oriented, which would make it more flexible to “hot-fixes” like suggested.

Brock’s suggestion should definitely be a feature request.

13

Keep in mind that if you do this, the WebStyles may not work.

14

Thanks for the tips and replies.

The more JavaScript we have to fit into Xojo with websdk and the forementioned workarounds, the more I question if Xojo is the proper tool for a true web project.

However, when i’m back from my sailing trip (life sucks), ill study the provided answers and see how to tackle the problem.

The core of my problem is that the standard tools provided by Xojo, such as containercontrols, do not support the normal HTML flow in a page. You can nog make a containercontrol with the height relative to its contents. All containers are fixed in their container and do not move if another element changes its size.

Until later…

15

I tried my solution and it works, but as you said the styles don’t “stick.” To get around that, I had to append:

$( “divname” ).addClass( “webstylename” );

VICTOR:
Web Edition is perfect for almost any feat. If it were limited, “work-arounds” would fail. In any language, you will encounter work-arounds to accomplish what you wish.

In your container that you want to auto-fix the height relative to its contents (width also but not inplemented here) you could add a method such as: (let’s pretend that this container contains other containers (could be any control) named “Tweets” all stacked vertically.)

FixHeight function:

Dim maxBottom as Integer = 0

For i as Integer = 0 to ControlCount-1

If Tweets(ControlAtIndex(i)).Top + Tweets(ControlAtIndex(i)).Height > maxButtom Then
maxBottom = Tweets(ControlAtIndex(i)).Top + Tweets(ControlAtIndex(i)).Height
End If

Next

self.Height = maxBottom + 10 '(I added 10 for padding)

All the function does is, loop through every contained control and find the bottom location. The bottom only increases if a proceeding control’s bottom is lower than any other. Once we find the lowest bottom location, we can determine the necessary height needed for the container to be sized relative to its contents. The same can also be done for contents within the container based on its height, using the number of controls available, and dividing the height by the number of controls to fit them evenly within the container bounds.

Using the fibrin above, in your main page that contains the base container, invoke thecontainer.FixHeight () whenever a new element is added to the container or a resize is necessary.

16

That was “implement” by the way. Fast fingers and tiny keyboard failure.

17

fibrin?

18

Fubrin = function another phone keyboard failure. :slight_smile: thanks greg