Several members have asked about RubberViews for Web edition and maybe wondered why it did not come immediately after the desktop version.
The reason for that delay is that Web Edition needs much more work than quickly move the desktop engine to the web platform.
In effect, the Resized event does not suffice to offer the same kind of smooth resize familiar to the desktop version. So I had to find a way to implement Live Resize though JavaScript, in order for controls to change shape as the window did, dynamically, and not only at the end.
There is also a very big difference with Desktop : more than 50% of web viewing today is done by portable devices. Phones and tablets do not have at all the same experience as computers. To start with, phones most of the time are in portrait mode, unlike computers. Simple resize of controls may not always suffice when a device is rotated. They may simply become too narrow. So I implemented Auto Layout throughout for all controls.
Now WebPages can not only resize, but also change layout according to the shape of the viewing device or browser window. Check out the app online at http://rubberviews.com/cgi-bin/rubberviewswe/rubberviewswe.cgi and click on the Auto Layout buttons on top to see what it means.
That version also needed a lot of optimization for the result to be perfect on all current browsers : Android native browser, Chrome, Edge (Spartan), Internet Explorer, FireFox, Opera, Safari. For instance the SearchField shows too wide on some of them. RubberViewsWE transparently compensates.
Michel, it looks good on the desktop, however all of the pages are problematic on my iPhone5. Nothing looks like it got laid out successfully on the phone. I was expecting something different based on how you worded your post. Maybe you have another demo set up for phones? Right now I pretty much have to lay out individual screens for phones, so I think this would be very helpful if it does allow you to reduce the number of screens you have to design.
OK. I worked on the demo, which now gives a better result on iPhone 5.
I did not have to change anything in the RubberViewsWE class itself.
All the modifications are in the Auto Layout constraints of the demo application.
Indeed Auto Layout enables designing pages that shuffle controls around depending on orientation and size. However, it is more complex than simply dropping the class in for AutoResize.
Have a look at the demo project AutoLayout property on the RubberViewsWE1 instances on WebPage2 and WebPageBuddha. Both use dynamic layout.
For complex layouts, such as the main page of the demo which contains all the available controls in the library, it is probably simpler to use two WebPages, as I did.
Could not execute returned javascript: undefined is not an object (evaluating ‘Xojo.controls[‘LZslx0y5’].setSource’)
Source: Xojo.controls[‘LZslx0y5’].setSource("/cgi-bin/rubberviewswe/rubberviewswe.cgi/_files/6652-9805-6113-2002-9462/picture.png");
@Michel: Great job! Will test it today in my projects!
@Jens: Nothing strange here on my iPad.
But I found another little glitch: When you press the WebDialog Button and then rotate your iPad leaving dialog box open, the rearrangement shrinks the webpage (see screenshot).
[quote=191065:@Jens Knaack]Start of the live online demo on an ipad:
Could not execute returned javascript: undefined is not an object (evaluating ‘Xojo.controls[‘LZslx0y5’].setSource’)
Source: Xojo.controls[‘LZslx0y5’].setSource(“/cgi-bin/rubberviewswe/rubberviewswe.cgi/_files/6652-9805-6113-2002-9462/picture.png”);[/quote]
I fixed that late last night. It was due to modifying the picture property in Open. I had to wait until it manifested, as this was random and did not happen every time.
That is not pretty indeed. Controls are no even where they should be.
I think it is related to the Resized event firing in all WebPages that have been opened. I shall implement a workaround to that Xojo bug (or feature, who knows) today.
Click a ToolbarItem, such as Chart…now let’s say you accidentally clicked Charts and really meant to click Dates or Document…
The timer (shouldn’t be using a timer for this) is freezing the application up (which could potential mean bogged CPU if many users are using the application) and the action won’t fire at minimum of 45 seconds…at most…haven’t quite hit that point, the page is still frozen (1 hour later). Even clicking on the page itself or any controls within the page, will not make the menu disappear.
Also Checkboxes, RadioGroups, and Labels clip text. Even though they resize, and you are resizing the fonts, I suggest resizing the height based upon the resized font height to ensure text doesn’t get clipped.
The only fix for this is to eliminate the timer. See ElastiControls to see how to avoid using a timer to manage the user interface. It’s at xojodevspot.com and is limited open source.
Could not execute returned javascript: Cannot read property ‘setSource’ of undefined
Source: Xojo.controls[‘XOwiLaoO’].setSource("/cgi-bin/rubberviewswe/rubberviewswe.cgi/_files/6023-7874-6121-4046-6403/picture.png");
Xojo.comm.ajax.begin();
[quote=192439:@Matthew Combatti]Upon refreshing the page I also get:
Could not execute returned javascript: Cannot read property ‘setSource’ of undefined
Source: Xojo.controls[‘XOwiLaoO’].setSource("/cgi-bin/rubberviewswe/rubberviewswe.cgi/_files/6023-7874-6121-4046-6403/picture.png");
Xojo.comm.ajax.begin();[/quote]
Matthew, your malevolent hijacking is a real disgrace. Please stop that.
No need for snideness or puerility. I was reporting bugs? The last had been reported a few times with no response ("/cgi-bin/rubberviewswe/rubberviewswe.cgi/_files/6023-7874-6121-4046-6403/picture.png"). Try it with a previous version of Xojo and see if that’s not the issue for that one. Sometimes different versions of Xojo break different parts of perfectly great code. You’re doing great work though. Keep it up!
Random JavaScript error happening upon opening, or refreshing of a WebPage. This was due to a call a bit too early to the framework during Open in RubberCanvas. The call has been moved to Shown instead.
Clipping in Label, CheckBox and RadioButtons. I simply made the controls higher and wider to allow more growth for the fonts during resize.
Registered users can download the new version by using the instructions sent upon purchase.
[quote=192437:@Matthew Combatti]Click a ToolbarItem, such as Chart…now let’s say you accidentally clicked Charts and really meant to click Dates or Document…
The timer (shouldn’t be using a timer for this) is freezing the application up (which could potential mean bogged CPU if many users are using the application) and the action won’t fire at minimum of 45 seconds…at most…haven’t quite hit that point, the page is still frozen (1 hour later). Even clicking on the page itself or any controls within the page, will not make the menu disappear.[/quote]
This is not a RubberViewsWE bug at all ; it is a Xojo Web under Windows bug. The reason why I did not understand is that I could not reproduce that on my Mac or on the live site which is Linux. Until it came back to me you are using Windows.
39641 - WebToolBar menu cannot be dismissed unless clicking several times on the page
OS: Windows 8/8.1/10
Xojo: Xojo 2015r2.2
Steps: This bug manifests only on Windows and is not constant.
I am attaching the ToolBar example from the Xojo examples the toolbar comes from :
If you click on Chart it pops up a menu. But dismissing it does not always work. Sometimes clicking on the page makes it go away, sometimes it takes several clicks to obtain the same result.
Clicking on the toolbar does not work either, unless one clicks on a button.
Under Mac and Linux, clicking anywhere on the page, the toolbar of even the button that displayed the menu dismisses it.
I got a workaround for the Xojo bug in WebToolBar menus that cannot be dismissed wen clicking away.
This example for the Chart menu is based on the ToolBar example that comes with Xojo in the Web subfolder.
Add a property to the page which will be used to dismiss the menu. Here I use a simple MenuID string property. For several menus, one property per menu or a dictionary are necessary.
In the ExampleToolBar Open event, set MenuID to the chartMenu.MenuID :
// Create the chart menu
Dim chartMenu As New WebMenuItem
chartMenu.Append(New WebMenuItem("Line"))
chartMenu.Append(New WebMenuItem("Bar"))
chartMenu.Append(New WebMenuItem("Pie"))
chartMenu.Append(New WebMenuItem("-"))
chartMenu.Append(New WebMenuItem("3D Line"))
chartMenu.Append(New WebMenuItem("3D Bar"))
chartMenu.Append(New WebMenuItem("3D Pie"))
menuid = chartMenu.MenuID
In the page MouseDown event, place the following code :
Sub MouseDown(X As Integer, Y As Integer, Details As REALbasic.MouseEvent)
dim exe as string
exe = exe + "var menu = document.getElementById('"+menuid+"'); "
exe = exe + "menu.style.display = 'none' "
self.ExecuteJavaScript(exe)
End Sub
I will use that to work around the bug reported by Matthew in the demo project, which manifests only under Windows.
Have you ever wanted to find out the height of a bloc of text in web ?
Because users can change the fonts and font size in their browser, and because rarely fonts are installed on web hosts, techniques such as Graphics.StringHeight from Desktop simply won’t do. So a new method has been added to RubberViewsWE 1.15 :
getTextHeight(Label as WebLabel)
Now, a bit of explanation is in order. That method is asynchronous. In other words, it does not return immediately a value. The value will be available in an event later in the program, when the browser returns it.
The event ExecuteEvent with the same syntax as describe in extras/Websdk.pdf next to your Xojo executable has been added to RubberViews.
Check Parameters(0) for “textHeight”, and the value will be in string form in Parameters(1)
Alternatively, you can use Rubbermodule.textHeight as integer which is set automatically by RubberViewsWE.
An example is used in the demo project in the Shown event of Label1.
To autogrow vertically a WebTextArea to prevent it from scrolling, here is what you do :
Add a WebLabel off the WebPage (drag it over the top of the webpage)
just bought his Rubberview WE and will it use it in my web-based ticket/issue mangement system.