Ext.Store Send multiple data at once - java

I am creating a one to many form in one transaction. I really need the record to be created entirely, or not at all. I have implemented a back code using java to rollback all operation should one of the data does not meet the requirement. Interface is using extjs, and I have REST interface with Jackson.
The problem is, how is the best way for ExtJS 4 to send everything in a particular form along with all detail records to a URL? Despite anything I have done, Ext.Store seems to send the data one by one.
Well, in short, I need the Ext.Store to POST something like this as raw with application/json content:
{
id: '',
party: 3,
machine: 'x1',
product: 'pr001',
runtime: 12,
materials: [{
item: 'rm001',
qty: '39.01',
align: '9.930'
}, {
item: 'rm002',
qty: '20.03',
align: '9.0234'
}]
}
The problem is, the child store always send the data as it is entered, and when I set autoSync to false, it still sends them one by one not everything at once through parent store.
Any example code?
Thank you

the way that I do it is through xml but the Idea should be the same
I have the parent store contain a serialize function
and it looks something like this
serialize: function(){
var store = this;
var xml = [];
store.each(function(record){
xml.push('id:'+record.get(id))
xml.push('party:'+record.get(party))
record.materials().each(function(materials_rec){
xml.push('item:'+materials_rec.get(item));
...
});
});
return xml.join('');
}
so I call this function from the controller and I submit an ajax request that will contain all the records of the parent and child stores

Related

Rest api design for an API which can consume three different type of json request

I have a input field or you can assume its a question, for which the user interaction can be of 3 types.
Text
Selection (multichoice)
Image upload (multiple medias)
I want to understand what should be the standard way to accept these responses.
I was thinking to have an API and request like below for Selection
http://example.com/input/{id}/response
Request Sample
{
"selections": [id1, id2]
}
for text type
http://example.com/input/{id}/response
Request Sample
{
"inputValue": "some input provided"
}
for media type
http://example.com/input/{id}/response
Request Sample
{
"files": [
{"name":"medianame", "type":"mediaType"}
]
}
But then if user wants to add a new file to the existing response, there need to be another API
http://example.com/input/{id}/response/{responseId}/upload
This doesn't seem right and readable, what could be the possible best design solution ?

Server-side processing of DataTables in Java

