FoxInCloud
resizing windows
Gravatar is a globally recognized avatar based on your email address. resizing windows
  Vincent H.
  All
  Aug 11, 2022 @ 12:14am

Hello Thierry,

I worked on the issue of resizing windows, modal or not, to enlarge them or even display them in full screen. Unless I'm wrong, wBSwidth no longer has any effect beyond 2.

Fortunately, since Bootstrap 4, there is a fullscreen class that works perfectly.

As a reminder, we can also rely on the relative units vw and vh (width and height of the current screen).

So I added two properties to my screen class, wlFullScreen and wZoom and put this code in wcHTMLgen():

IF VARTYPE (toHTMLgen) = "O"
   * WindowState = 2 unusable?
   WITH THIS
      DO CASE
         CASE .wlFullScreen .AND. .ShowWindow < 2
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");]))
         CASE .wlFullScreen
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#<<.wcID>>_body > div').addClass("modal-fullscreen");]))
         CASE .wZoom > 0
            * After FullScreen
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#modal-<<.wcID>> > div').css("max-width", "<<.wZoom>>%");]))
      ENDCASE
   ENDWITH
ENDIF

Finally, little effort for a very satisfactory result.

Another demonstration of all the power and all the clairvoyance of FiC ...

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Aug 15, 2022 @ 09:11am

Hi Vincent,

thanks for sharing this great work

maybe sharing a screenshot of the same form with and without full screen could help understand the benefit

what about adding support for xxxFrm.wBSsize='FS' in FoxinCloud?

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Aug 15, 2022 @ 10:13am

That would be a very good thing!

Do you think a zoom factor is of interest? It could also be included in this variable.

Otherwise, what would be really nice is to graphically reproduce the MaxButton in the title bar of the windows for a fullscreen on demand ...

I will publish as you suggest one or two examples of rendering of the screens thus zoomed.

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Aug 16, 2022 @ 12:23am

Here are as promised some examples of screens after and before a full screen display.

It is all the more well managed by Bootstrap as my screen is a very wide 16/9!

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Aug 16, 2022 @ 09:27am

Do you think a zoom factor is of interest?

Well, your implementation is more a width relative to the parent (form or viewport) than a zoom factor relative to the form itself.

Besides I prefer use Bootstrap classes than relying on CSS alteration that a future version may break.

Bootstrap offers classes setting relative width or height. That could be a way to go, albeit it only offers a limited set of dimensions (25%, 50%, 75%, 100%).

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Aug 16, 2022 @ 10:30am

We stick to fullscreen then.

Do you plan to integrate it in an upcoming beta ?

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Aug 17, 2022 @ 06:55am

Do you plan to integrate it in an upcoming beta?

Sure

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Gilles Lajot-Sarthou
  FoxInCloud Support - Thierry N.
  Aug 29, 2022 @ 11:30pm

Hi Thierry and Vincent,

Merci beaucoup..

Amicalement Gilles

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Aug 30, 2022 @ 12:20am

Thanks Thierry.

How do you do it, because I don't see a modal-fullscreen class ?

Also, what about a square next to the cross in the title bar of the window ?

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Aug 30, 2022 @ 03:02am

Hi Vincent

How do you do it, because I don't see a modal-fullscreen class ?

.wBSwidth changed dynamically:


define class ficFrm
…
procedure Load
…
this.AddProperty('wBSwidth_', this.wBSwidth)
wcPropSaveNotEdit(this, 'wBSwidth_')
…
procedure Init
if !m.this.wlInitFirst
  this.wBSwidth = Iif(this.wnShift > 0, 'fs', this.wBSwidth_)
endif

Also, what about a square next to the cross in the title bar of the window ?

Not sure what you mean.

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  Vincent H.
  Aug 30, 2022 @ 05:24am

Not sure what you mean

Add this to modal screen, like controlBox

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Aug 30, 2022 @ 07:15am

Never saw that in Bootstrap…

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Aug 30, 2022 @ 07:21am

