niedziela, 1 grudnia 2013

Angularjs example MotoAds more advanced directive

Another thing we will add to MotoAds demo application is a feature which allows us to comment each advert. A good idea would be to realize this as AngularJS directive. It will look like in the picture below. We can see all added comment to advert, click on Comment link activate the comment form with Preview, Send and Cancel buttons.

The comment form we will realize as AngularJS directive. Before we start let's look at changed adverts.json, there is the additional comments field (array of comments):
Step 1
We create commenForm.html template which we use in directive:
Step 2
We in directives.js we create AngularJS directive:
Step 3
We add simple CommentController into controllers.js:
Step 4
We add simple newlines filter into filters.js:
Step 5
We comment-form directive into adverts.html and some additional code to list comments and activate the comment form: If you want to run this example on your computer, you can download sources from GitHub.

Any comment would be highly appreciated.

sobota, 30 listopada 2013

Java ESL program for connecting to the FreeSWITCH

Next simple Java program using Event Socket interface to control FreeSWITCH. First you should read: Next you should not forget to change event_socket.conf.xml (to allow connections from any host on the network): Now we can write simple java ESL program for connecting to the FreeSWITCH.

MyEslEventListener.java MyEslEventTest.java When we run this program we can see on the console much more than below: Good start to do something cool :)

czwartek, 28 listopada 2013

Java program for connecting to the FreeSWITCH XML-RPC

I would like to show simple Java program which use XML-RPC interface to do some freeswitch commands. We should on freeswitch console load mod_xml_rpc: Worth checking out if it works, in web browser type: If you see "FreeSWITCH help" it works.

Next we download Apache XML-RPC library.

Now we create Java program (using Apache XML-RPC):
After running this simple Java program we can see on Java console: A lot of fun :)

sobota, 23 listopada 2013

AngularJS example MotoAds with NodeJS and MongoDB

I built MotoAds demo application in AngularJS but it did not have any server layer. Data was read directly from the json files. So I was decided to build the server side services. I know pretty well JEE and relational database, so I could use it. But I want to know something new so I chose NodeJS nad MongoDB. Thanks to this decision I got a full stack JavaScript application. It's incredible to use JavaScript to build the complete application.

Now MotoAds demo application consists of:
  • User interface in AngularJS and Bootstrap with full CRUD operations: add, read, edit and remove adverts.
  • Server service layer was built in NodeJS with RESTful serrvices. To simplify the use of a NodeJS I used ExpressJS.
  • Database: all data except the pictures are stored in MongoDB.
So let's see how to add the CRUD operations in AngularJS with services in NodeJS with MongoDB.

Step 1
We write in services.js access to our RESTful services:
Step 2
Inject services in app.js:
We use the angularjs services in controllers.js:
Step 3
In server.js we create the HTTP server with the RESTful service in NodeJS and ExpressJS. It is also used to host angularjs app:
Step 4
In adverts.js we write some code in NodeJS which allows us to use MongoDB:
We run MongoDB and start our HTTP server (node server.js). Now we are typing in web browser URL http://localhost:3000/#/. In web browser we should see the MotoAds application and we can use CRUD operations.

If you want to run this example on your computer, you can download sources from GitHub.

Any comment would be highly appreciated.

poniedziałek, 18 listopada 2013

AngularJS resource with JSONP

Lately I struggled to get access to facebook by JSONP. I try to do it in AngularJS with factory and resource. I want to share with people my solution. Let's try to connect to the Facebook Graph. Firstly, we create index.html file with input graph.username, after type a value there is called getGraph(). The result of the calling this function is saved in $scope.result so we can display it. Secondly, in app.js we write controller and factory which creates a resource object that call the Facebook Graph. So when it is called function getGraph we use GraphFacebook factory to call getJSONP passing in argument $scope.graph with username property. This property is used in building URL.
The result of our work:


Source on GitHub

sobota, 9 listopada 2013

AngularJS example MotoAds end-to-end tests

E2E (end-to-end) tests result: Application folders tree:
In previous post I showed how to write and run unit tests. Now, I will present how to test DOM manipulation or the wiring of our application. Angular Scenario Runner which simulates user interactions that will help us to do that.

Recall adverts.html code which we should know to simulate user interaction:
We should write the simple html page for running unit tests (runner.html):
When everything is ready we can start writing tests in scenarios.js.

Step 1
Navigate web browser to index.html which route to adverts.html view:
Step 2
We write first E2E test - filtering by brand and model on real data:
Step 3
We write second E2E test - filtering by country and region:
Step 4
We write third E2E test - filtering by year:
Step 5
We write fourth E2E test - sorting by year:
Step 6
We run E2E test by typing in web browser URL http://localhost:8000/test/e2e/runner.html (motoAds application must be run on the web server). In web browser we should see the same as the screenshot E2E (end-to-end) tests result.

If you want to run this example on your computer, you can download sources from GitHub.

Any comment would be highly appreciated.

