Month: January 2012

BlazeDS: Installation & Sample Apps

| srivello

BlazeDS is free and enables java-based services for your Flash & Flex apps.

Introduction

BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe Flex and Adobe AIR applications for more responsive rich Internet application (RIA) experiences.

BlazeDS consists of three key services:

  • The Remoting Service allows your Flex application to directly invoke methods of Java objects deployed in your application server.
  • The Message Service provides a publish/subscribe infrastructure that allows your Flex application to publish messages and subscribe to a messaging destination, enabling the development of real-time data push and collaborative applications.
  • The Proxy Service allows your Flex application to make cross-domain service requests in a secure and controlled manner. In other words, it allows your Flex application to access a service available on a different domain than the domain from where the application was downloaded (without having to deploy a crossdomain.xml policy file on the target domain).

There are certainly other free and commercial options. A well known one also comes from Adobe, LiveCycle DS.

There are many resources which compare these two products. Ben Watson says – LiveCycle Data Services is ultimately targeted at large enterprise deployments for web-based applications that would serve thousands of clients and as such is priced accordingly.  We have heavily invested for several years now to make a very unique, highly performant and valuable product for a very small market and as such we priced accordingly and turned the BlazeDS version over to the open source community, ultimately satisfying most of the use cases for free.

Installation Instructions for MacOSX

DOWNLOAD

1. Download the ‘Turnkey’ here: http://opensource.adobe.com/wiki/display/blazeds/BlazeDS
2. Unzip it anywhere you want
3. Open Mac OSX’s Terminal.app

START

4. Navigate to your blazeds install folder (use the ‘cd’ command)
5. Start Server – Run “tomcat/bin/startup.sh”
6. Start DB – Navigate to the /sampledb/ folder FIRST, then run “./startdb.sh”
7. Open a webbrowser to “http://127.0.0.1:8400/samples/testdrive.htm”

STOP

8. Hit Ctrl+C within terminal (to end step 6 that is still running)
9. Repeat step 4
10. Stop Server – Run “tomcat/bin/shutdown.sh”

My Thoughts

I have used a wide variety of backend technologies. For whatever reason I spent years with clients who preferred a LAMP stack with PHP connecting to Flash and Flex via AMFPHP (another great product). So much of my experience lies there, and .NET. However I’m excited by proven, free products like BlazeDS and am excited from my setup and research and doing a few simple demos. Perhaps soon I’ll post some demos. Stay tuned!

Do you have experience with BlazeDS? Please comment below.

Tutorial Series: ActionScript 3.0

| srivello

Learn Adobe’s ActionScript 3.0 – From Basics to Advanced

ActionScript 3.0 (AS3) is a powerful object-oriented programming language with similiar roots to JavaScript. One could say that ActionScript 2.0 was equivalent to JavaScript and AS3 is a much more mature version with support for classes, interfaces, namespaces, events, and more. This video series is designed to give new programmers a perfect place to start. There is also content for advanced programmers too.

Next Steps

Download the complete tutorial source code (See ‘Members Resources’ below) and watch these great videos:

1. IDE (Code Editors)

  • 1.1 Flash Builder: Install & Project Setup (See ‘Resources’ below) (Watch Video)
  • 1.2 Flash Professional: Install & Project Setup (See ‘Members Resources’ below)
  • 1.3 FDT: Install & Project Setup (See ‘Members Resources’ below)

2. Basic Programing (via Flash Builder)

  • 2.1 AS3 Basics With Cocktails: (See ‘Members Resources’ below)

3. Advanced Programming (via Flash Builder)

  • 3.1 AS3 OOP Programming With Cocktails: (Coming Soon…)
  • 3.2 Design Patterns With Cocktails: (Coming Soon…)

4. Frameworks (via Flash Builder)

Resources

Member Resources

[private_Free member]Enjoy this members-only content!

  • Download the complete tutorial source code
  • Click the video thumbnails below to watch the videos.

[tubepress mode=”vimeoChannel” vimeoChannelValue=”285406″ hqThumbs=”false” ]
[/private_Free member]

Want More Video Tutorials?

[polldaddy poll=5983808]

ActionScript 3.0 WordPress Plugin

| srivello

Managing a blog about programming requires code snippets in the articles. I wanted a great plugin that would show ActionScript 3.0 (and other languages) with colored text, line numbering, and easy ‘copy text’ functionality.

The Syntax Highlighter plugin for WordPress does this well and is easy to add.

Example Code