Yes, I know, yet it's probably the most appropriate place, isn't it ?

Bootstrap may copy you 😉

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Aug 31, 2022 @ 03:01am

Something like this:

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  Vincent H.
  Sep 5, 2022 @ 12:34am

Thierry,

I continued in the direction of my last messages, to allow on request a zoom of the screens (which is done for a video)

Not knowing where you are with fullscreen integration, I share the wcHTMLgen() code of my screens class:

What do you think ?

IF VARTYPE (toHTMLgen) = "O"
   WITH THIS
      DO CASE
         CASE .wlFullScreen .AND. .ShowWindow < 2
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");]))
         CASE .wlFullScreen
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#<<.wcID>>_body > div').addClass("modal-fullscreen");]))
         CASE .wZoom > 0
            * After FullScreen
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#modal-<<.wcID>> > div').css("max-width", "<<.wZoom>>%");]))
         CASE .Width > 480
            * Agrandissement à la demande - MaxButton semble inutilisable
            TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
               jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px"></span>');
               jQuery('#<<.wcID>>_fs').on('click', function(event){
               event = jQuery.event.fix(event);
               var srce = event.target, srceTag = srce.tagName.toLowerCase(), eventType = event.type;
               if (srceTag === 'option'
               || true
               && srceTag === 'select'
               && ['mouseenter','mouseover', 'mousemove', 'mouseleave','mouseout'].indexOf(eventType) > -1
               && event.relatedTarget
               && (event.relatedTarget === srce || event.relatedTarget.tagName.toLowerCase() === 'option')
               ) {event.stopPropagation(); event.preventDefault(); return;}
               if (false
               || event.eventPhase === 2
               || eventType === 'dragstart'
               || eventType.indexOf('key')===0
               || srceTag === 'select'
               || (eventType === 'click' || eventType.indexOf('mouse')===0) && ['label', 'span', 'a', 'i', 'b', 'strong', 'img', 'div'].indexOf(srceTag) > -1
               ) {
               event.stopPropagation();
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }
               }
               });
            ENDTEXT
            toHTMLgen.cScriptJSadd (m.cScript)
      ENDCASE
   ENDWITH
ENDIF
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  Vincent H.
  Sep 5, 2022 @ 12:42am

More precise (if the window title has already been overridden):

...
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 5, 2022 @ 06:34am

Something like this (fullscreen toggle icon)…

I hate to say no, however in this case I could not even figure out how the cross in aligned right in the title bar… Adding another button would be too painful compared to the potential usage.

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 5, 2022 @ 06:57am

Hi Vincent,

The problem is which markup you use for your added button to make it sit to the left of the standard close button (cross).

I would rather use a class and define the CSS markup in xxx.css:

jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize tb-fs"></span>');
span.tb-fs {
 float: right;
 margin-top: 5px;
}

This block of code is useless in this case, you can remove it:

