NetTalk Central

Author Topic: Multi Colimn Update Forms - How?  (Read 5182 times)

Edwin Hannan

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
    • Email
Multi Colimn Update Forms - How?
« on: June 02, 2013, 11:10:16 AM »
HI All

New to this web stuff, keep dipping my toe in over the past few years but not getting anywhere fast, I recently updated to NT 7 so having another go :-)

I need to get into developing CRM's for the web so I need nice rich interfaces similar to windows desktop apps.

For starters I want to design an update form that may have several columns & tabs etc..

How do I do this in Nettalk 7.1?

I have been reading articles on css. watching the nettalk videos all this weekend, I can wizard up a basic nettalk app but that is all that it is..basic, I cant see my users actually using it (I know I will need to add custom code here and there).

Actual application screen design seems to be lacking (for me), I am no web designer but I am willing to learn if someone can let me know which tools I need and then how to get that design into Nettalk

Please help :-)

Many thanks

Ed

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
Re: Multi Colimn Update Forms - How?
« Reply #1 on: June 02, 2013, 09:51:46 PM »
Hi Edwin,

No doubt you have been reading the rather epic thread you started on the newsgroup.

I'm going to answer your question, but I think the better answer, to begin with, might be
"don't worry about the layout for now."

Now I know it's the natural thing to do - I've done it myself. I'm used to starting each procedure by getting the screen just right, then adding in all the code.

With NetTalk you will go faster if you think the other way around. With NetTalk you can throw controls onto a form or browse with literally no effort, and then get the program working. Along the way you'll change your mind about some things, throw some controls away, add others, perhaps abandon whole windows, or re-arrange work flow and so on. During this process you should simply ignore layout and visual style aspects.

Once the program "works" in the sense that all the fields and functionality are there, then you can start looking at the layout. At that point two things will happen. Firstly you'll discover that the layout can be set globally for the most part, so it's a lot less work. But also that you'll be a lot more familiar with the templates, so the layout settings will be a lot more obvious to you.

You'll still of course have some questions about how to do stuff along the way, but start with the practical stuff, and worry about the layout at the end.

Now to answer your question more specifically;

There are three kinds of "layout".

The first is all the cosmetic stuff. (And I mean "cosmetic" in the proper sense here - the important stuff that governs what it "looks" like.) You'll already have chose a theme for your app, but you can see the cosmetic stuff change just by changing the theme. (try Aristo, and ShoeStrap2 for examples of two very different themes.) This is probably the bit you worry about last, and the bit you'll want to tweak from time to time as fashions change. It's trivial to change the cosmetics globally - without even recompiling your app.

The second is the "form" of the app. For example is it page-based, or do you use popups? (Popups in the windows sense, not popups in the "web" sense of the word.) Or perhaps you're using a hybrid. Or with Content-body. again fortunately it's trivial to change this globally, so you can experiment a lot even after the app is built. I recommend setting everything up as-if it was popup based - then if you like you can turn it back to page based with a single global switch later on.

For example, if you are building a CMS, then popups are much faster when editing, but perhaps the user wants to see pages with the result. This is perfectly ok. (Generally speaking popups are a LOT faster for editing stuff than pages.)

The Third "layout" is controls on say a specific form. You want some on the right, some below, some spanning across and so on. This is done with the template options for each form control. Specifically;
Last on Line
Last in Cell and
Span Prompt/Value/Comment

