For example, suppose I want to show a CellTable on my page. I want to define the rows & columns for this cell table in Javascript, provide a datasource, and then call a GWT method that would inject this cell table into the page and make an AJAX call to populate it with data.
It's important to note that my app already exists in its own war and deployed on the server - I want to deploy a another GWT app war and be able to call the javascript from my application and pass arguments to it (through javascript, for example) so that I can customize my CellTable columns and contents.
The problem is that a GWT application has one entry point and it doesn't accept any arguments - meaning I have to build my customized CellTable using some data that I plant on the html page and then extract inside onModuleLoad(). Doing this seems dumb as I would have to effectively code some kind of input/output language and parse it on my own, such as:
// entry point
public void onModuleLoad() {
// Create a CellTable.
CellTable<Data> table = new CellTable<Data>();
// suppose we have a hidden element on the HTML page which has the column information for our cell table, i.e. <input type="hidden" id="SomeHiddenFieldValueWithInputs" value="Column1|Column2"/>
RootPanel cellTableMetaData = RootPanel.get("SomeHiddenFieldValueWithInputs") ; // suppose the value of this is Column 1|Column2
String tableColumns = cellTableMetaData.getElement().getAttribute("value");
String[] columns = tableColumns.split("|");
for(String columnName:columns)
{
// Add a text column to show the name.
TextColumn<Data> column = new TextColumn<Data>() {
public String getValue(Data object) {
return object.getValue(columnName); // this line doesn't even compile because columnName isn't visible here
}
};
table.addColumn(column, columnName);
}
RootPanel.get("GwtCellTableContainerDiv").add(table);
}
you need to build your second GWT App (the one having the custom CellTable) with the Cross Site Linker. With this linker GWT produces javascript that can be used in other javascript applications. ( http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideModuleXml The section about Linkers)
To communicate with the CellTable App it has to export some Javascript functions with JSNI to be callable from javascript, here is an example: http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html#calling
Related
Simple problem but can't find a solution: I have a Thymeleaf form used to add a new object, say of a Book class. It works perfectly well and I only need that particular form for adding new objects, not editing the existing ones. The question is: how can I put several objects of the Book class in the same single form? So, purely for convenience, instead of filling form for a single book and clicking Send you can fill form for several books at once and only then click Send, have them all inserted into the database (in whatever order) and also have the option to fill the form partially (e.g. the form has room for 5 books but it will also accept 1, 2, 3 or 4 and you can leave the rest blank).
Edit: I've tried passing a list of object to the Thymeleaf template with the form bound to the whole list and iteration inside, but Thymeleaf throws BingingResultError upon rendering it.
You need to use a wrapper object to realize what you want.
Something like:
public class BooksCreationDto {
private List<Book> books;
// default and parameterized constructor
public void addBook(Book book) {
this.books.add(book);
}
// getter and setter
}
Then you need to pass this object as a model attribute in your controller:
BooksCreationDto booksForm = new BooksCreationDto();
model.addAttribute("form", booksForm);
bind fields using index property
th:field="*{books[__${itemStat.index}__].title}"
and get back the result with
#ModelAttribute BooksCreationDto form
in your controller.
For a complete and detailled explaination visit: https://www.baeldung.com/thymeleaf-list
This is the List Report type of Smart Template application
Here I have selected 2nd and 5th row, I also have a button named Send Requests in the section part which is highlighted. If I click this button it calls a javascript controller function which is defined in the extensions of the application. In this js function how can I retrieve the selected rows that are selected?
I have enabled the checkboxes in this page by mentioning this code
"settings": { "gridTable": false, "multiSelect": true } in the manifest.json
As it was recommended by this link https://sapui5.netweaver.ondemand.com/#docs/guide/116b5d82e8c545e2a56e1b51b8b0a9bd.html
I want to know how can I retrieve the rows which got selected?
There is an API that you can use for your use case. It is described here: https://sapui5.netweaver.ondemand.com/#docs/guide/bd2994b69ef542998becbc69ab093f7e.html
Basically, you just need to call the getSelectedContexts method. Unfortunately you will not be able to really get the items themselves, only the binding contexts (which point to the data entities which are selected). Excerpt from the documentation:
After you have defined a view extension, you can access and modify the
properties of all UI elements defined within these extensions (for
example, change the visibility). However, you cannot access any UI
elements that are not defined within your view extensions.
In this type of table there is way.
var myTable=sap.ui.getCore().byId("your table id");
get all rows:
var myTableRows=myTable.getRows();
now get selected Indices
var selectedIndeices=myTable.getSelectedIndices(); //this will give you array of indeices.
now run loop on indeices array. And get particular row item;
// get binding path
var bindingpath=myTableRows[2].getBindingContext().sPath; // this will return eg:"/ProductCollection/2"
// now get Binding object of that particular row.
var myData=myTableRows[2].getModel().getObject(bindingpath); // this will return binding object at that perticular row.
// once your loop is over in the end you will have all object of selected row. then do whatever you want to do.
If you use smart template create an extension.
This is the standard event befor the table is rebinding:
onBeforeRebindTableExtension: function (oEvent) {
this._table = oEvent.getSource().getTable();
}
In your action function (or where you want) call the table and get the context :
this._table.getSelectedContexts();
I have a need for chained select boxes in my zend framework project: Countries->Regions->Provinces->Towns.
I am using zend form and intend to resubmit to reload the contents of the of the chained select boxes when one of them is changed. I have written some code in a PHPunit test to simulate what I will need in my controllers.
I will require to use this regional structure in quite a few different forms on my site and also plan to enhance with AJAX.
I don't want to be duplicating this code, so where should I store it and how should it be structured so that I can reuse its functionality. I thought perhaps an action helper?
public function testCanGetRegionalStructureFromUser() {
$user = new \Entities\User;
$user = $this->em->getRepository('Entities\User')->findOneByEmail('testuser#yahoo.com');
$town = new \Entities\Town;
$town = $user->getTowns_id();
// if user has not town input, then use the default
if (is_null($town)) {
$config = Zend_Registry::get('config');
$defaulttownid = $config->towns->defaultid;
$town = $this->em->getRepository('Entities\Town')->find($defaulttownid);
}
// get the town id
$townid = $town->getId();
//get the province
$province = $town->getProvinces_id();
$provinceid = $province->getId();
//get the region
$region = $province->getRegions_id();
$regionid = $region->getId();
//get the country
$country = $region->getCountries_id();
$countryid = $country->getId();
$countrylist = $this->em->getRepository('Entities\country')->findActiveCountries();
$regionlist = $this->em->getRepository('Entities\Region')->findActiveRegions($countryid);
$provincelist = $this->em->getRepository('Entities\Province')->findActiveProvinces($regionid);
$townlist = $this->em->getRepository('Entities\Town')->findActiveTowns($provinceid);
}
countrylist,regionlist etc. are ready to be injected into my form as options that will be used to populate the select boxes.
I think that for this case, creating a composite Zend_Form_Element makes the most sense.
This way, you can easily add the element to your forms with only a few lines of code, you can have validators built into the element so you aren't repeating that logic, and with your own decorator you can easily control the layout of the selections and only have to change one file to reflect the changes to all forms.
For one of my projects I created a composite element that had a plain text box that used autocomplete to search customers in real time as the user types. Once a customer is selected from the autocomplete list, an ajax call is made that fetches a list of properties owned by that customer and a dropdown box is updated with the new list.
The element provides access to the data values (customer, property) and the decorator renders the individual elements in a group, and set up the necessary event handlers and ajax calls (most of that code is in an external .js file.
Creating and Rendering Composite Elements
Similar to the above reference, by Matthew Weier O'Phinney
Video: Creating composite elements
How can I create a widget from the Javascript. For example I need to create a simple button or table . I have some thirdaparty
javascripts which draw tables. Now if I want to create GWT widget by using those javascript what should I do first?
How other frameworks like GWTExt,SmartGWT, are using custom Widgets? Are they starting from the scratch or They reuse the
GWT widget functionality? Like if I want to create one table in my own style, do I need to inherit GWT Table?can anybody
give one example or sample code how to create a widget from the javascript? If my questions are wrong please excuse me.
example:
Mytable table = new Mytable(2,3). then it should draw my own table with 2 columns and 3 rows
You are asking a lot of questions here. In your case you should create as much questions in so as you have qustion marks in your original post.
Regarding your first question, look at JSNI.
Edit: So okrasz gave you a number of references to look at. From my side I’ll try to help with your example using JSNI (because you were asking about binding your existing js to GWT).
Let's say you have your MyTable defined as
<script type="text/javascript">
MyTable = function(a,b){
this.a = a;
this.b = b;
};
</script>
and your js file is called mytable.js
Now, we need this to be a component. In your .java file in GWT library project create a class like this:
public class MyTable extends JavaScriptObject {
protected MyTable(){}
public static native MyTable create(double a, double b) /*-{
return new MyTable(a,b);
}-*/;
public final native double getA() /*-{
return this.a;
}-*/;
public final native double getB() /*-{
return this.b;
}-*/;
}
Add your original js file to the resources and add a script node to your gwt.xml module like this:
<module>
<inherits name="com.google.gwt.core.Core"/>
<script src="path/to/mytable.js"/>
<source path="client"/>
<public path="public"/>
</module>
That's pretty much it. I might forgot something but you can reference any oss project that does the same thing you need. For instance, take a look at swfupload-gwt project source code.
Here is the documentation how to create custom widgets. Unfortunately they mostly talk about creating composite widgets out of existing ones. But for creating ones from scratch they suggest either writing in Java as their Button is created - here is Button source code for reference. For widgets in JS they suggest source code for TextBox.
Here is also one more article about creating widgets: http://davidmaddison.blogspot.com/2009/01/creating-gwt-component.html
I'm new to ASP.NET MVC 2, and I need some advice on the best 'Control' to use for this situation. (I'm know ASP.NET MVC doesn't really use server controls, but there are a number of add-ons such as MVC Controls ToolKit).
Here's what I need to do. I have a table in a database which contains a list of tests. I need to be able to display these in a View, and allow the user to select them in some way (via checkboxes or whatever).
Then I need to be able to determine which items are selected.
Can someone tell me the best way to achieve this?
Any help/comments are appreciated.
TIA.
If you do it with client side functionality, it will end up consisting mainly of two parts:
The visual HTML
The functional Javascript
How would I'd do it
I'd create a partial view that displays the table. If you need to reuse this, put the partial in Views/Shared folder
Each TR of the table would have serialized JSON of the object that is displayed in that particular row. Serialization can be done by writing a custom object extension method, so you can call ToJson() on any object afterwards
<tr data='<%= this.Model[0].ToJson()'>
<td class="actions"> Select ... </td>
<td>...</td>
...
</tr>
Mind the extra column with actions that you need to provide.
also add a Javascript that would provide the client side functionality (important: this script uses jQuery)
$(function(){
var selection = {};
$(".actions a.action-select").click(function(evt){
evt.preventDefault();
var context = $(this);
var rowObj = $.parseJSON(context.closest("tr[data]").toggleClass("selected").attr("data"));
if (selection[rowObj.Id])
{
// deselect
delete selection[rowObj.Id];
}
else
{
// select
selection[rowObj.Id] = rowObj;
}
});
This way your rows will have additional selected class when they're selected and your selection object will always have selected rows (or better said their objects) taht you can use however you please.
Additional note
Why did I set selection to be an object rather than an array? Because Javascript objects are kind of associative arrays so searching for a particular element is faster than enumerating over its elements it it was a normal array. This way I can immediately see whether row is selected or not and also remove an element from it directly.
Outcome
This way you'll have a reusable table that you can put on various pages (hence similarities with user controls). but in case you'd need to add several of these tables to your pages you'd have to tweak them a little so that client-side functionality won't mix data between different tables.