Tryangled Solutions web designing tips tricks

Flex Development

raji — Thu, 26 Feb 2009 05:09:54 +0000

Flex Application Development, Flex Web Development, Flex Developers

Semaphore Flex developers offer complete web development solutions for creating and delivering Rich Internet Applications (RIA) using Flash, Flex and Adobe-Flash Media Server. Semaphore’s flex developers have a rich experience in the application of various graphical and multimedia tools that make your project unique. The expertise of our Flex Developers in offering Flex Development Services will definitely make your project technically extraordinary and more interactive and engaging.

Flex is a free, open source framework for building highly interactive web applications. Its run time - Flash Player and Adobe Integrated Runtime (AIR) are available far and wide on all major browsers, desktops and Operating Systems. Through Flex, SWF files are created, which are rendered by Flash Player and these applications can run on web Browsers via Flash Player and in online/offline mode via AIR over desktops.

Adobe Flex precisely, is a collection of technologies for the development and deployment of cross platform, Rich Internet Applications based on the proprietary Adobe Flash platform. Interestingly, flash content and applications have emerged as principal requirements for rich web experiences.

Over the years, developers at Semaphore have achieved great amount of proficiency in delivering Adobe Flex solutions. Our core expertise lies at creating highly intuitive, interactive and expressive web and desktop applications.

Benefits of using Flex:

Applications developed using Flex assures Rich User Experience through intuitive interaction with the application and presenting information in a visually rich interface.
Flex allows for the development of applications that support complex business logic to run in the browser, rendering the feeling of Quick Response and not refreshing the page again and again.
The highly evolved client environment of Flex permits the applications to process huge number of information at client-end without any noticeable change in performance of the applications. This leads to High Performance.
Flex supports Diverse Modes for promoting data with an incorporated development model for complete customization and control. Applications developed are highly customizable tailoring to customer´s needs.
Flex provides a Strong Development Model that consists of Action Script and MXML.

Semaphore offers expert Flex Programming and development services. Our dedicated team of Flex programmers has professionally accomplished a number of offshore software development projects.

Below are our Flex Development and Flex Programming services in full:

* Flex Consulting, Business Analysis and Specification Development
* Flex Application Development entirely in Flex environment.
* We can integrate Flex with MySQL, SQL Server, Oracle and PostgreSQL with Server-side technologies like PHP, JAVA, .NET and Ruby on Rails (RoR).
* Creation of Custom Flex components, skinning of components to provide highly interactive user-experience.

If you are looking for Flex Application Development Services or if you want to Hire Flex Developers or Flex Programmers in India; then you are at the right place.

Semaphore-Software has a great expertise in Flex Application development, Flex software development, Flex web development, etc. and has also attained great feedback for its Rich Internet Applications Development services from its client-base all across USA, Canada, UK, Europe, South Africa, UAE, and Australia.

Please click on Flex Development portfolio for an idea on the Projects developed by our expert Flex Developers or you may please get a free quote from Semaphore for your Project.

* Request Flex Development Services Quote
* Hire Flex Developer
* Back to Services

Flex 3.0 Installing and Configuring Flex Automated Testing

raji — Thu, 12 Feb 2009 06:38:59 +0000

To use Flex Automated Testing, you must install Flex Builder 3. You cannot use Flex Automated Testing with only the Flex 3 SDK.

Flex Automated Testing SWC files are installed by default with Flex Builder 3. They are located in the /frameworks/libs directory with the other SWC files. You can begin using Flex Automated Testing and build your own custom agents without any further installation.

To use run-time automated testing (recommended):

Open a command prompt.
Navigate to the flex_builder_root/sdks/3.0.0/templates/automation-runtimeloading-files directory.
Execute the build.bat file. This compiles the runtimeloading.mxml file into a SWF file.
Copy the runtimeloading. swf and RunTimeLoading.html file to your web server. Copy the Flex application that you want to test to this server as well (the application need not be compiled with automation libraries).
Request the RunTimeLoading.html file and pass your Flex application as the automationswfurl query string parameter; for example:
http://localhost/RunTimeLoading.html?automationswfurl=MyApp.swf
To compile your applications with static automation support:

