Git Product home page Git Product logo

wff's Introduction

Build Status Codacy Badge Stackoverflow Maven Central javadoc GitHub license twitter Donate

wffweb

wffweb is one of the modules of webfirmframework. It's an open source java framework for real time application development which can generate html5 and css3 from java code, read more...

To support us please donate anything you wish to the author of this framework!

Donate

(For the survival of this framework, some ads are shown in webfirmframework.github.io and webfirmframework.com web sites. These are temporary ads and will be removed soon. We are really sorry if it causes any inconvenience to your surfing.)

Here are some sample codes

Sample1 :-

Since 3.0.9 or later you can use functional style coding as follows. This is the recommended coding style vs anonymous coding style.

Html rootTag = new Html(null).give(html -> {
       	 
    new Head(html);
       	 
    new Body(html).give(body -> {           	 
        new NoTag(body, "Hello World");           	 
    });
       	 
});
// prepends the doc type <!DOCTYPE html>
rootTag.setPrependDocType(true);
System.out.println(rootTag.toHtmlString(true)); 

or the same in few lines

Html html = new Html(null);
new Head(html);
Body body = new Body(html);
new NoTag(body, "Hello World");


// prepends the doc type <!DOCTYPE html>
html.setPrependDocType(true);
System.out.println(html.toHtmlString(true)); 

prints the following output

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
Sample2 :-
Div div = new Div(null); 
System.out.println(div.toHtmlString()); 

prints :-

<div></div>
Sample3 :-
Div rootTag = new Div(body).give(div -> {
    new Div(div);
    new Div(div);
});
System.out.println(rootTag.toHtmlString()); 

prints :-

<div>
<div>
</div>
<div>
</div>
</div>
Sample4 :-
Div div = new Div(null, new Width(50, CssLengthUnit.PX));
System.out.println(div.toHtmlString()); 

prints :-

<div width="50px"></div>
Sample5 :-
Div div = new Div(null, new Style(new BackgroundColor("green")));
System.out.println(div.toHtmlString()); 

prints :-

<div style="background-color: green;"></div>
Sample6 :-
final Style paragraphStyle = new Style("color:red");
Html rootTag = new Html(null, new CustomAttribute("some", "val"),
        new Id("htmlId"), new Style("background:white;width:15px"))
                .give(html -> {

                    new Div(html, new Id("outerDivId")).give(div -> {

                        int[] paragraphCount = { 0 };

                        new Div(div).give(div2 -> {

                            new H1(div2).give(h -> {
                                new NoTag(h, "Web Firm Framework");
                            });

                            for (paragraphCount[0] = 1; paragraphCount[0] < 4; paragraphCount[0]++) {
                                new P(div2, paragraphStyle).give(p -> {
                                    new NoTag(p,
                                            "Web Firm Framework Paragraph "
                                                    + paragraphCount);
                                });
                            }

                        });
                    });

                    new Div(html, new Hidden());
                });

paragraphStyle.addCssProperty(AlignContent.CENTER);

System.out.println(rootTag.toHtmlString(true));

prints

<html some="val" id="htmlId" style="background:white;width:15px;">
<div id="outerDivId">
    <div>
        <h1>Web Firm Framework</h1>
        <p style="color:red;align-content:center;">Web Firm Framework Paragraph 1</p>
        <p style="color:red;align-content:center;">Web Firm Framework Paragraph 2</p>
        <p style="color:red;align-content:center;">Web Firm Framework Paragraph 3</p>
    </div>
</div>
<div hidden></div>
</html>

and we can add/change styles later, eg:-

paragraphStyle.addCssProperties(new WidthCss(100, CssLengthUnit.PER));

Color color = (Color) paragraphStyle
        .getCssProperty(CssNameConstants.COLOR);
        
color.setCssValue(CssColorName.BROWN.getColorName());

System.out.println(html.toHtmlString(true));

It will add width 100% in aboutParagraph and will change color to brown, its generated html code will be as follows

<html some="val" id="htmlId" style="background:white;width:15px;">
<div id="outerDivId">
    <div>
        <h1>Web Firm Framework</h1>
        <p style="color:brown;align-content:center;width:100.0%;">Web Firm Framework Paragraph 1</p>
        <p style="color:brown;align-content:center;width:100.0%;">Web Firm Framework Paragraph 2</p>
        <p style="color:brown;align-content:center;width:100.0%;">Web Firm Framework Paragraph 3</p>
    </div>