event = jQuery.event.fix(event);
               var srce = event.target, srceTag = srce.tagName.toLowerCase(), eventType = event.type;
               if (srceTag === 'option'
               || true
               && srceTag === 'select'
               && ['mouseenter','mouseover', 'mousemove', 'mouseleave','mouseout'].indexOf(eventType) > -1
               && event.relatedTarget
               && (event.relatedTarget === srce || event.relatedTarget.tagName.toLowerCase() === 'option')
               ) {event.stopPropagation(); event.preventDefault(); return;}
               if (false
               || event.eventPhase === 2
               || eventType === 'dragstart'
               || eventType.indexOf('key')===0
               || srceTag === 'select'
               || (eventType === 'click' || eventType.indexOf('mouse')===0) && ['label', 'span', 'a', 'i', 'b', 'strong', 'img', 'div'].indexOf(srceTag) > -1
               ) {
               event.stopPropagation();
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 5, 2022 @ 07:10am

Thank you Thierry,

I had completely forgotten that in my applications, the cross to close windows was always disabled ... 😦

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 5, 2022 @ 07:41am

But it works (I also removed the useless code block) !

I still have a problem filling the background color of the title (not obvious)

xxx.css

.modal-header .modal-title {
  background: #6E777E;
  margin: -1rem;
  padding: 1rem;
  color: #FFF;
  width: 110%;
}

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 5, 2022 @ 07:53am

It remains to process the grids, of which only the last column is automatically widened in fullscreen mode.

No pie ...

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 5, 2022 @ 08:14am

I still have a problem filling the background color of the title (not obvious)

Try moving the background directive up to the parent container…

// xxx.css

.modal-header {
  background: #6E777E;
}
.modal-header .modal-title {
/*background: #6E777E;*/
  margin: -1rem;
  padding: 1rem;
  color: #FFF;
  width: 110%;
}
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 5, 2022 @ 08:35am

Try moving the background directive up to the parent container…

Perfect, thanks.

I also modified:

  width: 110%;
to
  width: 100vw;

But, il you have the X to close, this value must be reduced

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 5, 2022 @ 08:54am

grids : only the last column is automatically widened in fullscreen mode

Very difficult to understand how ActiveWidget's .setColumnWidth(<width in px>, <column index>) method works; it creates some CSS directive like #aw36 .aw-column-1 {width: 112px;} but we don't know how to override it using regular CSS file.

Only re-executing .setColumnWidth(<width in px>, <column index>) when toggling to/from fullscreen should work reliably.

The problem is to know which px values you want to set.

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 5, 2022 @ 09:08am

Yes, I already spent quite a bit of time there when I recolored the grids ...

Resizing the columns should be possible, but in which method to catch the event, because I'm not sure that Resize() reacts ?

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 6, 2022 @ 03:30am

jQuery('#<<thisform.wcID>>_fs').click() / jQuery('.bootstrap .modal .tb-fs').click() is the only event you need.

You can implement several handlers on any event; handlers execute in the same order they were defined; return false in any event handler stops propagation to the subsequent handlers.

You can try this code:

procedure grd.wcHTMLgen && executes before xxxfrm.wcHTMLgen()
…
TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
jQuery('#<<thisForm.wcID>>_fs').click(function(event){
  var oGrid = jQuery('#<<this.wcID>>').prop('oGrid')
  , fs = jQuery('#modal-<<thisForm.wcID>> > div').hasClass("modal-fullscreen"); // script generated by xxxfrm.wcHTMLgen() has executed before.
  oGrid.setColumnWidth(fs ? 999:99, 0); // adjust column width in px // ?: is equivalent to iif()
  oGrid.setColumnWidth(fs ? 999:99, 1); // adjust column width in px
  …
  oGrid.setColumnWidth(fs ? 999:99, n); // adjust column width in px
};
ENDTEXT
toHTMLgen.cScriptJSadd (m.cScript, .F.) && .F. appends script (add AFTER the rest)
…

procedure xxxfrm.wcHTMLgen
…
TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
   jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px"></span>');
   jQuery('#<<.wcID>>_fs').click(function(event){
   if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
      jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
      jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-restore").addClass("fa-window-maximize");
   } else {
      jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
      jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-maximize").addClass("fa-window-restore");
   }
   });
ENDTEXT
toHTMLgen.cScriptJSadd (m.cScript, .T.) && .T. prepends script (add BEFORE the rest) so that it executes first
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 7, 2022 @ 04:03am

It's very interesting, thank you.

But the implementation is a big project, insofar as it would be necessary to do a selective resizing, distinguishing the small columns (not to be enlarged) and the larger ones...

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 8, 2022 @ 02:51am

Yes, you'd need to:

  1. identify the resizable columns, ie use a custom grid column class (define class xxxGrc as awGrc and xxxGrd.memberClass = 'xxxGrc') with a custom property
  2. store the jQuery('.Window_???_scx').width() with and without fullscreen
  3. calculate column expansion based on window width variation
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 11, 2022 @ 12:11am

You can implement several handlers on any event ...

Thierry,

This opens up possibilities that I have difficulties to exploit. Two basic questions:

  1. How to know the size of the current window, from VFP?
  2. In jQuery, can we execute a form method ? For example, from the click on the "button" to enlarge the window, how to execute the code contained in Resize()?

Thanks in advance for your lights

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 12, 2022 @ 06:50am

You can implement this code :

procedure xxxfrm.wcHTMLgen
…
TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
   jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px"></span>');
   jQuery('#<<.wcID>>_fs').click(function(event){
    if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
      jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
      jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-restore").addClass("fa-window-maximize");
    } else {
      jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
      jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-maximize").addClass("fa-window-restore");
    }
   FoxInCloud.MethExec.bind(FoxInCloud)(
    event /* {en} event or event source object {fr} événement ou son objet source */
  , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
  , 'Resize' /* {en} method {fr} méthode */
  , jQuery('.Window_<<.wcID>>').width() /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
   );
   });
