Having it occur on every keystroke may not be required, and isn’t even feasable in a scriptless environment. For example, one solution is to provide a button called “Character count” which shows them how many characters there are in what they have entered up-to-now.
It’s not the same of course, but it is a suitable solution in a script-free environment that achieves the same goal.
Surely in the case of a word processor you could provide a text-box (like the comments form on this forum) which is dynamically linked to an iFrame, so every 10 seconds the POST command is sent to the iFrame which refreshes the window saving the changes and refreshing the preview… almost like a WYSIWYG split window. It’s not pretty or clean… but it would do the job, be scripting free and at least provide those who want a live environment something close to usable.
So the meta refresh automatically updates the iframe with ease, but how would the iframe process the form from the main form? Does the iframe have access to the form that it is in?
I can’t think of any way it could have without needing JavaScript to examine what is currently in the form. Without JavaScript it could only use server side scripting to report on what has already been submitted to the server.
Cheers felgall, it looks like we’re back then to a solution where the user clicks a button to count the characters, which submits and then shows the form with an updated character count.
What is the right approach to start a project, which have heavy use of JS?
You should choose you platform / technology carefully. People have suggested using tools like AIR or GWT - It really depends on your skill set and what you want to achieve - Saying it will have a heavy use of javascript doesn’t really say much about what you are trying to build.
If you choose to use web standards - html, css and js - then I agree with the very enthusiastic posters above who say it’s best to design the system without js at all first. JS shouldn’t be mandatory for a web application. A recent example of this pain was in twitter - I was completely unable to follow someone for a time because a js error prevented me from doing so. It just makes sense - Simply Javascript / Bulletproof Ajax are good at explaining these things.
how to choose which library is best, or one should develop his own library specific to requirements to keep the file size smaller?
Kevin Yank had an interesting take on the adoption of a framework - he said that you should only adopt a framework after you have read it, understand it, agree with it - and you couldn’t achieve the same thing on your best day of coding.
If you’re not in a position to judge for yourself then I would suggest heeding the advice of those who are.
Can you suggest any study material (tutorials or books etc.) to learn building this type of interfaces.
Hmm, I don’t know of any good books on UI design in particular.
I would suggest:
If you’re part of a team - get everyone loving the product and using it.
Yes. Selecting the technology first is definitely backwards. You should be choosing the technology to fit the task and not breaking the functionality of the task where it doesn’t fit the technology.
I hadn’t come across that statement before but I certainly agree with it.
I have always argued that if you don’t know how to write JavaScript code to do it yourself then you shouldn’t be using a library to do it for you. Not quite the same thing - but along the same lines.
In the case of my example, I would just have a save button on the page which would send the POST data to the iFrame therefore updating the contents, so the preview would occur upon saving, as I said it isn’t pretty but the point is it would at least offer a fair alternative for those with no scripting available. When you remove the availability of JavaScript, you do loose the ability to have much control over the dynamic behaviour of on-page content. I guess there might be a way using server-side scripting to save the content to variables before triggering a refresh (as a timed event), but that might interrupt the writing flow as the page would refresh and the writer would have to wait for the content to refresh and be formatted before continuing.
So presumably the iframe is in the page that gets loaded when the submit button is pressed - but wouldn’t it be just as easy to include the info directly in that page without using an iframe?
felgall, not really, the edit window wouldn’t have anything to refresh (and you don’t want to risk losing the data in the refresh), if the display version is contained in an iframe it’s only the preview of the finished document which is refreshed… not the preview + the editor.
I see. You are assuming that the submit is targetted at the iframe and that the iframe page is the one that passes the info to the server and then refreshes leaving the form itself intact.
felgall, exactly, if the script works within the iFrame and then on processing does the work needed to display the final document (as a preview) it’ll avoid refreshing of the main page. It makes better sense to do it that way rather than have the main page and the iframe refresh equally, let the iframe do all the work and keep everything else static. At least if I were to attempt making something without scripting like that it’s the method I would use.
Nope, I was just making up a solution on the spot to the situation, it’s entirely feasible that someone else may have attempted such an implementation, but as far as I am aware, it was more of a mindful proof of concept rather than something currently in widespread use
There is still the issue of how to actually move on to the next page in that situation since you still have the form showing. You’d also probably have a lot of people who just keep hitting submit over and over since that’s what they’d expect to have to do to get to the next page.