</div>
<div hidden></div>
</html>
Checkout

Refer Developers Guide to get started

How to resolve wffweb dependency in build tools like maven, ivy, Scala SBT, Leiningen, Grape, Gradle Grails or Apache Buildr

wffweb released versions

You can request features or report bugs here

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

wff's People

Contributors

visruth avatar webfirmframework avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

wff's Issues

Implement AbstractHtml#addInnerHtmls

There is AbstractHtml#addInnerHtml method which can insert only one tag as inner html. So with the current features to add multiple tags as inner html is using two steps of code

AbstractHtml#removeAllChildren
AbstractHtml#appendChildren

This makes two ui push to the client, one for removeAllChildren and one for appendChildren method. If there is a similar method to add multiple tags as inner html Eg:- AbstractHtml#addInnerHtmls(AbstractHtml... innerHtmls) which can remove all current children and add the given tags as inner html (children) then this can reduce the UI push from 2 to 1. This will be good optimization for UI updates push.

Missing attribute class AcceptCharset

Currently, there is no attribute class available for accept-charset attribute. So there needs to be an implementation for AcceptCharset attribute class.
(Currently, CustomAttribute class is available for its replacement)

Implement getFirstChild method for tag

Currently, there is no method to get the first child from a tag, the only way is to get all children and find the first one. Getting the first child is a frequent use case so having an efficient way to get the first child will be very useful.

Alt attribute requires default constructor

Img tag without Alt attribute is not valid as per html standard. Currently, Alt class has no default constructor. It will be useful if there is a default constructor which initializes empty value.

Bug fix for parsing empty inner bm array bytes

WffBMObject was unable to parse when its value is an empty array. Eg:- when parsing bm bytes of {'key' : []} WffBMObject was throwing exception because an empty WffBMArray is represented by no bytes.

Implementation of TagRepository

Implement a TagRepository class for BrowserPage, the concept described in this page.

The TagRepository must contain at least the following methods.

  • findTagById
  • findTagsByAttribute
  • findOneTagByAttribute
  • findTagsByAttributeName
  • findOneTagByAttributeName

There must be a method to get the corresponding TagRepository from BrowserPage object, eg: BrowserPage#getTagRepository

Proposal for removedFromContext method in BrowserPage

Currently, the way to track if a BrowserPage instance is removed from BrowserPageContext is writing code inside session close listener.
When BrowserPageContext.INSTANCE.httpSessionClosed(session.getId()); is called inside session close listener all BrowserPage instances under that session will be removed from context. And using BrowserPageContext.INSTANCE.getBrowserPages(httpSessionId) all browserPages under that session can be retrieved before invoking httpSessionClosed.

For better convenience of the developer :-
Proposing a overriding method removedFromContext in BrowserPage which will be executed when the BrowserPage instances is removed from BrowserPageContext.

Fix incorrect parsing in AbstractHtml.getTagFromWffBMBytes

AbstractHtml.getTagFromWffBMBytes is incorrectly parsing attribute with no value. Eg:

Video video = new Video(null, new Controls());

//prints <video controls></video>
System.out.println(video.toHtmlString());

//prints <video controls="controls"></video>
System.out.println(AbstractHtml.getExactTagFromWffBMBytes(video.toWffBMBytes(StandardCharsets.UTF_8),  StandardCharsets.UTF_8).toHtmlString());

In this example the last line should also print <video controls></video>

Implement getChildAt method for tag

Currently, there is no method to get a child at a particular index in its children. Implement a getChildAt method which will return the child at the specified index.

Missing attribute class DateTime

Currently, there is no attribute class available for datetime attribute. So there needs to be an implementation for DateTime attribute class.
(Currently, CustomAttribute class is available for its replacement)

Missing attributes Cols, Rows and For

Cols, Rows and For attributes are missing. There must be a basic implementation for these attributes otherwise the developer will have to use CustomAttribute instead of it.

AbstractHtml#toHtmlString() method improvements

