I have to optimize a Spring / Hibernate project (which was created without keeping mobile devices in mind) to be viewed in mobile devices such as iphone.
This project uses Spring MVC tags in the front end. Is it possible to attach a mobile friendly renderer to Spring MVC? (it is possible in JSF)
Otherwise what are the options available to me?
(My intention is to provide a mobile friendly UI for the existing project without changing the backend)
Spring MVC doesn't have tags for UI components that could be rendered differently. It just has low-level tags to render form fields, and messages.
If you want specific pages for the mobile app, you'll have to tweak the CSS, and/or rewrite the pages. It can help you with its support for themes, but you won't find any magic wand that converts an HTML page and give it mobile-friendly aspect.
Related
I've been studying the difference between single page apps and multi page apps, and I think I have good view how they differ. Single page app starts by loading a single html page, and then it does never again fully refresh the page or override the original, unless the application is otherwise refreshed (browser refresh etc.) For example, the angularJS seed project: angular-seed has an index.html file. This file is the single page, that the server would send to front-end, and after that, all the other (possible) pages will be send asynchronously under the hood by using AJAX. So if you create app just with the angularjs seed, it is always going to be just a SPA application, am I right?
How in practice would you then create a multipage application with angularjs? Wouldn't you need multiple angularJS applications then? Would you have to have a separate routing for each of those angularJS applications? And why would one want to make multipage application for angularJS? Because one could always use the first index.html just as a shell, without real content, and then have separate container-pages for different pages. Could it be said that angularJS multipage app would be an application, that would just contain many SPA angularJS applications? In SPA, can you use the browsers' back-button, in order to go back to last view?
Yes, you've got the idea of SPA and MPA right.
Angular.js enables you to create SPAs but does not force you. In an MPA, I would not speak of multiple Angular applications since you would have just spread Angular.js modules over multiple HTML pages. The page flow or routing logic would then be in Angular.js controllers, in plain hyperlinks or in the backend on the server.
There might be reasons to not put a whole application under Angular.js. Maybe the authentication part of a web application might be Held separately for some reasons...
In SPAs you definitely can use the browser's back button. You just have to implement that somehow. Twitter solves this Problem by coding the state of its web application into the URL - if you're using Twitter, you might have noticed the symbols (#!) in the address bar.
I am using Spring 4 MVC to display serve my web page. I now want to display the same content with different layouts wrapped around the body/content depending on the current HttpServletRequest (e.g. request.getServerName()). This means https://page1.test/page.html will be mapped to the same controller as https://page2.test/page.html and returns the same content depending on the controller logic, but page1.test draws for example a different header and footer.
As far as I know, Spring MVC is not capable of doing this. I am now planing to use Apache Tiles 3 or JSP 2.0 tags to do this. Is there any best practice and how can I do this (Spring Java Config is preferred)?
You should take a read of http://tech.finn.no/2012/07/25/the-ultimate-view-tiles-3/ just to see how far you can push Tiles-3
Indeed it can solve what you're after.
(That blog website has just been migrated from wordpress to github pages so some of the code snippets require horizontal scrolling, we're still cleaning these small formatting issues up so please excuse them)
We are using Broadleaf Commerce Frameworks for our E-Commerce Application. I just want to know,
How this frameworks is compitable to Mobile Interface? If it is well compitable, I need to know how can we configure the same ?
Broadleaf Commerce is a server-side framework, but your question is more about frontend design. As far as mobile interfaces go, Broadleaf has no problem dealing with responsive pages or something like Spring Mobile. The only opinion Broadleaf makes about frontend technologies is using Thymeleaf as the templating language as opposed to something like JSP.
The Demo Site heat clinic out of the box is using a responsive design with media queries to modify CSS properties and resize various elements. We would recommend doing your templates this way rather than creating separate mobile templates as the continued maintenance cost of having your template code in 2 places becomes very high.
We are trying to create a portal type application with multiple / independent "sub-apps". Assuming that all sub-apps are written in Angular what is a good pattern to achieve the following goals.
Each app can be developed and deployed independent of each other.
They share a common authentication service, they can share common libraries (directives, filters etc).
Only one app will be visible and active at any given time. The scope of each sub-app is isolated from each other.
When the users goes between the sub-apps, the state is maintained as long as the user does not refresh the page or visit another static link. (I think this is built into Angular and no special effort maybe needed)
Each sub-app will have more than one views (it will have its own menu). There will be a top menu based on what sub-apps are available. Ideally the top menu is dynamically build based on what sub-apps are deployed. Maybe there is a server side component to this (the server detects the folder structure etc and determines what apps are deployed and injects the necessary js code into the page).
Given the fact that AngularJs does not have multi-level view structure, I was thinking of using multiple ng-app declarations on different divs and then using $window scope to store the key of the active app and hide the ones which are not active.
There is no easy answer to your (rather open) question, but regarding the $route and ngView limitations, I have been having great success employing a technique derived from this: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
This is something that I also have been thinking of trying to implement. While I don't have a complete working solution, I believe that this type of portal app would consist of multiple angular apps on the same page.
The portal app would be the traditional ng-app directive on the main page and the "portlets" would be dynamically created and manually bootstrapped angular apps on a sub view div. You can share data, state, authentication, personalization, etc from injecting the portal services (contained in their own module) that provide these features into the manually bootstrapped portlet apps.
The tricky part is how the portal app would discover the portlet apps and serve up their angular modules knowing that these apps would be independently deployed web apps with their own urls.
I still have some questions around if the service data would be common between the apps or if you would need to try and leverage HTML5 local storage via the portal service (like a data manager).
I am currently looking at implementing YUI 3.5 pr1 (and then the final version when released) in a fairly large application.
The backend is built with PHP and MySQL using a MVC structure with a front controller pattern. By it self, the server can process URLs (http://mysite.com/module/submodule/option) etc and return a fully rendered page.
I would like to implement the App Framework in YUI across the whole application so that javascript-enabled browser will effectively have something like a 1-page app with history management avaliable.
I am currently looking at the app framework docs on the staging site. Unfortunately, the docs aren't complete (in particular sections on routing coordination with server and progressively enhanced apps).
In any case, if a user visits http://mysite.com/modules/submodule/option with an HTML4 browser (all versions of IE), and he has javascript enabled, he would need to be redirected to http://mysite.com/#/modules/submodule/option.
Is this something that's built into the App Framework? I would prefer to utilise a solution that does not require the whole page to be rendered out and then redirected to the hashtaged URL and then rerendered again.
Finally, I have watched the intro video on the App Framework and it mentioned that they are using the Handlebars template engine. I am using Twig as my template engine on the server side. Is it possible to use an alternative template engine with the app framework? In particular the twig js engine.