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.
Related
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 1 year ago.
Improve this question
I hope this doesn't come off like too strange a question, but I'm relatively new to Django specifically. I currently have a website going using Heroku and Django and I would like to post a bunch of mini-projects and such I make there. One of the ones I want to do is a text-based adventure. I'm relatively proficient in Python and Javascript individually and have built similar things in both, however I'm having trouble thinking how best to translate this into the Django framework.
Currently on my website I have a bunch of pages just for things like articles and written pieces. All of that is working fine and I've even added a mini CMS to the backend and that all works alright. However most of that was either building stuff entirely in backend, or entirely in frontend and then just doing a data linkage. There's no real python code going on in the backend outside of constructing the views and models etc. If I was to build this in Javascript I would likely just hardcode a lot of the writing for a text-based game, likewise with Python, however I feel with Django and a linked Postgres DB there's potential to make it more dynamic and less hard coded using this, but I can't quite figure out which is best.
My question based on this is: should I construct the game entirely in javascript which is just served to the webpage and then update the view using POST requests and a data table, or is there a way to create a python script which integrates with the web page a bit more effectively. I suppose the question is really more is it better to build the game in front-end or back-end, as I can't see a particularly effective way of dividing it across both?
You have to ask yourself about what data does the game needs from the backend (Django and Postgres)? Be clear and specific about what data and when that data need to be in the game frontend (Javascript)?
With that said, one way to approach this is to have the game written in a pure frontend and will be cleaner to be written in javascript. It should focus on the game logic and gameplay.
Seeding Initial Game Data
If you're very clear with what you need on the game (i.e. frontend) during the initial loading, then you can consider feeding all those data during the initial page load. (more detail: https://stackoverflow.com/a/298793/764592)
Subsequent Data
The other data from the backend which cannot be determined after the initial load will have to be requested via XMLHttpRequest to a separate Django views which returns the data only (either in JSON/XML/etc).
In those requests, you need to make sure if the backend logic does the necessary validation as well as the frontend logic. If you find that there is a duplication in the frontend and backend logic, do consider move that logic in the backend, and have the frontend call the backend instead.
Make sure you are clear with the responsibility of each backend and frontend.
The game runs on Javascript, and the backend stored data is validated in the Django.
Note: The above is just one way you can deal with it in a clear separation of responsibility. But if your game is extremely simple, you can even consider do everything in Django level without Javascript. Or Everything in Javascript without Django at all if no database/server logic required.
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 wrote an application which connects to a MySQL database and queries/adds/deletes data in Qt Framework. I want to convert to a web application run inside a browser. I have some experience in PHP and I could code the whole app in it, but I have a problem: I would be forced to reload the page every time when I want to do something with the database. I want to make something like Facebook/GMail/Facebook Messenger where accessing a database is achieved without reloading the whole page. This is the part which I never done before.
I have some questions about this:
What are the JavaScript libraries out there which I could use?
What is the appropriate way to do this: create a backend which is between the web app and the database, or connect to the database directly?
I don't necessarily need to stick to that languages, I'm open to new technologies, programming languages.
Edit:
Based on suggestions and my own research I found two technologies which I think I could use: AJAX and PHP(thanks to Hugo Dias) or NodeJS. I didn't wrote any code yet, so which of them would be better for my app? A little more information: this app will used by only the small number of users at the same time, like max 10.
You need to use a web server, for eg. Apache Tomcat. If you want to keep your code in c++, you could convert it into a CGI. Otherwise, you can use java servlets or JSP along with JDBC. You can set it up so that when a button is clicked the CGI script is triggered and the database queries are run.
Short answer:
Yes,there are libraries that helps you with that.
JQuery and PrototypeJS are some of them.
There are some ways of do this, but in any way,you need of a Backend. It's inherent in architecture of Web(Client-Server).
Long answer:
Yes,there are ways of do that. What you're looking for is called AJAX(and stands for Asynchronous JavaScript and XML).
AJAX is a technics that gathers some technologies like XHR and Javascript, mainly.
It allows you work with asynchronous requests,what basically lets you update your page without reload it.
You'll find extensive documentation here about it,and here a simple example with PHP.
The architecture of App is of your choice. Under the Client-Server architecture,you can apply what is best for you,since a monolithic system until a MVC or MVVM pattern.
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 working to a project and my aim is to create an html page to view the train/bus/tram timeboards.
So there is one html page for back-office(for the company) and one page for front-office(for the customers).
The company wants to change files in the page (pdf/links that can be viewed inpage) from back-office.
How can i manage the informations between back-office and front-office by using some simple stuff/programming languages?
Anyone has an idea?
Substantially I want to do something like this for front-office view:
http://codepen.io/anon/pen/NGxrQp <--Check this
OR
http://jsbin.com/mawevuwi/1#tab4
And then something more simple for back-office.
PS: I'm new at stackoverflow and sorry for my bad english explanation.
A back-office should be able to add, edit or delete content. Therefor you should use dynamic webpages, not static. You can use a database to store values. Make the front-office read-only and you're done.
You could also use a Content Management System (CMS) like WordPress.
Some more info:
A static webpage only shows what's in the files. A dynamic webpage could show you generated data or data not in the file itself but from a database for example. Databases use SQL (Structured Query Language). The 4 operations are abbreviated as CRUD:
Create
Read
Update
Delete
I recommand you start learning SQL & PHP if you want to continue with this. Other languages (rather than PHP) are possible.
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 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.