I have a spring boot app with Rest api and Oracle database and react front. It works well, but now I want to try datatables with server side processing. I have quite a lot of entities and controllers. I would like to clarify something. Every example I used to learn used jpa. Is it possible to use JDBC? (I have JDBC set up and I don't want to redo all in jpa). When I tried to change examples to jdbc they usually respond with null pointer exception. Also, how about the controller? I saw examples using both get and post. Usually I use get to get the data. But from what I tried to replicate and use with my database, post seems to be recognized, and Get throws the null. Do I need to specify the draw and other paramenters in body or where? Also, is there maybe only one controller which can somehow prepare the response from others or i should change every single controller? Sorry, it's my first time with datatables server-side.
This is what I use, is it enough?
componentDidMount() {
var index = null;
var table = $(this.refs.main).DataTable({
dom: '<"data-table-wrapper"t>',
data: this.props.data,
"processing": true,
"serverSide": true,
"pageLength": 1,
"ajax": $.fn.dataTable.pipeline( {
"url": "/api/calculations",
"type": "POS"
"data": function (data) {
return data = JSON.stringify(data);
}}),
'pagingType': 'simple',
'order': [[0,'asc']],
'pageLength': 100,
"columns": this.props.columns
});
$(this.refs.main).on('click', 'tr', () => {
var index = table.row(this).index();
var item = table.row(this).data();
this.updateIndex(index);
console.log(index);
console.log(item);
});
}
So, my frontend, after authenticating and authorizating, goes to that component, where I perform (there was pagination in api, i just decided to try without it now)
fetchItems = async (page, elements) => {
try {
const response = await CalculationsApiService.fetchAll()
this.setState({ items: response.data })
} catch (e) {
this.setState({
e,
isError: true,
items: null,
})
}
}
And later in render I Call my child component with my universal table and pass the columns and items as props (the first portion of code in this post) Maybe the error is that I call for data first in parent and then ajax in child? What about the controllers in general? Can I use normal rest controllers somehow and just send something special from my react? When not modified by the tutorial above i have a normal rest api with responseentity

Simple GET request with Facebooks API

I am currently taking a course in app development and I am trying to use Facebooks API for GET requests on certain events. My goal is the get a JSON file containing all comments made on a certain event.
However some events return only a an "id" key with an id number such as this:
{
"id": "116445769058883"
}
That happends with this event:
https://www.facebook.com/events/116445769058883/
However other events such as (https://www.facebook.com/events/1964003870536124/) : returns only the latest comment for some reason.
I am experementing with facebook explore API:
https://developers.facebook.com/tools/explorer/
This is the following GET requests that I have been using in the explorer:
GET -> /v.10/facebook-id/?fields=comments
Any ideas? It's really tricky to understand the response since both events have the privacy set to OPEN.
Starting from v2.4 of the API, the API is now declarative which means you'll need to specify what fields you want the API to return.
For example, if you want first name and second name of the user, then you make a GET request to /me?fields=first_name,last_name else you will only get back the default fields which are id and name.
If you want to see what fields are available for a given endpoint, use metadata field. e.g. GET /me?metadata=true

REST web application: what is the role of XML/JSON?

I am currently learning about REST applications, and particularly Java implementations of REST.
I am unsure of what role JSON or XML plays in in REST?
An example to show my current understanding:
User clicks a button on front end.
User is re-directed to a URL e.g /user/{userid}
Java method in service class calls repository (e.g. Crud Repository) class to retrieve data
Repository pulls data from db (e.g. about that specific user)
data passed back to service class and is then shown on the UI to user.
Where does JSON or XML fit into this process?
If we divide your 5th step...
1) data is returned from service in a certain format
2) UI receives it in that format and display it on the screen.
This format is XML or JSON or even plain text. This is the Accept type you mention when making a call from UI, and set the response header in service.
JSON stands for Javascript Object notation, hence if the response is in JSON format, you can directly use it as a javascript variable by just parsing it using JSON.parse. The Accept type is actually depends on your requirement. For most of the cases JSON is preferred, as it is easily converted to JS object.
It is the format that the data is returned from the service to the front end.
The transmission of data between the front end and the api is done in JSON and/or XML.
So, simplisticly...
the user asks for some data, through some web page, and the web page asks the RESTful API for the specific data, the api sends the web page the data as JSON, then the web page manipulates that and displays it or does whatever it needs to do with that data.
That is a general way to describe its role
A Method inside the controller is shown below which give json response
#RequestMapping(value = "/getSomething", method = RequestMethod.POST)
public #ResponseBody String getSomething(HttpServletRequest req)
{
JSONArray jsonArr = new JSONArray();
Collection someList = new ArrayList();
someList = someService.getsomeList(req); // here you get the response from service class to controller
Iterator iter = categoryList.iterator();
while (iter.hasNext()) // iterate the colleection
{
JSONObject jsonObj = new JSONObject();
SomeClass someObj = (SomeClass) iter.next();
jsonObj.put("name", someObj.getName());
jsonArr.put(jsonObj);
}
return jsonArr.toString(); // return jsonstring as response
}
This is how it can be processed in view (Say JSP). Here an ajax call made to controller and response set to the field in the page.
$.ajax({
url : "getSomething.htm", //request send to controller
type : "POST",
data : {
'someData' : data
},
success : function(data) {
var arr = JSON.parse(data);
response($.map(arr, function(item) {
return {
value : item.name, //setting the value to the view
};
}));
}
});
Hope this helps!
As other have said, in your example JSON/XML fits at the end of the chain (almost), when data is returned from the server to the client.
Think of JSON and XML (and other formats) as a type of box. Some boxes are made of plastic, some are made of cardboard since they serve different purposes.
JSON/XML are types of "boxes" for the data you are sending/requesting to/from the server.
In your example:
User clicks a button on front end.
User is re-directed to a URL e.g /user/{userid}
Java method in service class calls repository (e.g. Crud Repository) class to retrieve data
Repository pulls data from db (e.g. about that specific user)
Data from DB is "translated" from the server's data format ("type of box") into a more common format (like JSON or XML)
Data in JSON/XML format is sent to the front-end for displaying purposes
Think of it this way: if there wasn't a common format for people/systems to refer to, then if you query an Oracle database you would need to be able to understand that format. If you then had to query a Sybase database, then you would need to be able to understand that as well.
To solve this, you can pick a "common" format (a box that it's easier to fit in more trucks, as opposed to a box that can only be transported by a specific type of truck) and thus make it easier to "transport" that data around.
So in essence, JSON/XML is just a way of representing data, and as such it can be used to represent data that was originally in other "hard to read" format and make it easier to read or work with.
For example by returning your DB objects as JSON you can display them in a web page because most web page frameworks understand JSON as opposed to very few of them natively understanding Oracle/Sybase formats (there are drivers to do this but it is beyond the scope of this toy example).
You can also use it to communicate with other servers that also understand JSON (like third-party APIs for example) and thus if servers A and B have different data representations (internally one is Oracle backed and the other is Sybase backed) they can still talk to each other using a "common" format like JSON.

Form submit and HttpServletRequest

I'm facing this problem with regards to Forms and Requests. I'm using sencha and javascript to create a webpage that POSTs a form to a java web application which pulls data from a database and formats it before returning a html page to the client.
The problem I'm facing is that for some reason, while the form does get filled(checked using the debugger in chrome), the java program does not recognise the parameter within the form, and instead reads it as null.
I'm following the method of setting the form from an old java program, which works, however it fails for mine. Does anyone know how I can solve this or where I might be doing wrong?
I've included the javascript and java codes where I decide which page to return below.
Javascript handler for function call to submit form:
var MenuA = function() {
simple.getComponent('flag').setValue('MenuA');
simple.getEl().dom.action = './Soap';
simple.getEl().dom.method = 'POST';
simple.submit();}
Java code to decide choice of page:
if (request.getParameter("flag").matches("MenuA")) {
choice = 2;
} else if (request.getParameter("flag").matches("MenuB")) {
choice = 3;}
FormPanel Code:
var simple = new Ext.form.FormPanel({hidden:true,standardSubmit:true,
items:[
{xtype: 'textfield', hidden: true, name : 'password', label: 'Password', id:'password'}
,{xtype: 'textfield', hidden: true, name : 'user', label: 'user', id:'user'}
,{xtype: 'textfield', hidden: true, name: 'flag', label: 'flag', id: 'flag'}]})
Your
request.getParameter("flag").matches("MenuA");
method is looking for a form element whose name is "flag".
Since your form may not contain the flag field so it assumes it to be null.
So, to overcome you can add an input field to the form with name "flag" and put put your desired value in it.
I think this should work for you.
Nevermind. Found the problem. I didn't realise the form was not being sent properly. Sorry for the trouble!

Categories

Resources