ENDTEXT
toHTMLgen.cScriptJSadd (m.cScript)
…

procedure xxxfrm.Resize
lparameters nBSformWidthPx && width of Bootstrap Modal
…
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 12, 2022 @ 08:21am

I get that:

- awajax.lSuccess(.f.): Erreur détectée à la ligne n° 14,451 de la méthode 'awajax.useraction'
"FoxInCloud n'a pas pu traiter cette requête :
Awajax.useraction() - Erreur dans l'exécution de la méthode 'nomclients_scx.Resize(m.this.uValue)' : L'événement .Resize() attend un objet dimensions au lieu de 2560
nomclients_scx.wUserAction_Post("nomclients_scx.Resize()", .F.) a retourné .F., l'action utilisateur est ignorée.
Paramètres reçus :
-	Valeur : 2560
-	Objet : Formulaire
  &#62; Événement : aucun
  &#62; Méthode : Resize
  &#62; Propriété : aucun"
Call stack: 01&#160;snotest (23) &#62; 02&#160;awserverstart (142) &#62; 03&#160;awstart (105) &#62; 04&#160;snotestserver.tmrfiletimer.timer (39) &#62; 05&#160;snotestserver.processhit (561) &#62; 06&#160;snotestserver.process (960) &#62; 07&#160;snotestserver.routerequest (979) &#62; 08&#160;snoprocess.process (2855) &#62; 09&#160;wwprocess.process (272) &#62; 10&#160;snoprocess.methexec (4845) &#62; 11&#160;snoprocess.ajaxformrequest (4856) &#62; 12&#160;awajax.formrequest (9623) &#62; 13&#160;awajax.useraction (14452)

Process ID: 17036
Client: 127.0.0.1
userID: 6F20W4X65_1
URL: http://localhost/snoTest/MethExec.sno?&#38;MethAddr=Resize&#38;ObjAddr=nomclients_scx&#38;UserID=6F20W4X65&#38;PageInit=&#38;nReq=3&#38;ValueType=number&#38;Value=2560
Form variables:  nKeyCode=, nButton=1, nShiftAltCtrl=0, nXcoord=1798, nYcoord=-15, nRow=64, nCol=1814, ValueType=number, Value=2560, lastKey=0, version=3.0.1-beta.3, sync=false, vpw=2560, vph=927, userID=6F20W4X65, reqID=1703_6FD10Y915-001, nInet=0.000, nCli=0.010, tabID=1
FAS version: 3.0.1-beta.3 of 2022&#8209;06&#8209;29 02:00:00 PM GMT (il y a 3 mois)
Table New: '...\Temp\6F20W4X65_1\_6f20w4x65_1_nomclients_scx_New.DBF' can't be found

