Our Blog

By Alexander, a Senior Java/PHP Developer on Murano Software’s team

CSS3 features are really good for implementing modern UI tendencies, such as rounded corners, shadows and transparency. Today, most browsers support CSS3 or provide their own ways to achieve the same features.

Let's review the most popular CSS3 features.

Round corners

Round corners were a pain for a lot of developers, since border radius is not supported by all browsers. Most often, images and techniques like "sliding doors" were used.

For IE, we can use VML to emulate border radius support. Actually, it is already implemented by Remiz Rahnas and Nick Fetchak as tiny IE behavior. So we are downloading border-radius.htc, putting it in the CSS directory and simply including it in our CSS rule:

.my-block {
  background: #000; color: #fff;
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
  border-radius: 10px; /* Opera 10.50 beta and other CSS3 compatible browsers */
  /* for IEs */
  behavior: url(border-radius.htc); /* teaching IE to understand border-radius */
}

Box shadows

Box shadows were even worse than rounded corners. There were some good techniques to achieve a flexible box shadow solution, but most of them were too complicated.

In addition to implementing IE behavior for round corners, Remiz Rahnas and Nick Fetchak made another one for box shadows. So, to support box shadow in IEs, you need to download ie-css3.htc and include it in the CSS rule:

.my-block {
    background: #fff; color: #000;
    -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
    -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
    -khtml-box-shadow: 10px 10px 10px #000; /* KHTML */
    box-shadow: 10px 10px 10px #000; /* Opera 10.50 beta and other CSS3 compatible browsers */
    /* for IEs */
    behavior: url(ie-css3.htc); /* teaching IE to understand border-radius and box-shadow */
}

Opacity

Opacity is another property often used by designers to put some fancy semi-transparent labels on images or do something similar. The problem is, again, that Internet Explorer does not support alpha transparency directly. The solution is to use a filter:

.my-block {
	opacity: .5; /* CSS3 compatible browsers */
	filter: alpha(opacity=50); /* IE < 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	-khtml-opacity: .50; /* KHTML */
	-moz-opacity: .50; /* Firefox */
}

RGBA

The problem with opacity is that it cascades. So, for example, it does not fit if you need nontransparent text inside a semi-transparent box. RGBA comes to the rescue here. RGBA is a way to specify color by component: red, green, blue and (the sweet part!) alpha transparency. Here we'll need to use IE conditional comments to apply some styles exclusively to IE.

This one is for all browsers. If a browser does not support rgba, rgb will be used:

.my-block {
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, .5);
}

This one is for IEs:

.my-block {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#7FFFFFFF,endColorStr=#7FFFFFFF); // IE<8
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; // IE8
    zoom: 1; // triggering hasLayout to avoid block problems
}

Here we are using a gradient filter that accepts two RGBA values in format #AARRGGBB as start color and end color. AA is the hex transparency value, while RR, GG and BB are hex color components. rgba(255, 255, 255, .5) equals #7FFFFFFF: 0.5 * 255 = 127 (truncated) that is 7F in hex. For RR, GG and BB, we are just converting component value to hex.

By Alexander, a Senior Java/PHP Developer on Murano Software’s team

Facebook, as you may already know, is working to open source their PHP to C++ translator, called HipHop. There is a lot of buzz about it, so I think a summary will be handy.

Main points:

• It's free and open source.
• HipHop is already used by Facebook, so it's tested with their huge code base.
• Process is: PHP → С++ → GCC → binary.
• HipHop is not JIT. You should translate and compile all code on every deployment.
• Binary can work as standalone server (using libevent). Also, it can work in command line.
• Standalone server uses one process and many threads.
• It's not based on Zend Engine. Instead, C++ code compatible with PHP 5.2 is used.
• Extensions are converted to thread-safe C++ (standard PHP extensions are being developed in C).
• Many extensions already have been converted.  These are used by Facebook.
• If you want to use HipHop, prepare to convert additional extensions yourself.
• Some PHP magic methods are supported, but the performance is the same as in PHP.