piątek, 8 listopada 2013

AngularJS example MotoAds unit tests

Unit tests result: Application folders tree:
In Angular the controller is separated from the view so it is easy to add the unit tests to MotoAds application. Recall the controller code which will be tested (controllers.js): We should write the script for running unit tests (test.bat): We configure Karma for our tests (karma.conf.js): When everything is ready we can start writing tests in controllersSpec.js.

Step 1
We prepare dummy data:
Step 2
Load modules, define dummy services, initialize scope, controller and filter:
Step 3
We write first test - filtering by brand and model:
Step 4
We write second test - filtering by country and region:
Step 5
We write third test - filtering by year:
Step 6
We write fourth test - sorting by year:
Step 7
We run unit test in Node.js command prompt by running test.bat and we should see:
If you want to run this example on your computer, you can download sources from GitHub.

Any comment would be highly appreciated.

sobota, 2 listopada 2013

AngularJS example MotoAds more advanced than the tutorial on angularjs.org

I have just been learning AngularJS and decided to build demo application that cover more techniques than the tutorial on angularjs.org. This application is only demo so it do not have complete server side, some features have the todos and there is not any test.

This demo application is some kind of automotive adverts portal, so I called it MotoAds. It has two main features:
  • List of adverts – includes an advanced filtering and sorting.
  • Add advert – a form with some client side field validations.

MotoAds application looks like this: Application folders tree:

Root file index.html included external resource:
  • bootstrap.css (2.3.2)
  • angular.js, angular-resource.js (1.0.8)
  • ui-bootstrap-tpls-0.6.0.js (0.6.0)
and internal resource:
  • app.css
  • app.js
  • services.js
  • controllers.js

Bootstrap angular application, add navigation and route templates

In index.html we auto-bootstrap the angular application by defining directive ng-app: In app.js we define new angular module motaAdsApp (name must be the same as value of ng-app): In index.html we use Navbar component from the bootstrap library: We define NavbarController with function routeIs (used in ng-class). It allows us to highlight link which is active. We add directive ng-view which renders the proper template into index.html in case of the route definition: Url routes are defined in app.js:

Adverts - list, filtering, sorting

In adverts.html we define the left filtering panel with brands and models. We use the ui.bootstrap.accordion component: In controller.js we write AdvertsController in which we using method Brand.query() to fill $scope.brands: Definition of the Brand service is in service.js - it is the simple service which reads brands.json: Next in adverts.html we write filters for country, region and year (from-to): We add to adverts.html the panel with information which filters are active and the options of removing them: In controller.js we have to fill angular models, define variables and functions which are used by the filters: We define the Country service in service.js: Now we add the sorting option and the table containing the list of adverts: The adverts table is filled in controller.js in this lines: The Advert service is defined in services.js - it reads adverts.json:

Add advert - validation and currency directive



We define the adding advert form in addAdverts.html: We write AddAdvertController in controllers.js: Last thing is custom directive ma-currency used in addAdvert.html: Definition of ma-currency directive is in controller.js:

If you want to run this example on your computer, you can download sources from GitHub and run it on any web server. For example copy folder app to D:\apache\htdocs\app and run in web browser http://localhost/app/index.html.

Any comment would be highly appreciated.

niedziela, 13 października 2013

AngularJS tutorial - my problems and solutions

Due to the fact that AngularJS gaining wider group of supporters and I decided to become familiar with its capabilities. So I started from AngularJS tutorial. At first I had to install: node.js, karma, git I already had (went smoothly). Step 0, Step 1 and almost finished Step 2 if no Section Tests, with whom I had a few problems - we are happy to share them, because maybe some of my suggestions will benefit and save some time. Let me just mention that I am acting in a Windows environment.

Step 0, 1 success

Step 2 problems

Problem #1
The node.js console show me wrong path to Chrome: I set it at: Of course, best to add it directly to the system environment variables.

Problem #2
In file D:\angular-phonecat\test\unit\controllersSpec.js test code lines were too much, I cut it to what follows:
Problem #3
I received a warning about the lack of food karma-junit-reporter so I installed what you need:
Step 2 success

Step 3, 4 success
In step 3, there were no problems, keep it up. However impressed me test end-to-end tool Angular Scenario Runner. Really great. I must admit that so far has not happened to me to make any test in JavaScript (shame) may hence the rapture.
In step 4, very plainly explained by the binding of a model to the user interface and the user interface to the model (two-way data-binding) on the example of sorting.

Step 5, 6 problems

Problem #1
When you run the example in the browser did not show the data (phones). So I looked at the console (Developer Tools), and there is an error: The code controllers.js was: It should be (for the tutorial is OK, and the lack GitHub):
Step 5, 6, 7, 8, 9 success
In step 5, and finally found out the use of AJAX, and in step 6 displayed the pictures (thumbnails) phones. Step 7 was much more interesting, I learned to do a lot of views (phone lists, detail phone) and routing.
In step 8 views phone-detail.html and finally gained the contents, the application consists of two full view. I also wrote in the Experiments, the first test e2e: Step 9 went smoothly, I know as I write my own filters.

