I am starting a new web app as a hobby and had a difficulty with the architecture.
The frond end will be HTML and some JavaScript for requests.
And the backend ,will be implemented in Java and using Spring Framework.
Lets say for example a library page where the user can view his books and his personal information.
Personal Info
-------------
Book 1
Book 2
Book 3
I want to implement this features with 2 REST services ,one for the personal information ,and another for the books that the person has.
Ex .
www.mybib.org/users/123/
www.mybib.org/users/123/books/
The thing is ,when a user first request the home page to view his books and his personal information ,how to compose this page.
Use a servlet / controller who replicate the code of the 2 REST
services and then redirect to a JSP to format a HTML and JavaScript.
Once the first load is done, for each update on the page use the Rest
services .I think this is actually very bad design.
From a servler / controller call the REST services and then call JSP
in order to compose a HTML and JavaScript output.Then for each update
call the REST services.
From a servlet / controller return a HTML layout and make the
javascript make 2 Ajax request when loading the page.
...or something else.
As you can see I am pretty new to this and in fact this is actually my first attemp to biuld a very simple web application.
The easiest way is to simply have some kind of IndexController which after, fetching the current users list of books renders the page right away, no extra AJAXy REST calls needed.
If you are new to all of this, that's how I would start out. You may also want to have a look at the code in the Spring 'petclinic' sample application: https://src.springframework.org/svn/spring-samples/petclinic
If you must use Ajax, I'd still have a IndexController and an index.jsp that renders the initial page. After that you javascript code can make the REST calls, for which you implement a different controller.
Related
I've a web application that uses FreeMarker templates and tiles to do the View job in the MVC world. So upon my request to the application, say /load.do I would like to introduce an intermediate page that will have a loader icon just to indicate the page is being loaded on the subsequent request, which is not known to the user.
So ultimately what I'm achieving is a better user experience and also if used within framework (the iFrames) this comes handy to show the loader icon when there is a new request that is happening.
Can someone point me to the right method I can use here ?
This is possible using spring mvc.
You need to create something like a WaitController. On user submit , this controller will be called. This can trigger your original request in background and take a reference(UUID) for the call and will render a wait page having the reference id of the original request set in model. Wait page can either trigger immediately the main controller using reference id or can poll the reference id on regular intervals or use web socket to know the availability of results. Once results are ready, it should redirect user to the actual result page.
I am a complete newbie to AngularJS. I want to check the feasibility of using it in my new Project which is a web application. I already have a few pages created in project using Struts2 Spring and hibernate. To convert these following are points I understand:
Convert server side API to REST style which returns JSON data
Question: Can I use dynamic HTML to load using AngularJS. I guess yes. not sure how?
Currently I use velocity Templates on server side to populate data in HTML templates and send it as response in AJAX? What would change if i try to use AngularJS?
I have a landing page which is used to show some images and data associated with it which is stored in DB. How can I show it using AngularJS?
Question: Shall I load the HTML template which contains only one div tag when I hit website URL(mysite.com) and then fire AJAX requests to load the dynamic HTML?
If I use AndularJS does it invalidate use of Struts2 altogether if I choose to implement my Data API as REST with JSON? I guess not as I will still need to load dynamic HTML views which will be generated on Server correct?
How to maintain HTTP session state on server side if I use REST data API with AngularJS on client?
I know I can search and read about answers to above questions on net somewhere. I just need them at one place so that I can carry discussion and other questions that arise from it.
I may answer some of your questions:
1) Convert server side API to REST style which returns JSON data
Yes
Question : Can I use dynamic HTML to load using AngularJS. I guess
yes. not sure how?
Currently I use velocity Templates on server side to populate data in HTML templates and send it as response in AJAX? What would change
if i try to use AngularJS?
If I understood you right, you want to generate templates on server-side. In this case - you just don't need AngularJs - your views are prepopulated on server and browser recieves static content (from client-side point of view). If you want to use AngularJs, then your templates will become static content (from server-side point of view) and they will be populated by angular via REST services.
2) I have a landing page which is used to show some images and data
associated with it which is stored in DB. How can I show it using
AngularJS?
Question : Shall I load the HTML template which contains
only one div tag when I hit website URL(mysite.com) and then fire AJAX
requests to load the dynamic HTML?
Not exactly. One div would be enough for jQuery-based approuch (you would use something like $.ajax and then appended data in imperative way). In case of Angular you will need to return template. It may look like this:
<ul ng-controller="MyCtrl">
<li ng-repeat="item in data">
<img ng-src="item.image.src">
<span>{{item.data.someTextProperty}}</span>
</li>
</ul>
And some AngularJs controller that will fire request to REST service (via your AngularJs service, probably) and autmatically fill template with results
function MyCtrl($scope, $http) {
$http.get('/rest/data').success(function(result) {
$scope.data = result;
});
}
3) If I use AndularJS does it invalidate use of Struts2 altogether if
I choose to implement my Data API as REST with JSON? I guess not as I
will still need to load dynamic HTML views which will be generated on
Server correct?
I think it will only invalidate use of View of MVC in Struts, since AngularJS will just replace it. Also it will make you to use something like RESTful controllers (not quite familliar with Struts, but I think there is something like this)
4) How to maintain HTTP session state on server side if I use REST
data API with AngularJS on client?
This is not short answer, but basically there is following pattern. AngualrJs provides http interceptors, that may intercept requests and responses. If response with code 401 (which is unauthorized) is intercepted, you may provide your user with a login form to restore session and after this action will be completed, retry last request. Also, here you may find another aspect of this question.
I hope my answer helped you.
I am new to JSP/Servlets/MVC and am writing a JSP page (using Servlets and MVC pattern) that displays information about recipies, and want the ability for users to "comment" on it too.
So for the Servlet, on doGet(), it grabs all the required info into a Model POJO and forwards the request on to a JSP View for rendering. That is working just fine.
I'd like the "comment" part to be a separate JSP, so on the RecipeView.jsp I can use to separate these views out. So I've made that, but am now a little stuck. The form in the CommentOnRecipe.jsp posts to a CommentAction servlet that handles the recording of the comment just fine. So when I reload the Recipe page, I can see the comment I just made.
I'd like to:
Reload the page automatically after commenting (no AJAX for now)
Block the user from making more than one comment on each Recipe over a 1 day timeframe (via a Cookie). So I store a cookie indicating the product ID whenever the user makes a comment, so we can check this later? How would it work in a MVC context?
Show a message to the user that they have already commented on the Recipe when they visit one
which they have commented on
I'm confused about using beans/including JSPs etc on how to achieve this.
I know in ASP.NET land, it would be a UseControl that I would place on a page, or in ASP.NET MVC, it would be a PartialView of some sort. I'm just confused with the way this works in a JSP/Servlets/MVC context.
you can use response.sendRedirect() or forward APIs in javax.servlet to redirect to a new page or refresh the same page (redirect to the same page/path so that the beans/data gets refreshed)
about restricting to one comment per day - yes you can use cookie but the problem is that user might use another browser type (chrome, FF, Safari) and will be able to make multiple comments.
Ideally you should store the lastCommentTime in the model/persistent store and tie it to the user information - this way your model object can expose an API that checks the last comment time and returns true/false depending on whether user can comment or not.
You can use this API in your servlet/JSP to show/hide the comment button, for example and also show a message
Greeting to the community. This is my very first question.
I had in mind to add Livezilla live support in my MVC website, but I realised that there are some problems.
First of all, it is written in php and mysql, so is it possible to comply with MVC and sql server?
Does anybody know a similar solution (like livezilla) in my case?
PS. Excuse my poor english...
you could even look into using an iFrame to run livezilla inside of an mvc3 page if you wanted.
or, you could roll your own. if you wanted to try implementing a live response mvc3 page look into jquery and ajax asynchronous calls such as $.post and also look into the extension for controller AsyncController, and [AsyncTimeout(XXX)]. you will also have to read up on sending and receiving json objects in ajax and from a controller to the view.
Simple psuedo:
View:
setTimeOut calls a javascript function every X milliseconds
the javascript function uses json to wrap page data and pass it to the controller inside a $.post() call
Controller:
recieves page data as an model object in a post
determines if page is out of sync or not
returns relevant sync data in a json object back to the view
View:
the same javascript function receives the json object from controller
updates the page based on relevant sync data
Problem solved. I just uploaded the folder given from livezilla in the root folder of my website. Then the only need to met is to have a Mysql server to create the database for livezilla. After that php and mvc runs together with no problem.
Let's say I have an Employee, and for the creation of such employee in my web application I want to follow the next flow.
Create <-> Verify -> Save
In the create page the user can set up a bunch of properties,
In the verify page the user is presented with two options "make changes" and "verify"
In the save page the user is presented with a confirmation page
I have two approaches to this:
Use Javascript to change "action" and "method" of the form.
Handle the logic on the action
(which feels kind of clunky at least
with asp.net mvc)
Which do you prefer ?
Is there a better way to do this?
Pretty easy in ASP.NET MVC. See these posts for guidance:
how to make a wizard with ASP.Net MVC
http://shouldersofgiants.co.uk/Blog/post/2009/09/16/A-RESTful-Wizard-Using-ASPNet-MVCe280a6-Perhaps.aspx
Personally, I would do it as a single GET/POST and utilize some basic jQuery to show/hide DIVs containing the necessary inputs as noted in the first link.
I would do this with routes
GET new to render the create form
POST new to show the verify form
POST create to actually create the resource
Create <-> Verify -> Save
It isn't clunky, Create is Get, verify is post of the same URL. The method that handles the Get and the one that does the post use the Same View, just with different info sent to it.
So for the create the view is instructed to post to the same Url, when u are already to verify it will post to the Save action.
The above works for any non js client. You can then hook some js, so instead of posting the form from Create -> Verify, you would change in the client side. This way it works for both js - non js versions. You can even display the Save confirmation with the same technique if you wanted. Progressive Js.