Wrapping Framework7 to Pascal language

1

Hi,
I’m new here. It’s the first time I use Framework7 :blush: I see that it’s a good framework. As we use too Pascal language to make website, I started to wrap it to be used with Pascal (DWScript language).
I’ll ask questions here to understand more some points (Javascript parts).
So far, my results are now…

Framework73
Framework731304×922 1.19 MB

And the code used to generate it is:
`TQTXFramework7Application.Create(nil, procedure(widget: TQTXComponent)
begin
var app := Framework7Application();

app.DarkTheme := False;
app.ThemeColor := 'color-theme-blue';

var view := TQTXFramework7View.Create(widget, procedure(view: TQTXFramework7View)
begin
  view.isMainView := true;

  //Toolbar for all pages
  var toolbar := TQTXFramework7Toolbar.Create(view, procedure (toolbar: TQTXFramework7Toolbar)
  begin
    toolbar.ToolbarPosition := 'toolbar-bottom';

    Framework7Link(toolbar.ToolbarInner, '', '', 'arrow_left', 'back').onClick := procedure (Sender: TObject)
    begin
      ShowMessage('Going to previous page!');
    end;
    Framework7Link(toolbar.ToolbarInner, '', '', 'arrow_right').onClick := procedure (Sender: TObject)
    begin
      ShowMessage('Not implemented!');
    end;
  end);

  var leftPanel := TQTXFramework7Panel.Create(view, procedure(leftPanel: TQTXFramework7Panel)
  begin
    leftPanel.LeftPanel := true;
    leftPanel.OpeningEffect := 'panel-reveal';
    leftPanel.InnerHtml := 'Opened with REVEAL effect';
    leftPanel.PanelResizable := true;
  end);

  var rightPanel := TQTXFramework7Panel.Create(view, procedure(rightPanel: TQTXFramework7Panel)
  begin
    rightPanel.RightPanel := true;
    rightPanel.OpeningEffect := 'panel-cover';
    rightPanel.InnerHtml := 'Opened with COVER effect';
  end);

  //Home Page
  var homePage := view.AddNewPage('home', false, '/home/', null, procedure (homePage: TQTXFramework7Page)
  begin
    var navbar := TQTXFramework7Navbar.Create(homePage, procedure (navbar: TQTXFramework7Navbar)
    begin
      navbar.Title := 'First QTX Framework 7 app';
      var link1 := TQTXFramework7Link.Create(navbar.NavbarInnerLeft, procedure (link1: TQTXFramework7Link)
      begin
        link1.Icon := 'bars';
        link1.DataPanel := '.panel-left';
        link1.PanelAction := 'panel-toggle';
      end);
      var link2 := Framework7Link(navbar.NavbarInnerRight, 'About', '/about/', 'info_circle');
      var link3 := Framework7Link(navbar.NavbarInnerRight, '', '', 'bars', '',procedure (link3: TQTXFramework7Link)
      begin
        link3.DataPanel := '.panel-right';
        link3.PanelAction := 'panel-toggle';
        link3.BadgeText := 'New';
        link3.BadgeColor := 'color-red';
      end);
      link3.onClick := procedure (Sender: TObject)
      begin
        link3.BadgeText := '';
      end;
    end);
    homePage.Content.InnerHtml := '<p>Home page</p>';
  end);

  //About page
  var aboutPage := view.AddNewPage('about', true, '/about/', null, procedure (aboutPage: TQTXFramework7Page)
  begin
    var navbar := TQTXFramework7Navbar.Create(aboutPage, procedure (navbar: TQTXFramework7Navbar)
    begin
      navbar.Title := 'About page';
      var link1 := TQTXFramework7Link.Create(navbar.NavbarInnerLeft, procedure (link1: TQTXFramework7Link)
      begin
        link1.Icon := 'arrow_left';
        link1.Back := true; //Going to previous page
      end);
    end);
    aboutPage.Content.InnerHtml := '<p>About page</p>';
    Framework7Link(aboutPage.Content, 'This is a link', '#', 'scribble');
  end);
end);

end);`

1 Like