GWT Drop Down Menu with images - image

I want to make a drop down menu with images. This means:
ImageListName
image.png
image1.png
......
imageN.png
There should be only images no text and I want to select on image like when you can choose an avatar.
I'm not sure which approach is the best.

MenuBar HomeMenu = new MenuBar();
final String image = "<img src='"+GWT.getModuleBaseURL() + "/images/down-arrow.png' height='25px' width='25px'/>";
SafeHtml addActivityImagePath = new SafeHtml() {
#Override
public String asString() {
return image;
}
};
HomeMenu.addItem(new MenuItem(addActivityImagePath,mainMenu));
Take a look at the Combobox or Suggestion box in Advanced GWT Components.
You won't be able to do this with a ListBox, because it just creates an HTML < select> element. You can use a MenuBar that has one menu with MenuItems in it to simulate a dropdown with complex widgets inside it. You will also be able to style the dropdown rather than rely on browser-styled form elements.use MenuBar instead of ListBox and place any widget you want inside the MenuItem to simulate a ListBox. Regular ListBoxes will only allow you to specify plain text.

Related

How to attach clicklistener to Vaadin label?

How can I add clicklistener to vaadin label, without putting into horizontal or vertical layout? I want to show tool tip on clicking of the label, not on mouse over.
That's not possible.
Putting it in a layout is really not that big of a deal, the following is all you need to do:
HorizontalLayout labelLayout = new HorizontalLayout();
labelLayout.addComponent(new Label("text"));
labelLayout.addLayoutClickListener( e -> <code that does something>);
If you don't want to do that you can use a third party add on which does exactly what you want. https://vaadin.com/directory#!addon/labelbutton
With it you can do:
LabelButton label = new LabelButton("text", event -> <do something>);
I recommend you use a button and add style borderless as shown on the code below. It will appear as a label.
VerticalLayout vertical = new VerticalLayout();
vertical.addComponent(new Label("Am the Hint..."));
PopupView popup = new PopupView(null,vertical);
Button b = new Button("Show Hint");
b.addStyleName(ValoTheme.BUTTON_BORDERLESS);
b.addClickListener((Button.ClickEvent event) -> {
popup.setPopupVisible(true);
});
addComponents(b, popup);

Show modal page on only a portion of the screen

I am developing an iPad app using Xamarin.Forms.
I would like my settingspage to be modal so it lay over the previous page like a popup.
I have been trying all solutions I could find and most of them seems to recommend me to call this from a button:
await Navigation.PushModalAsync(ModalSettingsPage);
What happens when I use it is that my settingspage comes in from below as a modal page but not as a popup, it covers the entire screen.
This is my current code:
//Setup button (action bar)
ToolbarItems.Add(new ToolbarItem
{
// Text = "Setup",
Icon = "settings1.png",
Order = ToolbarItemOrder.Default,
Command = new Command(() => Navigation.PushModalAsync(new ModalSettingsPage())) //Action to perfome on click , open modal view
});
Also, does anyone now if there is any good way to positions the ToolbarItems? I have two items and would like each one to be positioned at each side, but by default they are both positioned to the right.
With the evolution of Forms (currently 4.5.0), it has now become simple to push a modalpage which is not fullscreen. Use the following in your code-behind of your xaml contentpage:
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
namespace YourAppWithAModalPage
{
public class ModalPage : ContentPage
{
public ModalPage()
{
// iOS Solution for a ModalPage (popup) which is not fullscreen
On<iOS>().SetModalPresentationStyle(UIModalPresentationStyle.FormSheet);
}
}
}
There is nothing pre-made in Forms to give you a popup like I think you want. Instead, you would have to create this or use a third-party solution. For example, here is a "popup" implementation that might work for you.

Resize child UI element in Eclipse RCP

I have a TabFolder which was resized initially. Under the TabFolder is a TabItem and under that TabItem is a Button. The Button inherited the size of the TabFolder so it's huge. What's the best way to resize the Button? Using button.setBounds(...) doesn't work.
Here is the code snippet:
public void createPartControl(Composite parent) {
Composite container = new Composite(parent, SWT.NONE);
TabFolder tabFolder = new TabFolder(container, SWT.NONE);
Dimension dim = java.awt.Toolkit.getDefaultToolkit().getScreenSize();
TabItem tbtmNewItem = new TabItem(tabFolder, SWT.NONE);
tbtmNewItem.setText("1");
TabItem tbtmBrowse = new TabItem(tabFolder, SWT.NONE);
tbtmBrowse.setText("3");
Button btnNewButton = new Button(tabFolder, SWT.BORDER | SWT.CENTER);
btnNewButton.setAlignment(SWT.CENTER);
tbtmBrowse.setControl(btnNewButton);
btnNewButton.setText("Push");
tabFolder.setBounds(0, 0,dim.width-10,dim.height-10);
createActions();
initializeToolBar();
initializeMenu();
this.setPartName("Home");
}
I found a solution. I just removed the button from the control of the tab.
Removed:
tbtmBrowse.setControl(btnNewButton);
The button can now be resized independently or using setBounds when using a null layout.
So the Control you set on TabItem was a Composite? Or a Button?
The was to control the size of the button is to create a Composite and set that on the TabItem. Then you can add your button(s) to the Composite. You then set a layout on the composite to control how your button(s) are laid out. See http://www.eclipse.org/articles/article.php?file=Article-Understanding-Layouts/index.html for more details on layouts.
EDIT:
To use it, you insert a composite between the tab folder and the button:
Composite page = new Composite(tabFolder, SWT.NONE);
page.setLayout(new GridLayout(1, false));
Button btnNewButton = new Button(page, SWT.BORDER | SWT.CENTER);
btnNewButton.setAlignment(SWT.CENTER);
btnNewButton.setText("Push");
tbtmBrowse.setControl(page);
You use layouts to control the sizes of child controls ... in this case, your button. See the Understanding Layouts article.

