How to Autofit the widgets in a view to variable window size automatically - eclipse-plugin

I have an RCP application in which i changed position of the window(shell) and its size by overriding the postWindowCreate() method in ApplicationWorkbenchWindowAdvisor class, the widgets in the views are not fitted to the changed window size, to see all widgets either i have to maximize the window or move scroll bars of the view to see all the widgets inside the view, is it possible to auto-fit(show all widgets in the current window size without moving scroll bars or maximizing the window) the widgets in the view even if the screen size varies.

Usually, you change the size of the shell in WorkbenchWindowAdvisor.preWindowOpen(), not in WorkbenchWindowAdvisor.postWindowCreate():
public class ApplicationWorkbenchWindowAdvisor extends WorkbenchWindowAdvisor {
#Override
public void preWindowOpen() {
final IWorkbenchWindowConfigurer configurer = getWindowConfigurer();
configurer.setInitialSize(new Point(800, 600));
configurer.setShowCoolBar(false);
configurer.setShowStatusLine(false);
// configurer.setShellStyle(SWT.TITLE | SWT.RESIZE);
}
}
Likewise, you can set the window title and the style of the window.
The position of the window is usually best set in WorkbenchWindowAdvisor.postWindowCreate()...
If you must change the size of the window, then remember to call shell.pack()!

Related

UWP Light dismiss ContentDialog

Is there a way to make the ContentDialog light dismiss?, so when the user clicks on any thing outside the ContentDialog it should be closed.
Thanks.
By default, ContentDialog is placed in PopupRoot. Behind it, there is a Rectangle which dim and prevent interaction with other elements in the app. You can find it with help of VisualTreeHelper and register a Tapped event to it, so when it's tapped you can hide ContentDialog.
You can do this after calling ShowAsync outside ContentDialog code or you can do it inside ContentDialog code. Personally, I implement a class which derives from ContentElement and I override OnApplyTemplate like this:
protected override void OnApplyTemplate()
{
// this is here by default
base.OnApplyTemplate();
// get all open popups
// normally there are 2 popups, one for your ContentDialog and one for Rectangle
var popups = VisualTreeHelper.GetOpenPopups(Window.Current);
foreach (var popup in popups)
{
if (popup.Child is Rectangle)
{
// I store a refrence to Rectangle to be able to unregester event handler later
_lockRectangle = popup.Child as Rectangle;
_lockRectangle.Tapped += OnLockRectangleTapped;
}
}
}
and in OnLockRectangleTapped:
private void OnLockRectangleTapped(object sender, TappedRoutedEventArgs e)
{
this.Hide();
_lockRectangle.Tapped -= OnLockRectangleTapped;
}
Unfortunately ContentDialog does not offer such behavior.
There are two alternatives you can consider:
Popup - a special control built for this purpose, which displays dialog-like UI on top of the app content. This control actually offers a IsLightDismissEnabled for the behavior you need. Since the Anniversary Update (SDK version 1607) also has a LightDismissOverlayMode, which can be set to "On" to automatically darken the UI around the Popup when displayed. More details are on MSDN.
Custom UI - you can create a new layer on top of your existing UI in XAML, have this layer cover the entire screen and watch for the Tapped event to dismiss it when displayed. This is more cumbersome, but you have a little more control over how it is displayed

Creating a flexible UI contianer for an image and a label

