Skip to main content

Posts

Build Dynamic Forms in AngularJS Directives

We wanted to build a dynamic form that has some types of elements such as text field, text area, label, date picker, combobox, file uploader, etc. Beside that, the form is dynamic because basing on the provided configuration data, it should render our expected GUI. We conducted a  research with two options: building our own directives or using a third-party directives. - Approach 1: using a third-party directives  + Google keyword: " build dynamic forms directives + angular third party "  + This idea met our idea: " http://blog.backand.com/build-dynamic-forms/ ", but it's not free to use.  + This 3rd-party was possible:  http://schemaform.io/ Schema form hello world app:  http://plnkr.co/edit/7Oqxxl?p=info - Approach 2: building our own directives We chose this approach because it looks more simple than using "schema form" 3rd-party and we thought that we can confidently handle it. Example:   http://codepen.io/cavoirom/pen/meJBxv?edit

Selenium - tests don't interact with IE

Have you ever faced to a problem that your tests work well on Chrome or Firefox, but don't do anything on Internet Explorer after launching the browser? I have met this issue. Even when my tests have no problems with IE8 but they do not interact with the browser which is upgraded one - IE11, no clicking, no entering anymore. And I got an exception. These below maybe are one of the solutions: 1. Make sure the zoom is 100% (press Ctrl + 0) 2. Uncheck Enable Protected Mode , and set lowest security level too. 3. Add your address to trust sites.

[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-position&quo

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 C ontroller, Java class for M odel and JSP for V i

[Snippet] Generate a new unique "name" string from an existing list

Suppose that we have a list of employees. Everytime, we want to add new employee into this list, the name of the employee will be generated with the following rules: - the name of the new one is set to " [originalname] 1 " - in case the name already exist, " [originalname] 2 " is used, and so on. Here is my code snippet by Javascript: var employees =[ {id: 1, name: 'name'}, {id: 2, name: 'name 1'}, {id: 3, name: 'name 2'}, {id: 5, name: 'name 4'} ]; var commonUtils = { isExistName: function(_name, _collection, _prop) { for(var i = 0; i< _collection.length; i++){ if(_collection[i][_prop].localeCompare(_name)==0){ return true; } } return false; }, generateNewName: function(_name, _collection, _prop){ var i = 1; var searching = true; while (searching) { var newName = _name+ " " + i; if (!this.isExistName(newName, _collection, _pro

Why Agile and Scrum Matter

Changes is constant, software development as well. Do you know the development of mobile phones, starting from Motorola DynaTAC (1973) to Iphone 6 (2014). How about the software? The new versions are released with new improvements. Software is not always able to automatic repairing. Therefore, software should be changed frequently and we need responding to changes. source:  http://answers.microsoft.com/ In working software today, how about customers' collaboration or requirements? We ignore the fact that many customers don't know what they want . We ignore the fact that when they know what they want, they can't describe it . We ignore the fact the even when they can describe it, they often a proposed solution rather than a real need . We ignore, that a lot of customers g ive us a solution but not the problem . source:  http://accelerateddevelopment.blogspot.com/ And, in working process, earlier founded bugs are cheaper. Manifesto for Agile So

MS SQL Server Views

"Creates a virtual table whose contents (columns and rows) are defined by a query. Use this statement to create a view of the data in one or more tables in the database. For example, a view can be used for the following purposes: - To focus, simplify, and customize the perception each user has of the database. - As a security mechanism by allowing users to access data through the view, without granting the users permissions to directly access the underlying base tables. - To provide a backward compatible interface to emulate a table whose schema has changed." [1] Beside that, our team used view in order to improve the performance of our web apps when a database has a very complicated relationship between its tables by using ORM Frameworks such as Hibernate. Example code: --create CREATE VIEW placeholders AS SELECT EMPKEY AS empkey, CONNUMB AS connumb, EMPNBR AS empNbr, ACEEMPN AS empFirstName, ACEEMPFN AS empLastName, EMPNAM AS empFullName,