Programmatically slide to next Panorama item

Is it possible to programmatically move from one panorama page/item to the next and get the same kind of animated sliding effect you get when sliding with a finger?
I can use the PanoramaControl.DefaultItem property to move to the expected item/page, but you won't get the animated sliding effect. Any ideas here?
Its possible, just put the setting of the DefaultItem between a SlideTransition Completed event and you are done:
public static class PanoramaExtensions
{
public static void SlideToPage(this Panorama self, int item)
{
var slide_transition = new SlideTransition() { };
slide_transition.Mode = SlideTransitionMode.SlideLeftFadeIn;
ITransition transition = slide_transition.GetTransition(self);
transition.Completed += delegate
{
self.DefaultItem = self.Items[item];
transition.Stop();
};
transition.Begin();
}
}
Use my_panorama.SlideToPage(1) to slide to the second page.
You can use below code :
panoramaRoot.DefaultItem = (PanoramaItem)panoramaRoot.Items[1];
it is not programatically possible to change the selected index of a panorama control. As you mention the only way of setting the index is using the DefaultItem property which is only useful when navigationg to the page which contains the panorama.
Here is another post that discusses it.
I think the easiest way to achieve this would be to create separate visual states for each item and create animated slide transitions for transitioning to each state. Then you can use VisualStateManager.GoToState(<page>, <state>, true); to initiate the state change.
No - the panorama control doesn't support programmatic manipulation like this.
If you want an experience like this, then you could try a hand-written panorama control - e.g. http://phone.codeplex.com/

problem with QMainWindow setCentralWidget and stackedWidget

i have gui the i created in the designer , simple one .
QMainWIndow that contains stackedWidget , the application starts with
stackedWidget index 0 that contains qwebkit widget and after some user flow ,it changes to stackedWidget
index 1 that contains QTree widget , to center the first widget i use in the QMainWindow constractor this line of code
this->setCentralWidget(ui.webView); but when the application switching to index number 1 im getting exception that is
coming from the switching command .
why ?
A stacked widget is a container widget that contains other widget. In your settings, you seems to use two stacked widget : a QWebKit widget and a QTreeWidget.
To have them displayed in the QMainWindow, you have to set the central widget of the QMainWindow to be the stacked widget and uses QStackedWidget::changeCurrentIndex() slot to pass from the first widget to the other.
Here is a code sample using a QPushButton and a QLabel as elements of the stacked widget.
QMainWindow *mainWindow = new QMainWindow();
QStackedWidget *stackedWidget = new QStackedWidget();
// stacked item 0
QPushButton *pushButton = new QPushButton("Here is a button");
stackedWidget->addItem(pushButton);
// stacked item 1
QLabel *label = new QLabel("Here is a label");
stackedWidget->addItem(label);
// add the stacked widget to the main window
mainWindow->setCentralWidget(stackedWidget);
To change the current displayed item from the button to the label, you can use:
stackedWidget->setCurrentIndex(1); // go to the label widget
stackedWidget->setCurrentIndex(0); // go back to the button widget
Alternative response to the comments. Are you sure you want to use a stacked widget? Actually, stacking widget are specialized to create sort of tab like presentation of widget. If you want to switch from one widget to the other you can use directly the QMainWindow::setCentralWidget() method as seen in the following code.
QMainWindow *mainWindow = new QMainWindow();
QVector< QWidget* > widgets;
// stacked item 0
QPushButton *pushButton = new QPushButton("Here is a button");
// stacked item 1
QLabel *label = new QLabel("Here is a label");
widgets << pushButton << label;
// add the first widget to the main window
mainWindow->setCentralWidget(widgets[0]);
When you want to switch to the other widget, you can use:
mainWindow->setCentralWidget(widgets[1]);
If you are trying to center align the web view, setCentralWidget is not what you think it is. A central widget is the main widget in a main window. The term central is meant to indicate it's the primary widget where you put your contents in, while tool bars, dock widgets, and status bar are like "accessory widgets."
To align, or otherwise position, a widget, take a look at QLayout and add a proper layout to your main window or the central widget.
It sounds like the QMainWindow central widget should be the stacked widget and not the webView.

Resources