No support for:

• Windows.
• PHP 5.3 (will be implemented later).
• eval().
• create_function().
• preg_replace with /e modifier.
• function_exists() before function declaration.

Dynamic PHP functionality supported:

• Dynamic function call including call_user_func().
• Dynamic methods and properties.
• Dynamic variables, extract().
• Dynamic include().
• Redefinition of functions, classes and constants.
• __toString(), __get(), __set(), __call().

Thoughts:

Facebook made a great tool to make their codebase run faster without rewriting it in C or C++. They do have a reason for it, and there is no doubt they (with their really high loads) need it. What does it mean for the rest of us? A little. All major PHP frameworks and CMS, including Drupal and Wordpress, cannot be compiled by HipHop. Moreover, PHP execution itself is a bottleneck in a very few cases, like Facebook’s, where data storage and other infrastructure is perfectly optimized. If your application works slowly, and you aren't getting loads comparable to Facebook’s, HipHop most likely will not help you. The problem is within the database or algorithms used.

Sources used:

• Official announce
• Source code
• My Thoughts on HipHop, Ilia Alshanetsky
• Notes from Facebook's HipHop for PHP Debut, Kris Jordan
• HipHop: What you need to know, Marco Tabini

We are proud to announce the release of the Rich Cloud Application (RCA) that Microsoft hired us to develop for showcasing Azure and Silverlight. This application is a proof-of-concept, simple product support and feedback system that provides these features:

• Issue-tracking system that supports attachments and hierarchical user comments
• Peer-to-peer messaging for user collaboration
• 5-star rating system for user comments and point rating system for issues and users
• Item search, both in-place and with external providers, such as Microsoft FixIt
• User profile management and usage statistics

Click below to take a look at screenshots of the application in action or try it online at http://pso.cloudapp.net!

View Full Album

The application provides a great set of best practices for building scalable Windows Azure applications with rich Silverlight UI. It shows how to implement MVVM in Silverlight 3, work with Azure Storage from Silverlight just like any WCF data source, and use Live ID authentication with Silverlight and Windows Azure.

Let me remind you that the application uses Azure Storage. It is a fast and scalable non-relational storage that has a lot of advantages, but also imposes a set of limitations. For instance, you can't get a number of entities in a table or perform a wildcard search. And we are going to write a series of blog posts where we will describe how to get around these limitations. If you don't want to wait, I have good news for you :) The full source code is available for download at MSDN Code Gallery under MS-PL license. Thus you can reuse these components in your applications!

And one more piece of good news: Our team is working on a new version of the application. The new version will be finished in the middle of March and will provide SQL Azure support and include a lot of nice features made possible with release of Silverlight 4 RC, such as printing support, integration with a microphone and a webcam, and UDP multicast to peer-to-peer collaboration.

So stay tuned and subscribe to our blog to get fresh news about the Rich Cloud Application!

By Alex, a Senior .NET Developer on Murano Software’s team

Murano Software is becoming a permanent participant in the Microsoft Incubation Week events. Last week (Jan 25-29), our company participated as a development partner in Microsoft SharePoint 2010 Social Fest at Microsoft’s Silicon Valley campus. We provided seven top Microsoft BizSpark startups with outsource development support, SharePoint expertise and advice. Just as it was during other Microsoft Incubation Weeks, the mission of our team, led by Dimitri Nikouline, this year was to create working solutions for our clients in the shortest terms of the event. Our developers and startup representatives were working day and night, in a warm and competitive atmosphere, being eager to try the new features and implement their ideas. .

