GUI Tools for designing detailed web forms

203 views
Skip to first unread message

John Foster

unread,
Jul 20, 2017, 11:26:03 AM7/20/17
to Lightning - 4D Web Applications
Hi All,


I am looking for a Graphical UI (prefer Mac) that I can use to design some of the more sophisticated forms we'll need. The templates for Lightning Detail forms are top to bottom and vertical.

I would like to create some detail forms and after the html/css has been designed adjust it for lightning.

I do have RapidWeaver and PineGrow. I am thinking that I might be able to use one of them to do some of the design work?

Anyone using anything beside an external text editor?

Thanks,
John...

Graham Langley

unread,
Jul 21, 2017, 9:27:21 AM7/21/17
to Lightning - 4D Web Applications
John,

This is a good question and I'm looking forward to any responses on this. I hand code everything so can't help directly. 

Your friend is the ltg-div tag, which is essentially a standard div tag for the output but with some top level attribute processing by Lightning. Using the div tag you can create sophisticated form layouts but would need to also know css, so you can position things how you want.


To get the best out of Lightning, I recommend you have a play around with a single static html page and an external css file of your creation referenced in the <head> section of the html document. You can then add a container div and then some other divs with css styling within to see how it works. I know that sounds like the deep end, but it's not so hard once you pick it up and it will pay dividends in the future if you can code yourself.

David Adams

unread,
Jul 21, 2017, 9:47:34 AM7/21/17
to lightning-...@googlegroups.com
Hey John, my friend Tony Hall in Hawaii is a *huge* fan of RapidWeaver. It's certainly a great product with am amazingly active community. If you do want to use it, one thing that you can do is use an iframe for your dynamic content. So, you use RapidWeaver for various bits of static design and then have the interactive bigs in a sort of embedded panel (iframe) handled by Lightning.

Haven't done it...but it should work.

And +1 to what Graham said about sorting out a basic page with a single external CSS file. It's not as hard as you think and it makes everything else going forward just that much more relaxing. It's harsh feeling like you're not in control because you don't understand the basic plumbing. Learning every CSS tweak and kink is of zero interest to me, but having a basic grasp of what's going  and how to fix thing is great! And not as hard as you might imagine. 




--
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-apps+unsub...@googlegroups.com.
To post to this group, send email to lightning-4d-web-apps@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.

Paul Dennis

unread,
Jul 21, 2017, 9:55:49 AM7/21/17
to Lightning - 4D Web Applications
My view on this is if you are not a designer dont design. Simply buy a bootstrap template you like from themeforest or similar and apply the css to LTG. We have done it with a joomla template but a plain html bootstrap would be quite simple.
Paul

Graham Langley

unread,
Jul 21, 2017, 9:57:17 AM7/21/17
to Lightning - 4D Web Applications
Thank you Mr. Adams :)

I remember you mentioning RapidWeaver to me a couple of months back.

John, if you go down that route, please keep us updated, it could be something good.

Graham Langley

unread,
Jul 21, 2017, 10:12:07 AM7/21/17
to Lightning - 4D Web Applications
That's a good point. If you can find an existing template (Bootstrap) which you like then you can work it into Lightning. Start off with reviewing the available templates, some have a "forms" section for layout and widgets available.

Perhaps, taking a look at some great looking templates may also steer you into thinking about how you can go about making your app look nice and modern, not necessarily having to adhere to your 4D form layouts.

Pierre Coulombe

unread,
Jul 21, 2017, 10:49:00 AM7/21/17
to lightning-...@googlegroups.com
I’ve followed a similar path described in this thread. It does work. When ever I get an idea or want to make a change to a template, I google bootstrap or CSS and usually end up with, at the very least www.w3Schools. Lots of knowledge there that you can pick at and try. It has also lead me to Bootsnipps- great source of ready to use templates. I’ve more often than not been able to apply them to Lightning. Finally, in last two weeks I have been using Oxygen XML Editor that Graham mentioned last week. The ability to see multiple copies of forms, copy, paste, duplicate and test has really been a bonus well worth the money spent on it. 

David Adams book on 4D web design is still valid as a source of 4D and web interaction. All in all there is a learning curve but it is very incremental. You can get results very quickly and keep building from there.

Pierre


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

David Adams

