I can't get my bootstrap navibar to work om view.main screen
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Summatech Solutions - Web Portal
</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="view.main.style.css">
</head>
<body>
<!-- Bootstrap CSS CDN -->
<!-- Our Custom CSS -->
<!-- Font Awesome JS -->
<script defer="true" src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer="true" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Summatech</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#" id="main.menu.home">Home</a>
</li>
<li>
<a href="#systemSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">System Settings</a>
<ul class="collapse list-unstyled" id="systemSubmenu">
<li>
<a href="#" id="main.menu.portaldb">Setup Companyies</a>
</li>
<li>
<a href="#" id="main.menu.users">Setup Users</a>
</li>
</ul>
</li>
</ul>
<!--<ul class="list-unstyled CTAs">
<li>
<a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
</li>
<li>
<a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
</li>
</ul>-->
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="navbar-btn">
<span></span>
<span></span>
<span></span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<!--
<li class="nav-item active">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
-->
</ul>
</div>
</div>
</nav>
<!--<div id="page-wrapper">
<div class="row panel-body">
<div class="col-lg-12">
<h1 class="page-header">Home</h1>
</div> -->
<!-- /.col-lg-12 -->
<div id="main.webpanel"></div>
<!--</div>
</div>-->
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$(this).toggleClass('active');
});
});
</script>
</body>
</html>
form
object FViewMain: TFViewMain
Left = 0
Top = 0
Width = 640
Height = 480
Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText
Font.Height = -11
Font.Name = 'Tahoma'
Font.Style = []
TabOrder = 1
OnCreate = WebFormCreate
object WebPanel1: TWebPanel
Left = 136
Top = 92
Width = 471
Height = 369
ElementClassName = 'card shadow p-3 mb-5 bg-white rounded'
ElementID = 'main.webpanel'
BorderColor = clSilver
BorderStyle = bsSingle
end
object lbViewHome: TWebHTMLAnchor
Left = 32
Top = 32
Width = 96
Height = 24
ElementID = 'main.menu.home'
Caption = 'Home'
ChildOrder = 4
OnClick = lbViewHomeClick
end
object lbViewportaldb: TWebHTMLAnchor
Left = 34
Top = 62
Width = 96
Height = 24
ElementID = 'main.menu.portaldb'
Caption = 'portaldb'
ChildOrder = 5
OnClick = lbViewportaldbClick
end
object lbViewusers: TWebHTMLAnchor
Left = 34
Top = 104
Width = 96
Height = 24
ElementID = 'main.menu.users'
Caption = 'users'
ChildOrder = 6
OnClick = lbViewusersClick
end
end
pas
unit View.Main;
interface
uses
System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Forms, WEBLib.Dialogs,
Vcl.Controls, Vcl.Forms, WEBLib.Controls, WEBLib.ExtCtrls, Vcl.StdCtrls, WEBLib.StdCtrls,
App.Types,
ConnectionModule, WEBLib.Lists,
View.Crud.Container, WEBLib.WebCtrls;
type
TFViewMain = class(TWebForm)
WebPanel1: TWebPanel;
lbViewHome: TWebHTMLAnchor;
lbViewportaldb: TWebHTMLAnchor;
lbViewusers: TWebHTMLAnchor;
procedure WebFormCreate(Sender: TObject);
procedure lbViewHomeClick(Sender: TObject);
procedure frmmainClick(Sender: TObject);
procedure lbViewportaldbClick(Sender: TObject);
procedure lbViewusersClick(Sender: TObject);
private
FChildForm: TWebForm;
FLogoutProc: TLogoutProc;
procedure ShowForm(AFormClass: TWebFormClass);
procedure ShowCrudContainer(ACrudFormClass: TWebFormClass; ATitle: string;
AShowCrudListProc: TShowCrudListProc; AShowCrudEditProc: TShowCrudEditProc);
public
class procedure Display(AElementId: string; LogoutProc: TLogoutProc);
end;
var
FViewMain: TFViewMain;
implementation
uses
JS, Web,
Auth.Service,
View.Login,
View.UserProfile,
View.portaldb.List,
View.portaldb.Edit,
View.users.List,
View.users.Edit,
View.Home;
{$R *.dfm}
procedure TFViewMain.WebFormCreate(Sender: TObject);
begin
FChildForm := nil;
ShowForm(TFViewHome);
end;
procedure TFViewMain.lbViewHomeClick(Sender: TObject);
begin
ShowForm(TFViewHome);
end;
procedure TFViewMain.lbViewportaldbClick(Sender: TObject);
function CreateportaldbListForm(const AElementId: string; AEditProc: TEditProc): TWebForm;
begin
Result := TFViewportaldbList.CreateForm(AElementId, AEditProc);
end;
function CreateportaldbEditForm(const AElementId: string; AListProc: TListProc;
AId: JSValue): TWebForm;
begin
Result := TFViewportaldbEdit.CreateForm(AElementId, AListProc, AId);
end;
begin
ShowCrudContainer(TFViewportaldbList, 'portaldb', @CreateportaldbListForm, @CreateportaldbEditForm);
end;
procedure TFViewMain.lbViewusersClick(Sender: TObject);
function CreateusersListForm(const AElementId: string; AEditProc: TEditProc): TWebForm;
begin
Result := TFViewusersList.CreateForm(AElementId, AEditProc);
end;
function CreateusersEditForm(const AElementId: string; AListProc: TListProc;
AId: JSValue): TWebForm;
begin
Result := TFViewusersEdit.CreateForm(AElementId, AListProc, AId);
end;
begin
ShowCrudContainer(TFViewusersList, 'users', @CreateusersListForm, @CreateusersEditForm);
end;
class procedure TFViewMain.Display(AElementId: string; LogoutProc: TLogoutProc);
procedure AfterCreate(AForm: TObject);
begin
TFViewMain(AForm).FLogoutProc := LogoutProc;
end;
begin
if Assigned(FViewMain) then
FViewMain.Free;
FViewMain := TFViewMain.CreateNew(AElementId, @AfterCreate);
end;
procedure TFViewMain.frmmainClick(Sender: TObject);
begin
ShowForm(TFViewHome);
end;
procedure TFViewMain.ShowCrudContainer(ACrudFormClass: TWebFormClass; ATitle: string;
AShowCrudListProc: TShowCrudListProc; AShowCrudEditProc: TShowCrudEditProc);
function CreateListForm(const AElementId: string; AEditProc: TEditProc): TWebForm;
procedure AfterCreateListForm(Form: TObject);
begin
TJSObject(Form)['FEditProc'] := AEditProc;
end;
begin
Application.CreateForm(ACrudFormClass, AElementId, Result, @AfterCreateListForm);
end;
function CreateEditForm(const AElementId: string; AListProc: TListProc;
AId: JSValue): TWebForm;
procedure AfterCreateEditForm(Form: TObject);
begin
TJSObject(Form)['FEditProc'] := AListProc;
end;
begin
Application.CreateForm(ACrudFormClass, AElementId, Result, @AfterCreateEditForm);
//Result := TFViewAlbumEdit.CreateForm(AElementId, AListProc, AId);
end;
begin
if Assigned(FChildForm) then
FChildForm.Free;
FChildForm := TFViewCrudContainer.CreateForm(WebPanel1.ElementID,
ATitle, @CreateListForm, AShowCrudEditProc
);
end;
procedure TFViewMain.ShowForm(AFormClass: TWebFormClass);
begin
if Assigned(FChildForm) then
FChildForm.Free;
Application.CreateForm(AFormClass, WebPanel1.ElementID, FChildForm);
end;
end.
Advice:
make sure bootstrap is linked in your main project HTML so all is ready when your first form opens.
Actually which version of bootstrap is well supported from your web core components ?
then can i use the last 5.0 ? there is a sample application that use it ? case use for rendering buttons, panels, labels, grids, etc...
We recommend the latest v5.0 as it no longer has a jQuery dependency.
It can be used in the same way as 3.x as the Bootstrap class names have not changed.