{
	//--------------------------------------
	//  Imports
	//--------------------------------------

	//--------------------------------------
	//  Class
	//--------------------------------------
	public class Sample
	{

		[Bindable]
		protected var _sample : String;

		public function Sample ()
		{
			_sample = "Hello World";
		}

	}

}

Output Code

[actionscript3 language=”true”]
package classes
{
//————————————–
// Imports
//————————————–

//————————————–
// Class
//————————————–
public class Sample
{

[Bindable]
protected var _sample : String;

public function Sample ()
{
_sample = "Hello World";
}

}

}
[/actionscript3]

Wishlist Member WordPress Plugin Tutorial

| srivello

Now And There

One of my companies is Now And There. The website NowAndThere.com was launched ages ago, and is updated regularly with new blog articles. Currently users come via Google search or perhaps following a Twitter post and arrive to read an article or two. There is no login. Its just a simple blog. I would like to add membership to the site.

This RMC post is a fantastic, thorough tutorial on the before and after of a membership website. It includes text and images here in the post. Below the post there are 3 great HD Screencast Videos (See ‘Member Resources’ below) which repeat what we have here in the post plus much more!

Why Add Membership?

I would like to increase traffic on NowAndThere.com. The 2-prong goal is to get traffic and then keep traffic. Getting new traffic is outside the scope here, but I figure once people visit, I’d like them to stay for a while and even return another day. I think a newsletter (monthly, quarterly, etc…) is a great way to invite current readers back to the site. But, if users are going to express interest in a newsletter and fill out a form (with at least their email), why not keep them as ‘members’? With membership I can offer the newsletter as well as exclusive content. Plus by keeping some content for members only, I can encourage more casual readers to become members (and thus receive the newsletter. I’m rambling, but for me membership + newsletter is the best plan to meet my goals.

1. The Plan

The site currently (See ‘Figure 1’) features no membership. We will change the page layout to provide a membership widget (See ‘Figure 2’).  This membership will allow for non-members to log-in/sign-up and allow logged-in members to see their membership information and to log-out.


Figure 1.
Figure 2.

Membership allows to protect (or restrict) the content on the site for certain members. Its a fairly flexible content. A site could have an entire site that requires membership or just select content which require membership. A site could offer just one level of membership or have multiple levels (at various prices for example).

An analysis of how I would like the site to work is as follows (See ‘Figure 3’). I would like the site’s content to be unprotected by default, but to offer a quick, free membership sign-up to see some posts and in some specific cases to see some parts of some posts. In a broad sense its a 90% unprotected site, with 10% of the content that requires membership. My idea is to encourage sign-up WITHOUT turning away the casual readers. I can always change the 90/10 balance in the future as I see fit.


Figure 3.

The schemes shown (See ‘Figure 3’) will work as follows;

    • Scheme #0 – Unprotected content. No membership required. (See ‘Figure 5’ for an example)
    • Scheme #1 – An unprotected post which gives the gist of the story and then protects the rest  (See ‘Figure 6’ for an example)
    • Scheme #2 – A protected post. Users will see it listed on the front page, but cannot see any of the post without membership. (See ‘Figure 7’ for an example)
    • BONUS – This last scheme is a modified version of #1 where the entire post is unrestricted and only a list of links at the very bottom is protected. (See ‘Figure 8’ for an example)

Figure 4.
Figure 5.
Figure 6.
Figure 7.
Figure 8.

2. The Process

The Membership Plugin

As mentioned before (See ‘Figure 3’) the NowAndThere.com website was created with the popular website creating tool WordPress. If you are new to WordPress, checkout my complete WordPress: Install & Introduction post which includes HD screencast video. To add membership to NowAndThere we will be using the Wishlist Member (WLM)Wordpress plugin.  If you want to know more about the plugin, read my Wishlist Member WordPress Plugin Review post or simply follow along with the tutorial post you are currently reading.

Before You Start

In addition to this post and the 3 HD screencast videos (See ‘Member Resources’ below) I recommend reading the features on the Wishlist Member website’s features section, the showcase of example websites, the support/documentation, and review the extensive Wishlist Member video series.

All of this will help you learn – what is possible, what you want to do, and how to do it.

Installation

First, do a complete backup of your website. I recommend that before any website development, especially significant development like this.

Second, you must purchase and download the plugin from the Wishlist Member website. Then access the admin of your existing WordPress site, visit the plugins page, and upload the new plugin. Activate the plugin. You will notice (thankfully) that after activation your site has not changed. This allows you to install the plugin safely without changing your user experience.

Setup

Now that the plugin is activated you will begin setting up the plugin. During the course of this process your website will be in limbo. Your user experience will change. For instance you may restrict access to a page but not yet add the widget allowing users to sign-in. So no one can reach that page. This is ok. Its just something to remember. You will want to plan well to minimize the effect on your users. Depending on your familiarity with WordPress and Wishlist Member and the complexity of your site and content protection scheme the entire process may take hours or days of development.

Here is the ordered approach I used with NowAndThere after activating the WLM plugin;

  1. Access the WLM dashboard within your WordPress admin
  2. Add licensing information you get via email from WLM
  3. Follow the ‘Setup Wizard’
  4. Add the Registration Widget to your Sidebar
  5. Create Membership Levels (I created just 1)
  6. Add/Edit Error pages. This is what users see during the sign-up process, sign-out process, and other situations
  7. Edit the WL Member » Settings » Protection Defaults
  8. Edit the WL Member » Settings » Protection Defaults » “Text to display for content protected with private tags”. This is what users see for Scheme #1.
  9. Edit the WL Member » Settings » Email Text. This is what users see during the sign-up process.

—

Expert Tip: Open two web browsers. With #1 – log-in to WordPress and the WordPress Admin. Open your website too (like a logged in user). With #2 – do not log-in to your website. Open the website (like a non-logged-in users). This way you can easily test the logged-in and not-logged-in experience during your development.

3. The Result

Since starting this post, obviously the NowAndthere website has been updated. It now has full membership integration. Nice!

I have not yet added the newsletter. I will gather some members for a while and then use a 3rd party email system, such as MailChimp.com to send my first newsletter to all my current members next month or next quarter.

Ready to see the results? Great. Remember you must sing-up to NowAndThere (click here) to see the logged-in experience and log-out (use the sidebar widget) to see the logged-out experience. Have fun!

Live Examples of each protection scheme;

Next Steps

  • Watch the 3 HD screencast videos (See ‘Member Resources’ below). This complete post is explained with commentary and examples.

Member Resources

[private_Free member]Enjoy this members-only content!

HD Screencast Videos

1. Before

[tubepress video=”39631686″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

2. Planning & Installation

[tubepress video=”39809293″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

3. The Results

[tubepress video=”39842809″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[tubepress video=”39857791″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[/private_Free member]

WordPress: Install & Introduction

| srivello

Creating a blog can be and start blogging. However if you want your blog to sit on your own domain (i.e. TravelingIsSuperFun.com), then the following setup is a great start.

These instructions help you to create a new website running WordPress. WordPress is a fantastic, free website-creation tool that is popular and powerful. Its ideal for blogs or simple page based websites. It can integrate handle Flash media and e-Commerce business, but that is far outside the scope of this article.

This article assumes you have no web presence whatsoever, except a personal email, which we will use only sparingly.

HD Video Screencast

[tubepress video=”35649750″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

ONE TIME SETUP

Web Host Setup

First you will need space to store your files. You can think of this as a harddrive, but one that is not on your computer. It exists in a building far far away. This way you can access the blog from anywhere on any computer, and so can your audience who reads your blog.

There are myriad options for a web host. I chose one ages ago, and always use it; DreamHost.

  • Open your favorite web browser
  • Browse to https://www.dreamhost.com/
  • Sign-Up for your free Dreamhost Account.

Domain Registry

You can think of the domain as the front door to your blog. You can send anyone in the world your domain and they can access you. Its kind’ve like how an email address allows anyone send you an email – but the domain let’s anyone find your blog.

  • Sign-In to the web panel. This is the Dreamhost Admin
  • Add a New Domain. You may choose any name you like, as long as it doesn’t exist, but I recommend one long word without dashes without underscores ending in “.com” (i.e. “TravelingIsSuperFun.com”)
  • Open your favorite web browser
  • Waiting? Browse to your new domain (e.g. http://TravelingIsSuperFun.com). Most likely it is not ready yet. It will take “1 to 3 days” before we can Install WordPress per below. There is no way to speed this up. Just check back and when your domain shows “something”. Then you are ready to continue. While you wait you can “Setup New Email”. This is the only step you can do while you wait.
    Setup New Email

Certainly you already have a personal email. This is the one you likely used when you signed up with DreamHost per above. However for many reasons having a domain-specific email is beneficial (e.g. sammy@TravelingIsSuperFun.com). It looks more professional, and it helps separate your blog emails from your personal emails. It is unlikely you will receive much emails, unless you choose to distribute this email or list it on your blog. I do both.

  • Sign-In to the web panel. This is the “DreamHost Admin”
  • Add New Email. There you will see an option to “Create New Email Address”. Leave all settings as default, except these. Customize these settings;
    • Email Address
    • Mailbox Name
    • Password
  • Choose “Create Address”
  • Now Access Your Email To Test It. Enter your username and password at the “Webmail for your Email Account” (e.g. http://webmail.TravelIsSuperFun.com/ )

Install WordPress

Are all steps to “Domain Registry” complete? All of them? Sure? Ok then continue here.

WordPress will be the scaffolding for your entire site. It will be the graphics and text the user sees as well as the administration panel that you access to add/edit/remove content to your blog. There are mountains of great tutorials, videos on youtube, and books on the subject.

  • Sign-In to the web panel. This is the “DreamHost Admin”/li>
  • Add WordPress. Click the WordPress icon. It is located at the horizontal center and vertical center of the page.
  • Choose “Simple Installation”.
  • There are 4 form fields and one dropdown. Leave the first field blank.
  • Set the dropdown to your new domain (e.g. TravelingIsSuperFun.com)
  • Set the “Name:” to anything you like (e.g. This is my Travel Blog). You can change this later.
  • Set the “Email:” to your new email (e.g. sammy@TravelingIsSuperFun.com).
  • Click “Install It For Me Now”.
  • Waiting? Browse to your new domain (e.g. http://TravelingIsSuperFun.com). Most likely it is not ready yet. It will take “10 to 15 minutes” before you see a WordPress at your new website. It will display something like “Welcome To WordPress”. At the same moment it becomes available, and email will be sent to your new email. So you can wait for that and click the links inside the email to see your blog.

Google Analytics Setup: Optional

Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. You can check back and see who visited your website, why, for how long, etc… for any day ever in the history of your website. Very nice. And its free. It is best setup on day 1, but you can add it at any time in the future.

If you are not interested in analytics, skip this section and skip any instructions which mention “analytics” in other sections below.

  • Sign-Up for Google Analytics. You can use your existing free Google account if you have one.
  • “Add New Domain”. If you can’t find out how, search on http://www.google.com for “Adding a domain to Google Analytics” and follow the instructions. Complete analytics setup here is outside the scope of this article.

Google AdSense Setup: Optional

AdSense is an ad serving application run by Google Inc. Website owners can enroll in this program to enable text, image, and video advertisements on their websites. These advertisements are administered by Google and generate revenue. Its fast and easy to setup and totally free.

If you are not interested in AdSense, skip this section and skip any instructions which mention “AdSense” in other sections below.

  • Sign-Up for Google AdSense. You can use your existing free Google account if you have one.
  • “Add New Ad”. If you cannot find this. Follow this help section.

WordPress Setup: Part 1

  • Following the “WordPress Install” section above you will receive an email outlining how to login to your website. You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/). This is your personal blog’s “WordPress Admin”. You will spend 99% of your time on this project inside this admin.
  • The first page of the admin is the “Dashboard”. It shows a navigation bar with tons of buttons on the left.
  • Click the arrow next to “Users” to expand the menu. Click on “Users” (yes, same word used twice)
  • Click on “Admin”. Change the password. Memorize it.
  • On the Users Menu, click “Add User”. Create a new account with your preferred username and password (you can use the same password as you used for admin if you like). Be sure to set the Role to Administrator. This way you can add/edit/delete (do everything) on the blog.
  • In the upper right, choose log out.
  • Log In again with your new username and password. Use this new username and password 100% of the time. Leave the original “admin” user account as a backup (i.e. You really never use it, but DO remember the password in case you need it.)
  • Browse to your blog. Just to see how it looks. (e.g. http://TravelingIsSuperFun.com/).
  • Then continue with ‘Part 2’.

WordPress Setup: Part 2

  • You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/).
  • On Left-bar menu, expand ‘Plugins’ and choose ‘Add New’. For each of the following; search, install, activate.
    • Advertising Manager – This you will use for AdSense, per above
    • Akismet
    • All in One SEO Pack
    • Google Analyticator – This you will use for Google Analytics, per above.
    • Duplicate Post
  • On Left-bar menu, expand ‘Appearance’ and choose ‘Themes’. Browse any, preview, any, and activate one. For now this will be your theme, so pick one you want for at least a few weeks. Any changes to ‘widgets’ will be lost when you change themes, so pick one you like.
  • On Left-bar menu, expand ‘Pages’ and choose ‘Add New’. You will add 4. For each; Enter a the title/description here.
    • Home / This is the home page.
    • About / This is the about page.
    • Services / This is the services page.
    • Contact Us / This is the contact page.
  • Browse to your blog. Just to see how it looks. (e.g. http://TravelingIsSuperFun.com/).
  • Then continue with ‘Part 3’.

WordPress Setup: Part 3

  • You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/).
  • On Left-bar menu, expand ‘Posts’ and choose ‘Categories’. Add 2 new ones. ‘Fun’ and ‘Work’. You can delete these later.
  • On Left-bar menu, expand ‘Posts’ and choose ‘Add New’. Add a few posts. There is TONS you can do here. But just give a title, input a sample paragraph, choose a category (of ‘Fun’ or ‘Work’) and click ‘Update. Checkout the site again to see.
  • On Left-bar menu, expand ‘Appearance’ and choose ‘Widgets’.  Each widget is a block of real estate on your blog. It can contain many things. A list of links, some text, an image, a calendar, a search text input, and much more.  Drag a box from the center area to the right. Checkout the site to see the progress. Experiment!

That’s it. You did it. We’ve used the most commonly used 20% of WordPress. There is much more to learn, but you already have all the basics now. You can send the link to your friends and share it!

ONGOING MAINTENANCE

DREAMHOST MAINTENANCE

-Only visit dreamhost to; pay your bill each year, add new email accounts. I.e. basically you never visit here.

WORDPRESS MAINTENANCE

-Login to the admin to add/edit/expand your website. You will login here frequently until your site is “done”.

That’s it!

FlyerGame for HTML5

| srivello

HTML5’s canvas tag allows for great in-browser gaming. Recently, I’ve posted a few Great HTML5 games and on the Pros and Cons of HTML5 for gaming. Overall, the potential is high, but issues with browser compatibility, immature tools, and lack of elegant OOP and architecture will slow the progress of HTML5 for gaming.

For HTML5, I’ve found many frameworks to support graphics and video games. Some of of them are;

I haven’t recoded all of those (yet), but many are ready for you. Check them out!

Next Steps

Polls

[polldaddy poll=5983851]

AS3-Signals Introduction

| srivello

What is AS3-Signals?

AS3-Signals (or ‘signals’ for short) is a proven alternative to the native AS3 event system.

Watch Slideshow

[slideshare id=11402070&doc=rmcintroas3-signalsv1-120203061744-phpapp02]

Comparison

Syntax
You can see that only line 4 is different.

Flash Events

[actionscript3]
//CREATE
_person = new Person("Sam");
//LISTEN
_person.addEventListener(PersonEvent.GREETED, _onPersonGreeted);
//CALL
_person.greet("Hello!");
[/actionscript3]

AS3-Signals

[actionscript3]
//CREATE
_robot = new Robot("Robot");
//LISTEN
_robot.signal.add(_onRobotSignalGreeted);
//CALL
_robot.greet("It is me, the Robot!");
[/actionscript3]

What about the speed of AS3-Signals vs Events?

See this image from Ross Gerbasi showing a comparison in milliseconds (lower # is better/faster).

AS3-Signals and Robotlegs

I am a big fan of the Robotlegs framework for AS3. I’ve written about it many times. AS3-Signals is a completely separate project, but WOW these two play really nice together. In my series of custom project templates I created a specific Robotlegs w/ AS3-Signals Template. On a recent client project I chose Robotlegs and added in the optional AS3-Signals project.

Next Steps

Member Resources

[private_Free member]Enjoy this members-only content!

HD Video Screencast

[tubepress video=”36959934″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[/private_Free member]

Top 10+ Simple Linux / Unix Commands

| srivello

I use Mac terminal as rarely as I can. I prefer GUI’s and automated processes. However there are several commands that I can’t do without. Here is a list of the very basics, leading to my favorites.

The following list is from Mac OSX’s ‘Terminal’ application, but the commands should work for most any Linux/Unix command-line.

1. Navigate into the root (parent of all parents) directory

cd (no spaces anywhere)

2. Navigate into the ‘myFolder’ directory

cd myFolder

3. Navigate to parent directory

cd ..

4. PICO: Enter the PICO text editing program for a file in the current directory named ‘test.txt’

pico test.txt

5. PICO: Navigate the cursor

Left, Right, Up, Down Arrow Keys

6. PICO: Edit some text

Delete key to remove characters, start typing to add

7. PICO: Save the file

Control-O, then wait, then the Enter key

8. PICO: Exit the file

Control-X

9. Search for text ‘hello’ inside any file within the folder ‘myFolder’ and any of its subfolders

grep -r hello myFolder/

10. Delete the directory ‘myFolder’ and all of its contents & subdirectories etc…

rm -r myFolder

11. Stop all running processes whose name contains the string ‘blah’.

pkill -9 -f blah