Will activating the Resize() method of the screen invoke the Resize() of other controls ?

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 12, 2022 @ 10:13am
   FoxInCloud.MethExec.bind(FoxInCloud)(
    event /* {en} event or event source object {fr} événement ou son objet source */
  , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
  , 'Resize' /* {en} method {fr} méthode */
  , {width: jQuery('.Window_<<.wcID>>').width(), height: null} /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
   );
   });
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  Vincent H.
  Sep 12, 2022 @ 11:46am

Thank you Thierry

It works correctly. But Grid.Resize() doesn't seem to be called

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 12, 2022 @ 11:41pm

Will activating the Resize() method of the screen invoke the Resize() of other controls ?

Yes, I missed this point, sorry.

Conversely to .Refresh() (which cascades down), .Resize() is an event, and as such fires only when any of the object’s dimension changes.

You can force grid.resize() to fire upon form.resize() by using grid.anchor.

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 13, 2022 @ 12:20am

You can force grid.resize() to fire upon form.resize() by using grid.anchor

Great !

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 13, 2022 @ 12:33am

I don't quite understand the operation of wViewPortWidth which I would like to use to dynamically adjust the size of the grids

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 13, 2022 @ 03:25am

.wViewPortWidth is the size of the browser view port (inside of the window tab), regardless of the size of the form it contains.

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 14, 2022 @ 12:08am

procedure xxxfrm.Resize
lparameters nBSformWidthPx && width of Bootstrap Modal

Thanks for the different answers. I thought it would be easier to retrieve the size of the enlarged window.

I implemented my screen class well with your code in Resize(), but nBSformWidthPx always returns me an empty value.

  1. Why is the variable not initialized ?
  2. Could we not, more simply, apply to the columns of the grid a width expressed in 99vw whose value can be easily calculated at launch ?
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 14, 2022 @ 03:17am

my bad… FoxInCloud stores the client form width in form.width; same for any class by the way.

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 14, 2022 @ 03:19am

Could we not, more simply, apply to the columns of the grid a width expressed in 99vw whose value can be easily calculated at launch?

fullscreen BS modal form width depends on the client browser window size…

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 14, 2022 @ 04:10am

Yes, but vw also no ?

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 14, 2022 @ 04:14am

Yes, but how to recover the real size of the screen then ?

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 14, 2022 @ 04:54am

Answered too quickly ...

In another method, e.g. Moved(), the code works and I recover the real size of the screen.

I tried adding Resize in Form.Moved(), but it doesn't trigger Grid.Resize

An idea ?

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 14, 2022 @ 05:27am

Yes, but vw also no ?

No idea what you think about; please provide details

Yes, but how to recover the real size of the screen then?

Depends on what you call 'screen'…:

  • Browser view port: thisForm.wViewPortWidth
  • BS modal form width (with this code on the client), for both normal and fullscreen: thisForm.width

Notes:

  • FoxInCloud implements the .Resize event in 'classic' mode only (using a standard jQueryUI modal form event .resizeStop(), see the classic FoxinCloud Live Tutorial).
  • As Bootstrap does not implement any kind of form resize event (not intended so), the solution I provided forces the .resize() event to execute using FoxInCloud.MethExec().
    As we provide the same parameter as if the event executed, form.width has the right value.
  • If you also want the VFP grid to resize in proportion (and fire the grid.resize() event), you just need to implement .anchor in the container hierarchy from the form down to the grid.
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 14, 2022 @ 05:53am

Yes, but vw also no ?

I was talking about CSS relative units vh (not me 😉) and vw

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 14, 2022 @ 07:06am

BS modal form width (with this code on the client), for both normal and fullscreen: thisForm.width

I always get 615, even after fullscreen

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 14, 2022 @ 07:55am

Synthesis test:

  1. Grid. Anchor = 15
  2. Grid.Resize()
IF (Type('m.thisForm.wlHTMLgen') == 'L' AND m.thisForm.wlHTMLgen)
   RETURN .T.
ENDIF
DO AjusteGrid IN \VHDev\Program\Resizecr WITH THISFORM, THIS
  1. Form.wcHTMLgen()
