ext direct spring Form Method and @JsonView
Server
Form load方法的职责是填充值到form表单。一个form load方法用@ExtDirectMethod(ExtDirectMethodType.FORM_LOAD)注解,返回一个属性名称跟form表单字段属性名一致的对象。
@ExtDirectMethod(ExtDirectMethodType.FORM_LOAD) public BasicInfo getBasicInfo(@RequestParam(value = "uid") long userId) { BasicInfo basicInfo = new BasicInfo(); ... return basicInfo; }
函数参数必须用@RequestParam注明,如果代码编译时没有带调试信息或参数名称跟请求参数名不一致。value属性必须跟请求参数名一致。支持defaultValue和注解@RequestParam的required属性,工作方式跟Spirng MVC一致。 支持服务器端对象参数。
Client
BasicForm的配置paramsAsHash的属性值一定要设置为true。form属性名称跟服务器端Java Bean的属性值一致。load方法可以通过配置api的load属性设定。在baseParams设定参数会在发送请求到服务器时同时发送。
//Ext JS 3.x var basicInfo = new Ext.form.FormPanel( { //Ext JS 4.x var basicInfo = Ext.create(‘Ext.form.Panel‘, { paramsAsHash: true, ... defaultType: ‘textfield‘, items: [ { fieldLabel: ‘Name‘, name: ‘name‘ }, { fieldLabel: ‘Email‘, name: ‘email‘ }, { fieldLabel: ‘Company‘, name: ‘company‘ } ], baseParams: { uid: 5, }, api: { load: profile.getBasicInfo, submit: profile.updateBasicInfo } });
可以手动调用load方法附带其它的参数。参数名称跟baseParams中名称一致时会被覆盖。
basicInfo.getForm().load({ params: { uid: 3 } });
Examples
http://demo.rasc.ch/eds/extjs3/form.html
http://demo.rasc.ch/eds/extjs42/form.html
http://demo.rasc.ch/eds/extjs41/form.html
Form Post Method
1.2.1处理FORM_POST的方式跟其它类型的方法一致。仍然支持FORM_POST方法1.1.x版本中的格式。
FORM_POST方法处理Ext.form.Panel的提交。FORM_POST方法用@ExtDirectMethod(ExtDirectMethodType.FORM_POST)注解并且返回一个ExtDirectFormPostResult实例。
@Service public class Profile { @ExtDirectMethod(ExtDirectMethodType.FORM_POST) public ExtDirectFormPostResult updateBasicInfo(@Valid BasicInfo basicInfo, BindingResult result) { if (!result.hasErrors()) { if (basicInfo.getEmail().equals("[email protected]")) { result.rejectValue("email", null, "email already taken"); } } return new ExtDirectFormPostResult(result); } }
方法支持一个正常Spring MVC方法支持的所有参数。 http://static.springsource.org/spring/docs/3.2.x/spring-framework-reference/html/mvc.html#mvc-ann-requestmapping-arguments
也支持同样的验证方式 http://static.springsource.org/spring/docs/3.2.x/spring-framework-reference/html/validation.html#validation-mvc
Client
配置form post请求需要在BasicForm的api配置submit属性。
//Ext JS 3.x var basicInfo = new Ext.form.FormPanel( { //Ext JS 4.x var basicInfo = Ext.create(‘Ext.form.Panel‘, { ... api: { ... submit: profile.updateBasicInfo } });
在submit方法可以添加其它参数。
basicInfo.getForm().submit( { params: { foo: ‘bar‘, uid: 34 } });
Examples
http://demo.rasc.ch/eds/extjs3/form.html
http://demo.rasc.ch/eds/extjs42/form.html
http://demo.rasc.ch/eds/extjs41/form.html
Form Post With Upload
从1.2.1版本后类库处理FORM_POST方式跟其它方法一样。类库支持还1.1.x写法。
FORM_POST方法处理Ext.form.Panel submit方法提交。方法需要用@ExtDirectMethod(ExtDirectMethodType.FORM_POST)注释并且返回ExtDirectFormPostResult实例。如果方法需要处理文件上传,确保在Spring context配置了multipartResolver,类库commons-fileupload和commons-io在classpath路径如果需要的话。
FORM_POST方法处理正常文件上传需要有一个多个类型MultipartFile参数用来访问上传文件。
@Service public class UploadService { @ExtDirectMethod(ExtDirectMethodType.FORM_POST) public ExtDirectFormPostResult uploadTest(@RequestParam("fileUpload") MultipartFile file) throws IOException { ExtDirectFormPostResult resp = new ExtDirectFormPostResult(true); if (file != null && !file.isEmpty()) { resp.addResultProperty("fileContents", new String(file.getBytes(), StandardCharsets.ISO_8859_1)); } return resp; }
正如上面提到的上传功能需要一个MultipartResolver Bean存在于Spring上下文。下面的例子显示了一个通过Spring Java config配置MultipartResolver Bean定义,使用commons-fileupload类库上传文件的例子。
@Bean public MultipartResolver multipartResolver() { CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(); commonsMultipartResolver.setMaxUploadSize(52428800); commonsMultipartResolver.setMaxInMemorySize(20480); return commonsMultipartResolver; }
更多信息参见spring官方文档:http://docs.spring.io/spring/docs/4.0.0.RELEASE/spring-framework-reference/htmlsingle/#mvc-multipart
Client Ext JS 3.x
FormPanel的fileUpload的属性必须设置为true,文件上传才能够成功。下面的例子用了Ext.ux.form.FileUploadField扩展。需要的JavaScript和CSS代码是Ext JS的发行版的一
部分,位于在examples / fileuploadfield文件夹。
方法的配置跟正常的FormPostMethod一样,在属性api配置submit属性。
var form = new Ext.FormPanel({ //... fileUpload: true, items: [{ xtype: ‘fileuploadfield‘, buttonOnly: false, id: ‘form-file‘, fieldLabel: ‘File‘, name: ‘fileUpload‘, buttonCfg: { text: ‘...‘ }, //... }, api: { submit: uploadController.uploadTest } });
Client Ext JS 4.x
Extjs 4本身支持文件上传,不需要扩展。fileUpload属性必须设置为true,form panel需要配置一个xtype为filefield的field,这样用户就可以选择上传文件了。
var form = Ext.create(‘Ext.form.Panel‘, { //... fileUpload: true, items: [ { xtype: ‘filefield‘, buttonOnly: false, fieldLabel: ‘File‘, name: ‘fileUpload‘, buttonText: ‘Select a File...‘ }], api: { submit: uploadController.uploadTest } });
Examples
http://demo.rasc.ch/eds/extjs3/upload.html
http://demo.rasc.ch/eds/extjs42/upload.html
http://demo.rasc.ch/eds/extjs41/upload.html
Form Post Exception Handling
如果FORM_POST方法按类库1.2.1样式写,这部分不需要看。
写1.1.x版本的风格FORM_POST方法由springframework的处理异常。这意味着ExtDirectSpring没有catch和管理异常,而是直接抛出了异常。对于其它类型的所有方法ExtDirectSpring捕捉异常,将它们转换成JSON消息,并将其发送到客户端。
让FORM_POST方法跟其它方法有相同行为,有必要配置一个HandlerExceptionResolver到应用程序。实现HandlerExceptionResolver接口函数需要添加代码
ExtDirectResponseBuilder.create(request, response).setException(ex).buildAndWrite()。
完整例子:
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Component; import org.springframework.web.servlet.HandlerExceptionResolver; import org.springframework.web.servlet.ModelAndView; import ch.ralscha.extdirectspring.bean.ExtDirectResponseBuilder; @Component public class FormPostExceptionHandler implements HandlerExceptionResolver { @Override public ModelAndView resolveException(HttpServletRequest request, HttpServletResponse response, final Object handler, Exception ex) { ExtDirectResponseBuilder.create(request, response) .setException(ex) .buildAndWrite(); return null; } }
@JsonView
(1.3.6后版本支持)
支持Jackson‘s @JsonView功能
ExtDirectMethod注解包含一个jsonView的属性静态定义一个json view类。
动态定义view返回的类,extdirect方法可以返回一个ModelAndJsonView实例或设置返回ExtDirectFormLoadResult或ExtDirectStoreResult类对象jsonView属性。
@ExtDirectMethod(jsonView = Views.Summary.class) public Employee getEmployee() { Employee e = new Employee(); return e; } @ExtDirectMethod public ModelAndJsonView getEmployee() { Employee e = new Employee(); return new ModelAndJsonView(e, Views.Detail.class); } @ExtDirectMethod(value = ExtDirectMethodType.STORE_READ) public ExtDirectStoreResult<Employee> employees() { List<Employee> listOfEmployess = .... ExtDirectStoreResult<Employee> result = new ExtDirectStoreResult<>(listOfEmployess); result.setJsonView(Views.Summary.class); return result; }
在类ModelAndJsonView或返回类指定的jsonView会覆盖注解ExtDirectMethod指定的jsonView类。
除FORM_POST和SSE类型的方法外,其它方法都支持这个特性。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。