Jump to content

eShop. Sharing. For Delphi Developers


elGringo

Recommended Posts

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.

post-2378-0-83487400-1522928893_thumb.jpg

post-2378-0-33531800-1522928901_thumb.jpg

post-2378-0-64218400-1522928908_thumb.jpg

post-2378-0-55681000-1522928919_thumb.jpg

post-2378-0-78499500-1522928927_thumb.jpg

post-2378-0-26605200-1522928937_thumb.jpg

post-2378-0-68850400-1522928945_thumb.jpg

post-2378-0-97256500-1522928955_thumb.jpg

post-2378-0-80846200-1522928962_thumb.jpg

  • Upvote 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:snapback.png

+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.

 
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

  • Upvote 1
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...