What is the right method to add text areas to Django? - django-forms

I have written python code that analyses two text sources and compares them.
I'd like to implement this dynamically via two text boxes that a user could either type into or manually upload. I have already begun coding this using HTML. Would it be better to implement a widget or the models instead to make the text area boxes?
Edit:
I wrote this question when I was just figuring Django out, so forgive me if it sounds confusing. But everyone starts somewhere. I'm unable to delete the question as contributions have been made already. YouTube courses proved helpful in learning the basics, if any beginners stumble upon this.

You use a form object. Django has form objects (https://docs.djangoproject.com/en/2.0/topics/forms) that take a model and translate it into html elements. So I guess in a way, you implement the model but I want to stress that that's not actually what's happening from a technical standpoint. A better way to say it is that you're implementing forms. The reason I stress this so much is so that you understand what's really going on so that you don't have misunderstandings that end up costing you in code clarity and readability.
So to answer your question, you can implement django forms to do this very easily. The way you implement it depends on your models and how they are designed since the forms use the models to create the right html form elements. If you're dealing with one model that will be instantiated by the form input, create a model form. This will take the input from the form and create your model instance. If you're dealing with one form that uses multiple models, then use a generic form. In this case, you will have to write your own save method that does the actual logic of the form.
One other thing to add... No matter what, your end result will always be a widget on the HTML in the end. Django forms translate a model class into a form element with input elements. If you didn't use Django forms, you would still do the translating, but you would have to do it from scratch.
I hope this helps and that I correctly understood your question.

Related

Combining Require.js, Backbone.js and a server side MVC framework

We're actually planning a really complex web application. At least for my own standards.
In the past we have always been using a combination of a server side MVC Framework (Codeigniter) and client side functionality (jQuery and plugins). We have simply written inline javascript code in our views. This worked as expected, but of course with several disadvantages:
no caching
duplicated js code
maintainability issues
...
My main goal now is to organize the client side code in an efficient and easily maintainable way. But I want to stay with the server side MVC because of the existing know how and some existing interfaces. Furthermore I want to reduce complex DOM manipulation with jQuery and "spaghetti code".
Now I thought about a combination of Backbone.js and Require.js but I really can't find a tutorial or any solid description about how to combine them with a server side MVC.
Is it even recommended?
In my old apps I got a file structure like this:
application (CodeIgniter)
assets
js
css
imgs
Are there any ideas or best practices?
Thank you!
To add to mexique1's advice, it might be worth looking at the backbone-boilerplate project. It should provide you best-practice solutions for many of the problems you're currently considering, such as the combination of require and backbone, the organisation of the client-side of your project, and the reduction of complex DOM manipulation (see templating).
The challenge, as you anticipate, will most likely be in combining the boilerplate approach with the approach you're used to. However, it will almost certainly be worth the effort since it should provide you a solid foundation for this and future projects.
I think Backbone is a good choice, and Require is not mandatory here.
Require will just help you organize your source code and maybe improve performance. I think you can start right away with Backbone, which will be the thing you are going to use most, and add Require later.
Regarding Backbone, yes it's easy to use to use its Model with an existing MVC application, provided it returns JSON. To load your existing data you will want to use the fetch method combined to url to adapt to your existing code, or your own method.
Generally, think about which models are displayed in which views. Backbone helps you think this way : I'm displaying Models represented as JSON data in Views which are made by HTML.
Also, for the view layer, it's very easy to reuse your existing HTML, because views are not tied to anything, no JavaScript templating or nothing.
Simple example :
<div id="user">
<span class="name">John</span>
</div>
var UserView = Backbone.View.extend({
render: function() {
this.$el('.name').html(this.model.get('name'));
}
});
var userView = new UserView({el: $('#user')[0], model: ...});
In this example the #user div reflects the state of a User model, with its name.
Also check the Todo App example in Backbone.

Spring Views - Combining elements into views

Currently, in our deployment we have a abstract type Component which represents a part of our Page, basically an element such as a Question, which can have multiple choice, a text box or any other form of answering it, or a Video that users can play, basically a shard of a page that is interchangeable, basically, our design was to have a specific area in our website which would be rendered through a list of Components, we tried at first to have each "Page" object have a List of Components, and each Component would have a method render that would return a Spring View, we thought we could iterate over the list and somehow mash the views together.
We also tried using XSTLViews with no more success, it seems to be more of a design problem and our abuse of the way Spring MVC should be used.
We will really be glad to receive any advice/tips/corrections about how to do it right and maybe some corrections about misconceptions we might have.
It sounds like you're more than half way to a design that uses AJAX to build your page. You're trying to mash up a bunch of Components into one request. What if you returned a container page which then requested/inserted a block of html for each URL it was given a render time. Each of these URLs would refer to a single component. It might be a performance hit if you are including a lot of these Components, but it seems to fit the design.

How do you design a text-based view using Ember.js or some other MVC javascript framework?

I have an homemade javascript which, among other things, do some kind of text-formatting work in order to emulate a retro text-based game:
When developing it, i tried to stick close to an MVC model, and this is what i did:
The data model basically consists of a list of objects mapping strings to very specific locations in the display, like this
[{
"value":"Hello!",
"color":"blue",
"row":1,
"column":13
},
{
"value":"What is your quest ?",
"color":"red",
"row":5,
"column":10
},
/* ... some other data */]
Then my view consists of a simple <pre> tag. When my controller draws the model on the view, it iterates through each string-location pair and create a <span> for each one that is appended to the <pre> tag. To keep the formatting consistent, it also adds "blanck" span each time it is needed.
<pre>
<span> </span><span class="blue">Hello!</span><span> </span><br>
<!-- ... other lines of the scene-->
</pre>
It's pretty simple, but it worked great until i had to dynamically change a span text value, without redrawing the whole scene each time.
So i took a look on the internet and realized that Ember.js existed, it really seems to be exactly what i could use to improve my whole code.
Now, i tried to redesign it using Ember.js, but as i don't fully understand yet its features i ran into a problem:
How do you represent a 'text-based' view into an Ember.js handlebar template ?
What am i missing here?
My data model contains both the value and the position in the display, so i don't exactly see how handlebars template could fit my needs. Or perhaps dynamically generating the template is an option ?
What do you think ?
Am I choosing the wrong framework or misunderstanding its use? is it my original MVC design that is wrong ? Changing the data model for something completely different is not an option i can easily consider as it would impact everything.
Do you have any ideas on how this could be implemented using Ember or some other framework?
Any advice will be appreciated :)
I made a rudimentary example on jsfiddle on how you could use ember for this.
Each row is an object and we have an ArrayProxy holding such objects. Thus if we have 10 rows, we have 10 row objects.
The view is binding one output line per row object.
Enjoy the flying bird:
http://jsfiddle.net/algesten/YMrW3/2/
Edit: Better to {{#if}} away empty rows as pointed out by ud3323:
http://jsfiddle.net/ud3323/92b24/

Chose implementation of the view controller of my non anemic domain model

The title might not be easy to understand but it seems to me it is a basic design question when dealing with smart models.
I have a hierarchy of model objects that represent different types of document.
Say I have a view with different buttons, each one opens the document of the underlying object model. When I click on a button I have to display a view whose controller implementation depends only on the underlying model object class. How do I get this implementation ?
(It could be in the implementation of the button but then the question becomes how do I get the implementation of the button)
Should it be a factory that takes as an input the type of my model and returns my view controller ? Should it be my model that knows how to build its controller (seems dirty nè ?) ? Should I use composition ? Something else ?
I hope I am being clear enough. I am a bit struggling with this !
Your question is too abstract to give a specific advice. MVC pattern appears in many forms and in many technologies. For a web page it will have one shape, for a WPF app it will have another. In general there are both "view-first" and "controller-first" approaches. You can start with any one and see if it comes natural for your problem, if not -- refactor.
One other area you can explore is the area of modern composite application frameworks which provide out-of-the-box modular MVC\MVVM solutions. If you're writing for web, read about ASP.NET MVC and its best practices. If you're writing for WPF, read about MVVM approach and take a look at Prism, for example. You might find that your problem is already solved by existing tools.

MVC3, custom object lists and searching

I'm new to MVC3 (and MVC in general) and looking for a bit of advice. Pointing me in the direction of some good articles or tutorials would be good enough I think. I'm a bit familiar with the concept of MVC, and I've been a c# programmer (hobbyist and partly professional) for a while now.
The issue I have is that I have an object (call it "Game"), which has a List<T> as a property (call T "Player"), and I want the user to "select" the player to add them to the Game.
All players would be managed in another part of the application, so there is no need to think about "managing" the master player pool at this point.
I'm looking for a best practice for:
adding custom objects to a list that of n length while on a page.
Searching for and selecting a custom object in the first place.
I can do the standard pages for the database access so that's not a problem. In asp I would have just done something like a wizard and managed everything through postback on the page, but I want to try and keep to best practice where i can for this project.
Any pointers welcome, also looking for some good physical books to buy on MVC.
If I understand you correctly you want two elements within the page, a player search (over all players) and a list of players already added to the game.
For the player search you want to use a bit of jQuery to hook up an actionResult that returns a JSON result of your player results. You can then display these results without having to leave the page, in appearance much like an AJAX post in webforms.
You have more options for how you add the player to the game, depending on if you want to add more than one at once, or want a backout stage (so you can "add" players and then cancel out and they won't be added).
the option I think would give the most seamless interface would be a jQuery/javascript call to an action method which datawise adds your player to the game, and use jQuery to add the element to your players in the game on the page.
For the adding of a player in your controller you could return a bool in a JSON result, just you have confirmation that the player was successfully added to the list.
For reference: This is quite an old article but highlights the power of working with jQuery and MVC quite nicely I think http://andreasohlund.net/2008/12/21/asp-net-mvc-jquery-true/

Resources