Showing posts with label angularjs. Show all posts
Showing posts with label angularjs. Show all posts

27 December 2016

this is why I don't like prime* frameworks

Primefaces is a heavyweight framework, I don't prefer to use it on my next project.

However, as angular js is promising, I looked into primeng: http://www.primefaces.org/primeng/  hopefully to find it more lightweight than its parent/sibling; primefaces.

But I think still it is heavyweight framework that had to generate too much HTML to get simple staff done, here's the example HTML generated code for bootstrap PRIMARY button:
<button label="Primary" pbutton="" type="text" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text ui-c">Primary</span>
</button>
What's the heck, why button of type text that have an internal span, and none of them bootstrap classes so I can easily customize easily later, but instead prime specific classes (I think same as primefaces classes)

Also, the autocomplete component:
<p-autocomplete field="name" placeholder="Countries" class="ng-valid ng-touched ng-dirty">
 <span class="ui-autocomplete ui-widget">
  <!--template bindings={}--><input autocomplete="off" pinputtext="" type="text" class="ui-autocomplete-input ui-inputtext ui-corner-all ui-state-default ui-widget" placeholder="Countries" size="30"><!--template bindings={}--><!--template bindings={}-->
  <div class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-shadow" style="display: none; width: 100%; max-height: 200px; z-index: 1001; opacity: 1.055; top: 28px; left: 0px;">
   <ul class="ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
    <!--template bindings={}-->
   </ul>
  </div>
 </span>
</p-autocomplete>
Why? here's the corresponding generated code of ng2-bootstrap: http://valor-software.com/ng2-bootstrap/#/dropdowns:

<input class="form-control ng-valid ng-dirty ng-touched">
Yes, that's it.
I think I will not consider any prime* products unless this huge html code stop being generated!

30 September 2016

Gradle is awsome

Gradle the build tool for Java and Android (and other languages) is really powerful.

I am brand new to gradle, this is the first time I try it, and I find it really powerful.

I am working - for fun - on some spring boot + angular project , I decided to go with gradle because I like Groovy (The language that grails is written as a DSL; however gradle is written in Java as well as groovy).

However Eclipse support is not as much good as Maven, but I started the spring boot using gradle as the build tool and every thing is fine.

Now I need to build the spring project as well as the angular project (which is based on angular-seed that uses npm and bower).

I find a plugin for gradle for this task (gradle-node-plugin), this plugin allow you to do:

gradle npm-install

so, the npm install command will run and that what I need, but I need it to run with gradle build command.

First the npm-install task of gradle run by default  package.js file found in src/main/java, So I have to write my own task to make it uses spring-boot conventions (src/main/resources/static)

And thanks to the author of this plugin, he makes it easily to extend his plugin, so I wrote:

task my_npm_install(type: NpmTask) {
description = "Installs dependencies from package.json"
workingDir = file("${project.projectDir}/src/main/resources/static")
args = ['install']
}

Here I am defining a new task (enhanced task), that is of type NpmTask (defined in gradle-node-plugin) then set some properties (defined by the parent task (NpmTask) ), so it can do the job.

so, now I can run: gradle my_npm_task and gradle now will run npm install against the correct package.json file.

What is remaining is to have the this task run after I run gradle build (the build task).

Thanks to the amazing tasks dependency feature provided by gradle, I can refer to some task (provided by java plugin - I think) and make it depends on another task (the one I wrote).

Like this: build.dependsOn(my_npm_install)

Then when I run gradle build, here's the output:

.....
......

So that, the build task will run my_npm_install: (here's the output of gradle build command):

:check
:nodeSetup SKIPPED
:my_npm_install
:build
.......
......

gradle run the my_npm_install task before the build task.

Again, gradle is much more powerful and flexible than maven, and have a better syntax as well.
 

16 January 2016

Html5Mode in angular js for Java

Here's a sample Servlet filter implementation to allow return pages from the server with the / pattern.

Note: I've marked angularjs requests with "source" header set to "ng".

@WebFilter(urlPatterns = { "/*" })
public class Html5ModeFilter implements Filter {

@Override
public void destroy() {

}

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,
ServletException {

HttpServletRequest request = ((HttpServletRequest) req);
boolean notNgRequest = !"ng".equalsIgnoreCase(request.getHeader("source"));
String servletPath = request.getServletPath();

if (notNgRequest && !servletPath.contains(".")) { // skip .js, .css,
// .png, etc...
if (!"/".equalsIgnoreCase(servletPath)) {
((HttpServletResponse) res).sendRedirect("/?next=" + servletPath.substring(1));
return;
}
}

chain.doFilter(req, res);
}

@Override
public void init(FilterConfig arg0) throws ServletException {

}


}