In Google Contacts, by default the form displays the values with some (read only) but when you click on a value, it converts the field into an so you can edit it, and when you press enter, it updates the value, remove the and redisplay the new value in the .
So it's really easy to add/modify information in one click.
I'm looking for a lib that do that, ideally that handle the whole process javascript+ajax+ror. Or just the javascript+ajax, or just javascript at least.
I think, like many of the other products, that they use GWT. Google Web Toolkit, its actually written in Java then cross compiled into Javascript. It allows them to write sourcecode for both the front and backend in Java and then creates optimised javascript for cross browsers.
The advantage of this is it is all widget based, and its super easy to switch components in and out without having to manually interact with the DOM.
However, if you do not wish to go down this route you can do it very simply in javascript using ajax calls. On a blur event you make an ajax call to your server which saves the field. On success it switches back to a Label. When you click on the label/text it switches for a textedit and uses the same contents as the label. No real need to use a plugin for this kind of thing as its actually pretty basic, it just looks good :).
Related
I'm just now tapping into real GUI-heavy stuff and I'm looking to integrate a GUI for a Python 3 application/("game"?). I need this to be cross-platform, responsive, and able to communicate with other users and a server.
I've looked at desktop application creation but I think that the best thing would be a web application. Now, here are the obstacles:
I need the web app to be able to use all my Python 3 code as its black box; it needs to be able to send a function call to the running python code.
More often than not, everything on the page is changed if a single value is changed.
If another user changes a value, it would affect multiple other users instantaneously.
I can't have the page constantly refresh.
The HTML "GUI" needs to have some degree of separation from the Python code. (I can't have Python sending snippets of HTML, only data is allowed.)
I realize that this is a lot to address, so my question then is:
How would one go about making a web app that has specific (most) data values update consistently without having to refresh the entire page?
My proposed solution would have some sort of simplistic javascript constantly checking to see if anything has been posted for the users closely interacting with each other (players in the same server, if you will). Each value in the HTML would have a linked javascript function which is linked to a value or function in the backend python code.
"Player" changes value on webpage -> JavaScript function call -> Python black box on "Server" -> JavaScript checking loop sees that there has been a change via simple Python variable on "Server" -> JavaScript gets all values via calls to functions in python code -> Update HTML for all "Players"
Finally, please note, I have no idea how to carry out my proposed solution, and I very much welcome a different, better approach. Thanks in advance.
So, for anyone who is trying to do the same thing as me, the answer is something called "websockets".
I initially tried Kivy, but found that it was too cumbersome and just hard to get good styling in. Using HTML, CSS, and JavaScript, you can make pretty fancy looking stuff, and Kivy just isn't robust enough to make something attractive without having to write tons of excess code. Since what I'm trying to make is basically a styled data readout/hud, the HTML combination takes the cake.
What I'm currently using for the websockets is a module called "Tornado" which allows you to update any data on the client side without them reloading the page. I'm sending this data as a single JSON to update the whole page.
In conclusion, I decided on HTML/CSS/JavaScript for the GUI and Python/Tornado for fast server-side computation.
I am building an app that lets our sales team (who uses Salesforce) export to a new Evernote note with one click. I have the Evernote functionality already available in a PHP script I wrote, and I was planning on using Javascript to make an XHR to that script, but that is irrelevant at this point.
What I need to be able to do is capture all of the fields in the currently-open opportunity and upon clicking my custom button / link, capture all those fields as a javascript variable that I can then POST to my PHP app. Even a simple example of how I could go about capturing one field would be great -- I can't seem to find anything in the SalesForce documentation that covers this.
What you need here is an Apex callout. This doc on developer.force.com covers it OK, it's a starting point anyway (although it doesn't show you how to query for the fields of Opportunity -- you'll find that in the regular Apex docs under SOQL). For some sample code you might look at the Force.com Toolkit for Google APIs, which uses callouts pretty extensively (although you may need to wade through it a bit to find the relevant parts).
In any case, if you start by searching the docs on Apex callouts, that will probably get you rolling in the right direction.
Another method of doing this, incidentally, would be to wire up a custom button with the AJAX toolkit to compose the body of the post, and then post it and have your PHP page redirect the user back to where he started. That could work too, although my first inclination would be to do it in Apex instead.
Do they really have to click a button? What if meeting some condition would work?
I'm asking because Workflow rules (which are usually good for field updates, creation of Tasks or sending emails) have option to send out a SOAP message. It'd be a somewhat bloated XML but on the plus side - no coding needed, pure configuration. Plus - their delivery status can be tracked easily.
Check the help and at the very least you now have the keyword to Google for ;) Topic on consuming them on salesforce.stackexchange.com might also be useful.
If it has to be under a button - you probably could do with making a fake update of some helper field... Maybe even "count of messages sent"?
I would like to offer viewers a contact form that is modified according to the user's input. An example of such a form is on the Ext JS site.
I have not looked into the product, but I would like to know if there are any other programs/functions that generate such a form dynamically? I found only samples on adding other input elements to existing forms.
Here are some other implementations:
http://neyeon.com/p/jquery.dform/ (depends on jQuery)
http://neyric.github.com/inputex/ (depends on YUI)
http://robla.net/jsonwidget/
I also plan to add this functionality to my own js-forms library, which would also handle validation.
You can always create whatever DOM structure you like using JavaScript. Be it additional inputs or even additional FORM elements. It then depends of course what you use on the server side to process form data and how you do that.
Maybe I haven't understood the nature of your problem because you haven't explained yourself too good.
ExtJS is a JavaScript library that does everything on the client side. It also provides the ability to rapidly create user interface by providing Javascript configuration objects that will result in rich widget creation.
You can do lots with jQuery (and jQueryUI) as well, but it's up to you how to do it. ExtJS just has these very functionally rich and visually consistent set of client controls/widgets that you can use out of the box without much additional development (not to mention bug killing that comes along custom development).
For instance: When writing an Asp.net MVC application it's very easy to issue an Ajax call that would return HTML of so called partial view with complete HTML of your form that you can then easily display in a modal dialog for instance.
If you do need all that functionality to create a desktop-like application I suggest you do take a plunge into ExtJS because it is definitely a very good product. I've used it about 3 years ago (version 2) on some project and I was amazed by the work they've done with it. It's very feature rich product that makes it really easy to create desktop like web applications.
But if you're after a usual web site then a desktop-like experience is probably not what you should give to your visitors.
More of a general question here.
At the moment a lot of the projects I work on utilize server-side views to render the user interface, and spruce it up with some JavaScript here and there. That is all fine and dandy for smaller projects, but lately it seems like the .js files are growing rather large in size, and the stacks upon stacks .live and .bind jQuery calls just don't seem to cut it anymore.
What are good ways to blend JavaScript into the view and, perhaps, the controller of a web application? For the Java-driven websites I found DWR to be quite useful, but a lot of times user initiated events require controller logic, which is starting to become overwhelming and confusing when it's part of the many lone functions included on the pages.
I considered a completely AJAX-driven template engine but that seems to be a bit extreme and will likely be a pain in the butt for anyone to use. Cloning the functionality of the existing backend classes, on the other hand, seems redundant.
What is a good "middle ground" approach used by web apps out there, those that aren't entirely AJAX free nor completely JavaScript driven?
EDIT:
Perhaps I'll provide an everyday example of a problem. Say I'd like to provide the user with a modal dialogue confirming or denying something:
"Your picture is uploaded but looks terrible. You need a new 'do." (OK | What?)
Now, in one scenario, that dialogue could pop up as a result of uploading an image with a page refresh, in which case the server-side view will render it. In another scenario, it might appear after uploading the image via AJAX, in which case it'll probably be triggered by JavaScript on the page. In both cases we need to access the dialogue creation code, and I can't so far think up a way to have, say, a Dialog class which would work the same in both cases.
I'm certainly not an expert in this realm, but in the past have worked with projects utilizing RESTful services which seemed to fit the 'AJAXY' world of web site development nicely. I can't say it'd be ideal for web apps, but worked great for content-rich presentational sites. It seems like it'd fit your need for multi-presentational formats nicely via custom templates. So, the service could call the pictureUpload service using a HTML page template, or it could call the service and request the AJAX component template.
I've been working recently with JavascriptMVC (2.0) for an internal company app. It has its warts, but the overall architecture is good and allows you to create "controller" JS classes. Each controller "owns" a subset of the DOM tree (or if you prefer, a visual part of the page) and responds to events within that zone and uses EJS templates (the "view" part) to alter areas under it. It nicely abstracts what would otherwise be a lot of $(...).bind() and $(...).live() calls into an OOP model.
In my case, our interface is almost 100% JS-driven due to the constraints around the project, but there's no reason you can't mix-n-match.
Now, in one scenario, that dialogue could pop up as a result of uploading an image with a page refresh, in which case the server-side view will render it. In another scenario, it might appear after uploading the image via AJAX, in which case it'll probably be triggered by JavaScript on the page
Here's how I'd do it in a way that works even with Javascript disabled:
Server-side outputs an HTML upload form. The plain-HTML form will submit to another PHP page.
A snippet of Javascript runs when the page finishes loading, looking for that form.
The javascript creates a HairdoUploadController instance, passing in the <form>...</form> to the constructor.
The controller "takes over" the form, using JQuery selectors to alter the styling and to trap the form submitting events.
The controller adds a new div and associates it with a (initially hidden) Jquery-UI Dialog.
When the form is submitted, the controller instead makes an AJAX call, to a slightly different URL than the plain form.
The results of the AJAX call are pushed into the Dialog's div, and the dialog is displayed.
You can throw all logic at the server, and assume a dumb client that displays whatever the server sends.
There are two scenarios:
Non-Ajax Request
Ajax Request
The only difference between them is that, in the first one you're rendering more content than just the modal dialog. There's no reason why you can't have a Dialog class on the server which spits out the HTML representation of the dialog, and is used for both types of request. Then in the AJAX call, you would simply add the server's response into the DOM.
Like you said, it can be problematic sharing UI creation logic on both client and server side, so it's better to choose one and stick with it. In the above case, all logic is pushed to the server. Read up more about AHAH.
It sounds like Google Web Toolkit might be what you're looking for.
It allows you to write client-side
applications in Java and deploy them
as JavaScript.
Presumably then you could write the code once in Java and use it in both places, although I've never used GWT myself.
In my own framework that I'm developing, I'm basically forcing developers to write the code twice. Once in the native language, and once in JavaScript. I make them fill in a function which returns the JS, and then it can be called automatically where it's needed. But all the code is contained within one class so at least you don't have the logic spread all over the place, and you can quickly compare if they are functionally equivalent. For things like regular expressions, it can normally be written just once and then passed to JS (I use it to validate once on the client-side, and then again on the server-side).
I have found myself recently using my server side code (ASP.Net MVC in my case) as a means to provide re-use of my layout components (master files), and small encapsulated bits of UI (partial views), and doing a fair amount of work in javascript. In this particular case I'm still pretty early in my UI work, but with jQuery and jQuery UI I've got a lot of functionality in a very small footprint.
I think one of the challenges to having a mixed solution is figuring out where to put the various bits of logic. After that the rest of it probably goes to figuring out how to re-use as much of your javascript and css code as possible. I still haven't figured out how to manage the various javascript artifacts I end up with (though the Google CDN relieves a lot of that by providing jQuery, jQuery UI, ans the jQuery UI CSS resources).
I am trying to locate an decent example of ajax json interaction with Rails. I have a Rails app that uses standard forms and wish to improve it with some ajax, but I have not found a good example to inform me.
I have a large investment portfolio model object, which requires multiple views to input all the data. I have a mechanism that allows page-to-page transition, using divs with a style of display:none or display:block around wrapping each 'pane'. I can selectively hide/show each pane as I move off-screen to the next pane. The user can navigate around, setting values, some of which need to be fetched from the server (such as look up a stock quote). When all is done, a commit sends it all back to the server, since it is one single form. So far, so good.
Now, I need to interact with the user when he is picking individual stocks, performing auto-complete on the ticker symbol during typing and then updating a table of stocks picked. This part has me stumped, since I don't understand how I can get interactive behavior while the input form is displayed. I am hoping to review some clean examples of ajax interacting with rails.
Oh, by the way, the app is a Facebook application, so I can't use prototype or any rjs templates, but must use FBJS.
I can't seem to find an example that shows ajax updating page sections dynamically.