Web-site with two Composite per page. Due to bad design? - gwt

I'm creating a web-site using GWT for the first time. The aplication has two Composite class, one of them is a menu and the other one is where I show de info about the specific menu that has been clicked. I'm using MVP, the class History and the interface ChangeValueHandler to switch among different pages.
I have one pair presenter-view for each Composite. The app begins well creating the menu and the section info. When you click in the menu it works fine showing the information and the token browser is changed. The thing is that if you load a page(eg: myapp.com#register) without loading the home page, it doesn't show you the menu. It loads the Composite section info, but not the Composite menu (the Composite menu is load with myapp.com#home).
I think it's because of a bad design of the application, but I don't know how to do that in other way. If the app only had one Composite it wouldn't be a problem, but when there are 2 or more Composite per page I don't know how to manage the whole thing to work properly.

It's difficult to tell what exactly is wrong, because of the lack of code. So I'm guessing. You should design to act on the PlaceChangeEvent instead of the ValueChangeEvent. That means a menu click should fire the place change and then the application will handle this event. That way you unbind the menu actions from your content pages. And think more of each page as a separate entity. Also take a look at the GWT Activity mechanism and how it helps having a main page that is always the same and on that main page a content area that changes depending on the page actually shown.

You should include your menu in each page instead of creating it once in the home page and then keeping it on screen. I assume you create the menu and add it to the DOM via
RootPanel.get().add(myMenuWidget);
If you are using UIBinder it should be pretty straightforward to include the menu in each page, just a matter of adding the corresponding tag in each .ui.xml file of your pages.

Related

How to open a popup on click of button placed in menu page in master detail page in xamarin forms?

I am working on xamarin.forms. I am using Master detail page. In menupage of MasterDetailPage I have some menu items that are listed. At the bottom of the Menu list I placed a button on menu page. Now I need to open a popup on click of that button. I am trying with PopupLayout but not able to get any success.
Please tell me how I can open a custom popup box at the click of the button that is placed in menu page?
Regards,
Anand Dubey
Without going into separate, native projects for all platforms you are targeting (such as Android, iOS, UWP...), you cannot pop out custom UI content over existing pages in Xamarin.Forms out of the box. You would need to bring in additional references or get creative with the AbsoluteLayout control.
Here are a few options you have:
Simple popup with message and or option selection
If all you need is a simple popup message or a list of buttons, you should look into the native DisplayAlert and DisplayActionSheet methods. They are built into Xamarin.Forms and work really well for these simple cases.
More complex popup dialogs
For anything more complex than that, there is the excellent UserDialogs project: ACR UserDialogs github page
It will give you support for various loading dialogs, date, time pickers, action sheet, success/info/error toasts and more.
Fully custom UI markup with AbsoluteLayout
There is a technique where by you prepare the underlying page with a root absoltue layout, which enables you to dynamically add new UI on top of all other controls on your page. This is fiddly and can ruin your performance if you are not careful. This is also the approach that the PopupLayout control that you mentioned uses. If done properly, this can be a good solution, but I don't recommend it as it involves additional complexity on each page that hosts the popup content.
Fully custom UI popup on native projects
Your most flexible option, as always, is to fall back to the native projects. This would involve coding up the popup logic on each separate platform that you are targeting, then using DependencyService (or one of the other techniques) to call into it from the shared project. For this you should look at samples and tutorials for popups on separate native platforms as it gets pretty broad and goes way outside the topic of this question.

ionic framework hide ion-tabs on certain tab state

I've been trying to find a solution but I can't find any.
I'll use basic examples so anyone who knows ionic can understand my problem well.
ionic start myApp tabs will create a new project with tabs ready to go.
Those tabs are Dashboard, Chat and Settings.
When you go to the Chat Tab you will then select a person to view its chat content (which directs you to the Chat-Detail Page in actuallity)
I wanted to hide the ion-tabs directive when I go to the chat-detail page so I can force the user to use the Back button instead of clicking anything on the ion-tabs.
Simply put : you will have a hard time doing that. At best it will not look good, IF you succeed to hide using css (I did it, and really, it's not pretty). Basically you would need to define a variable on the parent scope, that changes when entering the chat-detail state, and bind it to ng-class directives on multiple elements (the ion-tabs to hide it, the ion-content to translate it up to cover the area where the tabs were, and add some transition to make it not too brutal).
The logical thing to do would be to have the chat-detail state not being a child of the state containing the tabs. The problem you will have, though, is that there is a huge bug going to / from tabbed state. See details here : https://github.com/driftyco/ionic/issues/2997
At the end of this discussion you can find some posts by Jason and Jerrybels (that would be me), that could lead you on the right way to do it. Basically, you will have to get rid of the ion-tabs directive, and use Ionic's CSS for tabs instead, doing all the states manipulations yourself.
Good luck !
You can use "hidden" attribute of ion-tab like this -
<ion-tab hidden={{condition}}" />
Using this we can show/hide tab.

Build some sort of workflow in JavaFX

I'm trying to build some sort of visual workflow in JavaFX. I want my application to have one main screen with the next and previous buttons, something like an installer. When a user clicks next, all the elements of the next screen appear in the same element. All previous choices of the user have to be saved. So when a user clicks on the previous button that all of his choices are still there.
How would I go on to do this?
I found these links on Google, but they don't seem to help me. Something like this is a bit the direction that I want to go, but the code in this tutorial isnt't really that good for scene's with a lot of elements.
The DataFX Framework provides a Flow API that can be used to define workflows. By doing so you can simply navigate between MVC Groups by only using annotations or configurations. You can find some examples of the API here:
http://www.guigarage.com/2014/06/datafx-tutorial-5/
http://www.guigarage.com/2015/02/quick-overview-datafx-mvc-flow-api/
http://www.guigarage.com/2015/01/datafx-tutorial-6/
I haven't worked with JavaFX in a while, but I'll start by saying I really hope you are using the JavaFX scene builder.
The way I would do it off the top of my head without going back and relearning JavaFX is to create a main window in the scene builder, and have a sort of central content display area, which holds another custom JavaFX container that contains the content you want to display, of which you can then create several of and swap out which one is being displayed programmatically.
Basically, create several smaller components representing each step or screen and display them programmatically in an owning container.

forms showing in runtime as soon as they are created

In runtime when the forms are being created, 2 forms constantly keep appearing when I haven't programmed them to show as soon as they are created, and my system runs. I was wondering why this happened and whether there is anything to solve this? I don't think I need to show my code here since it's pretty basic and there is none for the OnCreate event.
From the main menu, use Project->Options->Forms, and remove the forms you don't want to see from the Auto-create list. (Click the >> button to move them from the left side to the right side.)
(It's worth mentioning that you can also affect the order in which any autocreated forms or datamodules are created from that dialog by just dragging them up or down in the list. Note that the first form to be created becomes the application main form, so when it is closed the application will close as well; this means that the only thing above your main form in the autocreate list should be datamodule(s) that are accessed by the main form.)
If you never want any forms auto-created, go to Tools->Options->Environment Options->Form Designer, and uncheck the very last item labeled Auto create forms & data modules at the bottom. Note that your main form will always be auto-created, as it's what controls the application's lifetime for form based applications.
By default delphi creates all the forms in the beginning. You can open the .dpr file and delete the ones that you don't need. You could also do that from the UI.
For the forms that you don't want to appear at the start of runtime, go to the properties of the form (lower left hand side) and uncheck Visible. This should do the trick

Hyperlink vs Anchor

When to use HyperLink and when to use Anchor?
When using HyperLink how to handle clicks?
com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) is deprecated
com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) is deprecated as well.
Doc suggests to use Anchor#addClickHandler, but how to use Anchor#addClickHandler when using HyperLink
Does it mean that if I need to handle click I should always use Anchor and never use HyperLink?
Great question, because it is so simple, and yet opens up what might be a whole new area for a lot of GWT programmers. I've up-voted the question just because it can be a great lead-in for people exploring what GWT can do.
Anchor is a widget for storing and displaying a hyperlink -- essentially the <a> tag. Really not much more exciting than that. If you want your page to link to some external site, use anchor.
Links are also used for internal navigation. Let's say I have a GWT app that requires the user to login, so on my first panel I put a login button. When the user clicks it, I would display a new panel with widgets to collect the user's information, code to validate it, and then if validated successfully, reconstruct that first panel the user was on.
Buttons are nice, but this is a browser, and I want my user's experience to be more like a web page, not a desktop app, so I want to use links instead of buttons. Hyperlink does that. The documentation for hyperlink describes it well:
A widget that serves as an "internal" hyperlink. That is, it is a link
to another state of the running application. When clicked, it will
create a new history frame using History.newItem(java.lang.String),
but without reloading the page.
Being a true hyperlink, it is also possible for the user to
"right-click, open link in new window", which will cause the
application to be loaded in a new window at the state specified by the
hyperlink.
That second sentence should help clear it up. The hyperlink is not changing the page in a URL sense (the way anchor does), though the URL will reflect the state of the program by displaying the "token" associated with the hyperlink appended to the base URL after a slash. You define the token. It would be something descriptive like "login" or "help" or "about". But this isn't a new page. There is no additional HTML file you've had to construct to display a help page, for example. It is the state of the current GWT app that is changing. Even if you "open in a new window" you are just running the same app in a particular state.
It looks like a link, but it is really a widget that manipulates the history frame, which in turn allows you to move the state of your GWT application. You don't write a click handler for the hyperlink widget, but a value change handler for the history stack. When you see that the "help" token has been put on the history stack, your handler will execute GWT code to attach to the RootPanel a FlowPanel with embedded HTML text with your help information. This is perceived by the user as a "new page", which is what he expects when he clicks on a hyperlink. The URL will be something.html/help. Now pretend he returns to this URL via the back button, not your hyperlink. No problem. You don't care about the hyperlink click. You only care that, somehow, the history stack changes. Your value change handler fires again, and does the same thing as before to display the help panel. The user still enjoys the experience of navigating through web pages, even though you and I know that there is only one web page and that you are attaching and detaching panels to the RootPanel (or whatever scheme you are using to display your GWT panels).
And this leads to a bonus topic.
This bonus is a bit more complicated, but ironically, it could help better understand hyperlinks. I say more complicated, but really, it helps solidify this notion that a GWT application is made up of a series of states, and that the web page on the screen is just the user's perception of those state changes. And that is Activities and Places. Activities and Places abstracts away this history frame manipulation, handling it in the background once you've set up a mapper with a GWT-provided class designed for this purpose, allowing you to break down your app into a series of activities, and as the user interacts through these activities he is put into different places, and each place has a view. Moreover, the user can move from place to place using browser controls like the address bar, bookmarks, history, and the backward/forward buttons, giving the user a real web-like experience. If you really want to get a grip on the conceptual difference between hyperlinks and anchors, you should try to learn this GWT topic. It can really make you change the way you see your apps, and for the better.
Hyperlink (or InlineHyperlink) is basically no more than a kind of Anchor with a ClickHandler that calls History.newItem and preventDefault() the event (so that the link is not actually followed).
Actually, Hyperlink won't do that if it thinks (and yes, it's only a guess) you right-clicked or middle-clicked (or ctrl-clicked) on the link (depending on the browser), to open the link in a new window or tab.
If you need any other behavior, then don't use Hyperlink and use Anchor instead. And if you want to add some behavior to an Hyperlink, then use an Anchor and mimic what the Hyperlink does. And you can reuse the HyperlinkImpl to have the right-click/ctrl-click handling (see links below).
But actually, if you need something that looks like a link and do something on click, but does not have a "target URL" (i.e. it shouldn't be right-clicked/ctrl-clicked to open in a new window/tab, or it wouldn't mean anything to do so), then do not use either an ANchor or Hyperlink, use a Label of whatever instead, and make it look like a link (but well, maybe you should use a Button and have it look like a button then; Google used to have link-alike buttons –such as the "refresh" link/button in GMail– and changed them to look like buttons when they really aren't links).
See also https://groups.google.com/d/msg/google-web-toolkit/P7vwRztO6bA/wTshqYs6NM0J and https://groups.google.com/d/msg/google-web-toolkit/CzOvgVsOfTo/IBNaG631-2QJ