Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
The community reviewed whether to reopen this question 4 months ago and left it closed:
Not suitable for this site We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
How to create form from JSON Schema?
I am writing code in JavaScript and jquery. With this template part like Form I am creating this with haml and adding this in js file.
For backend I am using python. I am using Django framework.
So I got some links for create form from JSON Schema.
Reference link :
http://neyric.github.io/inputex/examples/json-schema.html
In my Form :
Input elemets : textboxes, textarea, select list, submit and cancel buttons are present.
So I want to ask is creating form with JSON schema is feasible or not?
If yes then, can you provide some good links?
I've been looking for the same, and turns out there are some good options. These are the best libraries I could find on GitHub:
JSON Editor (plain JS) (demo)
Angular Schema Form (AngularJS) (demo)
React JSONSchema Form (React) (demo)
jsonform - Build forms from JSON Schema. Easily template-able. Compatible with Twitter Bootstrap out of the box.
https://github.com/joshfire/jsonform
You are looking for Alpaca Forms.
http://www.alpacajs.org
JSON Schema driven forms using jQuery with layout engines for Bootstrap, jQuery UI / Mobile. It's very extensible and pretty decked out.
Apache 2.0 licensed and awesome community (I am a code committer).
Or... you could take a look at outperform. It's a small javascript form generator library that I recently wrote to support my own projects because I got fed up by the fact that all the form generators that I looked at either had a ton of dependencies, or were distinctly larger than my single page web-application.
I mean, let's face it: if my SPA is like 20KB unminified but gzipped, then I expect library routines which do something simple as generating a form to be significantly smaller. Its main features would be:
Zero dependencies.
Less filling (unminified but gzipped: <2KB).
Native HTML5/browser validation support for all HTML5+ input types.
Custom validation seemlessly integrated.
Supports all web frameworks out there (including Bootstrap).
Autorefills half-filled forms when reloading a page in all browsers.
JSON set/get for all form values.
Just stumbled upon this question and wanted to add this new option:
JSONForms extends the view-model approach by eliminating the need to write HTML templates in order to create forms by leveraging the capabilities of JSON and JSON schema. It supports React, Angular, and Vue.
GitHub: JSONForms (Demo)
Form generation from JSON Schema is a common practice, specially for automatically generated user interfaces.
In your case, if you are only interested in creating ONE form, maybe it will be better to directly code it.
Here is a library I have created that hopefully you find interesting:
json-forms:
JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided
Live demo at http://brutusin.org/json-forms
Look at this project
https://github.com/mirshahreza/json-edit
A jquery plugin to turn json schema to form
It may be helpful in your scenario
I have found https://form.io, it's by far, the most advanced project in this matter i have found. Draggable form creates the schema that renders. His core is opensourced.
Have a look at this demo (source code) of ngx-schema-form :
Takes a JSON schema file
Generates that into a fully working editable web page form
Saves changes to the JSON model as a Javascript object
Allows adding custom validator code for any section
This works really well for me (I only found it a couple of days ago). I use it with the latest Angular, and it is working exactly as documented.
Another option is "json-schema-js-gui-model". It converts the json schema into a gui model that you can easily use in any web framework to create a custom form. For detailed advice on the last step, the angular 2 docs has a recipe for creating a dynamic form from a gui model.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm building an app in django that lets users create and edit flowcharts for the purpose of process/procedure control. There are three basic models: Procedure, Step, and Transition.
I've created and debugged all the model relationships and through the admin interface and shell, I can create Procedures with several Steps and Transitions. It's functional but not intended for the end user. I need to create a browser-based jgraphical interface.
Enter visjs, a javascript visualization library. Using visjs, I've created a basic block-diagram editor that lets users add/edit/delete nodes and edges (this is my first javascript attempt ever). I can load data from the database and post data back to the database through a couple of custom views and JSON serialization. However, it feels kludgey and hard to maintain. For example, it's not integrated into django's forms framework at all.
At the moment, when submitted, the javascript does the serialization to post JSON data and JSON data only. I'd really like this to be a standard form submission but I can't figure out how to structure the form.
How would you go about building a form to do handle this? I'm basically trying to get my javascript block diagram to be the form, if that makes any sense. Is this the use-case for a custom widget?
Another wrinkle here is that the editor needs to create/update/delete the top-level procedure, the steps, and the edges.
Thanks for your help
I think a custom widget is what your looking for and would start by learning from examples of other Django apps which do something similar. The project I am currently working on includes the app named django-ckeditor which creates a widget around ckeditor. I believe it solves a similar problem to yours in the sense that it creates a Django widget from a javascript widget.
Study how they approach a similar problem and see if it helps.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am acting as web developer for a small startup, taking over as the only in-house developer to maintain and adapt the application that was initially put together by a team of contractors. I would consider myself to be at an intermediate level with Ruby on Rails. I know enough about front end technologies like HTML and CSS to use Bootstrap or Foundation effectively and write my own tweaks when necessary. However, I only can read the JavaScript code of other developers well enough to make small modifications to what's already in place.
I would like to become proficient in JavaScript to help round out my skillset but there seem to be a lot of JavaScript "options" out there and I'm not sure what's on the way in, what's on the way out, what's popular, what's most useful, easiest to start with, best fit for Rails applications and so forth. And by "options" I mean "regular" Javascript, jQuery, Node, Angular, etc etc.
In hopes that my question will meet SO terms as "answerable" I'd like to focus on the question of what kind of Javascript fits best with Rails and which technologies are the most generally relevant today (i.e. not on the way out of popularity already).
Your choice should depend on what you're doing. One case might be using Rails primarily on the back-end, pulling data from it, and then generating your markup and displaying content primarily on the front-end with JavaScript. In that case, you should look into a JavaScript framework like Ember.js or AngularJS. If you're going to be generating your markup primarily on the back-end with Rails, having that markup being pre-populated with content before being sent to the user, you might be better off using jQuery for DOM manipulation and the occasional AJAX request to your Rails back-end.
In the case you're looking for a framework: Yehuda Katz is a leading voice in the Ruby on Rails core team, and has a similar role inside of the Ember.js project. While this isn't strictly objective, I'd say that Ember is the JavaScript framework that most closely matches "The Rails Way". That said, any framework will integrate well if you're using Rails as a backend, and AngularJS is currently more popular and might be easier if you're looking for examples and helper libraries.
I'd like to point out that Ember is just a framework, just like jQuery is just a library. Knowing JavaScript from the bottom up is a very helpful thing when working with anyone's code. I highly recommend checking out the Learn JavaScript page on MDN, and maybe picking up a copy of JavaScript: the Good Parts by Douglas Crockford. The former has a bunch of free information about getting up to speed on JavaScript. The latter is a dense, and somewhat controversial book, but (in my opinion) is one of the best books about dealing with the language's rough edges.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Is there a standard process for removing html code from jQuery code ?
Often I encounter code such as :
var $lab = $('<label/>').html('Enter Name ');
var $text = $('<input id="name" type ="text" /> ');
$set.append($lab);
set.append($text);
I think this does not look very clean, can code like this be re-factored using AngularJS or similar type framework so there is seperation between UI and logic code ?
I could just break up the file into different .js files where each file contains a specific set of UI creation functions but this is not really solving the issue ?
There are some ways to maintain HTML and JS separated. I've used two frameworks and I'm currently using one of them because I think it's great! (talking about angularjs).
AngularJS
AngularJS is a very useful framework that works using MVC patterns:
https://angularjs.org/
With this framework you process the data and do all the tough work with JS and then inject that data directly to the HTML.
You should take a look, although it's a little bit hard at the beginning.
Html Templates based frameworks, like Backbone
Backbone is another MVC js framework and it uses HTML templates to maintain html and js separated. You create JS classes which have a 'render' function, that paints the data (usually using templates).
http://backbonejs.org/
Of course, there are many other frameworks and ways to do it, but you could start by checking this frameworks (I especially recommend angularjs!)
Good luck :>
AngularJs is MV* framework.
TodoMVC shows you the known MV* framework through a todo list application.
It covers a full bundle to make a frontend app, server-side is using to do REST.
Basically, an admin panel is a good place to use these frameworks.
If you simply want to separate html from js, you use a template engine.
Hogan shows you how a javascript template engine works.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How can I start in BackboneJS, if I have a jQuery background?
If I am familiar with developing client-side applications in jQuery, but now I want to start with BackboneJS. So can you describe the pattern or model(paradigm) which is necessary ?
Below are some questions that might help you make an answer:
How can I architect and design client-side web applications in terms of JS?
What are the Do's & Dont's?
Is there any server side restrictions for which I have to pay more attention?
I am not seeking for a detailed comparison between jQuery and BackboneJS. I just want to start with Backbone and want to build and think any application in terms of architectural design.
Here is what I find most useful for up and running with backbone.js: Lynda.com Up and running with Backbone.js with Joseph LeBlanc
I think this is the best way to get started with backbone.js for one who has previous experience in Javascript/jQuery. The duration of the course is 1h33m. And here are the contents:
Backbone helps you separate DOM manipulation from the data powering
your web application. In this course, learn how to use Backbone
models and collections to manage your data, while displaying it
through views. Author Joseph LeBlanc shows you how to use events to
change an application's state and avoid messy nested callback
functions. He explores modifying resources on the server side via
models that reflect the changes in your application, tune your
application's performance, and keep the JavaScript environment clear
of excessive global variables. He also covers supplementary tools
based on Backbone that provide additional functionality.
Topics include:
What is Backbone.js?
Starting a node server
Building routes
Creating views
Reusing views and building view templates
Defining models
Loading remote data
Organizing collections
Adding and removing models
Saving and deleting data
Bootstrapping data
Finding Backbone resources
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Are there any IDE's that allow building of web pages / user interface using javascript frameworks such as JQuery in a WYSIWYG manner?
For example, similar to how Dreamweaver allows you to build HTML pages or NetBeans allows you to graphically design Java applications, Flash Builder can graphically design flash applications.
I would think by now there is something that would let you plug in a javascript framework such as JQuery/JQueryUI or YUI or Prototype, etc. and for example drag in a JQueryUI styled button and position it and size it. Throw on some JQuery fields or a datagrid?
Update:
I have found a couple, so I am sure there must be more:
Sencha Ext Designer (commercial) -- supports the ext js framework, JQuery/Prototype and others.
Maquetta (open source) -- supports Dojo, some Jquery/YUI
Wakanda (open source) -- very interesting, looks like their own JS framework. May require the use of their back-end server for db, etc.?
For jQuery UI
IxEdit is a JavaScript-based interaction design tool
This works with jQuery Mobile only: RIB
Dreamweaver 5.5 allows you to access to all jQuery library features.
There is Alpha Five as well, but this is only applicable if you are building a database application. Wicked product.
Wakanda v1 is out (beta phase is over).
Codiqa (https://codiqa.com/) a SAAS GUI builder, HTML5/jQuery UI.
To create a GUI with jQuery UI widgets you can take a look here: http://umyproto.com.
Widgets are placed in the page by drag and drop, also you can write JavaScript for events, and finally you will have a bunch of HTML files which you can use in your code of an application.
it's really exciting, try it - you'll find a lot more for you.
There's Google's GWT Designer (for GWT) and Atlas (for Cappuccino). Simpler, more Web-centric UI frameworks don't really lend themselves to a GUI designer, in my opinion, but some apps probably try to do it anyway.
Hey have you listen about linb visualjs. it works great with all server side languages with over 40 components with drag and drop and it is open source also with a good example book.
but you must know how to use JSON because it is totally based on JSON.
But good news is JSON is nothing but Javascript Array.