This was even more challenging, since the products - Microsoft Visual Studio 2010 and Microsoft SharePoint 2010 - are Betas now, and there was no strong knowledge base, except samples in Microsoft blogs and related Internet resources. But our company, always being on the cutting edge of the development technologies, successfully defeated all of these challenges. In addition to the true interest in the newest technologies and software development passion, we got through these challenges because of intensive communication and team spirit. Working with the different startup clients, we established a single workspace for all involved to resolve issues faster and exchange tips, ideas, and links.

Although these startups work in different areas of business intelligence and communications, they all are looking forward to the integration with SharePoint as an opportunity to upgrade their working and beneficial products to the enterprise-level applications. This wide range of interests resulted in a large variety of integration tasks successfully resolved by our guys during that week, from the UI widgets customization to search, synchronization and user profile management.

Huddle
The winning project, Huddle, is helping businesses across the world to work online in a common workspace, share and edit the documents, involving the external users in their workflows. Our guys did a great job using Silverlight and SharePoint 2010 features, customizing the UI and the back-end logic by means of timer jobs.

Calinda Software
Calinda Software, the second winner with their MindUp product, are focused on making e-mail communications structured and easy, so no attachment gets lost, and the history of sent and received messages can be seen on a visual map. With SharePoint 2010, the e-mail environment transparently becomes integrated with document libraries and lists in MOSS. Our commitment to their success was a service, allowing users to search for people with specific skills and give the relevancy estimates for these search results.   

GetConfer
Confer is a company that offers a microblogging Web application to simplify communications between employees of a big company. In order to extend its functionality on the enterprise SharePoint installation, we worked together on mechanisms to map Confer's users to SharePoint users.

Cortex Intelligence
Cortex Intelligence provides a market intelligence service for Microsoft SharePoint 2010 users, letting them access external data, such as market data, news and so on. During the event, our guys worked on integrating the microblog functionality of SharePoint with external data providers, allowing them to post blog articles and put links to external articles into the user's microblog.

Leverage Software
LeverageSoftware's DesignSpace platform transforms sets of e-mail threads into a social workspace that the users can share with other colleagues in their company. We helped them to integrate with the people search functionality of SharePoint 2010.

Liaise
Liaise allows SharePoint 2010 users to transparently update their SharePoint items (tasks, lists and so on) with the information parsed from the e-mail messages they send, save attachments in document libraries and so on. We made a prototype solution, putting task summary information in the calendar, automatically updating any change to the task list.

Loqu8
Loqu8 Prelude is a tool that’s integrated into Microsoft applications (Office, Media Player, Control Panel, etc.), showing users contextually relevant information when they are hovering a word. During Microsoft Incubation Week, we worked on the integration of their tool with SharePoint’s platform.

By Sergey, a quality assurance manager on Murano Software’s team

If you have ever tried to upload a file under Selenium RC, you must know that it is impossible to type in the file upload text field. This caused by a JavaScript security restriction. JavaScript is not allowed to modify the value of <input type="file"> form fields. http://wiki.openqa.org suggests to work around this by running the tests in the experimental “chrome” mode for Firefox. But it is mentioned that there is no way to do this on any other browser.

I have tried to use the “chrome” mode for Firefox and the “iehta” mode for IE, but my tests turned out very unstable. Fortunately, there is another workaround.

For Firefox and IE, you can set the focus inside the file upload field by using JavaScript.

selenium.getEval("this.browserbot.getCurrentWindow().document.getElementById('FileUploadFieldId').focus();")

Then use the selenium.keyPressNative () method to type the file path, i.e. C:\Some Folder\TestFile.txt. The method simulates a user pressing and releasing a key by sending a native operating system keystroke. I created a helper method to type the file path. It handles upper case and lower case letters, back slashes, spaces and periods.

import java.awt.event.KeyEvent