Start Flex Builder.
Create a new Flex Project.
Select your new Flex project in the Navigator.
Select Project > Properties > Flex Compiler.
In the “Additional compiler arguments” field, enter the following:
-include-libraries “flex_builder_dir\sdks\3.0.0\frameworks\libs\automation.swc”
“flex_builder_dir\sdks\3.0.0\frameworks\libs\automation_agent.swc” “flex_builder_dir\sdks\3.0.0\frameworks\libs\qtp.swc”
“flex_builder_dir\sdks\3.0.0\frameworks\libs\automation_dmv.swc”
The -include-libraries compiler option is relative to the Flex Builder installation directory; the default on Windows is “C:\Program Files\Adobe\Flex Builder 3\”.

6. Click the OK button to save your changes and OK to close the project Properties dialog box.
7. Compile your Flex application.
Examples and documentation for using custom agents can be found at Custom Agents.

To use Flex Automated Testing with the Flex 3 Plug-in for Mercury QuickTest Pro, you must perform additional steps. The rest of this section describes how to install and use the Flex 3 Plug-in for Mercury QuickTest Pro.

[edit]Requirements for Using the QTP Plug-in
To test applications with Flex Automated Testing and the QTP agent, you must install the following:

Mercury QuickTest Professional 9.1 or later (no support for Smart Identification)
Mercury QuickTest Professional 9.2 and patch 1701 if you want Smart Identification support
Adobe Flex 3 Plug-in for Mercury QuickTest Pro
Microsoft Internet Explorer, version 6 or later
Flash Player ActiveX control, version 9.0.28.0 or higher
[edit]Installing the Plug-in
This section describes the steps necessary for a QC testing professional to configure QTP to work with Flex applications. You must install QTP and the plug-in.

To install QTP:

Install Flash Player 9 ActiveX control (9.0.28.0 or higher) for Microsoft Internet Explorer. This is currently the only supported browser/player.
Install QTP 9.1 or later if you do not require support for Smart Identification. If you want to use Smart Identification, install QTP 9.2 and patch 1701. You must get QTP 9.1 from Mercury.
If you are using Mercury QTP on Microsoft Windows Vista you need to turn off the User Account Control (UAC) feature. Instructions to turn off UAC are available here
Restart your computer.
To install the Flex 3 Plug-in for Mercury QuickTest Pro:

Run the flex_builder_root/Installers/QTP_Plugin_Installer.exe.
Start QTP.
Close QTP.
In addition to the plug-in’s DLLs and XML files, the plug-in installer includes the following in the installation directory:

/demo — Contains a Flash movie that describes the basics of using the plug-in. Be sure to enable audio on your computer.
/Uninstall Adobe Flex 3 Plug-in for Mercury QuickTest Pro — Contains the uninstaller.
[edit]Using the Plug-in
Start QTP again after installing the plug-in. The Add-in Manager lists the Flex plug-in.
Select the Flex plug-in in the Add-in Manager.
Select New > Test and click the Record button.
NOTE: Flex application testing with QTP currently supports only Microsoft Internet Explorer with the ActiveX Flash Player.

For more information on these tasks and using QTP to test Flex applications, see Testing with QTP.

For information on the operations and properties of Flex objects in QTP, see QTP Object Type Information.

[edit]Samples for Automated Testing
Sample custom agents are available at Custom Automation Agents.

An application ready for testing with QTP can be found at Flexstore AT. This sample can be used to test if the QTP plugin installation was successful.

An example for automating custom components can be found at Automating Custom Component.

[edit]Using automation with the Adobe Flex Component Kit for Flash CS3
You can create Flex controls, containers, skins, and other assets in Flash CS3 Professional, and then import those assets into your Flex application. When you want to automate an application that uses such assets, you must include the automation_flashflexkit.swc library.

If you are using run-time loading, re-compile the runtimeloading.swf file by using the build.bat file in flex_builder_root\sdks\3.0.0\templates\automation-runtimeloading-files\. The batch file includes the necessary libraries.