Currently, the tag's toHtmlString() method is not returning the modified string even if its children are modified,

eg:-

Div div = new Div(null, new Id("one")) {{
      new Span(this, new Id("five"));
}};
System.out.println(div.toHtmlString());

//prints
<div id="one">
<span id="five"></span>
</div>

//adding a child tag 
Span span = TagRepository.findOneTagAssignableToTag(Span.class, div);
span.appendChild(new P(null));
System.out.println(div.toHtmlString());

//here we expect
<div id="one">
<span id="five">
<p></p>
</span>
</div>

//but prints the previous because the first div.toHtmlString() cached its previous state for performance.
<div id="one">
<span id="five"></span>
</div>

However, the div.toHtmlString(true) will print the modified state of the tag.
The tag's toHtmlString() must be improved to return its modified state.

Implement new feature insertBefore in AbstractHtml

Similar to AbstractHtml#appendChild, it needs to implement AbstractHtml#insertBefore so that any tag can call it like div.insertBefore(new NoTag(null, "hello")).

A useful use case is : There is a table containing thousands of rows and it needs to add a row in the middle. Using insertBefore method any row can be added before any row in the table.

Missing attribute class Async

Currently, there is no attribute class available for asych attribute. So there needs to be an implementation for Async attribute class.
(Currently, CustomAttribute class is available for its replacement)

Implement client ping for socket communication

When the websocket client is idle (i.e. no data transfer between client and server) for a long time the server (the proxy server in between the websocket client and websocket server) may automatically close socket. But a single page app it is important to keep the communication available at any time.
Currently, the html5 websocket client api doesn't not provide methods to make a ping.
So, implement a custom optimal client ping for websocket client and the methods to set time delay for periodic ping.
This may be used to avoid the server automatically closing the socket when it is idle for a specific period of time.
This feature may be considered as a heartbeat time for websocket.

Implement feature to push a set of tag manipulations together

Checkout the below sample code

for (AbstractHtml tag : tags) {
    //pushes to ui
    tag.removeAttributes("style");
}
//pushes to ui
div.removeAllChildren(); 

The total number of push with this code is tags.length + 1. If the tags.length is 100 then the total number of pushes to the client will be 100 + 1 = 101 where 1 is for div.removeAllChildren push. So there must be a way to avoid this many number of pushes to a single push. In a normal speed network the end user will not feel any of these sequence of ui changes but in slow network the end user might feel the style is getting deleted one by one and after that all children are removed. For an end user it's a bug.

In the perspective of a developer/framework the solution is an enhancement/feature. The solution for this issue will be a great optimization.

Implement a method in BrowserPage to check if a tag exists in the UI

Currently there is no method to check if the a particular tag exists in the UI. Implement BrowserPage#contains(AbstractHtml tag) method to check whether the given tag exists anywhere in the UI.

This will be helpful if a particular tag uses an infinite loop thread which needs not to continue running if the tag is removed from the UI.

To push server updates if a new webSocket listener is added/set

use case : client clicked on a button to update UI. The button
click event is received at server side and the changes took place at
server side. But, when the server tried to push the UI updates to the
client the webSocket connection lost so the UI updates are kept in
queue. After that, the client made a successful webSocket connection but
the server (UI) updates will not be pushed until there is something to
push again. The client clicked on the button again but as there is
nothing to change in the server there won't be anything to push from the
server. To fix this minor bug, it's required to push server updates
queue when new webSocket listener is added/set.

Needs improvement for AbstractHtml.insertBefore method

Eg:-

Div div1 = new Div(null);
div1.insertBefore(new Span(null));

In the above code the insertBefore method throws NoParentException as there is no parent for div1 tag. It's not required to throw this exception. There are cases where there is no parent tag for a tag but the insertBefore method needs to be used.

Proposal for setChildText and getChildText methods in TextArea

The contents to display in text area box is adding content as child of this tag. So if there is a short cut methods for this, it will be easy for the developer.

Current way to add content in text area is 
TextArea textArea = new TextArea(null) {{
    new NoTag(this, "This is the content shown in box");
}};

So the proposed additional short cut way is

TextArea textArea = new TextArea(null);
textArea.setChildText("Sample Text Content");
String contentOfBox = textArea.getChildText();

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.