tag:blogger.com,1999:blog-22913330944748659352023-11-29T12:20:58.880-08:00Era Of ErrorsShiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-2291333094474865935.post-77825793870539134552014-06-25T02:45:00.000-07:002014-06-25T02:45:16.335-07:00Play 2.2.x and Akka Logging<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
It gets frustrating if logs go missing when we are struggling to debug something. Something like this is very likely to happen when we use a third party library which uses Akka internally within our Play application.<br />
<br />
After struggling for quite sometime, I figured out the changes that were needed to configure the log settings correctly. Some of the things are specified in <a href="http://www.playframework.com/documentation/2.3.x/SettingsLogger">loggingSetting configuration for Play 2.3</a> but I wasn't looking at it cos I was using an older version of Play(2.2.x).<br />
<br />
It is very simple and requires only 2 small changes - one in conf/application.conf and the other in logger.xml. Update the log level for play actors as well as the actors in the third party library,<br />
<br />
<div>
<code>
play.akka.loglevel="DEBUG"<br />
third-party-lib{<br />
akka {<br />
loggers = ["akka.event.slf4j.Slf4jLogger"]<br />
loglevel = "DEBUG"<br />
}<br />
}<br />
</code>
</div>
<br />
And now, add specific loggers in conf/logger.xml.<br />
<br />
<div>
<code>
<logger name="play" level="DEBUG"/><br />
<code>
<logger name="application" level="DEBUG"/><br />
<logger name="com.project.actors" level="DEBUG"/><br />
<logger name="third.party.lib.actors" level="DEBUG"/><br />
</code></code></div>
</div>
</div>
<br />
Note: The "name" attribute should be set to the required package name.
<br />
<br />
<a href="https://gist.github.com/6f3da9bd7a8fc901c96f.git">A sample configuration file</a> which adds the logs to just the file logs/application.log<br />
<br />
<br />
<br />
<br /></div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.com0tag:blogger.com,1999:blog-2291333094474865935.post-38902748717854810852013-08-31T16:23:00.001-07:002013-08-31T16:25:25.582-07:00AngularJS Lightbox directive<div dir="ltr" style="text-align: left;" trbidi="on">
I was using <a href="http://lokeshdhakar.com/projects/lightbox2/">lightbox2</a> in an AngularJS app and realized that it was pretty difficult to customize it.<br />
The requirements were very simple,<br />
<div style="text-align: left;">
</div>
<ol style="text-align: left;">
<li>editing the album name/ picture description</li>
<li>deleting album/picture </li>
<li>different overlay than the usual title below/above the image</li>
</ol>
Although the last one I would have found support in some library or the other if I searched but the first two needed to have callbacks to my AngularJS app. This prompted me to write a directive which could be easily configured/customized.<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
I made use of AngularUI modal since that was already used in my app. Besides, as they say, no point in rewriting stuff that's already there.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The usage is pretty simple,<br />
<code><lightbox images="album"></lightbox></code></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
where album is an array of image details. A sample image detail object would be</div>
<div style="text-align: left;">
<code>{src: "/path/to/img", header: "the data/info that should be displayed above the image", description: "the info to be displayed beside the image"}</code></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The header and the description can also be HTML strings. The dimensions in tile view are 150px x 150px by default. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The directive can be customized/configured to handle various cases (inline editing using contenteditable, delete, change tile size, background, etc)</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<a href="https://gist.github.com/Shiti/6401225">The link to the gist</a>.</div>
<div style="text-align: left;">
<br /></div>
</div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.com19tag:blogger.com,1999:blog-2291333094474865935.post-24733503045746682382013-03-01T22:19:00.001-08:002013-03-01T22:19:36.900-08:00How MapReduce works<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Inspired by the map and reduce operations in functional languages, Google came up with a programming model and implementation to handle operations on huge data in a time-efficient manner.</span><br />
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">In order to use MapReduce, the user needs to define two functions:</span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">the Map function, which generates an intermediate map </span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">and the Reduce function, which operates on the intermediate map resulting in desired output.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">When the user program calls the MapReduce function,</span></div>
<div style="text-align: left;">
<br />
<ol style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">The MapReduce library in the user program splits the input files into M pieces and copies of the program are started on a cluster of machines. One of these copies is master and is responsible for assigning the M map tasks and the R reduce tasks to the workers(others).</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">When a map task is completed, the intermediate key/value pairs are buffered in memory. These buffered pairs are periodically written to local disk which is partitioned into R regions by the partitioning function. The master is responsible for forwarding these locations to the reducer workers. </span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">When the master notifies a reduce worker about the locations, it uses remote procedure calls to read the buffered data from the local disks of the map workers. </span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">After reading all the intermediate data, the reduce worker sorts the data by the intermediate keys. This ensures that all occurrences of a key are grouped together.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Then, the reduce worker iterates over the sorted data and for each unique key encountered, it passes the key and the corresponding set of intermediate values to the user's Reduce function. </span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">The output from the Reduce function is appended to a final output file for that reduce partition.</span></li>
</ol>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">Once all the map and reduce tasks are completed, the MapReduce call in the user program returns back to the user code and the output of the MapReduce execution is available in the R output files.</span></div>
</div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.com0tag:blogger.com,1999:blog-2291333094474865935.post-61689504786505096782013-02-28T11:40:00.002-08:002013-02-28T11:42:16.410-08:00Converting Play 2.1 JSON to Scala XML <div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Working with JSON and XML is pretty simple in Play-framework. For JSON, it is recommended to use Play's type-class based library.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">I recently, came across a scenario where I had to convert Play 2.1 JSON to Scala XML and vice versa. I didn't find any internal classes in Play which could handle this. Lift provides a tool to handle a similar conversion.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">To convert the JSON into XML I used recursion. Although, the scala.xml.Elem constructor allows only one Node to be added as child, there is another method copy, which takes in a Seq[Node] as child. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">To handle conversion from XML to JSON, I modified the toJson method in Lift to result in Play JSON. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="https://gist.github.com/Shiti/6ac74ca7f1e9c855675c">Link to gist</a></span><br />
<br />
<br />
<br /></div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.com1tag:blogger.com,1999:blog-2291333094474865935.post-1620587370598969832013-01-11T12:19:00.001-08:002013-09-15T12:30:43.175-07:00File Upload using AngularJs<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Although AngularJs does not support file upload, as of now, there are several ways to achieve it using the input tag.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">One method is to integrate file upload plugins. An alternative to that is sending form-data.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Sending form data is simple,</span><br />
<br />
<code>
$http.post('/path/of/request', fd, {<br />
headers: { 'Content-Type': undefined},<br />
transformRequest: angular.identity<br />
}).success(function (result) {<br />
alert(result);<br />
});<br />
</code><br />
<span style="font-family: Arial, Helvetica, sans-serif;">where fd is a FormData Object.</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">The file can be set using the files property of the input element.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">We could also use XMLHTTPRequest to upload a file. </span><span style="font-family: Arial, Helvetica, sans-serif;"><a href="https://gist.github.com/Shiti/4507900">Link to a simple component to upload a file</a>. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<span style="font-family: Arial, Helvetica, sans-serif;">In this directive, component is an angular module and it can simply be used by having a 'fileUpload' tag.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Note: This doesn't work in older versions of IE where there is no FormData object. Those interested can check <a href="http://stackoverflow.com/questions/10852446/fallback-for-formdata-in-ie-8-9">stackoverflow</a> or <a href="http://blog.filepicker.io/post/33906205133/hacking-a-file-api-onto-ie8">filepicker</a>.</span><br />
</span></div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.com7tag:blogger.com,1999:blog-2291333094474865935.post-86819703453895168562012-12-30T10:56:00.001-08:002012-12-30T11:35:43.539-08:00Handling a form with an image and multiple other fields in Play (Scala)<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">File upload along with other data is a common scenario. This can be handled in Play framework in different ways. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">One case is where Play Forms are used. <a href="http://www.playframework.org/documentation/2.0/ScalaFileUpload">(refer Play Documentation)</a></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Another case is using custom forms and Play Framework as backend. </span><a href="https://gist.github.com/4414239" style="font-family: Arial, Helvetica, sans-serif;">(An example function definition) </a><br />
<br />
<div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">The file can be accessed using </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><code>request.body.file("fileName")</code></span></div>
<div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span><br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">and in the second case, the fields can be accessed using </span></div>
<br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><code>(request.body).asFormUrlEncoded.get("fieldName").get(0)</code></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
<br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">asFormUrlEncoded returns a Map[ String, Seq [ String ] ] Object. Thus, in order to get the value of a parameter we need to use get(0). </span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
<br />
<div>
<br /></div>
</div>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Note: while using Play Form, it is better to complete the data transactions and handle file upload in its success call</span><br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><code>
signupForm.bindFromRequest.fold(<br />
formWithErrors => BadRequest(html.register(formWithErrors)),<br />
user => {<br />
request.body.file("picture").map {<br />
picture =><br />
val fileName = user._1<br />
val path="/path/to/destination/"<br />
...</code></span></div>
</div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.com0tag:blogger.com,1999:blog-2291333094474865935.post-10285446738216452082012-12-12T05:59:00.001-08:002021-12-11T18:36:42.324-08:00Testing AngularJS app in IntelliJ<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<a href="http://confluence.jetbrains.net/display/WI/Getting+Started+with+JsTestDriver+IntelliJ+plugin"><span style="color: #1155cc; font-family: Arial, Helvetica, sans-serif; vertical-align: baseline;">Install jsTestDriver plugin for IntelliJ </span></a><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="vertical-align: baseline;"><br /></span>
<span style="vertical-align: baseline;">Ensure that the following files exist within your project</span></span><br />
<ol style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">jquery-1.8.3.js</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">jasmine-1.1.0.js *</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">JasmineAdapter-1.1.2.js *</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">angular-resource.js</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">angular-mocks.js</span></li>
</ol>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Create a .jstd file in your project folder.(eg ‘TestConfig.jstd’).<span style="vertical-align: baseline;">The file should be something like this</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="vertical-align: baseline;"><script src="https://gist.github.com/4267842.js"></script> </span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Create a test file. <span style="vertical-align: baseline;">Write your test cases using Jasmine and run them using JsTestDriver plugin.</span><span style="vertical-align: baseline;"> </span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="vertical-align: baseline;"><br /></span>
<span style="vertical-align: baseline;">Note: if u add angular-mocks.js before jasmine, on running the tests, you may get a reference error - module/inject not defined</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">* while writing the test cases, IntelliJ prompts to add JasmineAdapter and jasmine you could add them then as well</span></div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.comtag:blogger.com,1999:blog-2291333094474865935.post-17617628783684416662012-11-08T08:12:00.000-08:002012-11-08T08:17:15.490-08:00Setting up Play-Scala Project in IntelliJ Idea<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<span style="font-family: inherit;">The easiest way to setup a <a href="http://www.playframework.org/documentation/2.0.4/ScalaHome">Play-Scala</a> project is by using the <a href="https://github.com/n8han/giter8">giter8</a> template.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Setup the project using by giving the following command in the terminal</span><br />
<span style="font-family: inherit;"><br /></span>
<code><span style="font-family: inherit;">$ g8 typesafehub/play-scala</span></code><br />
<code><span style="font-family: inherit;"># cd into the newly created directory and run with 'sbt run'</span></code><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">In the sbt console</span><br />
<code><span style="font-family: inherit;">$ idea</span></code><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Once this is done, the project can be opened from Idea.</span><br />
<span style="font-family: inherit;"><br /></span>
<b id="internal-source-marker_0.5919193886220455" style="font-weight: normal;"><span style="font-family: inherit; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Setting up database for the project</span></b><br />
<div style="text-align: left;">
</div>
<ol style="text-align: left;">
<li><span style="font-family: inherit;"><b id="internal-source-marker_0.5919193886220455" style="font-weight: normal;"><span style="font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><b id="internal-source-marker_0.5919193886220455" style="font-size: medium; font-weight: normal; white-space: normal;"><span style="font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Add the database driver in project/Build.scala (</span></b></span></b><b id="internal-source-marker_0.5919193886220455" style="font-weight: normal;"><span style="font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">throws driver not found error on being skipped)</span></b></span></li>
<li><span style="font-family: inherit;"><b id="internal-source-marker_0.5919193886220455" style="font-weight: normal;"><span style="font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">In conf/application.conf specify the database configuration</span></b><b id="internal-source-marker_0.5919193886220455" style="font-weight: normal;"><span style="font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">(<a href="http://www.playframework.org/documentation/2.0.4/ScalaDatabase">more on database in play</a>)</span></b></span></li>
<li><b style="font-weight: normal;"><span style="font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><b id="internal-source-marker_0.5919193886220455" style="font-size: medium; font-weight: normal; white-space: normal;"><span style="font-family: inherit; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">In conf/evolutions/default create a file 1.sql which has the database schema(<a href="https://github.com/playframework/Play20/wiki/Evolutions">more on evolutions</a>)</span></b></span></b></li>
</ol>
<span style="font-family: inherit;"><br /></span>
<div>
<span style="font-family: inherit;">Prerequisites</span><br />
<ol>
<li><a href="http://www.scala-sbt.org/"><span style="font-family: inherit;">sbt</span></a></li>
<li><a href="https://github.com/n8han/giter8"><span style="font-family: inherit;">giter8</span></a></li>
<li><span style="font-family: inherit;">Play and Scala plugin for IntelliJ Idea</span></li>
</ol>
</div>
</div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.com0tag:blogger.com,1999:blog-2291333094474865935.post-42060263265618391872012-10-01T12:34:00.000-07:002012-11-08T08:12:45.336-08:00Drag and Resize Images using jQuery UI <div dir="ltr" style="text-align: left;" trbidi="on">
<span id="internal-source-marker_0.2922064568847418"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Just the other day, I wanted to have the functionality to drag and resize an image on a HTML page using jQuery and jQuery UI. </span><br /><span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: Arial, Helvetica, sans-serif; vertical-align: baseline;"><span style="font-size: 15px; white-space: pre-wrap;">Surprisingly, calling the usual draggable() and resizable() doesn't work as expected when applied on an img element, although it works perfectly for a div element. </span></span><br /><span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">After some digging into the jQuery UI code, I found the reason for this flawed functionality. It is because jQuery UI creates a wrapper div for the elements which cannot hold child nodes if resizable() function is applied on them. </span><br /><span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">The easiest and simplest way to get around this problem is to call the draggable() function on the implicitly created wrapper div.</span><br /><span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">The wrapper div’s class name is ui-wrapper.</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline;"><script src="https://gist.github.com/3813692.js?file=dragNResize.js"></script></span><br />
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; vertical-align: baseline;">A similiar solution can be used for canvas, textarea, input, select, button elements. </span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; white-space: pre-wrap;">The above solution works for multiple images on the page with class as "drag". </span><br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Another common approach is to create a div element which contains the img element. The div and img elements are bound so that on resize of the div element, the img element is scaled up or down.</span></span></div>
</div>
Shiti Saxenahttp://www.blogger.com/profile/01593573848176945901noreply@blogger.com0