I'm a java developer. I use SWT and JFace databinding in most projects. Recently, I've been task to work on a different kind of project involving PHP. I need to develop a web application using PHP on server side and JavaScript on client side. So far, I'm strutting with jQuery to do all the work. jQuery is nice, but not nice enough to provide all the plumbing required to build the web interface quickly.
In desktop application, JFace databinding provide all the features to bind widgets, form, labels to the model allowing you to sync the content of a form to an object, validate the content of the form and provide feedback if the content is ok or not.
e.g.: For a text field, you may bind the text value to the property of an object. Add a validation to check if the text value is empty. When empty, show a tool tips asking the user to enter a value and disable the submit button.
So I'm aksing you, is there anything similar to JFace Databinding for JavaScript ?
http://visualstudiomagazine.com/articles/2012/02/01/2-great-javascript-data-binding-libraries.aspx
http://uberpwn.wordpress.com/2010/10/10/databinding-js-objects-into-html-forms-with-jquery-datalink-and-jquery-tmpl/
http://blogs.claritycon.com/blog/2011/02/mvvm-databinding-javascript-with-knockout-html5-boilerplate/
Right now the modern components that support databinding are angular, aurelia and react (sort of... +redux that is about to be dead).
jQuery doesn't provide nice databinding implementation. It needs to manually wire up all prop changes. Probably implement some Observer/Subscriber approach.
Or use some component for databinding tasks that provides enough convenient databinding definition commands. I did it with databindjs. e.g.
// Lets assume that there is just simple form (target)
var simpleForm = {
input: $('.simple .input-value'),
output: $('.simple .output-value')
};
// And here is the simple model object (source)
var model = {
text: 'initial value'
};
// Lets set two directional binding between [input] <-> [text]
var simpleBinding = bindTo(simpleForm, () => model, {
'input.val': 'text', // bind to user input
'output.text': 'text' // simple region that will react on user input
});
// This command will sync values from source to target (from model to view)
updateLayout(simpleBinding);
subscribeToChange(simpleBinding, () => {
$('.simple .console').html(JSON.stringify(model));
});
// Just initialize console from default model state
$('.simple .console').html(JSON.stringify(model));
The full solution here
Related
The java API for CICS is here. Does anyone know if there any method to put a couple of radio buttons to a web form using this API?
Here's my code to create radio button
HttpRequest req = HttpRequest.getHttpRequestInstance();
String msg = "ZEUSBANK ANTI-FRAUD CHECK BY SHE0008.<br> "
+ "When investigation is complete. Tick the check box and submit.<br>";
String template = "<form><input type=\"radio\"> YES<br><input type=\"radio\"> NO<br></form>";
HttpResponse resp = new HttpResponse();
Document doc = new Document();
doc.createText(msg);
doc.appendFromTemplate(template);
resp.setMediaType("text/plain");
resp.sendDocument(doc, (short)200, "OK", ASCII);
But when I run it on a browser, it print plain text and doesn't convert html tag.
Fixed it, I just change media type from text/plain to text/html and it works.
As you've already discovered, you needed to send the request with the text/html content type.
If you're planning to do more Java web-based work through CICS Java, you might want to investigate the embedded WebSphere Liberty. It adds support for Java EE features, which includes JSF, JSP and Servlets, which can make web development in Java a lot easier.
Tri,
I haven't used CICS for 15 years, so I doubt I'm an expert anymore. But looking quickly at the API, it seems like all the presentation logic would be in your regular Java code. You would then format appropriate messages and invoke the CICS API to update the server & get a response.
There doesn't seem to be any 'BMS-related' methods at all (which is a good thing).
The only 'field' method I see is com.ibm.cics.server.FormField but that only has get() methods, not set().
Are you just starting with Java CICS, or are you just stuck on this particular issue? If you have some sample code of what you are trying, post it so we can see if anyone has any ideas.
HTH, Jim
I've a registration form validated with jquery.validate plugin.
Now, if the form its not valid, i want to put the result of validate in a bootstrap popover, but really, i don't have idea how i can do this.
Some help?
Checkout this: https://github.com/mingliangfeng/jquery.validate.bootstrap.popover
it is a plugin integrating jQuery validate and bootstrap popover, you may get some idea there.
The jQuery.validate plugin has a method called errorPlacement.
This takes 2 arguments:
error: the error message created by the validator on that element.
element: the element being validated.
The Validator sends the error/valid message here and you can handle all the placement logic in there. What I tend to do is put all that in .setDefaults before initialising the validator.
Example:
jQuery.validator.setDefaults({
ignore: "",
errorPlacement: function (error, element){
// Insert error messgae placement logic here
}
});
For showing and hiding tooltips for your errors, you'd need to use the errorPlacement and success callback functions.
Since you've shown no code of your own, here is a similar setup using the Tooltipster plugin, just to give you an idea about how to use these callback functions. Adjust as needed for Bootstrap popovers or whatever other tooltip plugin you may use.
$(document).ready(function () {
$('#myform').validate({
// rules and options here,
errorPlacement: function (error, element) {
// construct tooltip with message as per plugin method
$(element).tooltipster('update', $(error).text());
// show tooltip as per plugin method
$(element).tooltipster('show');
},
success: function (label, element) {
// hide tooltip as per plugin method
$(element).tooltipster('hide');
}
});
});
DEMO: http://jsfiddle.net/kyK4G/
Reference: https://stackoverflow.com/a/14741689/594235
Documentation: http://jqueryvalidation.org/validate
I have a template accountlist.scala.html looking like this:
#(accounts: models.domain.AccountList)
#titlebar = {<p>some html</p>}
#content = {
#for(account <- accounts) {
<p>#account.name</p>
}
}
#main(titlebar)(content)
... and another template account.scala.html like this:
#(account: models.domain.Account)
#titlebar = {<p>#account.name</p>}
#content = {
#for(transaction <- account.getTransactions()) {
<p>#transaction.detail</p>
}
}
#main(titlebar)(content)
From both of them I am invoking the template main.scala.html.
I have access to the entire Account POJO in the first view accountlist.scala.html, so really there is no need for me to invoke the server to get the details of the account when I go to the view in which I display the details. I would just like to change view on the client side. How could I call the second view account.scala.html from the view accountlist.scala.html a user clicks on an account in the list? I am ready to change the templates as needed.
I have provided a previous answer, which is still available at the end of this post. From your comments, however I understand that you are asking for something else without understanding how dangerous it is.
There are three ways of handling your use case, let's start with the worst one.
A stateful web application
If you have loaded data into a Pojo from some data source and you want to re-use the Pojo between multiple requests, what you are trying to do is to implement some kind of client-state on the server, such as a cache. Web applications have been developed in this way for long time and this was the source of major bugs and errors. What happens if the underlying account data in the database is updated between one http request and the following? Your client won't see it, because it use cached data. Additionally, what happens when the user performs a back in his browser? How do you get notified on the server side so you keep track of where the user is in his navigation flow? For these and others reasons, Play! is designed to be stateless. If you are really into web applications, you probably need to read about what is the REST architectural style.
A stateless web application
In a stateless web applications, you are not allowed to keep data between two http requests, so you have two ways to handle it:
Generate the user interface in a single shot
This is the approach which you can use when your account data is reduced. You embed all the necessary data from each account into your page and you generate the view, which you keep hidden and you show only when the user clicks. Please note that you can generate the HTML on the server side and with Javascript makes only certain part of your DOM visible, or just transfer a JSON representation of your accounts and use some kind of templating library to build the necessary UI directly on the client
Generate the user interface when required
This approach becomes necessary when the account data structure contains too many informations, and you don't want to transfer all this information for all the accounts on the client at first. For example, if you know the user is going to be interested in seeing the details only of very few accounts, you want to require the details only when the user asks for it.
For example, in your list of accounts you will have a button associated with each account, called details and you will use the account id to send a new request to the server.
#(accounts: models.domain.AccountList)
#titlebar = {<p>some html</p>}
#content = {
#for(account <- accounts) {
<p>#account.name <button class="details" href="#routes.Controllers.account(account.id)">details</button></p>
}
}
Please note that you can also generate the user interface on the client side, but you will still need to retrieve it from the server the data structures when the user clicks on the button. This will ensure that the user retrieves the last available state of the account.
Old answer
If your goal is to reuse your views, Play views are nothing else then Scala classes, so you can import them:
#import packagename._
and then you use it in another template:
#for(account <- accounts) {
#account(account)
}
The question reveals a misunderstanding of play framework templates. When compiling the play project the template code is transformed to html, css and javascript.
You can not "invoke"/link another template showing the account transactions from a href attribute of your Account row. However, you can do any of the following:
In case you have loaded all transactions from all accounts to the client in one go: extend the template to generate separate <div> sections for each account showing the transactions. Also generate javascript to 1) hide the overview div and 2) show the specific transaction div when clicking on one of the accounts in the overview. Please see the knockout library proposed by Edmondo1984 or the accordion or tabs in twitter bootstrap.
In case you only load the account overview from the server. Generate a link such as this one href="#routes.Controllers.account(account.id)" (see Edmondo1984 answer) and make another template to view this data.
Since the question concerned a case in which you got all data from the server, go by option 1.
How do you create/set Record Selection Formula programatically on crystal reports using java? I tried searching on the internet but the only option is through IFilter which requires a Crystal Report Server. My program only uses the JRC library. Also this is a java desktop application using swing.
It may be a bit late, but maybe this is useful for someone:
reportClientDoc.getDataDefController().getRecordFilterController().setFormulaText("your record selection formula here");
I was doing some research about this and noticed that there are 3 methods with which you can do this:
Using the IFilter interface as shown in this example provided by SAP
// Set the filter string to be used as the Record Filter
String freeEditingFilter = "{Customer.Country} = 'Canada'";
// Retrieve the record filter for the Data Definition Controller
IFilter iFilter = clientDoc.getDataDefController().getDataDefinition().getRecordFilter();
// Set the filter to free editing text filter string
iFilter.setFreeEditingText(freeEditingFilter);
// Modify the filter through the Record Filter Controller to the report
clientDoc.getDataDefController().getRecordFilterController().modify(iFilter);
I am using the JRC only without a Crystal Report Server and the above example worked for me.
As Francisco said in his answer, using the setFormulaText method:
clientDoc.getDataDefController().getRecordFilterController().setFormulaText("{Customer.Country} = 'Canada'");
Using parameters. Parameters can be passed to the report using code (you can use the addDiscreteParameterValue function in the helper class) or else they can be filled in by the user during runtime. I chose not to opt for this option because they can not be set to optional
If you want to create a crystal report of your program, you need another jar file of software.
You can create your program in NetBeans IDE and link your IDE with IReport software which is used in NetBeans for creating Reporting in java.
You get many example from internet about this.
I'm currently building a SmartGWT-based web application (using the Portlet Layout). So I have several "Portlet", which basically extend GWT Window with different content. Now I want a Portlet to display Dygraphs. So I've created an RPC Service implementation which returns a JSON String (based on a DataTable object).
Since I cannot directly serialize a DataTable object I use
String json = JsonRenderer.renderDataTable(data, true, true).toString();
where "data" is of type DataTable.
Now this String gets correctly passed to the client side where I want to create the Dygraph. In this thread , someone suggested to use
public static native DataTable toDataTable(String json)
/-{ return new $wnd.google.visualization.DataTable(eval("(" + json + ")")); }-/;
If I use this in my GWT client code, i get an error saying
com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.google.visualization is undefined
Do i miss some "import" of the visualization API? Where do i have to instantiate it?
Or is there another way to get the JSON datastring into the Dygraph? I can't find any examples...
Thank you for any hint!
I assume you have included the visualization.jar and the visualization namespace in your module's XML
<inherits name="com.google.gwt.visualization.Visualization"/>
This will give you the Classes. You probably have done this otherwise you would have gotten a compiler error.
However you also have to include the actual visualization javascript file from the google servers (the visualization.jar is only a wrapper). This can be done in two different ways:
1.) Include it in the host page:
<script type="text/javascript">
google.load("visualization", "1", {'packages' : ["corechart"] });
</script>
or
2.) Load it dynamically where you need it:
VisualizationUtils.loadVisualizationApi(onLoadCallback, MotionChart.PACKAGE);
see http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=VisualizationGettingStarted
Btw. I have forked the Dygraphs Project and changed the GWT wrapper to more like the other visualization wrappers. You can check it out here: https://github.com/timeu/dygraphs
Edit: I have a new GWT wrapper for dygraphs that uses the GWT 2.8's new JsInterop: https://github.com/timeu/dygraphs-gwt
Note: I changed some behaviour in dygraphs and added some features which weren't available in the upstream code.