Language selection & display + Page navigation

[Richard_Hille]

Good morning

I have been trying to figure something our for the last few days but I wasn’t able to do so, so I need your help for a few questions, that I think are fairly simple. But since I just started using Xojo for the Web, I am still not clear on a few issues… Furthermore, please keep in mind that I am not a professional developper, only a hobbyist.

First off, some background: I am working on a Website for our baseball association. It will eventually have a few pages, including a schedule, automatic emailing and a few other things. I was able to figure out how to check for a mobile device and I will eventually create some pages for those. But my main problem is that it has to be available in both, English and French. So here are my questions:

• In RB/Xojo, when I need two languages in the same application, I usually create windows based on one language, and access, either a database of all the needed translations or some constants, depending on the size of the application and just fill the elements (like the labels, button, etc.) with the correct language when there is a language change. Is it the same for the Web or do I have to create two different sets of Webpages?

• Like a lot of Website I see out there, I would like to access the address bar and retrieve the language selected. For example, www.mywebsite.com/en/. I tried to work with the HandleSpecialURL event but I keep getting a 404 error. Could somebody point me in the right direction on how to check for that and on how to direct the browser to the correct pages?

• I guess, when I have the answer to my previous question, I will be able to navigate the site based on the address bar… For example, if somebody types in the www.mywebsite.com/en/schedules/ address, I will be able to show the Schedules page in English…

• Also, again, I have seen this on some Websites, how can I direct the user to my own 404 error page instead of a generic one?

Any insights, suggestions and coding examples would be greatly appreciated.

Sincerly,

Rick

[Michel_Bujardet]

[quote=137077:@Richard Hille]- Like a lot of Website I see out there, I would like to access the address bar and retrieve the language selected. For example, www.mywebsite.com/en/. I tried to work with the HandleSpecialURL event but I keep getting a 404 error. Could somebody point me in the right direction on how to check for that and on how to direct the browser to the correct pages?
[/quote]

The kind of URL you describe is typical of HTML sites. Since a Xojo web app is not built that way, it requires using HTML to redirect the user from the URL to your app with parameters that indicate to it the visitor choice.

You would have to create the directories /en and /schedules in your web space, then put an index.html file into each that redirects to your app with the proper parameters. For instance, here is index.html for the /en directory :

[code]

[/code] Assuming you use a cgi web app. The code in meta simply instructs the browser to open your app with the proper parameter, and then you get the value of the parameter through WebSession.URLParameter to know what was instructed. http://documentation.xojo.com/index.php/WebSession.URLParameter

Alternatively, you may use the hashtag parameters, such as http://www.mysite.com/cgi-bin/myapp.cgi#en and get the value of the hashtag in the HashTagChanged App event.

[Greg_O_Lone]

As for the translations, one direction you could go would be to use Dynamic Constants. They allow you to choose at runtime which language to use based on a property named Session.LanguageCode. We pull this value from the browser when it first connects, so if the user’s preferred language is set to French on their computer, the value would be “fr”. We then use this value to determine which language to display from the dynamic constants. You can also change this value after the session has started (like if you wanted to give users the ability to change their preference while viewing the app), and the next page they load will be in the new language. Then all you need to do is set all of the controls to use the Constant values instead of just plain text. You can do this by setting them to #ConstantName. Just make sure each of the constants you are using is set to Dynamic. The difference is that non-dynamic constants take their value from the computer on which the app is running, namely the server itself.

As for actually doing the translation, we include a tool called Lingua which you can give to a Translator along with a file exported from the IDE if it won’t be you translating them. Use the DefaultLanguage setting in the Shared build settings to see what the other translations will look like so you can adjust item lengths, and make sure you set it back to your primary language for building.

As far as the URLs go, Michel is correct, there is currently no way to handle URLs that are not under /special or /api with App.HandleSpecialUrl.

[Richard_Hille]

Hey guys. Thank you for answering my post.

First, I will start with Greg:

I was able to access the LanguageCode as you suggested and it works fine. I will definitely use it in my project. As far as translation goes, I am lucky enough to be pretty fluent in both languages, although my French is a bit better than my English.

But, when you write:

there is currently no way to handle URLs that are not under /special or /api with App.HandleSpecialUrl.

Do you mean that if I type this URL: www.mywebsite.com/special/something, I could be able to retrieve the part after /special by using HandleSpecialURL?

Now, to Michel:

Again, being a noobie, I just want to summarize everything you wrote to make sure everyhting is clear in my head.

So, if I understand your explanations correctly, within a Website, for every /something you see, we need a directory that contains the corresponding Webpage. So, for example, if I have a Website that is available in both French and English, with a home page, a schedule page, a contact page and a 404 error page, I would need to have 8 different folders, each containing a Webpage. Is that correct? And if I need to make a change in the English schedule page, for example, I would also need to make the same change in the French version? If that is the case, it must be complicated like hell to maintain a large Website…

