I want to build an application which contains a basic menu (with, lets say 10 buttons), each button is a subject in my girlfriend's psychology course. when i click a button, i will be transfer to the specific subject's menu. (so i have 10 sub-menus like this).
In each sub menu, i can press buttons as well, but this time i wil get some sentences which i saved in mySql data base.
I know how to build the most of the server side part using spring (i know how to build the controllers and service layer) hibernate part (i know how to build the domains and DAO layer),
My problem is, that i don't know if i should use html+css+java script in order to build the menus and configure the functionality and communication between the controller and the client, or maybe should i use Jsp+Jstl?
Sorry for my lack of knowledge, i know this is quiet fundamental..
by using jstl tags you can build
like
<c:out value="${name}"/>
Related
I'm an android developer and about two years and recently I've been thinking about building web applications. So I started researching about spring boot and everything is great. Then, I came across this thing called template engines (thymeleaf) which by definition separate your code from presentation.
What is confusing me is how can a backend server have html? should the presentation be handled by html, css and javascript in the front end? I even saw tutorials where they actually type in html code in their controller as return values.
My understanding is that the backend server exposes APIs for the frontend to use by using AJAX and the frontend will manipulate this data and present the information on the screen, why would a backend provide html code?
THank you
the frontend will manipulate this data
What front end? You mean the JavaScript code in the HTML page? Where did that come from? Oh yeah, the server.
It is the server that serves the HTML pages to the client, as well as any .js and .css files.
The server could provide static pages, and anything dynamic is handled by JavaScript. Or, the server could dynamically build the HTML page, using ... you guessed it ... a template engine.
You generally don't want JavaScript to build the page initially, just to use JavaScript for handling any dynamic behavior. Some pages don't even need any dynamic behavior.
Unless of course you're thinking about single-page applications (SPA), where there is only one root HTML page, and everything else is built client-side with JavaScript and AJAX calls, but most web applications are not SPAs.
Thymeleaf replaces JSP by providing HTML pages using a template engine. The controller requests the HTML file and Spring Boot provides that template after building it using the Model provided.
Thymeleaf is great because it allows you to rebuild templates on the fly. Lets say for example you're showing a users points to them on the front end, but maybe the points increase or decrease.
What you can do is build the template in the background using a Model. The Model reference is magically provided to the template provided which parses it.
#RequestMapping(...)
public String request(Model model) {
model.put("points", 5);
return "my-template.html"
}
Then use the Thymeleaf language to provide your object to the HTML file to be processed in the engine during runtime.
<html..>
<head>...</head>
<body>
<h1 th:text="${points}"></h1>
</html>
Spring Boots Template engine will build this in the background and present it to the user, but it will show the actual points to the end user! Hope this helps a tiny bit.
I know this question has been answered pretty effectively so far, but I want to add my two cents in as I work with Thymeleaf often.
The easiest way to think about a template engine is that it allows some dynamic development of html based on information passed to it by the controller method. This allows you to put logic in that normally wouldn't exist, or say display a certain section if a user is perhaps logged into admin.
If web pages were houses, html is the frame, css is the walls, Javascript is the lights and electricity, and a template engine would pretty much just be the architect designing the plans on the fly before the frame was built based on desires of the buyer of the house (user inputs).
OK, newer Apps and websites may just load/boot/open once and then pull or push data via AJAX requests, this is good, it saves traffic and it is fast.
But it has not always been like this and some Frameworks still don't build everything on small requests. Spring in Java or Symfony in PHP are MVC Frameworks and use template engines to build pages. This may sound a little outdated but there is still a lot of websites using this.
And if you build a web app for a customer with slow PCs or other devices and the page contents are performance heavy you might want to do as much work as possible on the server so that the user does not have to wait for long. And also you can cache the rendered pages. There is even server side rendering of react pages to e.g. make the initial page load faster...
With Java and Spring I did just use JSP I don't know thymeleaf. Just use what you like and maybe what is most supported/documented.
And building websites like this does not mean you cannot use AJAX, but if you use templates you need to think about what makes sense.
What is confusing me is how can a backend server have html?
The "back end" must have HTML, because that's what's delivered to, and rendered by, the client.
It may just be that the back end "server" is just a CDN delivering, say, an HTML/JS SPA, but there's still something delivering content to the browser.
That said: server-side rendering is still a thing, and has had a resurgence lately--a React app may have its initial rendering done on the server so again the client gets a page rendered with both HTML and associated data, and then starts acting like a normal SPA.
My understanding is that the backend server exposes APIs for the frontend to use by using AJAX and the frontend will manipulate this data and present the information on the screen, why would a backend provide html code?
Because something needs to run the JS to access those APIs.
Some history:
Browsers used to suck. JS used to be a neat add-on, sites were relatively static, and essentially all rendering was done on the server. The back end would get data from wherever it got data from and generate complete HTML pages, and there was little happening on the client side other than some form fields, maybe some validation, and that was about the extent of it.
I am integrating existing Django project with another application(trello) via client side script.
In the template, I have a button that triggers a javascript that creates a task in trello.
However, I do not want to create this task more than one time so I am thinking what option should I choose to validate it .
1-To trigger update of the field my Django project
2-To try to read the data from the trello application to check if the id already exists.
Both approaches should work but now I am wondering maybe there some standard approach from Django point of view for this problem?
I had slow ignition . The solution is simple. If you do search for the implementation of "like" button in Django it will achieve the same goal exactly and this topic was discussed in other questions .Django Like Button
For our single page app, instead of having a set of defined views and viewmodels that live on the server as .html and .js files, we need to build a system where the views and viewmodels are created in “real-time.”
This will be an intranet app and we want end-users to be able to define what they see and use in the app as they are using the app. For example, end-user A creates view1, view2, and view3, while end-user B chooses to create view4 and view5, and so forth. These views are then created in the browser session and saved somehow for the user for the next time they use the app.
They can name these views whatever they want (e.g., dashboard 1, plant view 2, etc.), and then they can select one or more “widgets” to be on each view. A “widget” would be a contain set of JavaScript/HTML/CSS code, similar to user controls in the web forms world, and would perform its specific function and be able to be draggable and resizable. Of course, all the widgets that the user has added to each view will be saved for subsequent uses.
So, each time end-user A opens the app, they’ll see their 3 views as tabs across the top (named whatever they named them when the views were configured) and they’ll be able to navigate to the view and see and interact with the widgets they chose on each view.
Our app will sort of be like Trello in which the views can be added, updated, deleted, etc. by the end-user and “widgets” can be added to the views dynamically, moved around, deleted, updated, etc., all in a dynamically created way.
In studying SPAs, the views and viewmodels are developed as actual physical files that live on the production web server and provide the functionality intended to all users. But, our SPA needs to be more dynamic in terms of what views/pages are available.
Can Durandal be used is this sort of scenario? If so, any guidance on how to do build such a thing?
Or, is this not possible with Durandal? If so, what’s a better path for us?
As a last resort, would we need to create some sort of html and JavaScript generator that will output files after the user has selected the configured options?
Or?????
Thanks for your help!
durandal is a framework for aiding in creating single page applications (SPAs). SPAs are essentially just a website that feels like a desktop application.
Your only limitations on what you can create are the limitations of the browser.
Anything you can build that runs in a browser.. can be used in durandal.
You can have multiple spas inside of 1 spa.
You can dynamically download css/html/js if you need too.
There are lots of options on how you can structure you application.
There's nothing stopping you doing this I think.
You can have flexible routing as you define the routes on Durandal start-up so you could use the saved view data to help construct this. But I have a feeling you basically want a shell that other mini applications sit in? Are your views/widgets completely separate to the main application? If so, you might not really need custom routing.
I was working on something similar. I was using iframes to host the applications and the user was able to move them around. I didn't get as far as persisting what the user had laid out though.
In my application i have a option of language selection.
When I select an option, the entire application language should be changed.
I have already tried using Google and Microsoft api but guess that is paid. Is there any free api using javascript that can help me regarding this problem.
This post might be what you are looking for. They are talking about:
A wordpress, change language plugin widget.
A jQuery handler to change language by directing to another url.
Have a nice day!
Two options:
#1
Have a look here. Click "Options" top right and select another langauges. Open a datebox plugin widget and it will be in the language you specified.
I like the way it's done using Crowdin, although you will end up with all your text in .js files. If you check out one of the languages sample files this will be a lot of meat to load if your site becomes more complex.
#2
Do this server side. I'm (using Coldfusion) loading a langauge object on first page load and cache this until the user selects a new language. My langauge object is about 60k with 2000 entries. You could also send this to the page from server via json and store it in the page, then you could reference it from Jquery/Javascript.
I will probably end up trying to switch from server side to using the first approach and will try to see if I can split up my language .js files according to JQM page and then load them together with require, which would mean only a few ks per page. If you don't mind having a bunch of langauge files for each language and page, this would probably be the best "Mobile" approach.
I have been working on a spring roo project and I've hit a wall in terms of being able to customize the web page.
The main thing I want to do is be able to dynamically hide certain fields as the client is filling out the web form. I have a drop down list driven by enumerations that has 4 options and a fifth "other" option. If the user selects "other" I want a text box to appear so the user can fill out their own selection.
I was talking to someone and they said "This really depends on the UI you choose. In case of MVC scaffolding you can use javascript to drive these relationships". I am indeed using MVC scaffolding so I guess I have to use javascript. I don't really know that much javascript but the problem lies in that I don't even know where the javascript code would go in term of my project files. And then the second problem of course is how to use javascript to hide the fields dynamically in Spring.
Thanks
Spring MVC scaffolding uses dojo by default as its javascript framework.
You are able to use standard dojo functions when you attach events to DOM elements. You can simply use the <script/> tag to contain your own custom javascript methods within a generated .jspx page.
Additionally, you can integrate another existing javascript framework such as jQuery. At the moment you can include jQuery manually, but it can possibly be expected in a future Spring Roo version.
You can play safe with dojo for now.