Think of a form as a table, 3 columns wide. One column for the prompt, one for the value, one for the comment. (Actually you can make it a 2 column, or even 1 column layout, but let's stick with the 3 columns for starters.)

If last in Line is not ticked then a second set of 3 columns will appear to the right (with the next form field in those columns, on the same row.) You can go right like this as far as you like.

If the Last In Cell is not ticked then the next form field is placed into the same "Value Cell" as this field. This allows you to say put a checkbox and entry field right next to each other. In this situation the prompt and comment of the 2nd are usually (but don't have to be) blank.

You can play around with the layout if you like, but I recommend getting it all working before fiddling with layout. It's likely you'll make a lot of changes to things as you learn, and spending a lot of time on layout, only to abandon those fields later on is a waste of time.

cheers
Bruce





Edwin Hannan

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
    • Email
Re: Multi Colimn Update Forms - How?
« Reply #2 on: June 03, 2013, 08:41:24 AM »
Hi Bruce

Thank you very much for your reply, much appreciated.

Yes I have been following' the EPIC thread' with interest:-)

I have re-discovered my Nettalk book and recordings from 2010 and have been reading & watching the vids and I have seen the sections on Form Layout and now I understand.

I am ready to do some design on the look and feel of a web app and so ask what would you use for interface design (a ccs visual page designer?, screen shot a windows app that I like and turn that into the user intetface??)

Perhaps nettalk 7+, 8 or 9 will have some 'killer' screen design functionality to help non webbies like me:-)

Your comments are most welcome :-)

Cheers

Ed




Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
Re: Multi Colimn Update Forms - How?
« Reply #3 on: June 03, 2013, 10:51:47 PM »
Hi Ed,

you ask a good question.

ok, what I use is a mix of Firefox and Firebug. It's helpful to understand the flow a bit here.

So you have an exe compiled and running. I usually turn OFF "combine" and "compress" on the web server advanced tab for this part. Your exe is also set to use a custom.css file.

Now for the really broad settings I either pick a jQuery theme from their ThemeRoller site
http://www.capesoft.com/docs/NetTalk7/NetWebThemes.htm
or start with one of the existing themes that ship with NetTalk. My current favorites are Aristo (which I've tweaked a bit in 7.11) and ShoeStrap2. but it's worth giving them all a look to see which one is the best starting point for you.

So ok, now I have all the basics in place, and I'm ready to start playing. I open the site in FireFox, and open the Firebug window. I play with the CSS settings there, and see the effect on my app in real-time. When I find something I like I put it in my custom CSS file, refresh the page, and carry on.

Remember that you can override or supplement existing css in your custom file.

I know it feels different, but actually what's really nice is that when you;re working on one browse, you're really working on _all_ of them. So it's easy to tweak, see the results of the tweak, and then either undo or continue. Sure, like most things, it gets a bit easier with experience, but it's really easy to get going, and it's also easy to ask questions about specifics etc.

Incidentally I wouldn't necessarily start with a _windows_ screen-shot I like. I'd start with a web site I like. you can inspect the CSS on any web site, so that's very educational. Of course you can make a web app look exactly like a windows app, but honestly, in most cases, I think that looks "less" not more...

Cheers
Bruce



dcpeders

  • Newbie
  • *
  • Posts: 32
    • View Profile
    • Email
Re: Multi Colimn Update Forms - How?
« Reply #4 on: May 19, 2014, 08:31:02 AM »
Bruce,

Can you explain more about "Last in Cell"? What does it do and how can it be used with "Last in Line"?

Good explanation on "Last in Line".

Thanks,

Dave Pederson

terryd

  • Hero Member
  • *****
  • Posts: 759
    • View Profile
    • Davcomm
    • Email
Re: Multi Colimn Update Forms - How?
« Reply #5 on: May 19, 2014, 08:18:56 PM »
Dave
Do yourself a favour and view this webinar.
http://clarionlive.wikispaces.com/Webinars webinar 217
It covers a nice range of exactly what you are looking for.
I have modified the file Upload(26) example to do most of what Bruce covers in this webinar but only in NT810.
If you want a copy let me know

Terry Davidson
Windows 10 64 bit/Windows7 64bit
Clarion 9.1.11529/Clarion10 12567
Nettalk 913
Nettalk 1015
StringTheory267/Winevent515/XFiles298/MessageBox239/Cryptonite186

dcpeders

  • Newbie
  • *
  • Posts: 32
    • View Profile
    • Email
Re: Multi Colimn Update Forms - How?
« Reply #6 on: May 20, 2014, 06:39:37 AM »
I'll check out the video.

Thanks Terry.