protected void typeNative(String filePath) throws InterruptedException 
{
  for (char c : filePath.toCharArray()) {
    if (c == ':') {
      selenium.keyDownNative(Integer.toString(KeyEvent.VK_SHIFT));
      selenium.keyPressNative(Integer.toString(KeyEvent.VK_SEMICOLON));
      selenium.keyUpNative(Integer.toString(KeyEvent.VK_SHIFT));
    }
    else if (c == '\\') {
      selenium.keyPressNative(Integer.toString(KeyEvent.VK_BACK_SLASH));
    }
    else if (c == '.') {
      selenium.keyPressNative(Integer.toString(KeyEvent.VK_PERIOD));
    }
    else if (c == ' ') {
      selenium.keyPressNative(Integer.toString(KeyEvent.VK_SPACE));
    }
    else {
      KeyStroke key = KeyStroke.getKeyStroke("pressed " + Character.toUpperCase(c));
      if (null != key) {
        // should only have to worry about case with standard characters
        if (Character.isUpperCase(c)) {
          selenium.keyDownNative(Integer.toString(KeyEvent.VK_SHIFT));
        }
        selenium.keyPressNative(Integer.toString(key.getKeyCode()));
 
        if (Character.isUpperCase(c)) {
          selenium.keyUpNative(Integer.toString(KeyEvent.VK_SHIFT));
        }
      }
    }
  }
}

If you're using Selenium RC and Java, you can exploit java.awt.Robot, instead of using the selenium.keyPressNative() method. See the code sample below.

For Safari, there is no rendered field in the HTML page into which you can simply type keys. Safari requires that the user interact with a “File Upload” dialog box. To get the dialog, you can put selenium.click() on the file upload field. But here you will meet another unpleasant surprise. The “File Upload” dialog box will be loaded in a modal window, so the executing of your code will be held up until the modal window is closed.

To handle that, you need to invoke the type native method in the other thread one step before clicking on the file upload field and set a delay to wait until the modal window with the “File Upload” dialog box appears. See the code sample that uses java.awt.Robot.

protected void chooseFile(String element, String filePath) throws InterruptedException
{
  new FileChooserThread(filePath).start();
  selenium.click(element);
}

To invoke the type native method, just add new class containing the code below to your project.

import javax.swing.*;
import java.awt.*;
import java.awt.event.KeyEvent;
 
public class FileChooserThread extends Thread 
{
  public FileChooserThread(String file) {
    super(new FileRunner(file));
  }
}
 
class FileRunner implements Runnable 
{
  private String fullName;
 
  public FileRunner(String fileName) {
    this.fullName = fileName;
  }
 
  public void run() {
    try {
      Thread.sleep(2000);
      Robot robot = new Robot(); // input simulation class
      for (char c : fullName.toCharArray()){
        if (c == ':') {
          robot.keyPress(KeyEvent.VK_SHIFT);
          robot.keyPress(KeyEvent.VK_SEMICOLON);
          robot.keyRelease(KeyEvent.VK_SHIFT);
        }
        else if (c == '\\') {
          robot.keyPress(KeyEvent.VK_BACK_SLASH);
        }
        else if (c == '.') {
          robot.keyPress(KeyEvent.VK_PERIOD);
        }
        else if (c == ' ') {
          robot.keyPress(KeyEvent.VK_SPACE);
        }
        else {
          KeyStroke key = KeyStroke.getKeyStroke("pressed " + Character.toUpperCase(c));
          if (null != key) {
            // should only have to worry about case with standard characters
            if (Character.isUpperCase(c)) {
              robot.keyPress(KeyEvent.VK_SHIFT);
            }
 
            robot.keyPress(key.getKeyCode());
            robot.keyRelease(key.getKeyCode());
 
            if (Character.isUpperCase(c)) {
              robot.keyRelease(KeyEvent.VK_SHIFT);
            }
          }
        }
      }
      robot.keyPress(KeyEvent.VK_ENTER);
    }
    catch (Exception e) {
      throw new RuntimeException(e);
    }
  }
}

The final remark is addressed to the focus. This workaround will work only if the system focus is into the file upload field. I had to start the selenium server with the -multiWindow parameter to set the system focus into the browser window.