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
Related
I have a headerMenu dropdown to "show" and "hide" columns, and persistence is set to true. When I manually resize the columns the new width is persistent, but it is not when using the dropdown (the column does resize, however, it just doesn't stay that way on the next reload). I noticed that the columnResized callback is also not triggered by my code.
var headerMenu = [
{
label:"Hide Column",
action:function(e, column){
column.setWidth(40);
}
},
Am I missing something here? How do I get this to work and be persistent?
This is the correct behaviour, and fairly standard across a range of table functions and callbacks
Both the callback and the persistence module only track user interaction with the table. This allows maximum flexibility for the developer to call additional functions on the table with out interfering with the direct user experience.
In your case you appear to be trying to hide a column by changing its width? there is a hide function you can call on a column to hide it, if that is what y0u are attempting.
column.hide()
I would like to rip off Google's design for my Continuous Form. The detail section of the form is set up to display N number of records resulting from a search, and thus cannot be used to create this effect (i think). Everything must go in the header section.
there are 2 primary issues I would like to address in this question:
Two toned background. The header section should have a grey stripe and a white stripe. This stripe needs to extend the full width of the form, which is variable and will depend on the user. (i'm using tabs not pop-ups)
How to right justify certain elements of the header so that they stay close to the right edge, wherever that may fall, just like your account information on Google.
The "Search Results" in the detail section are loaded by setting the form's recordSource to the results of a query defined in VBA, which takes parameters from the search box. The form is continuous.
Any ideas how to hack this into place?
Recent versions of MS Access provide improved form layout features when using the ACCDB database file format.
The screen captures below are based on a form in Access 2010. The second image is after the form width was expanded, but it's scaled down for display on this web page. However you can open those images directly to compare their relative widths.
The grey color is from the form header's Back Color property. The white box is a simple text box whose Back Color is white and Back Style is Normal (not Transparent).
The text box's Horizontal Anchor property is Both, and its Can Grow property is Yes. The other 3 items ("?", "Button 2", and "Button 3") are command buttons. Their Horizontal Anchors are set to Right and their Can Grow properties are No.
The result of those properties is that when the form expands, those command buttons maintain their size are are kept right-aligned within the form. And the text box stretches to fill the remaining available space.
Note this behavior is accomplished without any VBA code.
I think these layout capabilities were introduced in Access 2007 and perhaps refined in 2010.
For the background, use two rectangles with transparent borders, one back color gray, one white. You can size them to the form by using the form's InsideWidth property. For example:
Private Sub Form_Resize()
rect1.Width = Me.InsideWidth
rect2.Width = Me.InsideWidth
End Sub
I would do a similar thing for the buttons/images/etc you want right justified. Set their Left property relative to the form's width:
mySettingsButton.Left = Me.InsideWidth - 300
Keep in mind all the measurements are twips (1440 twips/inch)
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)
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.
In GTK (or pygtk or gtkmm...)
How can I detect that an application window has been manually resized by the user, as is typically done by dragging the window's edge?
I need to find a way to differentiate manual resizes from resizes that originate from gtk, such as changes in window content.
Have you tried connecting to the GDK_CONFIGURE event?
Check out this example under the
"Moving window" section. The example shows a callback doing something when the window is moved, but the configure event is a catch-all for moving, resizing and stack order events.
I managed to pull this off by watching for size_allocate and size_request signals on the GtkWindow. If size_request ever got smaller, I called resize(1,1). If size_allocate was ever bigger than expected, I turned the system off.
One thing I made sure to handle was size_request returning big, then small, and having size_allocate be big and then small. I don't know if this is possible, but I fixed it by making sure to only decrease the expected values for size_allocate when I got a smaller size_allocate, not when I got a smaller size_request.
Make sure that your size_request handler comes after the base class' handler so that you get the right values. I did this by overriding the method and then calling the base class method first.
I've tried this in both 1 and 2 dimensions and it seems to work either way.
In my case I was trying to distinguish between a user resizing a Gtk.Paned from the user resizing the whole window. Both emitted the notify::position signal.
My solution was, since I can't know if the user is resizing the window from the widget, reverse what I wanted to know. Record if the user has re-positioned the widget and ignore updates if the user didn't initiate them on my widget.
That is to say, instead of testing "if window being resized" I recorded the button-press-event and button-release-event's locally so I could instead test "if widget being re-positioned"
from gi.repository import Gtk
class MyPaned(Gtk.Paned):
_user_activated = False
def on_position(self, _, gparamspec):
if self._user_activated:
# widget touched
else:
# window resized (probably)
def on_button_press(self, *_):
self._user_activated = True
def on_button_release(self, *_):
self._user_activated = False
dev __init__(self, *args):
super(MyPaned, self).__init__(*args)
self.connect('notify::position', self.on_position)
self.connect('button-press-event', self.on_button_press)
self.connect('button-release-event', self.on_button_release)
Effectively by recorded when the user started and ended interacting with my widget directly, I could assume the rest of the time was due to the window being resized. (Until I find more cases)
In PyGTK, I've always watched for the expose_event for a window resize, then use the get_allocation method to get the new size.
You may be able to throw something together by using gdk_window_get_root_origin to get the top left corner of the window and gdk_window_get_geometry to get the width and height. Then you could hook a callback into the GDK_BUTTON_PRESS_MASK and check to see if the button press occurs near/on one of the edges of the window.
Of course, this seems quite hackish and it really bothers me that I couldn't find some simple way in the documentation for GdkWindow to do this. There is a gdk_window_begin_resize_drag function which really makes me think there's a cleaner way to do this, but I didn't see anything more obvious than my answer.