i have a Department jspx that have a command button on it , which call the operation binding commit :
void submit () {
OperationBinding Commit = ADFUtils.findOperation("Commit");
Commit.execute();
}
and i have a Employee Fragment dragged as a region on Department jspx
and both jspx and fragment look at the same Backing bean .
and in the backing bean i have method that fill a comments iterator programmatically as follows :
public void fillComments () {
OperationBinding operation = ADFUtils.findOperation("CreateWithParams");
operation.getParamsMap().put("InitType", initType);
operation.getParamsMap().put("BpmCrOutputId", mil_out_id);
operation.getParamsMap().put("MileOutId", mil_out_id);
operation.getParamsMap().put("CommentText", newComment);
operation.getParamsMap().put("ReqId", requestId);
operation.getParamsMap().put("ReqType", reqType);
operation.getParamsMap().put("UserName", loggedUser);
operation.execute();
}
before there was a button on Employee fragment that call fillComments ,
if i pressed that button , then i pressed the sumbit button on the jspx
it execute successfully and the data is inserted in the database .
but i want to remove that button and call fillComments inside the sumbit button :
void sumbit () {
fillComments () ;
OperationBinding Commit = ADFUtils.findOperation("Commit");
Commit.execute();
}
i've tried that , but it didn't insert the rows in the database ,
i've added the createWithParams action twice in both Fragment and JSPX Bindings
Related
I am trying to use GWT PopupPanel (or DialogBox) with glass and autohide enabled to create a context actions menu on mobile devices, but I have an issue when the user whats to close the actions menu popup (by tapping on the glass of the popup, outside the content to trigger autohide): the underlying widgets ("beneath" the glass) also receive the tap event when the popup is closed. For example, if there is a button at that position that opens a new view/window, the button is clicked and executes his click handler.
My code:
public void onModuleLoad() {
Button button = new Button("Test");
button.addClickHandler(cl -> {
Label lb = new Label("This is the content");
lb.getElement().getStyle().setBackgroundColor("#fff");
lb.setSize("200px", "80px");
DialogBox pop = new DialogBox();
pop.setAutoHideEnabled(true);
pop.setGlassEnabled(true);
pop.setWidget(lb);
pop.center();
});
Button buttonBehindGlass = new Button("Test over");
buttonBehindGlass.addClickHandler(cl -> {
Window.alert("Action 2");
});
RootPanel.get().add(button);
RootPanel.get().add(buttonBehindGlass);
}
In this example, if you open the popup, then click/tap outside the content, on the glass, over the "buttonBehindGlass" widget, you will notice that the popup closes and "buttonBehindGlass" is clicked, at the same time.
Is there any way to avoid this?
I tested on Android and Chrome dev tools enabled with responsive/touch mode. This issue does not appear on desktop, everything is fine there.
Create your own DialogBox, based on the GWT one
public class DialogBoxExtended extends DialogBox {
#Override
protected void onPreviewNativeEvent(NativePreviewEvent event) {
super.onPreviewNativeEvent(event);
// check if the event does not target the popup
Event nativeEvent = Event.as(event.getNativeEvent());
if (!eventTargetsPopup(nativeEvent)) {
// on click, touch end, etc. close the dialog box
switch (event.getTypeInt()) {
case Event.ONMOUSEDOWN:
case Event.ONCLICK:
case Event.ONTOUCHEND:
hide();
break;
}
}
}
/**
* Does the event target this popup?
*
* #param event the native event
* #return true if the event targets the popup
*/
private boolean eventTargetsPopup(NativeEvent event) {
EventTarget target = event.getEventTarget();
if (Element.is(target)) {
return getElement().isOrHasChild(Element.as(target));
}
return false;
}
}
disable auto hide and use your created DialogBox
public void onModuleLoad() {
Button button = new Button("Test");
button.addClickHandler(cl -> {
Label lb = new Label("This is the content");
lb.getElement().getStyle().setBackgroundColor("#fff");
lb.setSize("200px", "80px");
DialogBox pop = new DialogBoxExtended();
pop.setAutoHideEnabled(false);
pop.setGlassEnabled(true);
pop.setWidget(lb);
pop.center();
});
Button buttonBehindGlass = new Button("Test over");
buttonBehindGlass.addClickHandler(cl -> {
Window.alert("Action 2");
});
RootPanel.get().add(button);
RootPanel.get().add(buttonBehindGlass);
}
It now works as expected.
With auto hide enabled the event is processed but left to be consumed by other handlers - that's why the event gets to the underlying button. On desktop it was not a problem because Event.ONMOUSEUP was being considered, but on mobile/touch mode the Event.ONTOUCHEND is being triggered instead.
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 Vaadin 7.6.4 for my UI work. This has the following:-
I have a window which contains a grid with data in it. This window is actually a kind of a pop up[ which shows up when my main screen gets a click on the settings icon( not shown here). This is working fine( getting the UI screen to open the Vaadin window when the settings icon the main screen is clicked).
The problem is in showing the data as mentioned below.
This grid will have 4 columns for which the data comes from a bean container.
The first column is a boolean field with true/false getting displayed based on the data from the bean container.
I need to convert this boolean field column into a checkbox with true showing the field as a checkbox with a value selected. If the value is false, then show a checkbox which is not selected.
I am trying to do that as shown in the code below but I keep getting this checkbox name printed. I dont see the checkbox but the word "checkbox" printed in there?
This checkbox should be editable. The idea is that the user should be able to select some checkboxes and the ones selected should be shown in a panel ( not shown here). Thus, the checkbox has to be editable.
How do I fix this? The code for the window is shown below
package com.platform28.mybatis;
import java.util.List;
import com.vaadin.data.Item;
import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.data.util.GeneratedPropertyContainer;
import com.vaadin.data.util.PropertyValueGenerator;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
#SuppressWarnings("serial")
public class ConfigPopUp extends Window {
VaadinUtils vaadinUtils = null;
public ConfigPopUp(List<TableColumnData> tblDataLst) {
vaadinUtils = new VaadinUtils();
// Some basic content for the window
VerticalLayout configLayout = new VerticalLayout();
configLayout.addComponent(new Label("Settings"));
configLayout.setMargin(true);
//configLayout.setWidth(null);;
setContent(configLayout);
//adding grid.
List<SettingsColumnData> settingsList = vaadinUtils.processSettingsList(tblDataLst);
final BeanItemContainer<SettingsColumnData> gridDataSource = new BeanItemContainer<SettingsColumnData>(SettingsColumnData.class, settingsList);
//change boolean value to checkbox.
GeneratedPropertyContainer gp = new GeneratedPropertyContainer(gridDataSource);
gp.addGeneratedProperty("columnDisplayed", new PropertyValueGenerator<CheckBox>() {
#Override
public CheckBox getValue(Item item, Object itemId, Object propertyId) {
boolean currentCheckBoxValue = (boolean) item.getItemProperty("columnDisplayed").getValue();
CheckBox chkBox = new CheckBox();
chkBox.setValue(currentCheckBoxValue);
return chkBox;
}
#Override
public Class<CheckBox> getType() {
return CheckBox.class;
}
});
Grid settingsGrid = new Grid(gp);
settingsGrid.setWidth("100%");
settingsGrid.setSizeFull();
settingsGrid.setColumnOrder("columnDisplayed", "columnName","columnShortName","columnDescription");
configLayout.addComponent(settingsGrid);
//configLayout.setExpandRatio(settingsGrid, 1);
// Disable the close button
setClosable(false);
HorizontalLayout hLayout = new HorizontalLayout();
hLayout.setSpacing(true);
hLayout.setMargin(true);
// Trivial logic for closing the sub-window
Button ok = new Button("Ok");
ok.addClickListener(new ClickListener() {
public void buttonClick(ClickEvent event) {
close(); // Close the sub-window
}
});
hLayout.addComponent(ok);
// Trivial logic for closing the sub-window
Button cancelBtn = new Button("Cancel");
cancelBtn.addClickListener(new ClickListener() {
public void buttonClick(ClickEvent event) {
close(); // Close the sub-window
}
});
hLayout.addComponent(cancelBtn);
configLayout.addComponent(hLayout);
// set pop up to center.
center();
// should be resizable
setResizable(true);
// should not be draggable
setDraggable(false);
//set it as modal window
setModal(true);
setWidth("50%");
setHeight("75%");
}
}
Ok, we used the SelectionMode.MULTI to show the selection of rows in there.
https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/demo/selection.html
Still, I would love to learn more as to how we get the change done as shown in the question above.
Still looking for an answer to that.
Use a Renderer and a Converter, you don't need to use SelectionMode.MULTI.
An example of this is posted here.
I made a custom (ul li) dropdown directive.
When this dropdown is clicked the list is opened.
When the list is clicked again the dropdown is closed.
When an option in the list is clicked, the option is saved in a model an the dropdown will be closed.
When clicking outside the dropdown the dropdown is closed.
Most of this is accomplished by the following code (Closing and opening part).
scope.closeDropDown = function () {
scope.isOpened = false;
$document.unbind('click');
};
//The part for opening and closing is pressed
scope.openDropDown = function () {
if (scope.isOpened) {
//The dropdown is already opened, close it
scope.closeDropDown();
} else {
//Open the dropdown, and add an event handler to the document
scope.isOpened = true;
$document.bind('click', function (evt) {
var target = $(evt.target);
// Check if the document clicked element is a child of the directive
// ATTENTION HERE
if (!target.parents('dropdown').length) {
//Target is not a child element, close the dropdown
scope.closeDropDown();
scope.$apply();
}
});
}
};
Look closely to the ATTENTION HERE part.
Here I set an event listener on the whole page. Using this gives me the following problem:
Example: When having multiple dropdowns (as example A and B).
Open dropdown A
dropdown A opens correctly
Open dropdown B
dropdown B opens correctly
dropdown A gets document event and says that the pressed element is a child of an dropdown directive (which is correct)
dropdown A does not closes (But I want it to close!)
How do I check if the event.target is a child of the angular.element ?
As now I'm only checking if the event.target is a child of a dropdown directive (this is only effective when using one dropdown directive)!
As requested by Zia Ul Rehman Mughal I'll update the question with an answer that I used in my own drop-down directive.
The part where I made the mistake was to add a click listener when the drop-down is opened, and remove it again when it is closed. This is wrong!
You have to add the listeners when the object is created, and remove them again when the object gets destroyed (with the angular $destroy event.
To check if the clicked target is a child of the element you can use the length attribute of $element.find(event.target)
function closeDropDown() {
$scope.opened = false;
}
function handleClickEvent(event) {
/* When the clicked element is not a child of the element and
the dropdown is openend, close the dropdown. */
if ($element.find(event.target).length === 0 && $scope.opened) {
closeDropDown();
/* Trigger new digest cycle */
$scope.$apply();
}
};
function setListeners() {
/* Bind click event to the document, close the dropDown if clicked
elsewhere on the page. */
var clickHandler = handleClickEvent;
$document.bind('click', clickHandler);
/* Remove the used event handlers when destroying the object */
$scope.$on('$destroy', function () {
$document.unbind('click', clickHandler);
});
}
I have a grid on my panel, named gridView, and gridView is in panel named panelMain, by dbclick listener on grid row, I load a from by doing something like this:
listeners:{
itemdblclick: function(dataview, index, item, e) {
/* I did not create new studentForm every time.*/
var editStudent = Ext.getCmp('editStudent');
if(editStudent == undefined)
editStudent = Ext.create('H.view.EditStudent');
editStudent.getForm().load({
url: 'studentDetails.php',
params: {studentId: studentId},
method:'GET',
success: function (form, action) {
var panelMain = Ext.getCmp('panelMain');
panelMain.items.clear();
panelMain.add(editStudent);
panelMain.update();
panelMain.doLayout();
},
failure: function (form, action) {
/// do nothing
}
});
}
After I edited the student I should come back to grid page, so I do something like this:
var panelMain = Ext.getCmp('panelMain');
var gridView = Ext.getCmp('gridView');
panelMain.items.clear();
panelMain.add(gridView);
panelMain.update();
panelMain.doLayout();
The problem is when I come back to the grid, it does not fire any itemdbclick event any more (it's like the grid is just an image in page, no event fires).
And sometimes when I go to edit studentForm and come back grid work, but when I go to student form again, the student page does not fire any event, when I click edit button, I do not get any answer, I cant see even on mouse hover (that causes changes on button color).
What is the problem here?
I use Extjs 4 and Extjs MVC.
I have one Controller for grid and edit student page.
I think your misunderstand the success config on form.
Try:
listeners:{
itemdblclick: function ( gridView, record, item, index, e, eOpts ) {
var editStudent = Ext.getCmp('editStudent');
if(editStudent == undefined)
editStudent = Ext.create('H.view.EditStudent');
/* Load record in the form.
Form must have on formfields property: 'name' equals to 'dataIndex' */
editStudent.getForm().loadRecord(record);
var panelMain = Ext.getCmp('panelMain');
panelMain.items.clear();
panelMain.add(editStudent);
}
success and failure are the callbacks functions for the submit function.
a) You are not using MVC pattern here. With what Sencha calls MVC, you would have all this code in a Controller instead of event listener.
b) I strongly suspect that this code causes deadlocks somewhere, with events firing so rapidly in succession that browser just freezes. You need to use debugger to see what exactly happens.