elGringo Posted April 5, 2018 Share Posted April 5, 2018 http://62.173.138.137:8077/ - Uploaded !!! Test it. Hi. Doing current project. Decided to create and share eShop template with basic tasks i always solve. What i was suffering of in UniGUI - no demos for popular tasks like - how to make site? - how to make eShop? In my example i tried to change this situation. Example not perfect, but working. It is not connected to any DataBase, so it is just a view, that could be helpful as the starting point. 1. Registration / Login Forms with beautiful forms and Captcha 2. Header, Footer, Body spaces. 3. Pages. Unique URL will open Unique page. 4. Slider. Basic and simple with fade in fade out effect. 5. Gallery. Shows how to put tiles on surface. 6. Horizontal tiles slider (tiles can be moved horizontally with arrows left right) 7. Adaptive. It resizes elements in dependence of browser size (on browser Width mainly). So you can try to open it on tablet or mobile device. 8. 99% is Delphi code. What limitations ? - Server alignment everywhere. So, it is more slow then client alignment and take more resources. But it is price for Delphi code. - That is the draw. Not finished, not uploaded currently, will upload it tomorrow or close days. - All elements in Russian language - don't have time to translate it. How to use? Download link Download, compile and open in browser http://localhost:8077 Search the code and ask questions or improve it... On next steps i will translate it in English and upload to VPS, because it is real project. Regards, Stan. 4 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 5, 2018 Share Posted April 5, 2018 Hi, Thanks for sharing!! Quote Link to comment Share on other sites More sharing options...
epos4u Posted April 5, 2018 Share Posted April 5, 2018 elGringo, thank you for sharing Quote Link to comment Share on other sites More sharing options...
jahlxx Posted April 5, 2018 Share Posted April 5, 2018 Great!! Thanks for sharing. Interested in point 7. How do you do it? Thanks. Quote Link to comment Share on other sites More sharing options...
elGringo Posted April 5, 2018 Author Share Posted April 5, 2018 hi, basically 0. set project to mfPage 1. send ajax requests from browser. Main - > ClientEvents -> ExtEvents -> Ext.form.Panel function form.afterrender(sender, eOpts) { var width=Ext.getBody().getViewSize().width; var height=Ext.getBody().getViewSize().height; ajaxRequest(sender, 'formAfterRender', [ 'width='+width,'height='+height]); } 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]); } 2. On Server Side 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; for each form, component or something i provide afterRender procedures and onBrowserResize Also i created 3 views in uCommon unit type TView = (smallView, middleView, bigView); and borders between views const leftWidthBorder = 985; const rightWidthBorder = 1024; for example take a look at code of TopMenu unit uTopMenu; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, uniGUITypes, uniGUIAbstractClasses, uniGUIClasses, uniGUIFrame, uniGUIBaseClasses, uniPanel, uTopMenuElement, System.Generics.Collections, uSearchFrame, uCommon; type TTopMenu = class(TUniFrame) pContent: TUniPanel; procedure UniFrameCreate(Sender: TObject); procedure UniFrameDestroy(Sender: TObject); private FOL: TObjectList<TTopMenuElement>; FNameCount: integer; FSearchFrame: TSearchFrame; FBrowserWidth: integer; procedure SetOL(const Value: TObjectList<TTopMenuElement>); procedure resizeView(aBrowserWidth: integer); procedure setView(aView: TView); { Private declarations } public { Public declarations } procedure OnAfterRender(aWidth, aHeight: integer); procedure OnBrowserResize(aWidth, aHeight, aOldWidth, aOldHeight: integer); procedure PositionElements(aView: TView); property OL: TObjectList<TTopMenuElement> read FOL write SetOL; end; implementation {$R *.dfm} { TTopMenu } uses MainModule; procedure TTopMenu.OnAfterRender(aWidth, aHeight: integer); begin FBrowserWidth := aWidth; resizeView(FBrowserWidth); end; procedure TTopMenu.OnBrowserResize(aWidth, aHeight, aOldWidth, aOldHeight: integer); begin resizeView(FBrowserWidth); end; procedure TTopMenu.setView(aView: TView); begin if aView = smallView then positionElements(smallView) else if aView = middleView then positionElements(middleView) else if aView = bigView then PositionElements(bigView); end; procedure TTopMenu.resizeView(aBrowserWidth: integer); begin if aBrowserWidth > rightWidthBorder then setView(bigView) else if (aBrowserWidth > leftWidthBorder) and (aBrowserWidth <= rightWidthBorder) then setView(middleView) else if aBrowserWidth < leftWidthBorder then setView(smallView); end; procedure TTopMenu.PositionElements(aView: TView); var i: Integer; begin if aView = smallView then begin Self.Visible := false; end else if aView = middleView then begin Self.Visible := true; if FOL.Count > 0 then // 1-st element begin FOL[0].width := 80; FOL[0].Parent := pContent; FOL[0].Top := 0; FOL[0].Left := 0 + 7; FOL[0].lMenuElement.Font.Size := 12; FOL[0].CenterLabel(); end; if FOL.Count > 1 then // other elements begin for i := 1 to FOL.Count - 1 do begin FOL[i].width := 80; FOL[i].Parent := pContent; FOL[i].Top := 0; FOL[i].lMenuElement.Font.Size := 12; FOL[i].Left := FOL[i - 1].Left + FOL[i - 1].Width + 10; // distance between elements FOL[i].CenterLabel(); end; end; FSearchFrame.Top := 11; FSearchFrame.Left := 10 + FOL[FOL.Count - 1].Left + FOL[FOL.Count - 1].Width; end else if aView = bigView then begin Self.Visible := true; if FOL.Count > 0 then // 1-st element begin FOL[0].width := 100; FOL[0].Parent := pContent; FOL[0].Top := 0; FOL[0].Left := 0 + 7; FOL[0].lMenuElement.Font.Size := 13; FOL[0].CenterLabel(); end; if FOL.Count > 1 then // other elements begin for i := 1 to FOL.Count - 1 do begin FOL[i].width := 100; FOL[i].Parent := pContent; FOL[i].Top := 0; FOL[i].lMenuElement.Font.Size := 13; FOL[i].Left := FOL[i - 1].Left + FOL[i - 1].Width + 10; // 10 is distance between elements FOL[i].CenterLabel(); end; end; FSearchFrame.Top := 11; FSearchFrame.Left := 10 + FOL[FOL.Count - 1].Left + FOL[FOL.Count - 1].Width; end; end; procedure TTopMenu.SetOL(const Value: TObjectList<TTopMenuElement>); begin FOL := Value; end; procedure TTopMenu.UniFrameCreate(Sender: TObject); procedure addTopMenuItem(aName, URL: string); var i: integer; begin i := FOL.Add(TTopMenuElement.Create(Self)); FOL[i].Parent := Self; FOL[i].Name := FOL[i].Name + FNameCount.ToString; FOL[i].URL := URL; // inc(FNameCount); FOL[i].lMenuElement.Caption := aName; end; begin FOL := TObjectList<TTopMenuElement>.Create(true); FSearchFrame := TSearchFrame.Create(Self); FSearchFrame.Parent := Self; FNameCount := 0; addTopMenuItem('Акции', UniMainModule.PagesSL[1]); addTopMenuItem('Каталог', UniMainModule.PagesSL[2]); addTopMenuItem('Оплата', UniMainModule.PagesSL[3]); addTopMenuItem('Доставка', UniMainModule.PagesSL[4]); addTopMenuItem('Обучение', UniMainModule.PagesSL[5]); addTopMenuItem('Магазины', UniMainModule.PagesSL[6]); addTopMenuItem('Сервис', UniMainModule.PagesSL[7]); // PositionElements; end; procedure TTopMenu.UniFrameDestroy(Sender: TObject); begin FOL.Free(); end; end. Quote Link to comment Share on other sites More sharing options...
elGringo Posted April 6, 2018 Author Share Posted April 6, 2018 there is answer on post from other thread i don't waste Farshad Energy ) I do it by mySelf as experiment in name of love to this framwork. No competition to PHP or etc. Just i was interested to turn it to popular tasks. That's all. In success case it could be added as Demo. There are things to complete this template - turn it to clientSide for example. Ruslan, on 06 Apr 2018 - 06:58 AM, said: +1 but I disagree with "eShop, Sites, LandingPages" - Do not waste Farshad energy on where UniGUI can never compete on an equal footing with PHP, at least he hasn't free resource for that. UniGUI made for web application, not for site, and should move in this direction. Quote Link to comment Share on other sites More sharing options...
mehmet07 Posted April 6, 2018 Share Posted April 6, 2018 thanks Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 6, 2018 Share Posted April 6, 2018 Thanks, if you had an English version it would be even better. Quote Link to comment Share on other sites More sharing options...
elGringo Posted April 6, 2018 Author Share Posted April 6, 2018 Yes, but first priority to finish project. I will post here English version in 2 weeks, hope. You just say what you need more in template. Thanks, if you had an English version it would be even better. 1 Quote Link to comment Share on other sites More sharing options...
jahlxx Posted April 6, 2018 Share Posted April 6, 2018 hi, basically 0. set project to mfPage 1. send ajax requests from browser. Main - > ClientEvents -> ExtEvents -> Ext.form.Panel Ok. Thanks. I'll try. It could be a very big task for me. I have many forms and could take many time to do this now. To get a responsive app, wich is the way? Is there any CSS that applied to the project can obtain it? I don't know the way to do it. Any idea will be wellcome. Thanks fried. Quote Link to comment Share on other sites More sharing options...
Bresler Posted April 6, 2018 Share Posted April 6, 2018 Hi Maybe I could help to make it clientSide alignment. Just let me know. Best regards Quote Link to comment Share on other sites More sharing options...
elGringo Posted April 6, 2018 Author Share Posted April 6, 2018 hi, Bresler! Thank you very much for suggestion. Frankly speaking i don't know from which side to start with ClientAlignment. Because it is absolutely different concept. I'm learning clear ExtJS but i am not too strong in it for the moment. I think i will finish project and will come back to this template to improve it. Thanks, again! Quote Link to comment Share on other sites More sharing options...
Bresler Posted April 6, 2018 Share Posted April 6, 2018 Ok Quote Link to comment Share on other sites More sharing options...
itognet Posted April 7, 2018 Share Posted April 7, 2018 Thank you about reminding me about an old project that I totally forgot about, a test on how easy a webshop could be acomplished in unigui. I am still just fooling around with unigui, waiting for unigui getting even better so I can migrate from intraweb. Anyway, I did make a test webshop running with 30.000 products (just a csv file converted to database) with no images and no full description. The webshop just shows a table with the filtered products based on 4 categories. If the webshop does not already have the product image, it auto download it on the fly and also shows a product info. stock info and price. If you click a product, it shows a full description with serveral pictures and can be shown in at least 5 languages retrieved externally on the fly based on part and ean number. All this took me less than 3 days, I am writing this to inspire anyone. It is not difficult at all to create a webshop in unigui. Sadly, I cant attach a image here ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 7, 2018 Share Posted April 7, 2018 Hi, Sadly, I cant attach a image here ? Sorry, which edition and build are you using?! Quote Link to comment Share on other sites More sharing options...
itognet Posted April 7, 2018 Share Posted April 7, 2018 from time to time I update to newest version (unigui). Do you know how I attach images? It ask me for specifying an url for image, I was looking for a attach/upload function? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 7, 2018 Share Posted April 7, 2018 Are you using a trial edition? Quote Link to comment Share on other sites More sharing options...
itognet Posted April 7, 2018 Share Posted April 7, 2018 Yes, still on trial. Hoping that unigui soon will be strong enough so it can replace intraweb. I have written a another thread about how uploading files is badly handled by unigui compared to intraweb. Hopefully you one day will look at that issue. 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.