I want to create a button with two icons. One at the left edge and at the right edge.
How can I do it?
example:
https://archive.qooxdoo.org/current/playground/#Hello%20World-ria
The idea is to redefine _createChildControlImpl method and create the second icon there:
qx.Class.define("myapp.Button", {
extend : qx.ui.form.Button,
construct(name, path){
this.base(arguments, name, path);
this._createChildControl("secondicon");
},
members: {
_createChildControlImpl(id, hash){
let control;
switch(id) {
case "secondicon":
control = new qx.ui.basic.Image(this.getIcon());
this._add(control);
break;
}
return control || super._createChildControlImpl(id);
}
}
});
Alternatively, you can take advantage of the fact that every widget is in essence a container. You can call the button's _add method, as shown here:
var button1 =
new qx.ui.form.Button("First Button", "icon/22/apps/internet-web-browser.png");
// Add another icon. It'll be added after whatever has already been
// added to the button, which is the original icon and the button text.
button1._add(new qx.ui.basic.Image("icon/22/apps/internet-web-browser.png"));
Related
I'm using addSideMenu(this) in every form to add the side menu.Menu items are defined in ENUM MenuOptions. In my case, I want to do some processing on controls before another form gets called from every form. If this is happening through any of the buttons or controls present on the form, then I can do processing and then calling the next form.
I'm having difficulty in doing the same when form is called from Side Menu. I have to do processing based on the elements present in the form and every form has different elements. This cannot be generic method. I don't understand how can I do the same thing, if another form gets called from Side Menu. Please advise.
Example: I'm on form "Start" (First Form) it has buttons "A" and button "B". I call form "Settings" from side Menu --> then I want to access Buttons A and B of form "Start"(first form) before control moves to Settings form.
Code for Side Menu:
public static void addSideMenu(Form f) {
Toolbar tb = f.getToolbar();
Button logout = new Button("Sign Out");
logout.setUIID("SignoutButton");
for (MenuOptions m : Server.instance.getMenuSortOrder()) {
m.addToSidemenu(tb);
}
tb.addComponentToSideMenu(logout);
}
Code for Side Menu options:
public enum MenuOptions {
SCHEDULE("Sch", "Schedule", FontImage.MATERIAL_PERM_CONTACT_CALENDAR,
e -> new AppointmentsForm(false, true, true,
Server.AppointmentFolders.APPOINTMENTS).show()),
ACTIVITY("Start", "Activity", FontImage.MATERIAL_ASSIGNMENT,
e -> new ActivityForm("").show()),
SETTINGS("Settings", "Settings", FontImage.MATERIAL_SETTINGS,
e -> new SettingsForm().show());
}
MenuOptions(String name, String title, char icon,
ActionListener<ActionEvent> al) {
this.name = name;
this.title = title;
this.icon = icon;
this.al = al;
}
public Component createMenuButton() {
Button b = new Button(title);
if (Display.getInstance().isTablet()) {
FontImage.setMaterialIcon(b, icon, 20);
} else {
FontImage.setMaterialIcon(b, icon, 10);
}
Font mediumBoldProportionalFont =
Font.createSystemFont(Font.FACE_PROPORTIONAL, Font.STYLE_BOLD,
Font.SIZE_MEDIUM);
b.getUnselectedStyle().setFont(mediumBoldProportionalFont);
b.getAllStyles().setBorder(Border.createEtchedRaised());
b.addActionListener(al);
return b;
}
I'm guessing the ENUM accepts an action listener. I suggest replacing that with a LazyValue<Form> which will create the form lazily for you. Then you can implement an action listener as:
Form f = lazy.getValue();
doSomethingOnForm(f);
f.show();
I am using codename one swipe tabs dynamically to prepare some radio button but on swiping of tabs getSelectedIndex () method is giving the previous tabs value(previous in the sense suppose I move my tabs from 0 to 1 so it's giving me 0) so how to get the current tab value at which my tab is because on basis of this selectedIndexTab value I want my radio button to get selected.
Here is my code
TableLayout t1=new TableLayout(1, 5);
radioTypeContainer=new Container(t1);
for(i=0;i<5;i++){
t.addTab("Tab2"+i, new SpanLabel("Some text directly in the tab"));
firstTab = new RadioButton[i];
plain = new RadioButton("");
plain.setName("rdb"+i);
rbt =new RadioButton();
rbt.setName("rbt"+i);
radioTypeContainer.add(rbt);
finalRadioList.add(rbt.getName());
finalRadioList.add(t.getTabUIID());
}
borderLayoutContainer.add(BorderLayout.SOUTH,radioTypeContainer);
t.addSelectionListener((i1, i) -> {
Log.p("====***======="+t.getSelectedIndex());
});
Thanks in Advance
newSelected in selectionchanged method gives the current position of tab as shown in below code.
t.addSelectionListener(new SelectionListener() {
#Override
public void selectionChanged(int oldSelected, int newSelected) {
Log.p("====***======="+newSelected);
}
});
my problem is:
i made a combobox and i want to use context menu on it's elements, so when i'm setting the cellfactory as shown below, i can't see the items in any more and the context menu does not show.
CBXGroups.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
public ListCell<String> call(ListView<String> param) {
final ListCell<String> cell = new ListCell<String>();
final ContextMenu cellMenu = new ContextMenu();
MenuItem rimuoviDalControllo = new MenuItem("RIMUOVI DAL CONTROLLO");
MenuItem rimuoviDefinitivamente = new MenuItem("RIMUOVI DEFINITIVAMENTE");
rimuoviDalControllo.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent event) {
Service.deleteGroupFromControl(cell.getText(),CBXControllo.getSelectionModel().getSelectedItem());
populateLists();
}
});
rimuoviDefinitivamente.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent event) {
Service.deleteGroup(cell.getText());
populateLists();
}
});
cellMenu.setOnShowing(new EventHandler<WindowEvent>() {
public void handle(WindowEvent event) {
cell.requestFocus();
}
});
cellMenu.getItems().addAll(rimuoviDalControllo,rimuoviDefinitivamente);
cell.contextMenuProperty().bind(Bindings.when(Bindings.isNotNull(cell.itemProperty())).then(cellMenu).otherwise((ContextMenu) null));
return cell;
}
});
You can't see the items because you haven't set the text in your ListCell. You can do this with a one-liner:
cell.textProperty().bind(cell.itemProperty());
The context menu is trickier, and I don't really have a solution for it. The issue is that the ComboBox uses a PopupControl to display the list view, and the popup control has autoHide set to true. So when you click on the list view, the popup closes (preventing you seeing the context menu). There's no way to access the popup control, so I don't think there's going to be any way to do this.
Registering a context menu with items in a combo box seems like an unusual thing to do; I wonder if there is a better approach for what you want to do. A MenuButton is similar to a ComboBox in some ways (control that displays a popup with options), but it has a menu hierarchy so you can include cascading menus. This might provide the kind of functionality you want.
I'm working on a desktop application. It has a dropdown menu. When a menu item is clicked on the dropdown a new tab is opened if it's not opened before. There is a single tab for a single dropdown menu item. What i want to do is to open a window, page or user control(i'm not sure which i should use) in seperate tabs considering the work they will do.
My partial XAML:
<dxd:DockLayoutManager DockItemClosing="DockLayoutManager_DockItemClosing_1">
<dxd:LayoutGroup>
<dxd:TabbedGroup Name="tabbedGroup">
</dxd:TabbedGroup>
</dxd:LayoutGroup>
</dxd:DockLayoutManager>
and partial CS:
private void addPanel(string caption)
{
var contains = false;
var layoutPanel = new LayoutPanel() { Caption = caption };
BaseLayoutItem[] baseLayoutItem = tabbedGroup.GetItems();
foreach (var layoutItem in baseLayoutItem)
{
if (layoutItem.Caption.Equals(layoutPanel.Caption))
{
contains = true;
}
}
if (!contains)
{
tabbedGroup.Add(layoutPanel);
}
}
As i mentioned i want to append a window, page or user control(i'm not sure which i should use) into every LayouPanel opened seperately.
Ok it's as easy as:
layoutPanel.Content = new UserControl1();
And i got one more trick for dynamically creating the desired tab:
layoutPanel.Content = Activator.CreateInstance(Type.GetType(Constants.s_tabs[caption]));
I hope it won't cause any performance problems.
I need help with a script to add an "active" class to a div when a hidden checkbox is checked. This all happening within a somewhat complex form that can be saved and later edited. Here's the process:
I have a series of hidden checkboxes that are checked when a visible DIV is clicked. Thanks to a few people, especially Dimitar Christoff from previous posts here, I have a few simple scripts that handle everything:
A person clicks on a div:
<div class="thumb left prodata" data-id="7"> yadda yadda </div>
An active class is added to the div:
$$('.thumb').addEvent('click', function(){
this.toggleClass('tactive');
});
The corresponding checkbox is checked:
document.getElements("a.add_app").addEvents({
click: function(e) {
if (e.target.get("tag") != 'input') {
var checkbox = document.id("field_select_p" + this.get("data-id"));
checkbox.set("checked", !checkbox.get("checked"));
}
}
});
Now, I need a fourth ( and final ) function to complete the project (using mootools or just plain javascript, no jQuery). When the form is loaded after being saved, I need a way to add the active class back to the corresponding div. Basically reverse the process. I AM trying to figure it out myself, and would love to post an idea but anything I've tried is, well, bad. I thought I'd at least get this question posted while I work on it. Thanks in advance!
window.addEvents({
load: function(){
if (checkbox.checked){
document.getElements('.thumb').fireEvent('click');
}
}
});
Example: http://jsfiddle.net/vCH9n/
Okay, in case anyone is interested, here is the final solution. What this does is: Create a click event for a DIV class to toggle an active class onclick, and also correlates each DIV to a checkbox using a data-id="X" that = the checkbox ID. Finally, if the form is reloaded ( in this case the form can be saved and edited later ) the final piece of javascript then sees what checkboxes are checked on page load and triggers the active class for the DIV.
To see it all in action, check it out here: https://www.worklabs.ca/2/add-new/add-new?itemetype=website ( script is currently working on the third tab, CHOOSE STYLE ). You won't be able to save/edit it unless you're a member however, but it works:) You can unhide the checkboxes using firebug and toggle the checkboxes yourself to see.
window.addEvent('domready', function() {
// apply the psuedo event to some elements
$$('.thumb').addEvent('click', function() {
this.toggleClass('tactive');
});
$$('.cbox').addEvent('click', function() {
var checkboxes= $$('.cbox');
for(i=1; i<=checkboxes.length; i++){
if(checkboxes[i-1].checked){
if($('c_'+checkboxes[i-1].id))
$('c_'+checkboxes[i-1].id).set("class", "thumb tactive");
}
else{
if($('c_'+checkboxes[i-1].id))
$('c_'+checkboxes[i-1].id).set("class", "thumb");
}
}
});
// Add the active class to the corresponding div when a checkbox is checked onLoad... basic idea:
var checkboxes= $$('.cbox');
for(i=1; i<=checkboxes.length; i++){
if(checkboxes[i-1].checked){
$('c_field_tmp_'+i).set("class", "thumb tactive");
}
}
document.getElements("div.thumb").addEvents({
click: function(e) {
if (e.target.get("tag") != 'input') {
var checkbox = document.id("field_tmp_" + this.get("data-id"));
checkbox.set("checked", !checkbox.get("checked"));
}
}
});
});