...
            TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
               jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px;color: darkgray" title="Agandir/Réduire"></span>');
               jQuery('#<<.wcID>>_fs').on('click', function(event){
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }
					FoxInCloud.MethExec.bind(FoxInCloud)(
				      event /* {en} event or event source object {fr} événement ou son objet source */
					   , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
					   , 'Moved' /* {en} method {fr} méthode */
					   , jQuery('#modal-<<.wcID>> > div').width() /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
					   );
               });
            ENDTEXT
            toHTMLgen.cScriptJSadd (m.cScript, .T.) && .T. prepends script (add BEFORE the rest) so that it executes first
...
  1. Form.Moved()
LPARAMETERS nBSformWidthPx   && width of Bootstrap Modal
IF (Type('m.thisForm.wlHTMLgen') == 'L' AND m.thisForm.wlHTMLgen)
   RETURN .T.
ENDIF
WITH THISFORM
   .wZoom = nBSformWidthPx   && for me in AjusteGrid()
   IF VARTYPE (.Grid) = Cobjet   && Weakness of the method :-(
      .Grid.Resize
   ENDIF
ENDWITH

It works correctly (with a small delay effect as always with grids), but I have to trigger the resizing of the grid, in Moved(), by its name, which is of course not satisfactory

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 14, 2022 @ 09:51am

I always get 615, even after fullscreen

Your event handlers probably do not execute in the right order; please review the handler implementation earlier in this thread.

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 14, 2022 @ 10:59pm

Not so sure ...

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 15, 2022 @ 12:29am

Expand on demand now works correctly ...

Except in production or when I dynamically change the title of the window where the added code (in the title bar) is erased

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  Vincent H.
  Sep 15, 2022 @ 04:23am

Code in Activate(), not in wcHTMLgen(), and it works

But in production, refresh problem with cSupportLinkHTML_JS()

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 17, 2022 @ 01:56am

Thierry,

I put the resizing code back in wcHTMLgen() and declared SupportLinkInFormCaption = Off

Form.width is indeed updated during Resize(), but after resizing the grid. Logical but not usable in my case.

Help please, thank you !

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 17, 2022 @ 03:20am

Hi Vincent,

I need details to help, same as usual:

  • Screenshot, or better screencast of what you get,
  • JS code involved in the process: what .wcHTMLgen() generates and what you get in screen_scx.js

TIA,

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 17, 2022 @ 05:29am

Alright, let me take it in order:

  1. wcHTMLgen() in my screen class:
IF VARTYPE (toHTMLgen) = Cobjet
   WITH THISFORM
      LOCAL cScript
      DO CASE
         CASE .wlFullScreen .AND. .ShowWindow < 2
            TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
               jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-restore" style="float: right;margin-top: 5px;color: darkgray" title="Agandir/Réduire"></span>');
               jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
               jQuery('#<<.wcID>>_fs').on('click', function(event){
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }
               FoxInCloud.MethExec.bind(FoxInCloud)(
                  event /* {en} event or event source object {fr} événement ou son objet source */
                  , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
                  , 'Resize' /* {en} method {fr} méthode */
				  , {width: jQuery('.Window_<<.wcID>> > div').width(), height: null} /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
                  );
               });
            ENDTEXT
         CASE .wlFullScreen
            cScript = TEXTMERGE ([jQuery('#<<.wcID>>_body > div').addClass("modal-fullscreen");])
         CASE .Width > 480 .AND. .TitleBar = 1
            * Agrandissement à la demande - MaxButton semble inutilisable
            TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
               jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px;color: darkgray" title="Agandir/Réduire"></span>');
               jQuery('#<<.wcID>>_fs').on('click', function(event){
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }
               FoxInCloud.MethExec.bind(FoxInCloud)(
                  event /* {en} event or event source object {fr} événement ou son objet source */
                  , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
                  , 'Resize' /* {en} method {fr} méthode */
				  , {width: jQuery('.Window_<<.wcID>> > div').width(), height: null} /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
                  );
               });
            ENDTEXT
      ENDCASE
      IF .NOT. EMPTY (m.cScript)
         toHTMLgen.cScriptJSadd (m.cScript)
      ENDIF
   ENDWITH
