Implementing Placeholder Text

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

glenn9
Posts: 234
Joined: Wed Jan 15, 2020 10:45 pm

Implementing Placeholder Text

Post by glenn9 » Tue Feb 16, 2021 8:44 pm

Dear All,

Next on my learning list is being able to set place holder text.

Having worked through the first lesson on behaviours https://lessons.livecode.com/m/4071/l/6 ... a-behavior, I've tried on several occasions to work through the lesson on placeholders at https://lessons.livecode.com/m/4071/l/6 ... -behaviors], and although I guess it makes complete sense to a coder more experienced than me, I'm really struggling to understand it, especially fundamentally where to put the various code examples suggested!

I just wanted to check if anyone else had experience of implementing placeholders which might be of help to a less experienced coder?!

Many thanks,

Kind regards,

Glenn

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10305
Joined: Wed May 06, 2009 2:28 pm

Re: Implementing Placeholder Text

Post by dunbarx » Tue Feb 16, 2021 8:52 pm

Hi.

What is a "placeHolder" exactly? In other words, what are you trying to do with a field?

I ask because although the lessons are priceless, especially for new users, they often are more complex and wide-ranging than they need to be to solve specific problems. So can you tell me what you are trying to do?

Craig

glenn9
Posts: 234
Joined: Wed Jan 15, 2020 10:45 pm

Re: Implementing Placeholder Text

Post by glenn9 » Tue Feb 16, 2021 9:05 pm

Hi Craig,

For a field that is expecting the user, for example to enter an email address, I'm wanting the field to display, often in a light grey colour, "enter email address', this would then disappear and be replaced with the text the user enters as their email address.

if the user then chose to leave the field not having entered any text, the place holder text 'enter email address' would then reappear...

something along those lines...

Regards,

Glenn

bogs
Posts: 5480
Joined: Sat Feb 25, 2017 10:45 pm

Re: Implementing Placeholder Text

Post by bogs » Tue Feb 16, 2021 9:31 pm

A placeholder (referring to text) is any text you put somewhere, usually in light gray, that gives instruction to the end user *until* they replace it with their own text.

An example would be in a field [Please enter some text...]

When the user clicks in the field to enter the text, the above is deleted and the text color changes back to the default.

Frankly, I think using a behavior to accomplish the above is a little of a long way to go for something that simple, BUT, it is a simple thing if your trying to demonstrate a behavior.

**Sorry Glenn, you snuck in while I was typing :P
Image

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10043
Joined: Sat Apr 08, 2006 7:05 am
Contact:

Re: Implementing Placeholder Text

Post by FourthWorld » Tue Feb 16, 2021 9:58 pm

The tutorial Glenn linked to was very clear about what it's about.

Glenn, can you tell is a bit more about where you're having difficulty putting that lesson to work for you?
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

SparkOut
Posts: 2943
Joined: Sun Sep 23, 2007 4:58 pm

Re: Implementing Placeholder Text

Post by SparkOut » Tue Feb 16, 2021 10:41 pm

The lesson is written by Trevor DeVore and is a complete, robust, well-structured solution to be implemented for real-world users.
It is well documented and relatively straightforward but a bit advanced for an inexperienced coder, with behaviors, getProp and setProp, etc. Several comments are made that suggest "you could do it easier like this..." for which Trevor explains each time why he has taken the approach he did.
If the goal is simplicity, and/or how to expand an idea into a real use-case prototype technique and learn as you go, we can help with something more basic. If the goal is to implement a placeholder text solution for a real-world app, then the lesson shows how.

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10305
Joined: Wed May 06, 2009 2:28 pm

Re: Implementing Placeholder Text

Post by dunbarx » Wed Feb 17, 2021 3:38 am

Aha. I had a feeling that is what a placeholder was.

So Glenn, why not just set your placeHolder text in the field with the light gray text properties required, and change all that when the user opens the field. If no change is made, revert to placeholder properties and the placeHolder text.

And then go through the lesson to expand on what you just did. Trevor is a LC God.

Craig

bogs
Posts: 5480
Joined: Sat Feb 25, 2017 10:45 pm

Re: Implementing Placeholder Text

Post by bogs » Wed Feb 17, 2021 12:21 pm

dunbarx wrote:
Wed Feb 17, 2021 3:38 am
So Glenn, why not just set your placeHolder text in the field with the light gray text properties required, and change all that when the user opens the field. If no change is made, revert to placeholder properties and the placeHolder text.
Hee hee, you really should go read the lesson(s), that was answered in the comments.
If the goal is simplicity, and/or how to expand an idea into a real use-case prototype technique and learn as you go, we can help with something more basic. If the goal is to implement a placeholder text solution for a real-world app, then the lesson shows how.
That was a much better way of saying it, excuse my crudity :P
Image

glenn9
Posts: 234
Joined: Wed Jan 15, 2020 10:45 pm

Re: Implementing Placeholder Text

Post by glenn9 » Wed Feb 17, 2021 3:47 pm