If you are compiling automation support into your application, add the automation_flashflexkit.swc to your include-libraries compiler option. This is in addition to the other automation SWC files. The SWC files are located in the flex_builder_root\sdks\3.0.0\frameworks\libs directory.

ADVANCED FLEX

raji — Thu, 12 Feb 2009 06:17:46 +0000

ADVANCED FLEX DATA SERVICES

Adobe Live Cycle Data Services ES provides a comprehensive set of data-enabling features for using data in RIAs. It enables RIAs to talk to back-end data and business logic in a faster, more efficient operating model. Live Cycle Data Services ES also enables seamless integration with Live Cycle ES business processes and document services.

Blaze DS is a free, open source project providing Flex Remoting and Messaging to all developers. Flex Remoting provides a binary, serialized data transport format called Action Message Format (AMF) to provide a fast, efficient means of transporting data to your RIA, which accelerates application performance. Flex Remoting also makes it fast and easy for developers to connect to back-end business logic and data. Flex Messaging adds real-time data push and publish/subscribe, both powerful capabilities now made easy. Using BlazeDS, you can start using these powerful Java server integration features for free, and then subscribe to LiveCycle Data Services, Community Edition for certified builds and support, or upgrade to the full LiveCycle Data Services ES edition for a complete server solution.

* Learn more about LiveCycle Data Services
* Learn more about open source BlazeDS

ADVANCED DATA VISUALIZATION

ILOG Elixir provides graphical data-display components to further enhance Adobe Flex 3 and Adobe AIR rich Internet applications. ILOG Elixir helps turn raw data into clear, actionable information through a highly graphical and interactive user experience. Components include 3D charts, gauges and dials, maps of the world, radar charts, Gantt charts, treemaps, and org charts.

Flex overview

raji — Thu, 12 Feb 2009 06:11:19 +0000

Flex is a free, open source framework for building highly interactive, expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. It provides a modern, standards-based language and programming model that supports common design patterns. MXML, a declarative XML-based language, is used to describe UI layout and behaviors, and ActionScript3, a powerful object-oriented programming language, is used to create client logic. Flex also includes a rich component library with more than 100 proven, extensible UI components for creating rich Internet applications (RIAs), as well as an interactive Flex application debugger.

RIAs created with Flex can run in the browser using Adobe Flash Player software or on the desktop on Adobe AIR, the cross-operating system runtime. This enables Flex applications to run consistently across all major browsers and on the desktop. And using AIR, Flex applications can now access local data and system resources on the desktop. Both Flash Player and Adobe AIR are available as a free download on Adobe.com.

You can accelerate application development with Adobe Flex Builder 3 software, a highly productive, Eclipse based development environment, and Adobe Live Cycle Data Services software, a set of advanced data services that can be used in Flex development. Both of these products are available for purchase.

CSS Floats

raji — Tue, 18 Nov 2008 08:00:07 +0000

What Floats?

You can’t float every element on a Web page. To get technical, you can only float block-level elements. These are the elements that take up a block of space on the page, like images (), paragraphs (

), divisions (

), and lists (

). Other elements that affect text, but don’t create a box on the page are called inline elements and can’t be floated. These are elements like span (), line breaks (
), strong emphasis (), or italics ().

Where Do They Float?

You can float elements to the right or the left. Any element that follows the floated element will flow around the floated element on the other side.

For example, if I float an image to the left, any text or other elements following it will flow around it to the right. See the example. And if I float an image to the right, any text or other elements following it will flow around it to the left. See the example. An image that is placed in a block of text without any float style applied to it will display as the browser is set to display images. This is usually with the first line of following text displayed at the bottom of the image. See the example.
How Far Will They Float?

An element that has been floated will move as far to the left or right of the container element as it can. This results in several different situations depending upon how your code is written. For these examples, I will be floating a small

to the left:

* If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float. Note: some browsers attempt to place elements beside floated elements when the width isn’t defined - usually giving the non-floated element only a small amount of space. So you should always define a width on floated elements.
* If the container element is the HTML , the floated div will sit on the left margin of the page.
* If the container element is itself contained by something else, the floated div will sit on the left margin of the container.
* You can nest floated elements, and that can result in the float ending up in a surprising place. For example, this float is a left floated div inside a right floated div.
* Floated elements will sit next to each other if there is room in the container. For example, this container has 3 100px wide divs floated in a 400px wide container.