Now, to create something similar to the HTML sites you mentionned, if we look again at the example in the previous paragraph, I would have to put an HTML file in each of the eight folders, that would call my Website but by using “?” instead of “/”. And by using “?” and URLParameter, Xojo could redirect the request to the correct Webpage. Again, is it correct? Or, as an alternate solution, I could use “#” to achieve the same result. Any advantages or disadvantages to using the “?” or “#” option?

One final clarification: If you use “?” or “#”, I understand that Xojo will have the coding built in to display the correct Webpage based on the request. But what about the “/” option? How can I build the Website if what I need are 8 different Webpages? Do you create eight different Xojo files? And what about the folders? Do you create those folders in the same folder as the Xojo Web app when you are creating the whole thing and that you want to debug the Website?

Sorry for the long post and thanks again for all your help!

Rick

[Greg_O_Lone]

@137310:@Richard Hille

Do you mean that if I type this URL: www.mywebsite.com/special/something , I could be able to retrieve the part after /special by using HandleSpecialURL?

Yes.

[Richard_Hille]

Perfect, I will start on it I will try to make it work.

Thanks again

Rick

[Michel_Bujardet]

[quote=137310:@Richard Hille]So, if I understand your explanations correctly, within a Website, for every /something you see, we need a directory that contains the corresponding Webpage. So, for example, if I have a Website that is available in both French and English, with a home page, a schedule page, a contact page and a 404 error page, I would need to have 8 different folders, each containing a Webpage. Is that correct? And if I need to make a change in the English schedule page, for example, I would also need to make the same change in the French version? If that is the case, it must be complicated like hell to maintain a large Website…
[/quote]

The method I suggested does not require to change anything in /en if you change something in /fr. Think of these directories as simple shortcuts that point to your app with a ? argument of a hashtag #. Once you have built your directory structure, any time a user goes to /en or /fr, all it does is to call your app with ?lg=en or something like #en.

@137310:@Richard Hille

Now, to create something similar to the HTML sites you mentionned, if we look again at the example in the previous paragraph, I would have to put an HTML file in each of the eight folders, that would call my Website but by using “?” instead of “/”. And by using “?” and URLParameter, Xojo could redirect the request to the correct Webpage. Again, is it correct? Or, as an alternate solution, I could use “#” to achieve the same result. Any advantages or disadvantages to using the “?” or “#” option?

Yes, that is the way it works. Shortcuts to your app. Both methods are pretty much equivalent for what you want to do, but the hashtag # can be more flexible, since it can be called when the session has already begun.

@137310:@Richard Hille

One final clarification: If you use “?” or “#”, I understand that Xojo will have the coding built in to display the correct Webpage based on the request. But what about the “/” option? How can I build the Website if what I need are 8 different Webpages? Do you create eight different Xojo files? And what about the folders? Do you create those folders in the same folder as the Xojo Web app when you are creating the whole thing and that you want to debug the Website?

Each directory will contain an index.html page that sends the user to your app with an argument corresponding to the / choice. Then in your app, you look at the value of that argument, and decide which language is needed, then use the techniques outlined by Greg to manage your app user interface in that language. You have one application only.

[Richard_Hille]

Ah, perfect… Everything is becoming much clearer now, except for one thing: when I am working on the Website, where should I put the folders and HTML files to debug the whole site? Should I put those in the same folder as the Xojo file or should they be elsewhere?

Again, many thanks to the both of you for your help

Rick

[Michel_Bujardet]

@137380:@Richard Hille

Ah, perfect… Everything is becoming much clearer now, except for one thing: when I am working on the Website, where should I put the folders and HTML files to debug the whole site? Should I put those in the same folder as the Xojo file or should they be elsewhere?

In debug mode you will not be able to reproduce the way the cgi will work. But you can open a new browser window and call the debug app when it has been launched this way :

http://127.0.0.1:8080?Lan=en or http://127.0.0.1:8080#en

[Richard_Hille]

Thanks again Michel

And once I captured the Hashtag, is it possible for the software to display the main URL in the address bar? I have seen some Website that does that. So for example, the main address is www.mywebsite.com, if the HTML files calls for the address www.mywebsite.com#en#schedule, the software would capture the en and schedule part of the address, display the correct page and change the text in the address bar back to www.mywebsite.com.

Many thanks

[Michel_Bujardet]

[quote=137672:@Richard Hille]Thanks again Michel

And once I captured the Hashtag, is it possible for the software to display the main URL in the address bar? I have seen some Website that does that. So for example, the main address is www.mywebsite.com, if the HTML files calls for the address www.mywebsite.com#en#schedule, the software would capture the en and schedule part of the address, display the correct page and change the text in the address bar back to www.mywebsite.com.[/quote]

Actually, there is a way to do the redirect with an iFrame, so the URL address remains the same, while what is displayed is your app.

Here is the HTML code. Just replace the “CHILD PAGE URL GOES HERE” by the URL of your app with the hashtag and save this as index.html to place it in /en or /fr. The URL in the browser will remain sitename.com/en but in fact it will be what you had input in the code.

[code]

Full Page IFrame html {overflow: auto;} html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;} iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;} [/code]

[Richard_Hille]

I think that will do the trick. I am working on the app now and will see how far I get tonight.

Thanks again for all your help!

Rick