Lightning V5 (Clean Air - Alpha)
Welcome to Directives
Lightning tags have been great, extra processing and less typing for ease of use.
This ease of use comes with a price. You are constrained to a proprietary tag language which supports a limited amount of attributes, customisation and frameworks.
In the example below, which is a Bootstrap 4 mobile listing, there would have been <ltg-loop>, <ltg-obj>, <ltg-list>, <ltg-row>, <ltg-col> tags and more, if you outsource web development then it means the end of learning 3rdparty tags for your team and not being able to "tweak" to the limit.
<!--MOBILE CONTENT-->
<divalign="center"class="d-none d-sm-block d-md-block d-lg-none d-xl-none">
<ulclass="list-group list-group-flush">
<liclass="list-group-item active">
<ahref="#"class="list-group-item active"onclick="ltgFormDisplay('Companies-List','sort','[Companies]Company_Name');">ltg:%companies</a>
</li>
ltg:loop[Companies]
<liclass="list-group-item list-group-item-action ltg-link-pointer">
<ahref="#"onclick="ltgFormDisplay('Companies-Detail','edit','ltg:[Companies]Company_ID');">ltg:[Companies]Company_Name</a>
</li>
ltg:endloop[Companies]
</ul>
</div>
<!--/MOBILE CONTENT-->
The above uses the prefix “ltg:” for directives and determines the correct processing of the resulting directive. You gain complete control of the standard tags and attributes and can simply drop in html and add the directives.
ltgFormDisplaynow accepts optional action and record parameters.
More to come.
--
You received this message because you are subscribed to the Google Groups "Lightning - 4D Web Applications" group.
To unsubscribe from this group and stop receiving emails from it, send an email to lightning-4d-web...@googlegroups.com.
To post to this group, send email to lightning-...@googlegroups.com.
Visit this group at https://groups.google.com/group/lightning-4d-web-apps.
For more options, visit https://groups.google.com/d/optout.
<form method="Companies_List">
<!--DESKTOP CONTENT-->
<div class="card card-body d-none d-lg-block d-xl-block">
<!--FORM TITLE/-->
<h5 class="card-title"><span class="fa fa-industry"></span> ltg:%companies </h5>
<!--FORM TOOLBAR-->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<!--NEW RECORD-->
<button class="btn btn-secondary" onclick="ltgFormDisplay('Companies-Detail','new');" type="button"><i class="fa fa-plus"></i></button>
<!--/NEW RECORD-->
<!--DELETE RECORD-->
<button class="btn btn-secondary" onclick="ltgExecuteMethod('Company_Delete','confirm');" type="button"><i class="fa fa-trash"></i></button>
<!--/DELETE RECORD-->
</div>
<div class="btn-group" role="group">
<!--SEARCH RECORDS-->
<div class="input-group">
<input class="form-control ltg-focus" id=".txtCompanies_Search" name=".txtCompanies_Search" onkeypress="return ltgSearchSubmit(event);" placeholder="ltg:#search" value="ltg:.txtCompanies_Search"/>
<div class="input-group-append">
<button class="btn btn-secondary" onclick="return ltgSearchSubmit();" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
<!--/SEARCH RECORDS-->
</div>
<div class="btn-group">
<!--NAVIGATE RECORDS-->
<button type="button" class="btn btn-secondary" onclick="ltgFormDisplay('Companies-List','first');" tabindex="-1">
<i class="fa fa-angle-double-left"></i>
</button>
<button type="button" class="btn btn-secondary" onclick="ltgFormDisplay('Companies-List','previous');" tabindex="-1">
<i class="fa fa-long-arrow-left"></i>
</button>
<button type="button" class="btn btn-secondary" onclick="ltgFormDisplay('Companies-List','next');" tabindex="-1">
<i class="fa fa-long-arrow-right"></i>
</button>
<button type="button" class="btn btn-secondary" onclick="ltgFormDisplay('Companies-List','last');" tabindex="-1">
<i class="fa fa-angle-double-right"></i>
</button>
<!--/NAVIGATE RECORDS-->
</div>
</div>
<!--/FORM TOOLBAR-->
<!--LIST RECORDS-->
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th style="text-align: center;">
<input type="checkbox" onclick="ltgFormDisplay('Companies-List','select-all');"/>
</th>
<th>
<a href="#" onclick="ltgFormDisplay('Companies-List','sort','[Companies]Company_Name');">ltg:%company_name</a>
</th>
<th>
<a href="#" onclick="ltgFormDisplay('Companies-List','sort','[Companies]Address');">ltg:%address</a>
</th>
<th>
<a href="#" onclick="ltgFormDisplay('Companies-List','sort','[Companies]City');">ltg:%city</a>
</th>
<th>
<a href="#" onclick="ltgFormDisplay('Companies-List','sort','[Companies]Postcode');">ltg:%postcode</a>
</th>
</tr>
</thead>
<tbody>
ltg:loop[Companies]
<tr>
<td style="text-align: center;">
<input type="checkbox" onclick="ltgFormDisplay('Companies-List','select','ltg:[Companies]Company_ID');"/>
</td>
<td>
<a href="#" onclick="ltgFormDisplay('Companies-Detail','edit','ltg:[Companies]Company_ID');">ltg:[Companies]Company_Name</a>
</td>
<td>
ltg:[Companies]Address
</td>
<td>
ltg:[Companies]City
</td>
<td>
ltg:[Companies]Postcode
</td>
</tr>
ltg:endloop[Companies]
</tbody>
</table>
<!--/LIST RECORDS-->
<!--DELETE RECORD DIALOG-->
<div class="modal" id="company-delete" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">ltg:#delete</h5>
<button type="button" class="close" onclick="ltgDialogClose('company-delete');" aria-label="ltg:#cancel">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>ltg:.txtCompanies_Delete</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="ltgDialogClose('company-delete');">ltg:#cancel</button>
<button type="button" class="btn btn-primary" onclick="ltgExecuteMethod('Company_Delete','delete');">ltg:#delete</button>
</div>
</div>
</div>
</div>
<!--/DELETE RECORD DIALOG-->
</div>
<!--/DESKTOP CONTENT-->
<!--MOBILE CONTENT-->
<div align="center" class="d-none d-sm-block d-md-block d-lg-none d-xl-none">
<ul class="list-group list-group-flush">
<li class="list-group-item active">
<a href="#" class="list-group-item active" onclick="ltgFormDisplay('Companies-List','sort','[Companies]Company_Name');">ltg:%companies</a>
</li>
ltg:loop[Companies]
<li class="list-group-item list-group-item-action ltg-link-pointer">
<a href="#" onclick="ltgFormDisplay('Companies-Detail','edit','ltg:[Companies]Company_ID');">ltg:[Companies]Company_Name</a>
</li>
ltg:endloop
</ul>
<div class="btn-group fixed-bottom align-items-center justify-content-center" style="padding:8px;">
<!--NAVIGATE RECORDS-->
<button type="button" class="btn btn-secondary" onclick="ltgFormDisplay('Companies-List','first');" tabindex="-1">
<i class="fa fa-angle-double-left"></i>
</button>
<button type="button" class="btn btn-secondary" onclick="ltgFormDisplay('Companies-List','previous');" tabindex="-1">
<i class="fa fa-long-arrow-left"></i>
</button>
<button type="button" class="btn btn-secondary" onclick="ltgFormDisplay('Companies-List','next');" tabindex="-1">
<i class="fa fa-long-arrow-right"></i>
</button>
<button type="button" class="btn btn-secondary" onclick="ltgFormDisplay('Companies-List','last');" tabindex="-1">
<i class="fa fa-angle-double-right"></i>
</button>
<!--/NAVIGATE RECORDS-->
</div>
</div>
<!--/MOBILE CONTENT-->
</form>
<link rel="import"href="/path/to/lightning/lightningform.html">
/path/to/lightning . to 4D webserver But the rest of the static content would be served by Nginx. The important thing is that we will be able to target individual lightning forms rather than index.ltg. --
You received this message because you are subscribed to the Google Groups "Lightning - 4D Web Applications" group.
To unsubscribe from this group and stop receiving emails from it, send an email to lightning-4d-web...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/lightning-4d-web-apps/a438c732-7242-42e0-95a2-39a7ac8f2c3cn%40googlegroups.com.
<dashboard.png><products.png><contacts.png><orders.png>
--
You received this message because you are subscribed to the Google Groups "Lightning - 4D Web Applications" group.
To unsubscribe from this group and stop receiving emails from it, send an email to lightning-4d-web...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/lightning-4d-web-apps/EDC1E7EE-4412-462F-B90C-A3DEDCE03633%40gubus.de.
To view this discussion on the web visit https://groups.google.com/d/msgid/lightning-4d-web-apps/FE895B15-5AC6-461D-AC3B-D0CA8A1E7027%40gmail.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/lightning-4d-web-apps/8957DC4A-16FD-4152-84F1-AD6FC6FFB3E2%40gubus.de.
<ltg-caption class="col-sm-4 control-label" title="%reference"/>
<ltg-div class="col-sm-8">
<ltg-obj name="[Sales_Orders]Reference" mandatory="false"/>
</ltg-div>
<!--V5-->
<label for="Order.PO_Reference" class="col-form-label">{{%order_reference}}</label>
<div>
<input type="text" class="form-control" id="Order.PO_Reference" name="Order.PO_Reference" value="{{Order.PO_Reference}}" />
</div>
One thing I could do with some help on are translations from English to French, German and Spanish.
To view this discussion on the web visit https://groups.google.com/d/msgid/lightning-4d-web-apps/bdc09cab-c94f-4af6-b943-9b3990c91d71n%40googlegroups.com.
On Oct 27, 2020, at 8:32 PM, Graham Langley <graham...@hotmail.co.uk> wrote:
I would be pleased to hear of any feedback you have on V5, good, or bad. Please post here.
To view this discussion on the web visit https://groups.google.com/d/msgid/lightning-4d-web-apps/5f707f86-022d-4f35-b6fd-3d258918ceb8n%40googlegroups.com.
Helge,
Thanks for the feedback!
I would certainly agree that V5 is “clean”, a description I would use myself. You have the component (server) and js library (client), and that's it. The previous lightning-xml, lightning-web and lightning-custom folders have all been retired, and the “ltg-” tags are also gone. The use of the Connection and User objects also removes quite a few of the previous Ltg_ component methods. Less, is more.
PDF Documentation
Documentation is in markdown (.md) but it should be easy enough to create a PDF from that, leave it with me.
Designing Forms
I think with the large number of Bootstrap 4 themes available, where the design has been done for you, all you need is to pick your choice and use a regular html editor to place the Lightning directives in the template. It's a much faster process with V5 as there are no “ltg-” tags to replace the standard html.
<html></html> Tag
In the demo, 404.html, login.html and index.html each have the <html></html> tag. The other forms are contained inside index.html so do not need the html tag as it's already done in the container form.
Ltg_Conn_ProcessRequest
I have removed this and handed control to the developer to determine whether the request should go through the router.
To create your own method, it will involve determining whether the URL is “/LTGAJAX”, that will defintiely be a V5 connection request, but for other URL's you will need to determine yourself whether these should be routed via Lightning or your own mechanism.