I am able to create a new window with my app, but I was wondering if there was a way for this window to open at the bottom of the screen. The preferred behavior would be, given a height, fill in a window from the left to right side of the screen and be all the way at the bottom of that screen. Like a bottom-docked panel.
Is there some attribute I can add to the create to make this happen? All I can think is to set left to 0, but that only solves one thing.
chrome.app.window.create("window.html", {
alwaysOnTop: true,
id: "info_view",
bounds: {width:600, height:400},
});
The app window create reference is here: https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
First, It looks like bounds is deprecated; you should use innerBounds or outerBounds instead.
Second, all of the bounds take a BoundsSpecification which has arguments for left and top. You can get the screen display bounds using chrome.system.display.getInfo(function callback) which returns a workArea (and a bounds, depending on your intent).
Then, probably you want to pass to window.create something like
outerBounds: {
top: screenInfo.workArea.height - window_height,
height: window_height
}
(Note: I haven't tried it, yet)
Related
I am currently using toolPage control with sideNavigation to display my navigation. By default, its displayed and can be collapsed if I click the "hamburger" icon at the top.
Now, I would like it to collapse not only by icon-click, but also if the browser width is decreased (or when a user opens it on the phone). Is there a way to achieve it? I know boolean properties 'sideExpanded' on 'toolPage' control and 'expanded' on sideNavigation control, but how can I set their value automatically depending on the width of the screen?
Can I see somewhere in the this.getView() structure the actual width of the window? I assume that then I could tie this expanded value to the function/formatter which determines if the control should be expanded or not. Or should I tie t the devide model somehow? In my manifest.json, I have desktop, tablet and phone deviceTypes defined. What is the correct way to do it? Thanks a lot!
You can achieve this using sap.ui.Device.resize.attachHandler(myFunction, oListener?) method, callback function returns parameters height and width based on your requirement you can expand or collapse thesideNavigation.
other way is to check the device sap.ui.Device.media.attachHandler(myFunction, null, sap.ui.Device.media.RANGESETS.SAP_STANDARD); using this you can access the callback to with parameters type of device:
Do initialization: myFunction(sap.ui.Device.media.getCurrentRange(sap.ui.Device.media.RANGESETS.SAP_STANDARD));
function myFunction(mParams) {
switch(mParams.name) {
case "Phone":
// Do what is needed for a little screen
break;
case "Tablet":
// Do what is needed for a medium sized screen
break;
case "Desktop":
// Do what is needed for a large screen
}}
Regards,
Saddam
So I have a button on my storyboard. When that button is pressed, I want to move a certain label down a little bit and also add a new text field to the screen. Here is the simplified code:
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.addIngredientLabel.center.y += self.addIngredientLabel.bounds.height
}) { (_) -> Void in
let newIngredientTextField = UITextField(frame: CGRectMake(100, 110, 100, 100))
newIngredientTextField.center.y -= 50
newIngredientTextField.placeholder = "place text here"
newIngredientTextField.contentHorizontalAlignment = .Left
self.view.addSubview(newIngredientTextField)
}
The problem though, is that after the animation is completed, the label jumps back to its original location. It is like the animation is being pre-maturely terminated. The textField gets added and the label moves but it does not stay moved.
I have tried adding the text field at the end of the function instead of in a completion block. No kind of reordering seems to be helping.
I feel like I am not understanding something fundamental to animations. If anyone has any advice I would greatly appreciate it.
Since you're using the storyboard, you are most likely also using auto-layout. The positions of your controls are determined in your visual design (storyboard) and will adjust automatically to orientation changes and adapt to various device screen sizes. This is good but the flip size is that you cannot directly change the positions of your control using their x,y coordinates.
Instead, you can change values in the constraints you defined in the storyboard. for example, if you button has a "Top" distancs constraint with a control above it (or the edge of the view), you can change the constraint's "constant" attribute to indirectly change the position of the control.
In order to manipulate the contraints in your code, you can create IBOutlets for them just as you would do with any control.
I'm trying to configure the width for Alfresco.util.PopupManager.displayPrompt() but I don't see how to do it.
YUI Dialog has a width property, but the only config that I've managed to see, defaultDisplayPromptConfig object, doesn't seem to pay much attention to my messing with it.
Specifically, I tried setting Alfresco.util.PopupManager.defaultDisplayPromptConfig.width but it didn't work :)
I'm also trying to style up the panel I'm loading (create-site style injected panel), but it does not work for now.
Is there a way to configure the PopupManager Prompt object?
TIA
If you look at the source for Alfresco.util.PopupManager.displayPrompt() contained in alfresco.js then you'll see that the method creates an instance of YAHOO.widget.SimpleDialog, which does support a width property.
The problem is that displayPrompt() takes only specific configuration options which it passes through to the SimpleDialog, so adding an additional width parameter to your config will not have any effect, as you can see.
// Create the SimpleDialog that will display the text
var prompt = new YAHOO.widget.SimpleDialog("prompt",
{
close: c.close,
constraintoviewport: c.constraintoviewport,
draggable: c.draggable,
effect: c.effect,
modal: c.modal,
visible: c.visible,
zIndex: this.zIndex++
});
// Show the title if it exists
if (c.title)
{
prompt.setHeader($html(c.title));
}
// Show the prompt text
prompt.setBody(c.noEscape ? c.text : $html(c.text));
// Show the icon if it exists
if (c.icon)
{
prompt.cfg.setProperty("icon", c.icon);
}
// Add the buttons to the dialog
if (c.buttons)
{
prompt.cfg.queueProperty("buttons", c.buttons);
}
// Add the dialog to the dom, center it and show it.
prompt.render(parent);
prompt.center();
prompt.show();
I like the idea of enhancing the function to support a width property and possibly others, but in the meantime you are best off using SimpleDialog directly in your own code, modifying the above to add a width parameter.
I have a flow panel with many photo-widgets inside (gallery with random number of rows and columns, depends on screen size) for which I want to implement drag and drop behavior to change their order. I am using gwt-dnd library. Its FlowPanelDropController allows you to define your own positioner (delimiter) which shows the candidate location for dropping the dragged widget.
I want this positioner to be the empty space with defined width, and the challenging thing is to implement sliding animation effect for the when positioner is added and removed.
If you are a desktop Picasa app user you know what I mean: the target row slides both sides (little to the left, little to the right) extending the space between the items where you are going to drop a photo.
The whole thing is complex enough, but any help related to how to apply the animation for positioner attach/detach is appreciated. Maybe I need to use a different approach (e.g., use GWT native dnd instead of gwt-dnd lib and no "positioners" at all) if you have any ideas how this could be helpful.
Thanks.
Well, I ended up overriding AbstractPositioningDropController (parent of FlowPanelDropController) and adding some extra features.
1) newPositioner() method now builds the Label, which is vertical space with some small width, height and decoration. This widget's element has constant id (say, "POSITIONER"), which helps to distinguish between multiple positioners if you plan to have several of them while navigating with a drag object over multiple drop targets. Also some transition CSS effects were applied to the Label, which will be responsible for handling animated extension of Label's width.
2) in onEnter() I do the following
...
removePositioner(getPositionerElement());
Widget positioner = newPositioner();
dropTarget.insert(positioner, targetIndex);
animatePositionerExtension();
where getPositionerElement() returns DOM.getElementById(POSITIONER)
At the same time removePositioner(..) resets the id of this element to something abstract and ideally should provide some animation before calling .removeFromParent(). But I didn't have enough time to properly debug this so ended up just removing the old positioner with no animation.
Method animatePositionerExtension() contains the code that changes the width of the positioner widget, so that CSS transition will catch that and provides animation.
All access to positioner widget in the class should be provided through updated methods.
3) onLeave() contains line removePositioner(getPositionerElement());
4) In the end of onMove() I added a couple of lines:
galleryWidget.extendHoveredRow(targetIndex - 1);
animatePositionerExtension();
where extendHoveredRow(hoveredWidgetOrdinal) implemented the logic to "limit" the sliding effect in the single line:
int rowHovered = -1;
public void extendHoveredRow(int hoveredWidgetOrdinal) {
int newRowHovered = getRowByOrdinalHovered(hoveredWidgetOrdinal);
if (rowHovered != newRowHovered) {
// adjust position of items in the previously hovered row
int firstInPreviouslyHoveredRow = (rowHovered - 1) * itemsInARow;
shiftFirstItemLeft(firstInPreviouslyHoveredRow, false);
rowHovered = newRowHovered;
// extend this row
int firstInThisRow = getOrdinalFirstInThisRowByOrdinal(hoveredWidgetOrdinal);
shiftFirstItemLeft(firstInThisRow, true);
}
}
This is in short how I did the thing. And still there's some room for improvements, like adding animated removal.
Again, it's all about overriding DropController and manipulations with elements inside the "gallery" widget. The benefit of this approach is that I remain in the gwt-dnd operations framework, and also reused a bunch of existent code.
Some notes:
CSS transition is not supported in IE pre-9, but this is unrelated to
this topic.
Put a transparent "glass" div on top of the Image widget if you use it
as a face of dragProxy. This will save you tons of time trying to
understand why either setting element's draggable to false, or
calling event.preventDefault() somewhere else, or other workarounds don't work in one or several browsers and the image itself is being dragged instead of the whole dragProxy widget.
I'm building a layout for a console app and here's what I want to achieve. What I have so far is this.
My main window is deriving from a wxFrame. I split the window using wxSplitterWindow into two windows : the one on the left - a wxTreeCtrl and the one on the right is a wxPanel. My question is how to achieve the following: a horizontal list (perhaps a grid?) that shows like records from a db, but with a scroll, so that only like 20-30 are shown, and a simple textarea below this table(grid?).
I tried to split the wxPanel, just like I did with the Frame, but it doesn't work. When I tried to change the Panel to a Frame it worked, but the Frame is opened in a new window. So now I'm asking what elements to use and how to position them so that I have a scrollable table, a horizontal line, and then a simple textarea. The horizontal line should be in the middle of the left panel. Here's my code for the right panel so far:
package RightPanel;
use strict;
use base qw(Wx::Panel);
use Wx qw(:everything);
sub new {
my ($class, $parent_window) = #_;
my ($self) = $class->SUPER::new($parent_window);
return $self;
}
A wxSplitterWindow is intended for a window that can be split and unsplit at run time. Text editors often have this sort of feature so that they can offer two independent views of the same document.
I assume you will always want three independent windows in your frame? You should simply create the three windows separately and do the arithmetic to align them. It sounds like you want a wxScrolledWindow at the top and a wxPanel at the bottom.
Create a BoxSizer with wxHORIZONTAL flag for the window.
In this BoxSizer, create a Panel (your left-side area) and another BoxSizer -- with wxVERTICAL flag -- as your right-side area. (the above wxHORIZONTAL flag will put these two side-by-side).
In the right-side BoxSizer, create a ScrolledWindow (top part) and a Panel (bottom part). The wxVERTICAL flag in the right-side BoxSizer will stack these on vertically.
Sizers are tricky to get your head around if you've never played with them before... this might help:
Sizers and Layout