I thought this would be like pretty simple task to do, but now I have tried for hours and cant figure out how to get around this.
I have a list of friends which should be displayed in a scrollable list. Each friend have a profile image and a name associated to him, so each item in the list should display the image and the name.
The problem is that I cant figure out how to make a flexible container that contains both the image and the name label. I want to be able to change the width and height dynamically so that the image and the text will scale and move accordingly.
I am using Unity 5 and Unity UI.
I want to achieve the following for the container:
The width and height of the container should be flexible
The image is a child of the container and should be left aligned, the height should fill the container height and should keep its aspect ratio.
The name label is a child of the contianer and should be left aligned to the image with 15 px left padding. The width of the text should fill the rest of the space in the container.
Hope this is illustrated well in the following attached image:
I asked the same question here on Unity Answers, but no answers so far. Is it really possible that such a simple task is not doable in Unity UI without using code?
Thanks a lot for your time!
Looks like can be achieved with layout components.
The image is a child of the container and should be left aligned, the height should fill the container height and should keep its aspect ratio.
For this try to add Aspect Ratio Fitter Component with Aspect mode - Width Controls Height
The name label is a child of the container and should be left aligned to the image with 15 px left padding. The width of the text should fill the rest of the space in the container.
For this you can simply anchor and stretch your label to the container size and use BestFit option on the Text component
We never found a way to do this without code. I am very unsatisfied that such a simple task cannot be done in the current UI system.
We did create the following layout script that does the trick (tanks to Angry Ant for helping us out). The script is attached to the text label:
using UnityEngine;
using UnityEngine.EventSystems;
[RequireComponent (typeof (RectTransform))]
public class IndentByHeightFitter : UIBehaviour, UnityEngine.UI.ILayoutSelfController
{
public enum Edge
{
Left,
Right
}
[SerializeField] Edge m_Edge = Edge.Left;
[SerializeField] float border;
public virtual void SetLayoutHorizontal ()
{
UpdateRect ();
}
public virtual void SetLayoutVertical() {}
#if UNITY_EDITOR
protected override void OnValidate ()
{
UpdateRect ();
}
#endif
protected override void OnRectTransformDimensionsChange ()
{
UpdateRect ();
}
Vector2 GetParentSize ()
{
RectTransform parent = transform.parent as RectTransform;
return parent == null ? Vector2.zero : parent.rect.size;
}
RectTransform.Edge IndentEdgeToRectEdge (Edge edge)
{
return edge == Edge.Left ? RectTransform.Edge.Left : RectTransform.Edge.Right;
}
void UpdateRect ()
{
RectTransform rect = (RectTransform)transform;
Vector2 parentSize = GetParentSize ();
rect.SetInsetAndSizeFromParentEdge (IndentEdgeToRectEdge (m_Edge), parentSize.y + border, parentSize.x - parentSize.y);
}
}

When the frame become too small, the buttons in a panel are hidden

I use a class that extends Frame and in the constructor after defining all the propriety of the new Frame i append with the BorderLayout.SOUTH a new Panel that contains some buttons.
When I reduce the size of the Frame, if the space for the buttons isn't enough some of these disappear from the Frame.
How can I fix this problem?
public AdventureUI(Tappa tappa){
setTitle("Adventure Game");
//DIMENSIONE STANDARD DELLA FINESTRA
setSize(700,500);
setMinimumSize(new Dimension(400,300));
pannelloPrincipale = new Panel(new BorderLayout());
pannelloBottoni = new Panel();
testoTappa = new TextArea(tappa.toString(),25,50,TextArea.SCROLLBARS_NONE);
testoTappa.setEditable(false);
testoTappa.setBackground(new Color(211,211,211));
areaUtente = new TextArea("",25,30,TextArea.SCROLLBARS_VERTICAL_ONLY);
//ADD BUTTONS TO PANEL
setBottoni(pannelloBottoni,tappa.getTappeCollegate());
//AGGIUNGIAMO ELEMENTI AL PANNELLO PRINCIPALE
pannelloPrincipale.add(testoTappa,BorderLayout.CENTER);
pannelloPrincipale.add(areaUtente,BorderLayout.EAST);
//AGGIUNGIAMO PANNELLI AL FRAME
add(pannelloPrincipale,BorderLayout.CENTER);
add(pannelloBottoni,BorderLayout.SOUTH);
// ASCOLTATORE FINESTRA
addWindowListener(new AdventureUIListener());
setVisible(true);
}
Images of the problem:
As you can see the button with 26 is hidden.
As you can see the button with 26 is hidden.
Yes that is because a FlowLayout always displays components at their preferred size. If there is not enough room then the component wraps to the next line, but unfortunately the height of the panel is not increased so you don't see the button.
Check out the Wrap Layout, it was designed to handle this situation. That is it will recalculate the height of the panel so all the buttons are displayed on multiple lines. At least it works with Swing. I've never test it with AWT because most people don't use AWT anymore.

