Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
add Quick start section #2
some code examples
add Reporting Issue section
  • Loading branch information
SaifJerbi authored May 31, 2017
1 parent 538d6eb commit 07733f1
Showing 1 changed file with 137 additions and 0 deletions.
137 changes: 137 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,142 @@ This will run the application
## Quick start
Using SF Java UI is simple. Follow the steps below to get your first screen.

### Backend

First, add the SF Java UI library to your java web project:

```xml
<dependency>
<groupId>io.sfjava.ui</groupId>
<artifactId>sf-java-ui</artifactId>
<version>RELEASE</version>
</dependency>
```
Create a new Rest Web Service. (example using spring)

```Java
import com.fasterxml.jackson.databind.JsonMappingException;

import io.asfjava.ui.core.schema.UiFormSchemaGenerator;
import io.asfjava.ui.dto.UiForm;

/**
* REST controller for managing Ui.
* The rest controller handle the JsonSchemaForm request. It call the SF JAVA UI library to
* generate the json schema and the form definition
*/
@RestController
@RequestMapping("/api")
public class DemoRestService {

public DemoRestService() {
}

@RequestMapping("/ui")
public UiForm renderUI() throws JsonMappingException {
return UiFormSchemaGenerator.get().generate(DemoForm.class);
}
}
```
Then create the DemoForm class:

```Java
import java.io.Serializable;

import io.asfjava.ui.core.form.ComboBox;
import io.asfjava.ui.core.form.TextArea;
import io.asfjava.ui.core.form.TextField;

/**
* Pojo represent the view to display. It must implement java.io.Serializable.
* We are using SF JAVA UI Annotations to define the different fields layout
*/
public class DemoForm implements Serializable {

@TextField(title = "First Name", placeHolder = "Your first name", description="This is a description for your first name field")
private String firstName;

@TextField(title = "Last Name", placeHolder = "Your last name")
private String lastName;

@ComboBox(title = "Gender", values = { "Male", "Female" })
private String gender;

@TextArea(title = "Address", placeHolder = "Fill your address please", description = "This is a textarea")
private String address;

public String getFirstName() {
return firstName;
}

public void setFirstName(String firstName) {
this.firstName = firstName;
}

public String getLastName() {
return lastName;
}

public void setLastName(String lastName) {
this.lastName = lastName;
}

public String getGender() {
return gender;
}

public String getAddress() {
return address;
}

public void setAddress(String address) {
this.address = address;
}

}
```
### Front

First, add to your java web project the required client side library in order to use [json schema form](https://github.com/json-schema-form).
After, inject the json schema form into your html page and add your Js controller to call the backend.

For the example below we will use [Angular schema form](https://github.com/json-schema-form/angular-schema-form). You can follow the official [documentation](https://github.com/json-schema-form/angular-schema-form#documentation).

Put the code below into your view.html:

```HTML
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
```
Add the angular controller below:

```javascript
angular.module('demoApp', ["schemaForm"]).controller('DemoAppController', function($scope,$http) {
$http.get('/api/ui').then(successCallback, errorCallback);
function successCallback(response){
$scope.schema = response.data.schema;
$scope.form = response.data.form;
$scope.model = {};
}
function errorCallback(error){
//error code
}
});
```

Run your app and go to your screen. Enjoy :)

## Reporting Issue
SF Java UI uses GitHub’s integrated issue tracking system to record bugs and feature requests. If you want to raise an issue, please follow the recommendations below:

- Before you log a bug, please [search the issue tracker](https://github.com/JsonSchema-JavaUI/sf-java-ui/search?type=Issues) to see if someone has already reported the problem.

- If the issue doesn’t already exist, [create a new issue](https://github.com/JsonSchema-JavaUI/sf-java-ui/issues/new).

- Please provide as much information as possible with the issue report, we like to know the version of Spring Boot that you are using, as well as your Operating System and JVM version.

- If you need to paste code, or include a stack trace use Markdown \``` escapes before and after your text.

## Contributing
Contributions are welcome! Please see [Contributing.md](CONTRIBUTING.md) for more info.

0 comments on commit 07733f1

Please sign in to comment.