How to create a GWT page? - html

I have to make a website with different Java-Tasks and informations. The user can join the homepage and can click to different pages. On the Java page he can do some tasks. The website is completely done with HTML. Now i need GWT for the tasks.(multiple choice etc.) This page is easy to make, when i only have this page. But how can i put all these things together. I mean: a homepage and different pages with only html and links and a page which is also linked to all other pages for navigation and is done with gwt for the different tasks. Do i need GWT for all the other pages or only for the task-page? On the other pages there is only text.

You don't need GWT for all the pages, but you can use it.
You can create a GWT project with a Module for the GWT page you want and a static HTML for each one of the HTML pages.
Alternatively, you can build a web application that loads the content of each page dynamically in the same element (e.g. in <div id="content"></div>), based a URL token (e.g. < url >#somepage) triggered by your menu items. You can get the token value in GWT with com.google.gwt.user.client.History.getToken().
Web applications such as Gmail work like that. For your use case, with many static pages (pure HTML), it might seem to be an overkill. But if you are using GWT anyway, I would do it like that. In the long term you don't have to update the menu in each HTML page, as you have a single widget for that. You get scalability and a better project organization.

Related

Is it possible to create dynamic routes in Next Js that can be embedded in external websites using iframes?

I have a Next JS app, where admin users create and manage schedules for their businesses. I want to create a robust way for users to be able to embed a public url from the next js admin app in any external website for their businesses that they might have(eg a wordpress landing page), which displays their specific schedule( A next page that can have any functionality) in their respective landing pages.
I have tried to just link any of my next routes in an external html page using
<iframe src="next app route"></iframe>
I would expect to see that page displayed within the iframe( as it would have looked if I had accessed the url in the browser, but within the constraints of the iframe), but the page doesn't display within the iframe, and I get a blank space. But the same iframe works with a simple ".html" page url that I found randomly.
This related thread suggests that CRA is more suited for this. But I don't really understand how. Especially because each user in my next app, will have a different page that needs to be embedded!

Should every part of a web app be a react component?

I haven't touched React in over 2 years, and a bit confused looking back at my old code. For example, if I were to build an instagram clone, would I utilize html templates and inject javascript as such as
<div id="reactEntry">
Loading ...
</div>
for the login page, profile page, etc.
and use react components for main logic? for example, dynamically rendering posts and comments?
Or would it be smarter to make everything a react component-- login page, profile page, etc.
would it be smarter to make everything a react component-- login page, profile page, etc. - yes. As you don't need to rely much on other libraries and can use routing between pages. Also, there is performance benefit for a fully react app.
Having other components along with react component would not cause any harm as long as you don't dom manipulate the react component.
Or would it be smarter to make everything a react component-- login
page, profile page, etc.
There are benefits of using react components over the traditional multi-page web apps.
Since most react apps are Single Page Applications(SPA), hence they are fetched once, and then virtual dom handles the rendering of various components. This is faster than the tree-based document rendering.
Components are re-usable. Say you need a Document upload form - consisting of a drag and drop file field and an upload button. You could simply create a component, and keep using it at multiple places. All components have their internal logic, which makes it easier to manipulate and define them. Such an approach ensures a consistent app look and facilitates codebase maintenance and growth.
Plugins like react-router can handle page transitions, by using its navigational components. You could do partial renders too, giving you a faster UI/UX experience than rendering the entire pages.

Why symfony2 it rendering the whole page?

I’m working with Symfony2, and I have a base.html.twig view which includes a navbar and a logo. Also I have other views which extend the base.
When I go from one page that extends the base to another one, the whole page is being rendered in Safari even the navbar and the logo, the same when I reload the page.
Firefox works fine.
So, is there any option in symfony2 to force safari browser to reload just what the code says? (I don’t want to ask the user to install or configure anything in his/her computer).
I think I'm looking for something like that (but for Symfony2): Livereload
There are many ways to make an AJAX requests to load only part of the whole page. You can use pure JavaScript or frameworks like jQuery, Dojo, Backbone.js, Ember.js, AngularJS, Spine.js, KnockoutJS, YUI, Batman.js, Closure, Agility.js, Knockback.js, React.JS. You can use any of them. They all contain AJAX-functionality.
But you need not only JS-framework to work with partial loading. You need also to organise your controllers on the server-side. Your controllers must not extend your base.html.twig but send in response only html-part or JSON-object that represent this html-part.

jQuery mobile single page template loading content via ajax

I'm creating mobile app with phonegap, google maps and jquery mobile. I would like to have more then one single html templates files (navigation for pages) and load just the content of the page via ajax to javascript overlay.
Also i want to keep the history and hashes to be able to go back to previous page etc. I tried using $.mobile.loadPage and changePage but this is changing the whole pages and i would like to change just the content.
Is there any solution?
You will find this framework the exact one you are looking for.

App design using Angular js

Been working on building a huge app using angular js. Have seen too many questions on the same topic on how best we can design an app, but still am lil confused.
A basic app usually has a
1) Login page/Index page
2) Home page - with headers and footers. Body being the partial/composite which keeps on changing.
since we don't have handle to load multiple ng-views, which is best way to structure the Home page such a way that we have one single HomePage container with headers and footers and Body is loaded dynamically via $route.
Right now I have designed it using a single LoginContainerPage which loads Login page and home pages via $routers, but since only a single ng-view is allowed i cant use another ng-view within the Home page to laod the body dynamically again. i am not keen to use ng-include as well.
Another way to go is keep LoginPage outside the $route and start routing from HomePage such that the Body is loaded dynamically.
Wanted to check if there are any better ideas around.
Thanks in advance!!
well in the project i'm working on with angularjs i took this approach:
i had a header that was the main navigation system i made a controller for that that handled the navigation system and knew about where i am right now. i had an ngView which loaded my main content based on routes but sometimes i needed different templates to be loaded and compiled base on some event for instance ajax loaded tabs. i implemented these types of things using ngInclude that the main controller on the view had the responsibility to choose the template and include it, i believe there is no need for multiple ngViews you can simply use scopes to implement different things and handle different parts of your app with different controllers and data. i guess the best idea for you is to make your login page separate.
i did this in my project. my login page was the only non-Ajax page that i had.
edit:
for authetication part if you wish to implement the authentication through angular you migh want to check this.