unread,
Jul 21, 2017, 10:53:34 AM7/21/17
to lightning-...@googlegroups.com
I did a lot of work with Bootstrap last year and it's just fine. Many nice conveniences. You memorize their grid system (very easy) and then a whole lot of heavy lifting is done for your by the framework. There's tons of help out there for Bootstrap. CSS from scratch is pretty complicated (at least to me), so I think starting with Bootstrap (or similar) is a good way to go. It certainly doesn't have to be Bootstrap, but no one will make fun of you for using it ;-) Well, designers are already at the point of "but everyone is using Bootstrap, we want something Fresh and New." Yeah, well, good for them. Bootstrap's fine for the rest of us...

John Foster

unread,
Jul 21, 2017, 10:57:54 AM7/21/17
to Lightning - 4D Web Applications
Hi All,

Thank you for the feedback. I own RapidWeaver, Pinegrow and a few others. I have created many Wordpress sites and I replaced one of my (continually hacked) WordPress sites with RapidWeaver. So I am quite familiar with this approach.

Trying to remove some of the redundancy and tedium of the html part (although I am capable of managing it in a text editor). GUI's handle that quite nicely. Thanks Graham for the "div" tip.

Learning how to manage the AJAX aspect and how that fits into a web page I have to master.

I will investigate and see how an iFrame works within RapidWeaver.

Appreciate,
John...

Graham Langley

unread,
Jul 21, 2017, 11:17:27 AM7/21/17
to Lightning - 4D Web Applications
Pierre,

I completely agree, https://www.w3schools.com, is a favourite of mine. 

The OxygenXML Editor is not cheap and is not just an XML Editor. I use it for HTML, XML, JavaScript, CSS, JSON and Text. The content is validated as you type or can be validated in full depending on the document type. The project management is great and the extra bits for data visualisation is amazing.

On Friday, July 21, 2017 at 3:49:00 PM UTC+1, Pierre Coulombe wrote:
I’ve followed a similar path described in this thread. It does work. When ever I get an idea or want to make a change to a template, I google bootstrap or CSS and usually end up with, at the very least www.w3Schools. Lots of knowledge there that you can pick at and try. It has also lead me to Bootsnipps- great source of ready to use templates. I’ve more often than not been able to apply them to Lightning. Finally, in last two weeks I have been using Oxygen XML Editor that Graham mentioned last week. The ability to see multiple copies of forms, copy, paste, duplicate and test has really been a bonus well worth the money spent on it. 

David Adams book on 4D web design is still valid as a source of 4D and web interaction. All in all there is a learning curve but it is very incremental. You can get results very quickly and keep building from there.

Pierre

On 21 Jul 2017, at 10:12 AM, Graham Langley <graham...@hotmail.co.uk> wrote:

That's a good point. If you can find an existing template (Bootstrap) which you like then you can work it into Lightning. Start off with reviewing the available templates, some have a "forms" section for layout and widgets available.

Perhaps, taking a look at some great looking templates may also steer you into thinking about how you can go about making your app look nice and modern, not necessarily having to adhere to your 4D form layouts.

On Friday, July 21, 2017 at 2:55:49 PM UTC+1, Paul Dennis wrote:
My view on this is if you are not a designer dont design. Simply buy a bootstrap template you like from themeforest or similar and apply the css to LTG. We have done it with a joomla template but a plain html bootstrap would be quite simple.
Paul

--
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-apps+unsub...@googlegroups.com.
To post to this group, send email to lightning-4d-web-apps@googlegroups.com.

New Foundation

unread,
Jul 21, 2017, 5:04:03 PM7/21/17
to lightning-...@googlegroups.com
Folks,

I used RapidWeaver (Mac only app) to build the first iteration of the Foundation App Store.

It was great for building a pure HTML/CSS website.

I have since moved on to using WordPress for all my websites now. They are not driven by 4D (but they could be using the new WordPress REST API - just haven’t had the need yet).

I endorse RapidWeaver for Mac users wanting to build HTML/CSS sites.

So many add-ons for RapidWeaver, too.

Walt Nelson (Seattle)
Nelson Consulting, Inc.

4dialog

unread,
Jan 30, 2018, 7:53:14 AM1/30/18
to Lightning - 4D Web Applications
Pinegrow have now bootstrap integration. Have not tested but that will probably make design for Ltg easier?
Anybody using Pinegrow + bootstrap?
Reply all
Reply to author
Forward
0 new messages