Navigating through widgets using the TAB key - user-interface

What should I do in order to allow users to navigate through widgets using the Tab key (in either Gtk or any derivative like gtkmm, pyGtk)?

This is build into the default "key_press_event" signal handler. If you set your own handler you must return FALSE from this handler because a TRUE means you have handled the key and no further processing is done. You can use this to avoid the default tabbing.
And i would like to add a question here, because i have no idea how i can do the focus-next-widget, focus-prev-widget action programmatically.

Is tabbing through your controls not working? This should work out of the box as you build up your forms. To customize the order of moving through the widgets as you tab, you use the set_focus_chain methods: gtk, pygtk, gtkmm.

Related

How to hide a vanilla button according to form state

I am trying to hide my SAVE vanilla button according to form state. when the form state != create the vanilla button should not display. I tried different things but nothing works:
I create a function in js that returns true if form is create state
function isHideState(){
formstate = Xrm.Page.ui.getFormType();
if(formstate == formType.create){
return true;}
else{
return false;}
}
I added a disply rule and connected it to my command that relevant to the js function :
my rule is : FormStateRule and state: Create
I connected my command to my vanilla button and yet it display even if the form is'nt in create state.
Am I missing something? it's been hours.. guidance someone?
UPDATE: to be more specific - I need the button to be seen only on create mode.
We do not need to use JavaScript here, instead of Display rule, please use Enable/Disable rule and apply the FormState rule.
Please see below image
Note: Whenever you are customizing the vanilla button (OOB Save button in your case), Make sure to start by right click the button in Ribbon workbench & click customize button/command to “retain” the OOB behavior & add your customizations on top of it.
Change this line
if(formstate = formType.create){
into
if(formstate == formType.create){
Single = is for assignment; double = is for comparison.
Update:
RibbonDiffXml follows/expects this structure in command:
<CommandDefinition
Id="String">
<EnableRules />
<DisplayRules />
<Actions />
</CommandDefinition>
There’s no direct property for rules in Button; only command can be linked.
<Button Alt="String"
Command="String"
CommandType=["General" | "OptionSelection" | "IgnoredByMenu" ]
CommandValueId="String"
Description="String"
Id="String"
Image16by16="String"
Image16by16Class="String"
Image16by16Left="Non Positive Integer"
Image16by16Top="Non Positive Integer"
Image32by32="String"
Image32by32Class="String"
Image32by32Left="String"
Image32by32Top="String"
LabelCss="String"
LabelText="String"
MenuItemId="String"
ModernCommandType=[ "ControlCommand"| "System"]
ModernImage=”String”
Sequence="1"
TemplateAlias="String"
ToolTipDescription="String"
ToolTipHelpKeyWord="String"
ToolTipImage32by32="String"
ToolTipImage32by32Class="String"
ToolTipImage32by32Left="Non Positive Integer"
ToolTipImage32by32Top="Non Positive Integer"
ToolTipShortcutKey="String"
ToolTipTitle="String"
/>
After 2013, commandbar introduction changed the behavior of Enable rule similar to Display rule. Disabled buttons using Enable rule will hide the button to utilize the space for other buttons in command bar (as there are always limitation like 7 or 9 buttons in command bar unlike Ribbon).
Enabling buttons again will act like show/hide once switched (similar to Display rule). Probably you can follow this blogpost to achieve yours.
An important thing to remember is to add the enable rule(s) to the command. This is commonly missed, someone creates an enable rule but forgets to add it to the button command.
If you forget to add enable rules to the command then the button will show on all states/stages of the form. If you forget to add the command to the button, then the button will not show up on the form.
In the ribbon editor, you can add Display and Enable rules. You can check the form type with no code. Look at this video:
https://www.youtube.com/watch?v=xyLzEAW0CJs

SAPUI5 Control Enable / Disable Rendering

I have a sap.m.TabContainer control with multiple sap.m.TabContainerItem controls. Each of the TabContainerItem controls have a number of their own controls on them. I have created a custom control (DBPanel) with a label and text field. It also has an enabled property for which I have overridden the setEnabled(boolean) method to enable/disable the internal text field within DBPanel. There are five (5) of these DBPanel controls on a specific TabContainerItem. When I call setEnabled(true) on each of these DBPanels, only three of the five become enabled. When I switch to another TabContainerItem and then back to this one, the final two DBPanels are also enabled. It is almost as if the TabContainerItem needs to be re-rendered. But I have read elsewhere that if rerender or invalidate need to be specifically called then there is something wrong with the code.
Any help would be appreciated.
Thank you
At your overridden method, you can try to call the original method that is extended. If you don't need extra logic rather than disabling or enabling it, you don't need to extend that method but I guess you have some.
First check whether superclass implements the method and then call the
method with the original arguments
if (DBPanel.prototype.setEnabled)
DBPanel.prototype.setEnabled.apply(this, arguments);

Kendo UI Angular 2+ Sortable drag handle

I am using the sortable component from the Kendo UI Angular 2 library to create a list of custom components which the user can drag and drop to rearrange as they need. By default, the sortable's items can be dragged by clicking anywhere within the item. My question is: can we specify a handle like we would in the classic Kendo UI? I want the user to drag the item only when using the header of the item, not the body.
I could not find anything in the documentation and I was hoping that if anyone had done it they can point me in the right direction.
Thanks.
Without access to the TypeScript source code (only have access to the transpiled JavaScript), it's hard to tell, but based on my quick examination the answer is no. It doesn't support options like the Kendo UI JavaScript version does where you can specify a handle selector.
If you have a handle element, according to the docs, you're supposed to add the draggable="true" attribute to your element in the Sortable's template.
See http://www.telerik.com/kendo-angular-ui/components/sortable/#toc-known-limitations
<kendo-sortable [data]="items">
<ng-template let-item="item">
<button draggable="true">
{{item}}
</button>
</ng-template>
</kendo-sortable>
My experience with this Kendo Angular component is it's not that great. I have my own open issue with it. It doesn't seem to work well outside a narrow scope.
For now, at least in my project, we'll be using Dragula. There is an Angular2+ wrapper for it available. It does support handles and such in its options.
https://github.com/valor-software/ng2-dragula
I know it has been years since this original question was asked, but as of this writing, Kendo still does not support a "handle" mechanism natively. There is, however, a way to implement the "handle" feature, which I will write here in hopes that someone in the future may find this helpful. Note I don't believe this is the right solution, because I believe Kendo's API should have this feature.
Using a Mouse
Prevent Drag Start
When we start to drag on the widget, we only want dragging to occur if our mouse is over a valid handle.
Define a flag in your component's code.
/** whether we should allow dragging **/
allowDrag: boolean = false;
Listen for dragStart on the kendo-sortable element
<kendo-sortable (dragStart)="onDragStart($event)">
Stop the default dragStart event when the flag is true
/** handles the starting of dragging */
onDragStart(e: DragStartEvent): void {
if (!this.allowDrag) {
e.preventDefault();
return;
}
}
Toggle on mouseover and mouseleave
When your mouse is over the handle element, enable the flag. When your mouse leaves the element, disable the flag.
<div (mouseover)="allowDrag = true" (mouseleave)="allowDrag = false" class="drag-handle"></div>
Incorporating Touchscreen Users
The philosophy of the above approach relies on only listening for the mouseover and mouseleave events on the handle, and ignoring everything else. For mobile - it's a bit trickier, because there isn't a mouse-position that specifically defines whether a user in position to make a drag. So, we have to add a listener to handle elements, as well as to all other non-handle elements we don't want dragging on. This approach could have been employed for mouse clicks as well, though I believe only attaching to the handle elements is the better approach.
Note: I haven't fully tested this approach yet, and it may not be suitable in all conditions, and may not work as expected for all users.
Add the touchstart Event
In your view, listen for touching the handle
<div (touchstart)="allowDrag = true" (mouseover)="allowDrag = true"
(mouseleave)="allowDrag = false" class="drag-handle"></div>
Also including touching all things that aren't handles
<div (touchstart)="allowDrag = false">
My non-draggable thing
</div>

invoke manually button click event in c++ builder

Using c++ builder borland (bcb6).
I wish to invoke manually button click event. I did:
FMap->bbDoneInClick(NULL);
While Done button located on the FMap form, but something went wrong with that.
Do I need to call bbDoneInClick with different parameters and not with NULL ?
Instead of NULL use the Form1 or the bbDone itself ...
it depends on the event code itself how it uses the Sender parameter
Also you can call the event handler safely only if the form is already created
if it does not access Canvas you can use it even in TForm1::TForm1 constructor
if it does you need to take care of not using it prior to OnShow or OnActivate
to avoid VCL problems or App crashes
for common handlers it is sufficient to use main window ... (I use this instead of NULL)
if you have single even handler for multiple components then the even is usually deciding the operation or target from the Sender parameter so in that case you need to pass the pointer to component itself

Allowing user selected Global Theme for winform app

I am using DevExpress controls in a winform app I am building for internal use. My app has about 30 forms in total and I am trying to figure out a way to allow my user's to select a theme. I have seen this mentioned here at SO multiple times in answers to other posts.
I understand how the StyleController works, I believe, but what I am wondering is how I can use 1 Style controller for the whole app.
Right now I am trying to create 1 StlyeController at the Shell form and then pass a reference to it to each child form. From there I then have to programatically set the StyleController property for each control. I don't mind I just wonder, especially from those who have done this, if there is a simpler way?
It is very simple. This example is assuming that you are using skins.
In the constructor of your main form calls:
DevExpress.Skins.SkinManager.EnableFormSkins();
This will enable your form to use the current skin. It is also important that each of your forms derived from XtraForm.
After that you need to setup the global look and feel object for your application:
//This set the style to use skin technology
DevExpress.LookAndFeel.UserLookAndFeel.Default.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Skin;
//Here we specify the skin to use by its name
DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle("Black");
If you want to set the look and feel of your application like Office 2003, the setup is different. You just have to call the following function:
DevExpress.LookAndFeel.UserLookAndFeel.Default.SetOffice2003Style();
So, every control of devexpress will use these settings to paint themselves. It is possible to specify a custom LookAndFeel object for some controls but I never used it because I dont see the point to have a custom display for a control or a form.
Exception:
There is one exception in Devexpress framework. The NavBarControl does not use the skin technology automatically from your global LookAndFeel object, you need to specify a setting to enable that:
//To use the current skin
youNavBarControl.PaintStyleName = "SkinNavigationPane";
//To use the current look and feel without the skin
youNavBarControl.PaintStyleName = "NavigationPane";
With version 11.2 I used the information in this article:
http://www.devexpress.com/Support/Center/p/K18013.aspx
In summary :
* Inherit all your forms from XtraForm
* Leave look and feel settings default so that they use the default skin
* Modify the default skin with the following line of code:
DevExpress.LookAndFeel.UserLookAndFeel.Default.SkinName = "DevExpress Dark Style";

Resources