You can even use floats to create a photo gallery layout. You put each thumbnail (it works best when they are all the same size) in a DIV with the caption and the float the divs in the container. No matter how wide the browser window is, the thumbnails will line up uniformly.
Turning Off the Float

Once you know how to get an element to float, it’s important to know how to turn off the float. You turn off the float with the CSS clear property. You can clear left floats, right floats or both:

clear: left;
clear: right;
clear: both;

Any element that you set the clear property for will appear below an element that is floated that direction. For example, in this example the first two paragraphs of text are not cleared, but the third is.

Play with the clear value of different elements in your documents to get different layout effects. One of the most interesting floated layouts is a series of images down the right or left column next to paragraphs of text. Even if the text is not long enough to scroll past the image, you can use the clear on all the images to make sure that they appear in the column rather than next to the previous image.

Images floated to the left and to the right.

The HTML (repeat this paragraph):

Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.

The CSS (to float the images to the left):

img.float { float:left;clear:left; margin:5px;}

And to the right:

img.float { float:right;clear:right; margin:5px;}

Using Floats for Layout

Once you understand how the float property works, you can start using it to lay out your Web pages. These are the steps I take to create a floated Web page:

* Design the layout (on paper or in a graphics tool or in my head).
* Determine where the site divisions are going to be.
* Determine the widths of the various containers and the elements within them.
* Float everything. Even the outermost container element is floated to the left so that I know where it will be in relation to the browser view port.

Starting to Position with CSS

raji — Tue, 18 Nov 2008 07:44:42 +0000

Once you have a series of

tags in your HTML you can start positioning them on your page. There are many ways to do CSS positioning, but I find using float to be the easiest to manage and get my pages showing up how I want them to.

1. Set a width on your body
You don’t have to do this, but most pages are easier to read if you don’t assume that everyone will have their browser set to the same settings as your browser. I like to design for 1024×768 resolution, with a typical width of around 800px. However, I also have done fluid widths using percentages. It’s all up to you.

2. Float everything
Once you have your maximum width, then you can float everything on the page, and have it line up. For example, if you want your navigation

to be at the top of the page, you would make it have a width of 100% and float left.

But if you wanted it to be on the right side, you’d make it a width of less than 100% and float right.

Then, anything that comes after it would be floated left, and as long as those elements had a smaller width than 600px (800 - 200), they would slide right in to the left of the navigation.

3. Use floats to create margins
One of the great things about floats is that you can use them to create margins without using CSS. For example, if my navigation is on the right and 200px wide and my body content is floated left and 580px wide, there will be a 20px margin between the two elements, without any margin tags at all.

4. Get multiple columns by nesting

elements
If you want three columns, you create two divs that float left and right, and then in the wider div, you create a second set of two columns that float left and right inside it. HTML

