Author:
Joe Hakooz
Category:
ASP.NET
Real quick post here regarding an annoying behavior with the ASP.NET submit button and a simple fix...
Maybe it's by design, but users can easily double click a submit button causing the page to postback twice (or more). This may cause issues particularly if you are inserting records into a database.
To fix this, I created a few lines of JavaScript and JQuery which will do a few things:
- Immediately disable the button so multiple clicks cannot occur.
- Change the button text to let the user know something spectacular is about to happen.
- Respect form validationgroup if applicable.
First add this JavaScript to your site...
// Submit Once
function submitOnce(myButton, txt, validationgroup) {
// Client side validation
if (typeof (Page_ClientValidate) == 'function') {
if (Page_ClientValidate(validationgroup) == false) {
return false;
}
}
$(myButton).attr('disabled', 'disabled');
$(myButton).val(txt);
return true;
}
Next, add this onClientClick attribute to your asp:button.
<asp:Button id="Button1" runat="server" Text="Save Changes" onclick="Button1_Click"
OnClientClick="submitOnce(this,'Saving...','');"
UseSubmitBehavior="false" CausesValidation="true" />
Important Note: I don't remember for sure but I think you also need to include the UseSubmitBehavior="false" and CausesValidation="true or false" depending on if you need to validate.
Notice that the submitOnce function takes three parameters.
1: The button or: this
2: Button text to show after the click.
3. Optional ValidationGroup name.
That's it! Your button is now protected from double clicks!
Feel free to tweak the above code and make it more flexible, but this does the trick for me...
Author:
Joe Hakooz
Category:
Flash
Over the past few months I've paid very close attention to the much hyped debate between Flash and HTML5. Of course I had an initial bias in the debate, as did almost everyone involved, but there comes a time when you need to be objective and learn both sides of the story.
Now that I've spent time getting up to speed on HTML5, I thought I would clear up a few misconceptions which have been largely ignored...
Summary of New HTML5 Features - The Good
- Structure Tags - HTML5 proposes many new "structure" related tags. Seemingly designed with bloggers in mind, we soon can enjoy cleaner markup using the Section, Header, Article, Navigation, and Footer tags.
- Input Types - New form input types include: Placeholder Text for text fields, Email Address, Number (stepper), Number (slider), Search Boxes, and Color Pickers. All of these new inputs will make standard form development much easier and less dependent on JavaScript.
- Canvas Element - The Canvas allows developers to draw shapes, animations, images, and other visual elements using a drawing API.
- Video Tag - This is the big bad Flash killer we've heard so much about. Keep reading to learn more about the "future of video".
- Geolocation API - As the name implies, this allows the end user, with their permission, to share current GPS coordinates for location based applications.
- Super Cookie - Browser storage is about to get a big upgrade from the current ~10kb cookie limit.
- Offline Caching - Developers will be able to take advantage of a manifest file allowing applications to continue working while the user is offline.
Sure there are many more features, but these are some of the most exciting I've come across.
HTML5 Features - The Bad
- Is HTML5 Ready? - W3C is nearing the HTML5 final draft stage. Although already overdue, I've heard the final draft will be ready anywhere from a few months to a few years. The final recommendation isn't due until 2022. Typically browser makers really begin cranking once the final draft is ready, so we could begin to see widespread HTML5 support as early as 2012, but maybe much later.
- Browser Compatibility - Browser makers ultimately decide which features to support. And if we have learned anything from history, don't expect them to agree on everything. We already know that some browsers will allow canvas radial gradient fills, while others will not. Designers will love that! There are many other disagreements among browser makers, most notably the video format standoff. (keep reading...)
- Feature Detection - From what I have read, your HTML5 code will need to be littered with feature detection JavaScript. Fortunately there is a Javascript library called Modernizr that will help you out, but then you need to decide what to do if a browser does not support your code!
- Security Limbo - The aforementioned "Super Cookie" has already been criticized as a major potential security risk, and security paranoia has caused the W3C to eliminate critical features such as fullscreen video support. The thought is that a "well crafted video" could be used, in fullscreen mode, to trick users into providing passwords, etc... What they apparently don't know is that several years ago Flash overcame this issue by 1) requiring a user mouse click to activate fullscreen, 2) showing a mandatory notification to the end user when entering fullscreen, and 3) disallowing textbox support while in fullscreen.
Now let's look at the elephant in the room... Flash vs. HTML5
HTML5 Canvas vs. Flash
The Canvas Element has been widely accepted by the press as a Flash animation replacement. The Canvas drawing API does resemble Flash's drawing class allowing both technologies to programmatically create lines, fills, images, and other visuals. Setting aside the possible lack of Canvas compatibility across major browsers, Flash contains dozens of other graphic classes that HTML5 simply doesn't have. It is not realistic to expect HTML5 to hang with Flash as an advanced animation tool.
HTML5 Video vs. Flash
According to "HTML5 Up and Running", by Mark Pilgrim, there are several factors to consider when using HTML5 video...
- A video should be encoded into three (or more) formats to be viewed on most major HTML5 compatible browsers: Ogg, WebM, and MP4. This is subject to change due to uncertainty in the browser community.
- A Flash based "fallback player" should be included while HTML5 gains popularity.
- Fullscreen playback is not supported among other features.
- DRM is not supported.
- iPad currently has a bug with the video "source" tag.
Here are the steps required to provide a professional HTML5 video experience...
- Encode your video three times into the above mentioned formats.
- Add video tag markup to the page.
- Include one source tag for each of the three videos you encoded.
- Due to the iPad bug, the MP4 must be listed first.
- Include code to embed a Flash video player if the HTML5 video tag is not supported.
As you can see, there are quite a few more steps involved when using HTML5 video instead of Flash. You will also need additional storage space, and possibly more bandwidth since MP4s are arguably smaller in file size than comparable Ogg and WebM videos.
In Conclusion
HTML5 has much to offer. It will even be a good Flash substitute for simple animations and simple video players. But the reality is that Flash is absolutely in a different league. Flash has always been considered a compliment to HTML providing functionality and cross browser compatibility where HTML fell short. I think that type of relationship will continue with Flash and HTML5.
Author:
Joe Hakooz
Category:
General
For those of you unfamiliar with the term "Three Screens", it's basically a developer's dream. It means creating an application once (for the most part), and it works on "all" screens... Computer, Mobile and TV. Adobe has been talking about this for a while now and it looks like it might finally be a reality.
There are several factors that have played out to make this possible in my book...
- The release of Flash Player 10.1
- Flash Platform for the Digital Home
- The Open Screen Project
- Android's rise to power
- and finally... Google TV
A few companies have made attempts and failed in the past, but it looks like we will finally be able to turn on our TV, computer, or smartphone and enjoy the same interactive content.
Author:
Joe Hakooz
Category:
General
Some of you may have noticed today that Google's ever changing homepage honored the 30 year anniversary of Pac Man. I didn't think much of it until I read a story about it "working" on iPhone/iPad. Apparently you could play the game!
It was built using JavaScript and CSS and offers the infamous "No Flash" experience which should give the user a bug free, speedy experience... right?
Well I immediately pulled it up on my iPad-nano (6 months left on the contract!) and clicked "Insert Coin" to see what this is all about. Oh my, was I blown away... It chugged along at what couldn't be 3 frames per second, and had no sound at all. The Atari performed like a super computer next to this bad boy. How could this be? An extremely simple JS and CSS based game running on the magical Apple device performing like a dog? And yes, I rebooted right before playing it.
I also recently came across a video from iBrent showing the iPad's performance with HTML5. Spoiler alert... it performs extremely poorly!
So what does this mean? I think it's safe to say that nothing really visually engaging, unless developed by Steve Jobs or one of his loyal geniuses, performs well on an iDevice. Not Flash, HTML5, or even Javascript/CSS... All of this may be moot since Android may be the next king.
Author:
Joe Hakooz
Category:
General
Although it has been presumed for some time, Steve Jobs finally went public about his war on Google and Adobe. Jobs declared Google's mantra "Don't Be Evil" as "Bulls**t", and accused Adobe of "Being Lazy". Jobs has vowed to defeat Google in the "phone business" and said Apple doesn't support Flash because "No one will be using Flash...the world is moving to HTML5". All of this on the heals of the recent iPad announcement. Personally, I believe Jobs may have just doomed the iPhone...
First of all, the only game changing web-enabled product Apple has is the iPhone. The Mac barely survived the past few decades and certainly no one will care about the iPad, an overpriced laptop sized iPod Touch. Really... what else could it possibly offer?
As an avid iPhone user, I am extremely disappointed in Apple's decision to not support Flash. I always thought the iPhone would be near perfect once they supported Flash player, but I guess they have decided to go the "less useful" route instead. And pissing off Google? Seriously Steve? Other than the number of 3rd party apps available, the best thing about the iPhone is it's nice integration with Google services like Maps, Gmail, and YouTube. Without that you're left with a cool looking device that barely operates as a phone. Let's be honest... the phone features of the iPhone are poorly implemented. The "5 click minimum" to make a call, the unusable speakerphone, or the "5 bars dropped call" are some of my personal favorites!
I also get a kick out of Jobs when he talks about the "closed" nature of Flash. This coming from the king of closed. Projects like Alchemy show that Adobe is at least interested in the idea of open source Flash technologies.
Surprisingly, the Linux community has come to Apple's defense citing poor Flash performance and the great coming of HTML5. Quick news flash... Apple has refused to collaborate with Adobe to improve performance on Mac. How can you improve performance on a platform when the platform refuses to let you in? And if Linux ever becomes a threat to an Apple product, do they really think Apple will give them a pass? It would certainly be a first. And finally, HTML5 sounds promising, and I don't know a Flash developer who disagrees, but it will be several years before HTML5 is widespread enough to be a viable development option. At that point, HTML5 "video" functionality will be 5 or more years old. Adobe Flash on the other hand will have evolved in ways we can only imagine.
With all of that out of the way, I have decided to give up on the iPhone the same way it has given up on me. Once my AT&T contract is up I'll be moving to a different mobile platform.
As a great poet once wrote... I know it was you, [iPhone]. You broke my heart. You broke my heart!
Author:
Joe Hakooz
Category:
Flash
Just a quick post to let you all know that Lee Brimelow has released a new video (over 30 minutes) showing many of the new features we can expect in Flash CS5. As I mentioned before, Flash development will change greatly with the new "Export to iPhone" feature, but that just looks like the beginning. Make sure to check out Lee's video.
Here are a few notable features...
- Several new video playback skins
- Video playback during design time
- Add AS cuepoints at design time... Finally!
- New font embedding panel. Manage all embedded fonts in one place.
- XFL Format... The future FLA? This is pretty huge!
- SWF history property let's you track file size changes in each SWF export.
- Code snippets panel. Create your own and Adobe presets.
- Code hinting!!! Even for third party or custom classes.
- Workflow between Flash Pro and Flash Builder (previously Flex) has been improved.
- Deco Tool... Not sure about this thing but apparently it's been improved from CS4.
- SWFObject is finally the default embed script.
- Text Layout Framework (TLF). This revolutionizes text in the Flash environment and is way overdue!
So there you have it. Flash CS5 looks very promising and I hope you make the time to see Lee's entire video.
Author:
Joe Hakooz
Category:
Flash
Just a quick post here...
Even though accessibility is a good thing and we should always try to include it in our applications, there comes a time when you just need to get rid of the yellow FocusRect box in Flash. One of my AS3 projects, currently in development, needed this quick fix and I found it surprisingly hard to find an answer online. The solution is crazy simple...
stage.stageFocusRect = false;
Just add that one line of code and no more FocusRect in AS3!
Author:
Joe Hakooz
Category:
ASP.NET
I'm working on a project that uses jQuery, an ASP.NET ListView, and RadAjax. The ajaxified ListView displays video thumbnails which, once clicked, opens a jQuery ColorBox to display the video.
Everything works fine until a partial page postback is triggered. Then the jQuery calls fail to work! This is of course because jQuery is only initialized after document.ready...
// JS FILE
$(document).ready(function() {
// ...jQuery code...
});
So after a partial page postback the above function is not called and it "breaks" all my jQuery calls.
The solution is very simple. I wrap all of my jQuery code in a function called initJQuery. I then call this function from document.ready...
// JS FILE
$(document).ready(function() {
initJQuery();
});
function initJQuery() {
// ...jQuery code...
};
Finally, I add ClientEvents-OnResponseEnd="OnResponseEnd" to the RadAjaxPanel declaration, add the OnResponseEnd javascript function to the top of my ASPX page, and simply call initJQuery from the OnResponseEnd function...
<!-- ASPX PAGE -->
<script type="text/javascript">
function OnResponseEnd(sender, eventArgs) {
initJQuery();
}
</script>
......
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnResponseEnd="OnResponseEnd">
........
</telerik:RadAjaxPanel>
And presto... jQuery is initialized after each partial page postback. Of course you may need to limit when initJQuery is called for performance reasons, but you get the idea.
I hope this saves you some time!
Author:
Joe Hakooz
Category:
Flash
Stefan Richter has just released the first ever iPhone game developed entirely in Flash! It's based on the FMS classic Just Letters. I'm helping spread the word and please do the same. It's only $0.99 and will surely show the non Flash world what time it is..! Oh, and don't forget to rate it in the App Store.
For those of you without an iPhone, you can check it out online right here. Imagine, developing an application once and it works on the web and the iPhone...?
But... before you congratulate Apple for finally coming to their senses, it appears that Adobe did most of the work here. That's right, Apple still does not support Flash Player, rather Adobe has added a feature to CS5 that allows you to export to Objective C, the Mac only language used to build iPhone apps. But isn't it nice of Apple to "allow" Adobe and Flash developers to submit these apps to the App Store?
Hopefully since the announcement of Flash Player 10.1, and the adoption of it by many big players in the industry, Apple will once and for all accept the fact that Flash dominates the web and it's in their best interest to support it! I guess time will tell...
So Adobe TV just released its new website. It is a much more "typical" looking website obviously inspired by Hulu. Although the site is brand new and deserves a grace period for bugs n such, I found it to be pretty unpolished. Granted, I viewed it on a machine with IE 6, but so is about 30-40% of my audience according to Google Analytics, so that's no excuse. The "Dim the Lights" feature has potential, and is used by Hulu, but currently it dims the entire page including the video player! I know, they're working on it... but I found that pretty comical.
Stefan Richter points out that this is one of the first public players to use the Open Source Media Framework. I'll be keeping an eye on Adobe TV to see what features they slip in, as I'm sure many of them will become standard in the near future.