Step 10, 11 problems

Problem #1
When I run the example in the browser did not show the content (white page), the JavaScript console error occurred: In app.js code was: Should be:
Step 10, 11, 12 success
Step 10 and I know how to handle the event. In step 11, I learned how to pick up AJAX to data on the server by creating your own website. In the last 12-step animations - perfect for the end of the tutorial.

Both the framework and its AngularJS tutorial made ​​quite an impression on me. I would recommend.

niedziela, 26 maja 2013

Backbone.js in action

The last time JavaScript libraries, separating application code (as the MVC server's frameworks), are gaining on popularity. Below I will present a simple example implemented in backbone.js, which will show the possibility of the library and you will understand why it is worth to use it. Let's start by creating a directory empapp and put in it the index.html: This page contains an element body, in which are included three libraries: jquery, underescore, backbone and main.js, which contains a code of sample application written in backbone. So let's create a directory empapp, file main.js and fill out its contents: The effect may not be impressive :)

New Employee
First name:
Last name:
Email:
  • John Smith john.smith@yahoo.com   
  • Jim Bean jim.bean@yahoo.com   

However, we obtained the objective because the model is separated from the view, and everything is in JavaScript, and yet what we wanted :)

Source on GitHub

niedziela, 7 kwietnia 2013

Attributes data-* in HTML5

Using HTML5 Web applications becomes a reality. Even the banks are starting to require users to use browsers that support this standard. An example is Getin Bank, which from May 1 recommends the use of new browsers (Firefox 12 +, Chrome 15 +, IE 9 +, Safari 5 +, Opera 10 +).

Creating web application often have the need to create a javascript component (such as jQuery) in which we want to preserve its state. An example would be a simple text box that appears in the browser, and it is initiated by default: If user changes the value on userVal, and we want to add a button restores the default value of this field to defaultVal we have a problem.

Of course, this can be done in several ways such as:
  • variable in javascript, we need to ensure that the name of the variable to be unique
  • create a hidden field and in this field store the default value
However, HTML5 gives us new opportunities in this area. Namely allows you to define custom attributes in HTML elements - they have to start from data-*: There's nothing in this discovery, because their attributes in HTML you can create previously (nobody forbid), but in HTML5 document with attributes data-* is correct for HTML5 validation.
This syntax is also supported by frameworks such as jQuery javascript:

poniedziałek, 1 kwietnia 2013

Google Apps Script - and why do I need it?

The last time I needed a single spreadsheet (changing over time) from time to time to generate the statistics in the second sheet. Because of that, not only was about the cyclical generation, but the analysis was important for me that they are wrought in colors, bold - just easy to read. I would add that that these sheets are holding in Google Drive.

I was able to rely on macros in MS Word, but I do not know them and do not hurry me to their knowledge. I thought it perfect for me in this situation would be JavaScript and intuition did not fail me. It turned out that the Google Cloud can access Google Apps Script, which written in help Google Apps Script is based upon JavaScript. Thus after a few moments I had the first version of my statistics, and the next sprint final release.
And now a simple example that will bring the possibility of this tool.

Start by creating a spreadsheet with the objective to calculate the profit from the sale of shares:

SymbolNumberBuySellProfit
PGE1001819-
LTS2003941-

Sheet ready, so here we go: Tools->Script Editor, we create the project, then the file with the script and finally write in Google Apps Script. We will do three things: calculate the profit for each stock, we will give the background color and bold the font. Run the script and get the result:

SymbolNumberBuySellProfit
PGE1001819100
LTS2003941400

Because the sheet and the script is in a cloud, it can be shared with others.

niedziela, 17 marca 2013

Unconscious use WebServices session

Real life ... programmer copied the definition of service in Service1WS to Service2WS, changed the name of the service, the name of the class and obtained a description of the service:


He did not notice, however, that Service1WS contains a parameter that if Service2WS should not appear to have been:


The result was that when the server traffic appeared to increase there was java.lang.OutOfMemoryError: Java heap space. The increases in traffic were no frequent so error occurred sporadically (sic!).

During the tracking error, no one came up with the idea to look on cardinality of the Tomcat session (there are lots of them in heavy traffic). Only application profiling revealed that there are a lot of objects Axis'a session is indicated clue: enough to look at the number of sessions on Tomcat'cie, look for deploy.wsdd with the description Service2WS parameter, and see this thing was clear.

Why were so many sessions for one client WS and one server WS. The explanation is simple, Service2WS session was so involved sessions for each request to the URL or cookie does not transfer any jsessionid = SES_ID, and that the client Service2WS do not send this parameter (because the intended use of the no session services), each request assumed a new session. Even though each such session expire after 8 hours, it's still under heavy traffic arose so many objects session that could fullfill, or at any rate limited space Heap.

The proposal, still the same, carefully copying the code.