CSS (note that the inner divs have a width of 50% because they are half of the outer container, which is the “leftside” div:

5. Test in multiple browsers
While this technique works most of the time, some browsers react strangely to floats. You may have to play with the widths to get your elements to show up correctly.

Grid Designs Don’t Have to Equal Boring

raji — Tue, 18 Nov 2008 07:31:56 +0000

The problem is, most beginning designers feel that designing on a grid is boring. And it definitely can be. This is especially true if you use the grid as a mandate to fill in every square of the grid with something. The point of a grid is not as a way to fill up space, but to help you organize the space you have.

The trick to using grids in your layout is two-fold:

* Create the grid, with as many sub-divisions as you need, and then stick with it. Don’t add random lines after you’ve created your grid. The benefit to a grid is the uniformity of it.
* Place your elements on the grid lines, and make sure they fit the width and height of your grid lines. The most effective designs use the grid in balanced but not 100% symmetrical layouts.

Once you understand how to set up your pages using a grid system, then you can start moving away from the rigid grids to create more elegant websites that work even if you can’t see the grid at first glance.

Many Designs Use Grids

raji — Tue, 18 Nov 2008 07:17:47 +0000

Interior designers design rooms with grids. City planners design metropolitan areas on grids. And print designers design print layouts on grids. If you use a grid to design your Web page layout, you’ll create designs that look right and feel comfortable to most people.

How can you fight spam on your blog?

raji — Sat, 15 Nov 2008 05:47:06 +0000

MT 3.3 offers a built-in spam protection plugin called SpamLookup. In addition to this plugin, there are several other options you can implement to help stem the tide of spam. Note that the spammers are constantly improving their methods to game the system, requiring constant vigilance on the part of the MT community to keep coming up with new ways to block them.

* SpamLookup
SpamLookup is a Movable Type plugin, developed by Brad Choate, that uses several techniques to identify spam, and then uses user-supplied choices to either moderate or block it. SpamLookup is an integrated part of MT 3.3, so if you have installed the latest version of MT, there is nothing more you need to install. SpamLookup utilizes several blacklist services to check incoming comments and trackbacks against known spammers. It allows you to either “junk” or moderate comments and trackbacks based on different settings for links and keywords. You can even “white list” domains or IP addresses. To adjust the settings on SpamLookup, simply open up your Plugins menu from the System Overview of your Movable Type editing window. Scroll to the bottom and select “Show Settings” from any of the SpamLookup modules. See Neil Turner’s suggestions on Making the Most of SpamLookup and David Philip’s SpamLookup’s Keyword Filter Explained for more information on how to best use this plugin.

* Akismet
Akismet is a distributed spam filtering service developed by the Wordpress community. According to the Akismet FAQ, the way it works is “When a new comment, trackback, or pingback comes to your blog it is submitted to the Akismet web service which runs hundreds of tests on the comment and returns a thumbs up or thumbs down.” MT developer Tim Appnel has created an MT plugin for Akismet (MT-Akismet) which can be downloaded from the Akismet website. Many have found Akismet to be more effective at catching spam than SpamLookup.

* Comment Challenge
Jay Allen’s Comment Challenge plugin requires a commenter to type a keyword into a separate field from the comment field in order for the comment cgi script to run. This plugin effectively halts automatic computer generated spam comments.

* Use a “Captcha”
A captcha is a security code that a commenter must enter in order for her comment to load. The benefit is that it screens out automated comment spam bots. The downside is that it keeps visually disabled people from easily contributing a comment. Arvind has released an SCode plugin to work with MT 3.2 - MT-SCode 1.0.

* Require approval before a comment posts
One way to ensure that your readers never have to see a spam message is that you personally approve comments before they are posted. MT3 has the comment moderation features built-in. (See Settings > Feedback > check “Immediate publish comments from No one”.)

Close old comments.
One way to cut down on blog spam is to reduce the opportunities by closing the ability to comment on blog posts older than X number of days. Mark Carey’s BlogJanitor plugin lets you do just that, and all automatically.

Types of Blog Spam

raji — Sat, 15 Nov 2008 05:43:40 +0000

1. Basic comment spam. The spammer leaves a short uneventful message in a comment field in one of your entries. The spam comes from the URL placed in the comments URL field. These URLs link back to every conceivable scam.
2. Comment spam flooding. The spammer uses an automated computer bot to flood your blog with comment spam messages, up to hundreds in an hour. The spammer doesn’t necessarily leave a URL, but can leave garbage messages, almost like a graffiti artist. The comment spam can put a severe load on the server hosting your blog software to the point that it crashes.
3. Trackback Spam. Spammers have discovered how to take advantage of Trackback. TrackBack spam is very similar to comment spam. The spammer sends TrackBack pings to your site that direct viewers to a totally unrelated URL.
4. Referral spam. The spammer links to your site from their site, and then pings your site through their link, thus creating a reference and link to their site on the statistics referral log of your website. When you are reviewing your stats and see the reference to an odd site (ex. Paris Hilton), clicking on the link takes you to their site. Many people list “referrals” on their site publicly, so by spamming referral logs, not only does the spammer get a link on your referral log (which is picked up by Google) but may even get a link on your main page.