ENDIF```
2. Grid. Anchor = 15
3. Grid.Resize() resizes columns by applying form.width / 615 ratio

When I maximize my screen, Resize() cascades but when grid.resize() form.width is not yet implemented

I would need to be able to retrieve the screen size before the grid is resized
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 17, 2022 @ 05:56am

I understand now, thanks for the details

Looks like a VFP behavior… FoxinCloud just executes this code: m.loCntl.Width = m.luValue.Width, VFP handles the cascade and decides when form.width is actually updated.

By implementing .wUserAction_Ante(), you can catch m.luValue.Width and store it into some custom form.property:

procedure xxxFrm.load
…
this.addProperty('WidthInet', .null.)
wcPropSaveNotEdit(this, 'WidthInet')
…
procedure xxxFrm.wUserAction_Ante
lparameters tcAppHandler, tlPropAssign, luValue
…
this.WidthInet = iif(if vartype(m.luValue) == 'O' and type('m.luValue.width') == 'N' and m.luValue.width > 0;
  , m.luValue.width;
  , .null.;
  )
endif
…
procedure xxxGrd.Resize
…
formWidth = nvl(thisForm.WidthInet, thisForm.Width)
…
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 17, 2022 @ 07:59am

Simply outstanding, thank you !

I still have a problem, related to refreshing the window title, either from my code, or because of cSupportLinkHTML_JS()

What I add in Form.wcHTMLgen() is deleted

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 18, 2022 @ 12:41am

I made it !

Take the added expression out of the "h5" tag and insert a "z-index", like this:

...
jQuery('#modal-<<.wcID>> .modal-header:first').append('<span id="<<.wcID>>_fs" class="fa fa-window-restore" style="float: right;color: darkgray;z-index: 5;" title="Agandir/Réduire"></span>');
...
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 19, 2022 @ 12:51am

A clarification and a question:

  1. The Anchor property of the grids must be activated, but also the enclosing ones like PageFrame or Container
  2. After resizing the window, width and ViewPortWidth are updated. Where to find its original size ?
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 19, 2022 @ 09:02am

Congratulations!

You could use the markup of the standard close cross: <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" aria-hidden="true"></button>

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  FoxInCloud Support - Thierry N.
  Vincent H.
  Sep 19, 2022 @ 09:12am

The Anchor property of the grids must be activated, but also the enclosing ones like PageFrame or Container

Yes, like indicated in my earlier post

After resizing the window, width and ViewPortWidth are updated. Where to find its original size ?

VFP does not keep these previous values; you can store them in thisForm.wUserAction_Ante()

Procedure xxxFrm.load
…
this.addProperty('Width_', .null.)
this.addProperty('ViewPortWidth_', .null.)
wcPropSaveNotEdit(this, 'Width_, ViewPortWidth_')
…

Procedure xxxFrm.wUserAction_Ante
lparameters tcAppHandler, tlPropAssign, luValue
…
local lWidth
lWidth = vartype(m.luValue) == 'O' and type('m.luValue.width') == 'N' and m.luValue.width > 0
this.WidthInet = iif(m.lWidth, m.luValue.width, .null.)
this.Width_ = iif(m.lWidth, this.width, .null.)
this.ViewPortWidth_ = iif(m.lWidth, this.ViewPortWidth, .null.)
…
Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 19, 2022 @ 09:53am

Thanks Thierry, I complete my code 😃

Gravatar is a globally recognized avatar based on your email address. re: resizing windows
  Vincent H.
  FoxInCloud Support - Thierry N.
  Sep 19, 2022 @ 11:56pm

I store the screen size directly in Width_ like this: THIS.AddProperty ('Width_', THIS.Width)

© 1996-2022