Skip to content

1. How to create view

Jump to bottom
Web Firm Framework edited this page Aug 19, 2017 · 10 revisions
Since wffweb-2.x.x, the concept is browser page (com.webfirmframework.wffweb.server.page.BrowserPage) it provides server client communication. Find sample project from here.

View is a class which generates html/css for a page, eg:- login page is a view. Check out the below sample code for login view java class. You can reuse views to create other views, so try to make a view as much as generic. For instance, HomeView is a common view which will provide HomeLayoutTemplate. A HomeLayoutTemplate is a collection of templates classes and it should not be a collection of views itself. The below sample is not so generic, it is just to show how to create a view.

To create a view class, we have to create a class extended by AbstractHtmlView class as follows

@SuppressWarnings("serial")
public class LoginView extends AbstractHtmlView {

    private static final long serialVersionUID = 1L;
    private DeviceType deviceType;

    public static enum DeviceType {
        MOBILE, MOBILE_5_INCH, MOBILE_5_5_INCH, TABLET, BROWSER;
        private DeviceType() {
        }
    }

    public LoginView(DeviceType deviceType) {
        this.deviceType = deviceType;
    }

    @Override
    public void develop(OutputBuffer out) {

        final Style usernameStyles = new Style();
        final Style passwordStyles = new Style();

        Html rootHtml = new Html(null) {

            Head head = new Head(this);

            Body body = new Body(this, new Style(new BackgroundColor(
                    CssColorName.ALICE_BLUE.getColorName()))) {

                Form form = new Form(this, new Id("loginFormId"),
                        new CustomAttribute("action", "user/login"),
                        new CustomAttribute("name", "userLoginForm")) {

                    Input username = new Input(this, new Id("usernameId"),
                            new CustomAttribute("type", "text"), usernameStyles,
                            new Title("enter your username"));

                    Br br = new Br(this);

                    Input password = new Input(this, new Id("passwordId"),
                            new CustomAttribute("type", "password"),
                            passwordStyles, new Title("enter your password"));

                    Br br2 = new Br(this);

                    Input submitButton = new Input(this, new Id("passwordId"),
                            new CustomAttribute("type", "submit"));

                };

                Br br = new Br(this);

                Div loginDeviceInfo = new Div(this,
                        new Style(deviceType == DeviceType.BROWSER
                                ? "background:green" : "background:blue")) {

                    Blank blank = new Blank(this,
                            "Your login device is " + deviceType);
                };

            };

        };

        if (deviceType == DeviceType.BROWSER) {

            usernameStyles.addCssProperties(new WidthCss(200, CssLengthUnit.PX),
                    new HeightCss(25, CssLengthUnit.PX));

            passwordStyles.addCssProperties(new WidthCss(200, CssLengthUnit.PX),
                    new HeightCss(25, CssLengthUnit.PX));

        } else if (deviceType == DeviceType.MOBILE) {

            usernameStyles
                    .addCssProperties(new WidthCss(100, CssLengthUnit.PX));

            passwordStyles
                    .addCssProperties(new WidthCss(100, CssLengthUnit.PX));

        }

        // prepends the doc type <!DOCTYPE html>
        rootHtml.setPrependDocType(true);

        out.append(rootHtml);
    }

}

To generate browser specific html code, try

public static void main(String[] args) {
        
        LoginView loginView = new LoginView(DeviceType.BROWSER);

        String htmlString = loginView.toHtmlString(true);

        System.out.println(htmlString);

}

it will print

<!DOCTYPE html>
<html>
   <head></head>
   <body style="background-color: aliceblue;">
      <form id="loginFormId" action="user/login" name="userLoginForm"><input id="usernameId" type="text" style="width: 200.0px; height: 25.0px;" title="enter your username"></input><br></br><input id="passwordId" type="password" style="width: 200.0px; height: 25.0px;" title="enter your password"></input><br></br><input id="passwordId" type="submit"></input></form>
      <br></br>
      <div style="background: green;">Your login device is BROWSER</div>
   </body>
</html>

To generate mobile specific html/css code, try

public static void main(String[] args) {
        
        LoginView loginView = new LoginView(DeviceType.MOBILE);

        String htmlString = loginView.toHtmlString(true);

        System.out.println(htmlString);

}

it will print :

<!DOCTYPE html>
<html>
   <head></head>
   <body style="background-color: aliceblue;">
      <form id="loginFormId" action="user/login" name="userLoginForm"><input id="usernameId" type="text" style="width: 100.0px;" title="enter your username"></input><br></br><input id="passwordId" type="password" style="width: 100.0px;" title="enter your password"></input><br></br><input id="passwordId" type="submit"></input></form>
      <br></br>
      <div style="background: blue;">Your login device is MOBILE</div>
   </body>
</html>
(Note: The generated html will be minified, here we formatted it for readability)

For any code assistance, you can send a mail to [email protected], we will post the corresponding code in the wiki. Server client communication is available since wffweb-2.x.x.

Refer wffweb-javadoc, Watch technical videos

Feel free to write us @ [email protected] for any assistance

or

[email protected] for any technical support.

webfirmframework.com since 2014

Clone this wiki locally