Experiences at the Intersection of Programming & Design
KendoUI is the pick to replace Flash at the office. We looked at several competing frameworks and Kendo seems the most polished and maintainable one out there. It is built over jQuery and seems to play nice with CSS and HTML5. It has almost all the UI controls Flex offers. Binding data to controls via MVVM declarative object instantiation. So far so good.
Now I am starting to dig in and try to do actual things with Kendo that we are used to doing with Flex. This is turning out to not be as trivial as advertised. I tend to get lost easily when working with frameworks that are trying to make development simple. Because it isn’t.
To start with we are moving away from using XML and replacing it with JSON. Our server application is supposed to support it. But it doesn’t really. It only supports JSON in certain ways on certain services. And then there is the complication that JSON will only work on pages hosted with the app server. I don’t run the app server on my dev box. My JSON is hosed. JSONP? Not supported.
So I am forced to upload a package to someone else’s instance of the app server to see if anything works at all, scrape the JSON returned via Charles, make a data.json file that I can read in my local web server, and then figure out why I can’t populate a beautiful blueberry style datagrid in a single line of code.
And within a week I am going to hear “Why isn’t this done yet? I thought this framework was a solid choice!”
If you want to integrate Google Analytics with a site, you want it all working before the site goes live. Even better: integrate it from the convenient, secure localhost server on your dev box.
Your Google Analytics log-in can be associated with multiple “Accounts” which you define. I organize mine according to what server it tracks and give them the same name as the server machine name. You may decide it is best to segment by customers in order to keep data separated and name it after your customer.
Within an account you define one or more “Properties” which define what you intend to track. If you have a customer with multiple sites or a site and a mobile app you can keep them under a single account using properties to enter distinct URLs etc. I add a property and name it for each site I develop on a given server.
To create a new account you have to create at least one profile which will be the default. Profiles are for filtering reports and data and are not really relevant for localhost tests except that you need to make one to see reports:
Change some settings of the property to work with localhost:
Another bonus of working from your own server is that you are in control of the events that occur so the signal to noise ratio is effectively 0. My click is the one and only click today!
I recently started a new job and was offered the choice of PC or Mac to develop on. In fact, it was between a PC laptop and desktop (both I7 quad cores) or a single MacBook Pro.
Of course I went with the Mac. It has been such a long time since I have had the pleasure of working on a beautiful machine, and what would I need a desktop for anyway? I already have my own PC laptop (Alien M11x), and will have parallels running Windows 7 on the Mac soon as well.
I have been surprised at how many tools I use are available on both platforms.
The tools I miss the most are Tortoise Hg and SVN clients which have no equivalent Finder-integrated equivalents on Mac that I know of. XCode, Garage Band and the MAC OS experience make up for this, along with Cornerstone and SourceTree.
OSX Lion maintains its System 7 roots – including the hidden files annoyance and the cmnd-opt-esc force-quit combo. Terminal and X-Code are really nice additions.
Compared to authoring to Android, publishing to an iOS device from a PC is a pain. It beats spending over 1K for an Mac Mini just for that purpose. And hats off to Adobe for finding a way to make it possible.
Get Flex 4.6 and open the “Hello World” targeting iOS (and BB/Android). Go for a release build, select Captive Air. At prompt for Packaging Settings you will see this:
In order to move past this point in the release process you will need to complete a number of steps:
The certificate process is a bit of a command line mess: OpenSSL is by and for developers. There are many versions to choose from: do not get the “light” version, and get the one for your version of WIndows – 32 or 64-bit. If you need to install Visual C++ 2008 Redistributables the links are in the same table with the WinSSL binaries. I used Win64 OpenSSL v1.0.0g.
Go to the Provisioning Portal to set up a provision file for each iOS device you plan to test on:
Download both Provision and Certificate file
input the path to provision file, certificate file and the password you were prompted to create during the certificate conversion process.
How I keep my certificates organized and secure:
Now that I have been all the way through this process I will try to use the same filename as my project for all of the certificate files so that I can keep them together. The Provisioning Portal named the files I downloaded ios_development so I left them alone in case changing the name broke anything. I keep them all under version control.
What this elaborate process does is ensure that the identity of the creator of any iOS application can be traced like a chain of custody.
Publish to iOS and wait several minutes for an .ipa file to be created.
Drag the ipa file onto iTunes Library section of Left menu and drop it. Then sync to iOS device to get app installed.
Run app. Whew!
Getting a Flash project to compile and run on Android devices is pretty well covered on gotoandlearn.com – I recommend starting there. Some of the instructions are out of date but I was able to make it work.
I spent way too much time getting my Motorola Triumph to come up. If you have one, there is some good reference here. Amazon Fire was also a challenge to connect with, and is stuck on AIR 2.7. This required changing SDK to 4.0 and hacking the AIR Application Descriptor file which had already been generated to call for 3.1. This aspect of mobile dev is counterproductive once you get over the thrill of testing an app a couple of times. It does underscore the incredible advantage Flex/Flash present for rapid development of mobile apps though, since you can develop a lot before testing on a device or emulator.
My experience targeting the Fire made it clear to me why AIR captive runtime is really not a nice-to-have option: it is the only way to guarantee your AIR-based app will run on a wide range of phone and tablet form factors. Compare the incremental download time/space savings of AIR to the installation user experience, developer effort and Flash-taint-avoidance. It finally establishes Flex mobile as a legitimate cross-platform approach. No-one knows/cares what tooling I used to develop a free-standing app, and they certainly don’t want to hear that their device won’t run my app because it isn’t certified to run the latest version of AIR. As a developer I can’t afford to guess how many devices I am abandoning when I move from 4.5 to 4.5.1 SDK.
I am circling back to the Adobe multi-platform development approach now that I am using ActionScript 3 and MXML all day. I just don’t have the bandwidth now to be productive in Haxe, HTML5 or other language variants with my new full-time Flex responsibilities.
Meanwhile I hear questions about what alternative to Flex should be pursued, so that keeps the alternative pressure on.
So I am focusing on what is required to build to Desktop, browsers, iOS and Android from Adobe tooling, and incorporating any other required.
So far that meant installing Android SDK and attempting to get a phone to show up for ADB. I have a Motorola Triumph, Droid 3 and Kindle fire to try. So far the Triumph does not show up, but I may have installed the USB storage drivers that came with the phone on dev machine. I have to admit, I have never once gotten a phone to work with ADB.
I downloaded Motorola’s eclipse-based development environment - maybe it has some magic.
iOS will be an interesting challenge as I have to justify buying a dev license and possible set up a Hackintosh to get something on the only iOS device in my house – an iPad2. I finished off the iPod we had trying to fix the cracked screen with a replacement kit.
One note on the Moto Triumph – this is a prepay Android 2.2.2 smartphone through Virgin – I own the phone outright for $300 and can use it on Virgin or Sprint. Virgin is $25/month for “unlimited” data and text plus some voice (which I don’t use anyway) and it is almost as good as the Droid. When you look at total cost of ownership, it is about $1400 less than a less-well equipped iPhone or Droid on Verizon with a similar plan over 2 years – less than half.
I had never heard of this IDE until very recently. I assumed Enterprise meant you installed the Flash Builder plugin in your existing Eclipse instead of getting Flash Builder standalone.
Everyone calls Idea IntelliJ because, let’s face it- they probably think they made a clever play on “IDE” but no-one knows what you’re talking about if you refer to it by the product name. “What version of Idea are you using?”
So why use IntelliJ instead of Builder, FDT, FlashDevelop or Eclipse? The short answer is that it kicks Eclipse’s butt in performance, usability and actual capability. Builder’s too, If you aren’t concerned about editing MXML layouts visually and Adobe product integration. It is a very nice, well-thought-out tool that has all the hooks needed to fit into almost any enterprise setting that uses typical Java/OSS middleware and almost any version control system.
If you want to try before you buy you can download a trial of the Ultimate Edition. The free Community Edition does not have the MXML/Actionscript plug-in. I might post more on this as I learn more about it.
Here’s a cool feature I found recently: IntelliJ can make panels semi-opaque when they lose focus so you can still monitor them while coding:
If you are looking for way to create content for many relevant platforms from a single codebase on a Windows PC, I recommend HaXeNME and FlashDevelop plus the Actuate tween/animation library.
I have yet to find a tutorial that covers the complete process of installing everything you will need to deploy to all the supported platforms using FlashDevelop, but that is the preferred -but not required- method. I don’t have a Mac on which to follow the XCode build path to iOS, so you won’t find that here either, at least not right away.
If you are interested in following along, or just want to try out HaXeNME, here is a fairly comprehensive walkthrough to get started:
Even though FlashDevelop comes with HaXe pre-installed, I recommend installing HaXe separately. If you decide otherwise be advised that the rest of the what is outlined will probably require path changes and may not work at all.
Installing NME will also install Motion-Twin HaXe and NEKO to the default location for your version of Windows as a convenience. This will vary from Windows XP and Vista/7, but neither is where FlashDevelop put it.
Be advised that the HaXe site indicated their installer may trigger a virus alert. I saw one for the NME install on Vista, but not from the HaXe on Vista or NME on XP, using the same virus program on each. In spite of declining to take action, Windows Defender reported that it had “cleaned” my infected file. This notification appeared a few minutes after I had completed the NME installation.
What packages you should install for Android is up to you and outside the scope of this post. If the SDK manager indicates it is done loading packages and you close the window it is possible that the NME process will not detect this. If this happens simply close the terminal window and restart in another one. It will skip through progress already made on the install as long as you enter the correct responses and enter the underscored path names. Do the same process for Apache Ant.
When prompted to install Java JDK, I recommend installing the developer JDK. Install to an existing Java directory if you have one – probably
You must manually install Java from Oracle’s web page. I recommend installing Jave EE 6 SDK. The ME version did not compile correctly because the compiler is no longer included in that package. It took a bit of research to figure this out, but as of this writing NME still presents you with the ORacle page for the ME version.
haxelib install actuate
to install it.
Sencha sells a suite of products for developing HTML5-based rich media that work on all browsers and platforms without using Flash or other plugins.
Can combine some of the products to create a robust eLearning content solution/production flow that compares well to Articulate/Captivate?
To start with, I installed Sencha EXT JS version 4. This is a Rich Internet Application framework that must run on a web server to work.
Next, let’s assume that if we can build a HTML5 site with EXT JS, we can build some templates to display basic Knowledge-Needed content and a course menu with it, possibly with the aid of a database backend.
If that is the case, we will need some more interactive content to plug into the templates. That’s where Sencha Animator appears to fit in. Unlike EXT JS, Animator installs like a regular application in Windows. You can run it as a trial for 30 days. It looks similar to Adobe Edge but has Actions you can use to build interactivity. There are some tutorials provided to get started. The output is also HTML5. Can itÂ tie in with the EXT JS framework?
I recreated the animation in Flash and embedded it in Adobe Captivate. I was able to convert the output to HTML5 using a conversion tool in beta release from Adobe. The output plays well, but the conversion results in a file size that mushrooms from 400K SWF to a folder complex weighing in at 2.65MB. Most of this is because the animation is baked into an MP4 movie. And it’s beta. Still, this does not compare favorably to Sencha Animator, which produces an identical animation that loops (Captivate can’t loop swfs) at 126K. More on this, and a try at Wallaby and some other Sencha tools soon.
For highly interactive content I recommend Unity3D. It outputs highly efficient, accelerated native apps for IOS, Windows, Android, and soon will support Flash Player.
For more basic content equivalent to that created using Captivate, Articulate and other rapid tools, I recommend HTML5 Video as a preferred target for screen captures, and Sencha Animator or Corona for information display and simple interactivity.
Adobe’s announcement that they are no longer going to build a mobile Flash player brought me back to when I learned they bought Macromedia. I wondered how long it would take them to ruin the culture that nurtured Flash into something more than an cartoony animation tool.
Why was I so pessimistic? Because I knew Adobe wouldn’t treat Flash like their life depends on it (it doesn’t). Flash will probably go the way of Director – another authoring tool they acquired from Macromedia that became the “3D console game” development platform.
Why is dropping Flash Mobile Player such a big deal when no-one really developed for that target (or at least ever monetized it)?