I have a multipage application which needs to manually switched from one page to another. could it be done in GWT since it is targeted towards single page application. I am learning from the Google code and online forums but could not find any application which had multi-pages not linked by a common entry-point. Any ideas?
GWT has support for "pages" within application via URL fragment identifier (FI), i.e. http://www.yourhost.vom/main#pagename, where "pagename" is a fragment identifier representing a "page" within your app.
This "pages" (note that browser never really reloads the page, so GWT app stays the same), have full history support and are bookmarkable.
NOTE: throughout GWT docs fragment identifier is sometimes referred to as place token or history token.
Enable history support by adding an iframe to your host page:
<iframe src="javascript:''"
id="__gwt_historyFrame"
style="width:0;height:0;border:0">
</iframe>
Register a ValueChangeHandler to be notified when FI (page) changes: History.addValueChangeHandler(..). Within this handler you put a logic that displays the new page.
Go to a particular page by calling History.newItem("newpage") (without #)
You can even pass "parameters" to page, by dividing fragment identifier into sub parts: for example "#edit/user4". Just parse this FI, invoke code that shows edit page and pass "user4" to it. You can use any character to divide FI into a "page" part and "parameter" part (I use "/" here). To see this in real life: open a message in gmail and look at URL.
While you can use GWT to switch pages, the resulting code will be slow and suboptimal, with the pages taking longer to load.
Related
Sometimes, links open pages in my website with weird text at the end of it (like Facebook). I would like to remove that text, since my page will not display with it there.
For example, what I would like to do is tell my page that if the URL has text after a pound sign, remove it and open the URL without it.
So if someone opens my page with:
http://www.example.com/news/stories/this-is-a-news-story/#sthash.MmwTdqVa.dpuf
I want it to correct and open the page
http://www.example.com/news/stories/this-is-a-news-story/
How would I do that? I know how to do this with PHP, but I'm new to ColdFusion.
Thanks!
Brendan
Are you using a service like AddThis.com? If so, these (and other) marketing services may add fragment to URLs for tracking purposes. They're harmless, but here's AddThis instructions on how to remove them if you use their service. (Check w/your marketing team before you do this.)
http://www.addthis.com/academy/removing-hashtags-anchors-and-tracking-codes-from-your-urls/
The fragment is not passed to the ColdFusion server and not in the CGI scope. It's intended to be available and used in the client browser only. This should not be causing any problems with "ColdFusion" generating pages, so your problem may due to javascript. Open up Web Developer tools (F12) to identify any javascript errors that may be caused by the unexpected fragment. (You didn't provide a URL or error message, so it's difficult to troubleshoot the problem you may be encountering.)
Here's an existing solution on StackOverflow that you could you use to remove the fragment client-side:
https://stackoverflow.com/a/13824103/693068
// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");
// slice off the remaining '#' in HTML5:
if (typeof window.history.replaceState == 'function') {
history.replaceState({}, '', window.location.href.slice(0, -1));
}
I would only advise performing this once during pageload and maybe include a filter to preserve any fragments you actually want to preserve.
As a side note, I occasionally add Go to Top to long pages without any matching #top element. Normally any id that is not found will force the browser to automatically scroll to the top.
General Scala-JS page building advice needed. Most of the examples seem to be of the pattern where the main into which your single page application will go is between the tags in a landing page html file. How do you handle the need to insert something in the meta area of the dom? Do I need to render my landing page dynamically from the server to accomplish this? My specific need is to inject a script tag into the meta area of an already defined static html page. I'm using scalajs-react.
Generally you will want a server-rendered "root page" for the SPA. This allows you to dynamically compute proper cache busting file names for your script and stylesheet tags and to easily manage the cache expiration of the root page. Also, for proper html5 push state support you'll want to serve that page at every URL, which is easily done with a server side route.
I need to create a custom Facebook Page Tab app which will show an external site in an iframe. This need to have adverts on it but I'm not sure if this is possible as the site is hosted externally.
I'm not sure if I need to sign up to the Facebook Audience Network to get approved etc. either?
Any help or advice would be great.
Many browsers have this limitation of not allowing external sites to be shown in an iframe. Imagine the case when you are working hard to create a site and others show all your content in iframes. That is, naturally frustrating.
However, there is a candidate-solution: Let's suppose you create a page which sends a request to the other site and appends all the content into the body and head of your page. This is very much possible, so the solution is to:
Create a page in your site, let's call it outsider
In the server-side code of your outsider page send a request to the desired page to be shown
You will get the html of the page. Process it and include its content into the head and body of outsider. This includes:
3.1. Checking all the CSS to be reached, as the target page might refer to local CSS, which is unreachable locally at your end. Process the URLs of CSS files
3.2. Checking all the Javascript to be reached, as the target page might refer to local JS, which is unreachable locally at your end. Process the URLs of JS files
3.3. Apply the idea described in 3.1. and 3.2. for other resources, like images, until you are satisfied with the content of outsider
Create an iframe, having the source to point to outsider. outsider is inside your scope, so it should be shown
NOTE: If the site owning the target page does not like the possibility of you showing their content inside iframes, they might protect it by, let's say, having Javascript in their code, which checks whether the page is inside an iframe. Remove that code while processing the response to your request. If nothing else prevents you from showing the page in an iframe, then you should achieve success.
Please give me idea about the management of data in GWT. I am using Gwt in my travel portal project and my web pages is related to previous page data but when i press the refresh button of browser's then my data is lost . so please inform me if there is any way to manage this problem.
GWT History class cannot be used to manage page refresh (only back/forward).
A click on the refresh button send a request to the server and the state of the application is reloaded from the server. That's all. You have to deal with it.
If you don't want to lose your data, you have to find a way to save it on the server when it's needed.
If your users have modern browsers, you can use the HTML5 feature localStorage to store the data in the browser between page-refresh.
Check this thread for supported browser.
You can create a url fragment to encode your data.
String location = "ny";
History.newItem("location="+location);
will result with a url fragment of www.example.com#location=ny
Then if the browser is refreshed, you can decode the url fragment and determine that the location is ny.
For multiple parameters you can create a complex fragment and parse it.
History.newItem("start="+startLocation+"&end="+endLocation);
Then the url would look like www.example.com#start=newyork&end=boston
The basic idea is to store some state in the URL fragment (the part of the URL after the #) -- for example your-site.com/app#page-1
To listen for changes to the fragment, use GWT's History class. The fragment will change when the user goes back/forward, or refreshes the page.
So you could have your app do different things when the URL has #page-1 vs #page-2, etc.
A more generalized and scalable solution to this is something like gwt-platform's Place architecture (along with Presenters, which are also a good idea for large apps)
I have a blog on BlogSpot.com, and I have a domain based on my own name. I want to have a URL on my site (like http://www.mydomain.com/blog) that will then pull in the content from my blog page, but I want the URL in the address bar to stay on http://www.mydomain.com/blog, so that it does not look like you left my site.
(I have a Windows hosting account on 1and1.com)
I did Google this question, and I found how a few things, like:
1: Adding a tag in to "refresh". Tried this, but it changes the address bar.
<meta http-equiv="refresh" content="0; URL=http://myblog.blogspot.com" />
2: I also learned about the html iframe thing, but it has height and scrollbar issues.
3: Then, I found this partial code snippet, but I don't know what to do with it, or if it will even work against the BlogSpot server, or on my server:
<%
Set objHTTP = Server.CreateObject("Microsoft.XMLHTTP")
objHTTP.Open "GET", "http://myblog.blogspot.com", false
objHTTP.Send
Response.Write objHTTP.ResponseText
%>
I am a client app guy, so this web stuff is all new to me.
Any help will be greatly appreciated.
The third option will probably work for the initial page load, but any links on the page will then direct the user to the BlogSpot page, and change the url. It simply fetches the page from blogspot, and then sends it to the user without any changes.
For me, the changing url is not a big deal, as long as it's easy for the user to get from one to the other easily; have prominent links on either page that tell the user where they go. Most people don't care about the url, they just care about the content.
Using an IFrame is probably your best bet. Many Facebook applications are in IFrames and still integrate very well.
I think using a regular frame or an iFrame is probably the easiest solution. What kind of scrollbar issues did you encounter? You can set custom values for some of these attributes, just check out the documentation here:
http://www.w3schools.com/TAGS/tag_iframe.asp
If you didn't want to use frames, you could actually proxy the entire page using a server side application like Squid. However, this is more difficult to setup, requires the ability to install software and configure firewall/iptable settings on your host, and must be configured properly to prevent malicious abuse.
-Mark
Here are some options you can try:
If you have PHP installed:
<?php
echo file_get_contents('http://myblog.blogspot.com'); // or you can use fopen()
?>
Or Server-Side-Includes installed:
<!--# include virtual="http://myblog.blogspot.com" -->
You can also pull blog content from Blogspot using the Blogger Data API.
The advantage of this is that you can reformat and reorganize the content to match the style of your website. The disadvantage is that it's more work than an iframe, and you probably won't match the full functionality of Blogspot.
I'm playing with this now to see whether I can use Blogspot as a type of CMS for a club news system.