В UniGUI есть ClientAlignment и ServerAlignment. Эти свойства есть почти у каждого компонента в объектном инспекторе. Первый вариант – это работа на уровне браузера на js, второй вариант это работа на уровне сервера на Delphi.
Для простоты будем рассматривать второй вариант. Почти весь код будет на Delphi – это проще и понятнее для Delphi программиста, но в будущем надо будет освоить ExtJS и перейти на ClientAlignment, так как этот подход более профессиональный и менее затратный по ресурсам.
Чтобы дать возможность нашему сайту быть адаптивным и хоть как-то реагировать на изменение размеров браузера, нам надо сделать следующую вещь. У главной формы настроить отсылку сообщений при загрузке / изменении размеров браузера на сервер UniGUI.
А на сервере уже непосредственно – делать обработку этих сообщений.
Main – > ClientsEvents -> ExtEvents -> Ext.form.Panel[form] – последнее выбрать из выпадающего списка.
1 afterrender
|
1 2 3 4 5 6 |
function form.afterrender(sender, eOpts) { var width=Ext.getBody().getViewSize().width; var height=Ext.getBody().getViewSize().height; ajaxRequest(sender, 'formAfterRender', [ 'width='+width,'height='+height]); } |
2 resize
|
1 2 3 4 5 6 7 |
function form.resize(sender, width, height, oldWidth, oldHeight, eOpts) { //var browserWidth=Ext.getBody().getViewSize().width; //var browserHeight=Ext.getBody().getViewSize().height; //ajaxRequest(sender, 'formResize', [ 'width='+browserWidth,'height='+browserHeight]); ajaxRequest(sender, 'formResize', [ 'width='+width,'height='+height,'oldWidth='+oldWidth,'oldHeight='+oldHeight]); } |
3 – обработка сообщений на сервере (пример из проекта)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); function getWidthOrHeightValue(aParamValue: string): integer; begin result := -1; if aParamValue = 'undefined' then result := -1 else result := aParamValue.ToInteger(); end; var browserWidth: string; begin //formResize if SameText(EventName, 'formResize') then begin if Params.Values['height'] <> '' then begin pTop.Top := 0; pTop.Left := 0; pTop.Width := Params.Values['width'].ToInteger(); //ajaxRequest(sender, 'formResize', [ 'width='+width,'height='+height,'oldWidth='+oldWidth,'oldHeight='+oldHeight]); pTop.Caption := 'new WxH:' + Params.Values['width'] + 'x' + Params.Values['height'] + ';'// + 'old WxH:' + Params.Values['oldWidth'] + 'x' + Params.Values['oldHeight']; // ScrollBox.Left := 0; ScrollBox.Top := pTop.Height; ScrollBox.Width := Params.Values['width'].ToInteger(); ScrollBox.Height := Params.Values['height'].ToInteger() - 20; // browser height //TopMenu FCurrPage.TopMenu.OnAfterRender( // getWidthOrHeightValue(Params.Values['width']), // getWidthOrHeightValue(Params.Values['height']) // ); // CurrentPage FCurrPage.Top := 0; FCurrPage.Left := 0; FCurrPage.Width := Params.Values['width'].ToInteger() - 20; // FCurrPage.OnBrowserResize( // getWidthOrHeightValue(Params.Values['width']), // getWidthOrHeightValue(Params.Values['height']), // getWidthOrHeightValue(Params.Values['oldWidth']), // getWidthOrHeightValue(Params.Values['oldHeight']) // ); // FPagesDM.OnBrowserResize( // getWidthOrHeightValue(Params.Values['width']), // getWidthOrHeightValue(Params.Values['height']), // getWidthOrHeightValue(Params.Values['oldWidth']), // getWidthOrHeightValue(Params.Values['oldHeight']) // ); end; end; if SameText(EventName, 'formAfterRender') then begin ScrollBox.Left := 0; ScrollBox.Top := pTop.Height; ScrollBox.Width := Params.Values['width'].ToInteger(); ScrollBox.Height := Params.Values['height'].ToInteger() - 20; // browser height // browserWidth := Params.Values['width']; // FCurrPage.TopMenu.OnAfterRender( // getWidthOrHeightValue(Params.Values['width']), // getWidthOrHeightValue(Params.Values['height']) // ); // FCurrPage.Top := 0; FCurrPage.Left := 0; FCurrPage.Width := Params.Values['width'].ToInteger() - 20; FCurrPage.OnAfterRender( // getWidthOrHeightValue(Params.Values['width']), // getWidthOrHeightValue(Params.Values['height']) // ); // FPagesDM.OnAfterRender( // getWidthOrHeightValue(Params.Values['width']), // getWidthOrHeightValue(Params.Values['height']) // ); end; end; |
Смысл в том, что мы каким-то образом используем новую ширину, высоту браузера для перестройки элементов внутри приложения UNIGUI.