-
Notifications
You must be signed in to change notification settings - Fork 42
Third party plugins
Third party plugins are very easy to include in your project.
There are several examples in main demo application.
We are going to explain the use of one of them step by step.
We will use this control because it is the more adequate for a table.
We need to chose the control that better adapt to the plugin.
For example for the Select2 plugin we will use a TIWBSSelect.
We will name this control DbTable since this point.
We need to render a <table> tag to apply the Boostrap Table plugin.
DbTable.TagType := 'table';
When the Boostrap Table plugin is applied, the content of the <table> tag is replaced, so we need to put our sripts outside the tag.
DbTable.ScriptInsideTag := False;
$('#{%htmlname%}').bootstrapTable({%options%});
This simple line will convert the <table> tag in a complete responsive grid. The {%htmlname%} param will be automatically replaced by the rendered id of the component, the {%options%} param will be replaced with the options we want to set to the Boostrap Table plugin.
We can do this in the create event of the Form or in any other place we want.
The {%options%} param is a json string with all the options we want to set.
Look at http://bootstrap-table.wenzhixin.net.cn/documentation/ to see available options.
procedure TFBootstrapTable.IWFormModuleBaseCreate(Sender: TObject);
var
j: integer;
begin
// include third party grid https://github.com/wenzhixin/bootstrap-table
IWBSLayoutMgr1.AddLinkFile('//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css');
IWBSLayoutMgr1.AddLinkFile('//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js');
IWBSLayoutMgr1.AddLinkFile('//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/mobile/bootstrap-table-mobile.js');
// configure grid options
columns := '[';
for j := 0 to ClientDataSet1.FieldCount-1 do begin
if j > 0 then
columns := columns+',';
columns := columns+'{"field":'+'"field'+IntToStr(j)+'","title":"'+ClientDataSet1.Fields[j].DisplayLabel+'"}';
end;
columns := columns+']';
options := TStringList.Create;
try
options.NameValueSeparator := ':';
options.Delimiter := ',';
options.QuoteChar := ' ';
options.StrictDelimiter := True;
options.Values['url'] := '"{%dataurl%}"';
options.Values['columns'] := columns;
options.Values['pagination'] := 'true';
options.Values['sidePagination'] := '"server"';
options.Values['mobileResponsive'] := 'true';
options.Values['paginationVAlign'] := '"top"';
DbTable.ScriptParams.Values['options'] := '{'+options.DelimitedText+'}';
finally
options.Free;
end;
end;
You can use your own functions to create the json for the options value.
Personally I like to work with JsonDataObject library.
If you look at the previous code, you will see a {%dataurl%} param, we need to replace this param with an url where the table will request data on demand.
We will create a CustomRestEvent that will do this work.
If we set the eventname as the param name, the param will be automatically replaced with the url of the event when the page is rendered.
DbTable.CustomRestEvents[0].EventName := 'dataurl';
Then set the event DbTable.CustomRestEvents[0].OnRestEvent. In this event we return a json with the rows that the bootstrap table request.
procedure TFBootstrapTable.DbTableCustomRestEvents0RestEvent(
aApplication: TIWApplication; aRequest: THttpRequest; aReply: THttpReply;
aParams: TStrings);
var
data: string;
line: string;
bmrk: TBookmark;
r, i, f, t: integer;
begin
// here we return the data in json format
// see format on: http://bootstrap-table.wenzhixin.net.cn/getting-started/#usage-via-javascript
f := StrToIntDef(aRequest.QueryFields.Values['offset'],0);
t := Min(f+StrToIntDef(aRequest.QueryFields.Values['limit'],10), ClientDataSet1.RecordCount);
ClientDataSet1.DisableControls;
bmrk := ClientDataSet1.Bookmark;
try
data := '';
for r := f+1 to t do begin
ClientDataSet1.RecNo := r;
line := '';
for i := 0 to ClientDataSet1.FieldCount-1 do begin
if i > 0 then
line := line+',';
if ClientDataSet1.Fields[i] is TNumericField then
line := line+'"field'+IntToStr(i)+'":'+FloatToStr(ClientDataSet1.Fields[i].AsFloat,fs)
else if (ClientDataSet1.Fields[i] is TStringField) or (ClientDataSet1.Fields[i] is TMemoField) then
line := line+'"field'+IntToStr(i)+'":"'+EscapeJsonString(ClientDataSet1.Fields[i].AsString)+'"'
else
line := line+'"field'+IntToStr(i)+'":""';
end;
if data <> '' then
data := data+',';
data := data+'{'+line+'}';
end;
aReply.WriteString('{"total": '+IntToStr(ClientDataSet1.RecordCount)+', "rows": ['+data+']}');
finally
ClientDataSet1.GotoBookmark(bmrk);
ClientDataSet1.EnableControls;
end;
Again, the above is only an example, you can use your own functions to create the json for the result.
I also recommend to create a set of functions to automatically create set of options and rest respose in your own projects, but that it is out of the scope of this framework.
This is an example of how to bind to the events on the plugin.
We will bind to the onClickCell event http://bootstrap-table.wenzhixin.net.cn/documentation/#events
Set EventName to be the same as the jQuery name of the event.
DbTable.CustomAsyncEvents[0].EventName := 'click-cell.bs.table';
Set EventParams to the list of params that the jQuery event pass to the attached function.
DbTable.CustomAsyncEvents[0].EventParams := 'elem, field, value, row';
Set the CallBackParams to transform the JQuery params to the params received in the delphi event
DbTable.CustomAsyncEvents[0].CallBackParams.Values['field'] := 'field'; DbTable.CustomAsyncEvents[0].CallBackParams.Values['value'] := 'value'; DbTable.CustomAsyncEvents[0].CallBackParams.Values['row'] := 'row.field0';
Set AutoBind to true, because EventName is equal as jQuery event we no need further steps to attach the event.
DbTable.CustomAsyncEvents[0].AutoBind := True;
Then set the event DbTable.CustomAsyncEvents[0].OnAsyncEvent
procedure TFBootstrapTable.DbTableCustomAsyncEvents0AsyncEvent(Sender: TObject;
EventParams: TStringList);
begin
TIWBSAlert.Create('You clicked field '+EventParams.Values['field']+' row '+EventParams.Values['row']);
end;
Most code in this example could be written in function in an external unit so you can include them in your projects, but as I say before that it is out of scope of this framework. You are invited to create your own projects to automatically wrap third party plugins for IWBSFramework
Here are some recommended plugins that can be successfully integrated with IWBF.
Automatically makes Bootstrap nav-tabs and nav pils responsive.
https://github.com/kattunga/Bootstrap-Dynamic-Tabs
A custom select / multiselect for Bootstrap using button dropdown, designed to behave like regular Bootstrap selects.
https://github.com/silviomoreto/bootstrap-select
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
https://github.com/select2/select2
https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution, loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology.
https://github.com/tonytomov/jqGrid
An extended Bootstrap table with radio, checkbox, sort, pagination, extensions and other added features.
https://github.com/wenzhixin/bootstrap-table/
The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms.
https://github.com/markusslima/bootstrap-filestyle
An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.