GWT Multiple html pages and navigation - java

Hi firstly i want to mention that i am aware of ajax based application and reuse of same page.
The requirement here is that, i want to have two separate pages one for login and other for the main application. Now, this is not because i just want it, but because i have very different layouts in the two pages which i am comfortable to put together with html elements and css directly in the page and then putting divs to contain dynamic html for gwt to populate.
Even in case of myfaces i have not seen application with same page for login and the main app page.
Anyways, the problem i am facing is, lets say i have two pages
Login.html with a div : div id="login"
Main.html with a div: div id="main"
i have declared both of them in my welcome file list in web.xml
Now i start with Login page fill the "login" div with gwt widgets and on click of a button
i am using following jsni code to redirect to "/Main.html?gwt.codesvr=127.0.0.1:9997"
private native void gotoURL(String url) /-{
$wnd.location.href=url;
}-/;
and then trying to populate the "main" div. But the behaviour as i noticed is that the application call the entry point again and it doesnt find any element as "login" and gives NPE.
Is there a way to do this? also to get rid of the "?gwt.codesvr=127.0.0.1:9997"?
Thanks

First, you don't want to add the ?gwt.codesvr=... stuff - it's related only to hosted (debugging of gwt) mode. You could use a relative url (for example simply "Main.html"). But since you can only have a single entry point, you need to either split the app into two client modules (two separate apps actually) or dispatch in your entry point according to the url (whether you've landed on Login.html or Main.html)
Second, what I would do in this scenario is have an empty html with no layout except a single div for the dynamic content as the only html page of the app. Then I would use 2 UiBinders - one for the main page, and one for login, and use a hash suffix in the url (using GWT's history event and management, and hyperlink widgets) to know where I am. Maybe you should read more in GWT's documentation on history and stateful apps. Try http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsHistory.html#stateful

Related

How to use Selenium and Java to interact with dynamic web element?

I want to use Selenium to interact with an element on a website. This element contains further content depending on the user's behavior, but obviously has exactly one HTML-element the whole time.
The element looks like this when the mouse is not on top of it:
When the mouse is on top of it, it looks like this:
When the user clicks on the down arrow, other content is visualized:
As you can see it contains even more logic, I didn't add screenshots for it though.
The corresponding HTML code is that, nothing more:
I do not know how this content is created. Does anybody know how I can use Selenium and java to interact with that web element? Selenium is obviously restricted to HTML content - what can I do without trying any dirty hacks like positioning the mouse at a certain position on the element myself to trigger the different visualization?
Update
I want to do automated end-to-end testing. That means I need to programmatically use the buttons of the web element as a user would:
Delete the date by clicking the x button
Alter the date by clicking up and down buttons
Alter the date by using the calender component
Changing the text in the web element (I guess I might already be able to do that with my current knowledge of Selenium)
I talked to the developer of that application and he told me he actually just adds one HTML input element of type date to the application. The rest (i.e. the renderer/editor of that input field as I presented in the question above) is totaly browser-specific. It looks like that in Chrome and entirely different in Firefox.
The above described web element seems to be the regular HTML 5 DateTime selection in Chrome. With that knowledge you can find the web element yourself and a tutorial for Selenium here: https://www.guru99.com/handling-date-time-picker-using-selenium.html and another discussion similar to my question here: How to set HTML5 type="date" input fields (e.g. in Chrome) using Selenium/Protractor?
The guru-page obviously describes how to control the full web element and it seems to work. I will check this out and accept this as the answer for now. Thanks everyone for your time!

how to create an ExternalLink on a page that refers to the previous page

I'm implementing an error page for my application, and would like to know how to implement a wicket ExternalLink to the previous page?
I think I have to save the parameters, or the whole URL of the previous page, but I'm not sure and I don't know how to do that.. do you have any idea?
I'm using Wicket / WicketPages..
You could create a Link that has a setReponsePage(YourClass.class, pageParameters) in the onClick. However, you lose the state that the previous page had.
Alternatively, you could try a javascript:history.go(-1). This would try to go back to the previous page within the browser.
It totally depends on what you define as 'the last page'

How do we navigate from 1 page to another in GWT

I am building a project in GWT and the project requires navigation from one page to another when a button is clicked. How do I do this? Or should I simply write the entire code in the same class file? I know there has to be a way of navigation.
How should I achieve page navigation in GWT?
You should look at GWT Platform
With this library, you can define places. When the user clicks on a button, you just reveal a new place.
In addition, this framework allows you to handle the lifecycle of your GWT components and do some code splitting : page 1 and page 2 can be compiled in 2 different js so that you only load the one you need.
it is also a (and mainly) a MVP framework, like gwt-presenter.
You can do Page navigation through History mechanism of GWT. Here are the steps you should follow:
Add a history string to an iframe of your host page:
Register a ValueChangeHandler that will receive an event of history (page) change. Within this handler you need put a logic that displays the new page.
For example, History.addValueChangeHandler(object of subclass of HistoryHandler);
After doing this whenever you need to navigate to another page do the following: History.newItem("history string of your page to be displayed");

How to create a left navigation pane using facelets in JSF?

I need to create a user interface where the content changes every time the user moves to a new page. However, the header and footer remains the same.
But, within the content, there is sometimes a left pane visible on some of the pages.
I'm not sure how can this be achieved since I'm new to using JSF.
Can someone please suggest a way?
Thanks!
You can achieve this by creating 2 different layouts and using for the correct layout
one with left rail
another without left rail
You need to look at JSF template with Facelets
Here are some links that you can refer
Link 1
Link 2
For the 'puzzly' composition of pages you need to use templating. Great overview can be found in the answer to How to include another XHTML in XHTML using JSF 2.0 Facelets?. The layout itself is HTML/CSS-related, so you need to check that out first.
If you want to produce one part of a template conditionally, there are two possibilities: to do that from a master template, or to do it from a template client. Of course, you could create many templates, as others recommend, but this is counterproductive and hard to maintain in my opinion.
If you want to render a part of template conditionally, you can include rendered="#{view.viewId = '...'}" attribute to JSF components in master template.
Alternatively, if you want to 'overwrite' the default part of a template, that for example has a left panel, just define the target area as an empty one in a template client like <ui:define name="left" />.

JSP menu design advice

I'm looking to create a horizontal menu in a jsp page - the menu items vary by user but stay consistent over every page in the site for that user apart from the appearance of the active tab. Seems a simple enough problem at first (the appearance is modified using css) but I can't decide where to construct the menu.
Menu code:
<ul>
<li>item1</li>
<li id="active">item2</li>
</ul>`
As I see it there are 3 choices of when to retrieve menu items:
Upon receipt of HTTP Request to any controller for the first time store two arrays in the session - [url1, url2] and [item1, item2]. Then make the all the jsp pages form this into the above code. The jsp would have to know it's url to make against the [url1, url2] array in order to insert the active id.
Create the above html separately in each controller. Since a controller knows it's own url, it's simple to add the active id.
Create above html without any active id, store the html in the session and make either the jsp pages/controllers modify the html string.
None of these seem particularly appetising.
Does anyone have any advice on this?
Since a JSP is where all the HTML belongs, I'd go for option 1, but then with a List<MenuItem> instead of two loose arrays. You can find JSP's own URL by ${pageContext.request.requestURI}. The JSTL functions library should be helpful in determining whether the URL matches.

Categories

Resources