Nested Grid in GWT

I need to develop a control which is similar to the Nested Grid in the Smart GWT.
User will be having a column for expansion images, when user clicking on the image in a particular row, a sub grid has to be opened there itself. Here all remaining rows needs to move down.
How can i achieve that functionality? Can anybody give me some clues so that i can proceed.
I have already a grid which is a celltable with custom header(with search functionality implemented).
Thanks,
Saritha.
Create your nested widget (myNestedWidget) that you want to show. It should have a CSS style "position: absolute", unless your grid is added to the LayoutPanel (or similar), in which case you can position your widget directly. Let's call the parent widget of your grid gridParentWidget.
In your CellTable add the following handler:
myTable.addCellPreviewHandler(new Handler<myObject>() {
#Override
public void onCellPreview(CellPreviewEvent<myObject> event) {
if ("click".equals(event.getNativeEvent().getType())) {
if (event.getColumn() == 0) {
int top = myTable.getRowElement(event.getIndex()).getAbsoluteBottom();
int left = myTable.getRowElement(event.getIndex()).getAbsoluteLeft();
myNestedWidget.getElement().getStyle().setTop(top, Unit.PX);
myNestedWidget.getElement().getStyle().setLeft(left, Unit.PX);
gridParentWidget.add(myNestedWidget);
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
int height = myNestedWidget.getOffsetHeight();
myTable.getRowElement(event.getIndex()).getStyle().setHeight(height + "px");
]
});
}
}
});
}
This is obviously an outline of the solution. The details of the implementation may vary slightly depending on which widgets you use for your parent widget and your nested widget. If you change z-indexes somewhere, you have to take it into account too. You also need to make sure that your nested widget fits into the width of your grid, or you'll need to wrap it in a ScrollPanel and set a width to it explicitly.

adding images to the label suggestion

In my project I need to create some play,pause,stop buttons in one composite.
For that I created one composite and added these buttons there. Also I have added the images
for each button. But after drawing, it does not look good. I mean images on the buttons does not look good.Clients are not satisfied. Now is it possible to add Images to Label and give some Toggle button actions to the label? I know I can add images to the label. But when I click the label,it does not give button effect..
If you want a custom look for your 'buttons' you could use labels with custom images (one for the normal state and one for the "pushed" state. Something like:
final Label stop = new Label(composite, SWT.NONE);
stop.setSize(STOP_IMG.getImageData().width, STOP_IMG.getImageData().height)
stop.setBackgroundImage(STOP_IMG);
stop.addMouseListener(new MouseAdapter()
{
#Override
public void mouseUp(MouseEvent e)
{
stop.setBackgroundImage(STOP_IMG);
}
#Override
public void mouseDown(MouseEvent e)
{
stop.setBackgroundImage(STOP_DOWN_IMG);
// DO ACTION
}
});
For a nice UI you could also add a MouseTrack listener and have different images for the mouse over states.
Disadvantage of this is you are making it less accessible as it will only respond to mouse events. If you go for this approach you should look at creating your own class that extends MouseAdapter, and takes the label, images and action to invoke in a constructor so you don't end up with tonnes of very similar anonymous classes.
I have used toolbars in the past to achieve a nice effect.
This will create a toolbar with an item that behaves like a regular button:
//Toolbar button
ToolBar toolBar = new ToolBar(composite,SWT.FLAT);
ToolItem toolItem = new ToolItem(toolBar,SWT.PUSH);
toolItem.setImage(image);
This will a toolbar with an item that has toggle behaviour:
//Create a toggle effect
ToolBar toggleToolBar = new ToolBar(composite,SWT.FLAT);
ToolItem toggleToolItem = new ToolItem(toggleToolBar,SWT.CHECK);
toggleToolItem.setImage(image);