David J McClelland

Experiences at the Intersection of Programming & Design

Archive for the ‘Tools’ Category

Getting Started with KendoUI


 

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!”

  • 2 Comments
  • Filed under: Practice, Tools
  • Google Analytics from LocalHost

    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.

    Prerequisites:

    • a gmail account
    • a Google Analytics account
    • a web server hosting at least one html page on your local PC
    Create An Account

    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.

    Analytics Organization

    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:

    1. Log into Google Analytics
    2. Click the Admin tab at upper Right.
    3. Click Profiles tab.
    4. Click + New Profile
    5. Enter profile name and set time zone and country
    6. Click Create Profile
    Google Analytics Property

    Google Analytics Property

    localhost
    To associate a site with a property:

    1. Click Property Settings tab
    2. Enter Property Name. I used my machine name + “” to test a page located at my localhost server’s web root.
    3. Enter Default URL: I use my site name and end with “.com” You used to be able to enter .localhost but that doesn’t work as I’m writing this.
    4. Default Profile: the profile you want the Property to be associated with. If you have more than one dev box or image, pick the one that hosts the site.
    5. I don’t think there is a way to complete a site verification, so I only bother with Webmaster Tools Settings when I move an instance of the site onto a live web server I have already verified.
    6. Click Apply
    Create A Property

    Create A Property

    Change some settings of the property to work with localhost:

      1. Click Tracking Code tab
      2. Scroll down to Website Tracking section
      3. Click Standard tab
      4. Under “1. What are you tracking?” tick Multiple top-level domains radio button
        What Are You Tracking?

        What Are You Tracking?

      5. Under “2. Paste this code on your site” copy the code from the box indicated right below and paste in a text editor
        GA-Code

        GA-Code

      6. Find the line that reads similar to this: _gaq.push([‘_setDomainName’, ‘[yourSiteName’]);
      7. Replace with this: _gaq.push([‘_setDomainName’, ‘none’]);
      8. Paste the final edited code so that it is the last script before the closing head tag in your default site page, such as index.htm.
      9. I added a button to prompt sending a call to analytics without refreshing the page using the following html: 

     

    1. Load on your browser and click the button.
    Wait for it
    Expect to see this for awhile before your clicks are registered by Google Analytics and displayed on your Overview:

    No Visitors

    No Visitors : (

    No Tracking

    No Tracking?

    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!

    visited

    visited : )

  • 0 Comments
  • Filed under: Techniques, Tools
  • Developing on Macintosh

    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.

    Name MAC PC
    Adobe Suite X X
    MS Office X X
    Eclipse X X
    IntelliJ IDEA X X
    DiffMerge X X
    Webex X X
    GotoMeeting X X
    Jing X X
    FileMaker X X
    Skype X X
    Live Mesh X X
    TeamViewer X X
    FileZilla X X
    DropBox X X
    Evernote X X
    Skitch X X
    Kindle X X

    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.

  • 0 Comments
  • Filed under: Tools
  • Developing for iOS using Flex 4.6

    iOS-AIR

    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:

    Flex Release Build

    Flex Release Build

    Flex Release Build With iOS Target Fields Empty

    Flex Release Build With iOS Target Fields Empty

    In order to move past this point in the release process you will need to complete a number of steps:

    Apple Developer Program

    Join Apple Developer Program

    Buy iOS Developer Subscription

    Install iTunes

    Get iOS Device ID

    Activate your developer membership via email that comes within 24 hours from Apple:

    Developer Activation Sequence

    Developer Activation Sequence

    Certificate Creation Process

    Create a Certificate Signing Request

    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:

    Provisioning Welcome

    Provisioning Welcome

    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.

    Certificate Maintenance

    How I keep my certificates organized and secure:

    Certificate Directory

    Certificate Directory

    1. The CertificateSigningRequest.certSigningRequest is the file you need to generate and upload to the Apple Provisioning Portal
    2. I organized the commands from Adobe’s instruction steps in a text cheat sheet. I cut and paste with my specific information in the commands. If I need to create another version I will modify this.
    3. The .cer file is the iOS application certificate from the Apple Provisioning Portal
    4. The .mobileProvision file is from Apple Provisioning Portal. I didn’t use it for anything.
    5. An Android AIR certificate (I keep all certificates for AIR in one directory).
    6. davidjmcclelland_portfolio.cer is a bad file I should have deleted.
    7. The final .P12 file that Adobe AIR uses for iOS output. Converted to this format from the .pem file of same name by OpenSSL.
    8. ios_development.pem was converted from ios_development.cer by OpenSSL.
    9. mykey.key is the private key generated by OpenSSL. It corresponds to the public key embedded in CertificateSigningRequest.

    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!

  • 0 Comments
  • Filed under: Techniques, Tools
  • Captive AIR: Flex is Finally a Legit App Solution

    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.

  • 0 Comments
  • Filed under: Practice, Tools
  • Navigating Cross-Platform The Adobe Way

    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.

    Enterprise Flex Tools: IntelliJ IDEA

    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:

     

     

  • 0 Comments
  • Filed under: Practice, Tools
  • Use Your ActionScript Experience to create Native Apps

    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:

    Install FlashDevelop

    Install FlashDevelop and dependencies, such as .net and Java. The version I installed provided options to automatically include Flex libraries and Flash Player Debugger and prompted me to install any dependencies it did not include itself or find on the system already, such as Java.

    Version

    Download

    Download FlashDevelop before clicking the helpful, important links above it. FlashDevelop can install these for you.

    Options

    Installation Options

    Progress

    Installer Progress

    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.

    First Run

    First Run Fails Sometimes

     

    Second

    Success!

    Projects

    Select New Projects from Projects Menu (Not File Menu)

    HaXe

    HaXe is already there, but...

    NME

    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.

    Before Installation

    Before HaXe Installation, Vista

    After

    NME installation

    Targets

    Refer to the site instructions for how to install the target operating systems currently supported by HaXe NME.
    NME has install scripts for each target, similar to how Linux installs packages. Some of the installers will prompt for paths and options.

    Android SDK Manager prompt during install
    When prompted for installation directory

    C:\Development|Android SDK

    enter

    C:\Development\Android_SDK.

    Android API 7 Required

    Make sure you select Android 2.1 (APK 7) as instructed by the instructions that appear in the terminal. Then install NDK to

    C:\Development\Android_NDK

    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

    C:\Program files\Java

    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.

    Update Environmental Variables

    Content

    Install libraries to use with HaXe/NME

    Libraries are one area where the underlying complexity of HaXe is exposed. While there are some libraries that have been specifically created for use with Haxe to compile to all targets, there are more that are partial ports from a single platform that use HaXe as a bridge to support a subset of other targets and only features the developer needed, or that the targets could support. Use HaxeLib to determine what is available. Check you project use-case and do some research before committing to a specific library. I have a strong bias toward using only libraries that support all targets and are actively used and developed in case new targets are introduced that become strategic. One such library that will be necessary to use in the next step is Actuate. Open a command line and enter
    haxelib install actuate

    to install it.

    Can Sencha Touch/Animator/EXT Do eLearning?

    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.

    Examples and Training on EXT JS 4

    A build tool SDK is available as a beta for automating the rinse-wash-repeat sometimes required for multi-browser support. Once installed, you can do builds from the command line. More on the SDK.

    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?

     

     

    Here is a sample of an HTML5 animation running in EXT JS framework. On Android OS Phone. On iOS.

    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.

  • 0 Comments
  • Filed under: Tools
  • eLearning Without Flash

     

    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)?

    • Flash is no longer publish-once distribute everywhere
    • AIR doesn’t generate efficient runtime bytecode
    • In Adobe’s vision of the future, mobile users will download and install an AIR app for every Flex and Flash RIA?
    • Flash Player 11 Mobile was supposed to be all about hardware video acceleration and be a game-change according to Adobe
    • I no longer trust Adobe, and resent the ding to my credibility as a (soon to be former) Flash eLearning/content developer.
    • I know a lot of developers feel the same way, further eroding Flash as a platform/ecosystem
    • There are better alternatives if I take a best-of-breed alternative route to developing content.

    Categories





    Finger Lakes, NY

    United States of America

    Subscribe via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.