From JSP to AngularJS

Our team maintained a project that was used a quite old web technology JSP. Our project likes a web portal that can contain some other smaller projects, I called it a module. Now, our customers want to add a new module into it.

We met a problem is the current projects can't be testable and hard to maintain because both the logic and GUI are mixed together by using JSP and JSTL. It was really a messy project structure. Therefore, we didn't want to continue this approach. Testing is very important, as well as a good structure for maintenance. We would like to apply MVC pattern for testable and maintainable ability purpose. Yeah, that was actually time for changes.

Our project structure can't be testable and has poor structure.

We listed out some options:

Refactoring all current modules -- terrible approach, too much efforts, too risky due to a lot of modules.
Using MVC just for the new modules with Servlet for Controller, Java class for Model and JSP for View -- actually, it was impossible for us also because our back-end technology was covered by Axon.ivy, the Servlets were fixed and we didn't want to modify a lot without Axon.ivy's official ways.
Finding a new front-end frameworks that can work with Axon.ivy and apply MVC also -- it seems a best solution, we just should learn a lot by choosing this approach.

We found AngularJS is one of the best choices in that time. we did a quick research and we found AngularJS can help us using MVC. Moreover, we can test with Javascript by using some Javascript test framework, likes Jasmine. We also can setup a Jenkins job for auto-run tests by using Karma.

We used AngularJS and some related technologies to overcome our problems.

That was cool and we decided to go for it.

Comments

Only allow input number value with autoNumeric.js

autoNumeric is a jQuery plugin that automatically formats currency and numbers as you type on form inputs. I used autoNumeric 1.9.21 for demo code. 1. Dowload autoNumeric.js file from https://github.com/BobKnothe/autoNumeric 2. Import to project <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/autoNumeric.js"></script> 3. Define a function to use it <script type="text/javascript"> /* only number is accepted */ function txtNumberOnly_Mask() { var inputOrgNumber = $("#numberTxt"); inputOrgNumber.each(function() { $(this).autoNumeric({ aSep : '', aDec: '.', vMin : '0.00' }); }); } </script> 4. Call the function by event <form> <input type="text" value="" id="numberTxt"/>(only number) </form> <script ty...

[Snippet] CSS - Child element overlap parent

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below: HTML code: <div id="parent"> <div id="child"> </div> </div> And, CSS: #parent{ position: relative; overflow:hidden; } #child{ position: absolute; top: -1; right: -1px; } However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it. www.tom-collinson.com I tried to create an example to investigated this problem by Fiddle . Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved. Look at my code: <div class="modal-body dn-placeholder-parent-positi...

Creating a Chatbot with RiveScript in Java

Motivation "Artificial Intelligence (AI) is considered a major innovation that could disrupt many things. Some people even compare it to the Internet. A large investor firm predicted that some AI startups could become the next Apple, Google or Amazon within five years" - Prof. John Vu, Carnegie Mellon University. Using chatbots to support our daily tasks is super useful and interesting. In fact, "Jenkins CI, Jira Cloud, and Bitbucket" have been becoming must-have apps in Slack of my team these days. There are some existing approaches for chatbots including pattern matching, algorithms, and neutral networks. RiveScript is a scripting language using "pattern matching" as a simple and powerful approach for building up a Chabot. Architecture Actually, it was flexible to choose a programming language for the used Rivescript interpreter like Java, Go, Javascript, Python, and Perl. I went with Java. Used Technologies and Tools Oracle JDK 1.8...

Today I Learned - Git at First Glance

Getting Started It's always fun to jump right in to the "HelloWorld" app. Just go for it! Visit: https://try.github.io/levels/1/challenges/1 Cheatsheet It's time for us to store our "magic tools". Visit: https://www.git-tower.com/blog/git-cheat-sheet Which collaboration way fit your team? Git is just a tool which doesn't teach you how to work properly in a team. It depends on your projects and you need to choose your own team workflow. Visit: https://www.atlassian.com/git/tutorials/comparing-workflows

Selenium - Override javascript functions to ignore downloading process

I have got an issue with downloading process on IE 8. This browser blocks my automatic-download functionality on my app so that I could not work with my test case any more after that. In my case, I didn't care about the file is downloaded or not, I just focus on the result after downloading process finished successfully. Therefore, I found a solution to ignore this process so that I can work normally. I use Primefaces, here is the remote command to trigger the download process <p:remoteCommand name="cmdGenerateDocument" actionListener="#{logic.onGenerateDocument}" update="xrflDocumentCreationPanel" oncomplete="clickDownloadButton();"/> The following is my test case: @Test public void shouldUpdateStep6ToWarningIfStep1IsValidAfterFinished(){ MainPage mainPage = new MainPage(); waitForLoading(mainPage.getDriver()); EmployeeDetailPage empDetailPage = new EmployeeDetailPage(); waitForLoading(empDetailPage.getDriver()); e...

vhandit

Search This Blog