Dear All,

thank you for all your responses - these have given me clarity that robust placeholders are just beyond me at the moment - I probably just need to revisit them once I've got a bit more LC experience.

Kind regards,

Glenn

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10043
Joined: Sat Apr 08, 2006 7:05 am
Contact:

Re: Implementing Placeholder Text

Post by FourthWorld » Wed Feb 17, 2021 5:16 pm

glenn9 wrote:
Wed Feb 17, 2021 3:47 pm
thank you for all your responses - these have given me clarity that robust placeholders are just beyond me at the moment - I probably just need to revisit them once I've got a bit more LC experience.
I don't know you so I could be wrong, but I don't believe they're beyond you. I think the problem is with us.

Form field placeholders are a staple of modern software, easily done with CSS; I believe they can become as easy in LC.

We may be able to package the Lesson code in a way that you can just drop in and use without having to think about it, as easily as web devs don't have to think about how placeholders are implemented in a browser.

But to do that there's only one thing we need from you: a better understanding of what is clear and what is unclear to you in that Lesson.

As we learn where you're coming from, we can bring tools to meet you and carry you the rest of the way.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10305
Joined: Wed May 06, 2009 2:28 pm

Re: Implementing Placeholder Text

Post by dunbarx » Wed Feb 17, 2021 9:40 pm

Try this sample stack. There are handlers in the card script and the field script. The field will only allow numbers to be entered.

When I mentioned that, to me, an "old fashioned" way of solving your issue seemed more appropriate and accessible, I meant only that. I have no reason to influence anyone's learning path. In fact, beware of old fashioned methods; they are often outdated. :wink:
PlacehoderSample.livecode.zip
(1.07 KiB) Downloaded 211 times
Craig

stam
Posts: 3061
Joined: Sun Jun 04, 2006 9:39 pm

Re: Implementing Placeholder Text

Post by stam » Thu Feb 18, 2021 4:49 am

FourthWorld wrote:
Wed Feb 17, 2021 5:16 pm
Form field placeholders are a staple of modern software
Arguably this and other features like password text really should be available as variations on the standard field, no?
Most other environments include feature like these as standard.

I'm really digging LC but a number of it's desktop controls are... well, antiquated. And in dire need need of a refresh.
It's OK, i can take time out of a project to create what i want, but it adds time especially if you want to make a re-usable control to apply across several projects.

And for some things, like placeholder text, I would expect not to have to do this (i'm lazy, i know...but i would rather spend time crafting/coding my project rather than coding controls with 'staple' features).

Maybe there is a plan to refresh the desktop controls at some point?

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10043
Joined: Sat Apr 08, 2006 7:05 am
Contact:

Re: Implementing Placeholder Text

Post by FourthWorld » Thu Feb 18, 2021 7:09 am

stam wrote:
Thu Feb 18, 2021 4:49 am
FourthWorld wrote:
Wed Feb 17, 2021 5:16 pm
Form field placeholders are a staple of modern software
Arguably this and other features like password text really should be available as variations on the standard field, no?
Absolutely.

The base field object is quite a capable foundation on which to add a behavior script to handle these and more.

But agreed wholeheartedly, that's a wheel that needn't be reinvented every time it's needed.

If the getProp names matched their CSS corollaries that would make it easy to use. Click a button to assign the behavior you want, done.

Who wants to help spec this and make it happen?
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

SparkOut
Posts: 2943
Joined: Sun Sep 23, 2007 4:58 pm

Re: Implementing Placeholder Text

Post by SparkOut » Thu Feb 18, 2021 7:44 am

I certainly "want to" but fall down on the unwritten "capable of" part. I suspect I am not the only one like that.

glenn9
Posts: 234
Joined: Wed Jan 15, 2020 10:45 pm

Re: Implementing Placeholder Text

Post by glenn9 » Thu Feb 18, 2021 8:56 am

FourthWorld wrote:
Wed Feb 17, 2021 5:16 pm

I don't know you so I could be wrong, but I don't believe they're beyond you. I think the problem is with us.

Form field placeholders are a staple of modern software, easily done with CSS; I believe they can become as easy in LC.

We may be able to package the Lesson code in a way that you can just drop in and use without having to think about it, as easily as web devs don't have to think about how placeholders are implemented in a browser.

But to do that there's only one thing we need from you: a better understanding of what is clear and what is unclear to you in that Lesson.

As we learn where you're coming from, we can bring tools to meet you and carry you the rest of the way.
Richard,

Thank you so much for your encouragement and kind support.

I think I'm in the position with placeholders that I remember being in when I first engaged with SQLite, ie a significant understanding deficit, but I received a lot of generous help from the forum which has eventually put in the position where I can set up and very effectively use a simple LC SQLite database now in minutes!

I'm going to continue to revisit the lesson and try to tease out exactly what I'm not understanding and hopefully try and address!

Many thanks again,

Kind regards,

Glenn

Post Reply