Archive for the ‘WebWorks’ Category

oliverm

The Gist of Code Sharing

Wednesday, April 17th, 2013

Agile development teams often need to share code while in the heat of battle.

At the high end of the scale, there are publicly-accessible repositories, such as GitHub. Creating a GitHub project is obviously overkill for those wishing to simply pass a few key lines of code to their buddy in the next seat.

For stand-alone, runnable demo code, sites like Plunker and JSFiddle  are great. You will see references to these sites wherever HTML, CSS and JavaScript bugs are reported; for example stackoverflow and the AngularJS Google Group.

But again, maybe overkill for just a few lines.

So what are the other options for code sharing?

  • Email – I suppose, but there may be delays in receiving the email if your server is slow.
  • Skype or other messaging service – Alright, but you lose history eventually.
  • USB Key (sneaker-net) – It works, but it is hard to share it with a lot of people and history is also an issue.
  • Gist – This has been around a couple of years but I’ve only just discovered it since it is baked into IntelliJ/WebStorm. Gist is a GitHub sub-project and is associated with your GitHub account. For example, my GitHub account is at https://github.com/oliverm2112 and my Gists are at https://gist.github.com/oliverm2112. Gist allows developers to post snippets of code in various languages and features in-place editing and syntax highlighting.

Here is a Gist home page and a code sample:

 

 

 

 

Here is a shot of IntelliJ/WebStorm’s abilitity to create a Gist from within the IDE:

Hopefully you will find this a useful way to share information.

Rod Nolan

Getting repetitive tasks done quickly and efficiently

Wednesday, February 20th, 2013

I’m working on a project right now where I often have to grab a master copy of a single file, paste it into my current working directory and open it for editing. My environment is Windows 7.

Since the master file exists in a static location, I wrote a batch script to copy the file into my current directory and open it.

  copy %ANT_HOME%\..\..\build.xml . /-Y
  build.xml

The first line of this script will copy the master version of build.xml into whatever directory I run it from from. The -Y option prompts me to overwrite if a file named build.xml happens to be present. The second line will open the local file in the system default editor for .xml files (if you have one configured). So it’s just two lines. Nice and simple and it sure beats doing this manually.

To make this script callable from anywhere on my file system, I placed it in a directory that is included in my PATH and I called it getBuild.bat.

At this stage, calling the script requires me to SHIFT+right-click > Open Command Prompt Here and type the name of the batch file. Too many clicks and keystrokes for my liking.

Ideally, I’d like to be able to access this functionality from the context menu and bypass the need to open the command window at all. Here’s how I did it.

  • Open regedit.exe
  • Navigate to HKEY_LOCAL_MACHINE\SOFTWARE\Classes\*\shell
  • Add a new key called getBuild
  • Navigate to HKEY_LOCAL_MACHINE\SOFTWARE\Classes\*\shell\getBuild
  • Add a new key called command
  • Modify the (Default) value and set it to C:\Windows\System32\cmd.exe /c getBuild.bat
editing the registry to add an item to the Windows Explorer context menu

editing the registry to add an item to the Windows Explorer context menu

  • Save and close the registry editor
  • Open Windows Explorer and right click on a file in any directory to see the new context menu item. I haven’t bothered to try to make it work by right clicking anywhere so as it stands, you have to right click a file.
using the new context menu

using the new context menu

  • Next, you’ll see the prompt to overwrite the .existing file.
the batch file doing its job

the batch file doing its job

  • Answering ‘y’ opens the file in my editor.
so I can do my job

so I can do my job

 

If you’re wondering why I need to copy build.xml so often, keep an eye on this space for my next blog post. I’ll be talking about the ANT build script I wrote  to package and deploy WebWorks apps to the upcoming BB10 smartphone. But until then, happy copying. :-)

Rod Nolan

Virtual directories with RippleSites? Sort of, sure.

Tuesday, October 16th, 2012

By Rod Nolan – consultant

I’ve always used IIS or Apache when I needed a web server in my development environment. But as a BlackBerry developer, the Ripple Mobile Environment Emulator has become a more important part of my toolkit. And the latest version includes a built in web server. So I recently put IIS on the shelf and decided to trade port 80 for port 9910.

I make regular use of virtual directories because:

  1. I don’t want to store my web sites in wwwroot/ or htdocs/ since
  2. My git repo contains EVERYTHING related to a project, not just .htm, .css and .js files and I don’t want it all accessible via http so
  3. It’s cleaner to keep the repo in one location (not wwwroot/ or htdocs/) and use virdirs to point to the “website” subsection of my  repo

But Ripple doesn’t provide any sort of standard way to configure virdirs using a GUI or config files. Fortunately, neither of these options is required when you have Windows 7, a “Run as administrator” command prompt and the mklink command.

Here’s how it works:

C:\>cd \Users\<You>\RippleSites
C:\>mklink /J siteName "C:\SomePathTo\MyRepositories\MyProject\WebRoot"

This command will create a new directory junction called

siteName

in:

C:\Users\<You>\RippleSites\

which looks and acts like a directory but is really nothing more than a pointer to the real physical location:

C:\SomePathTo\MyRepositories\MyProject\WebRoot

So that when I browse to:

http://localhost:9910/siteName/index.html

it’s this file gets served:

C:\SomePathTo\MyRepositories\MyProject\WebRoot\index.html

I can still keep everything related to the project in my repo, store that repo anywhere I choose on my local system and enable http access to only the web-related assets via Ripple’s web server. I can develop and test and emulate my mobile brains out… without using virtual directories and without manually copying files between my repo’s folder and my web server’s document root folder.

This post http://ipggi.wordpress.com/2009/09/07/windows-file-junctions-symbolic-links-and-hard-links/ helped to clarify the difference between symbolic links, hard links, soft links and junctions.

 

oliverm

BlackBerry Hackathons – Come out and Play(Book)!

Wednesday, May 16th, 2012

I’m currently in Bogotá, Colombia taking part in my third Hackathon on behalf of RIM. These hackathons are two-day events where local developers get the opportunity to interact directly with experts in PlayBook development. They also get a free PlayBook just for showing up!

We typically have a team of three experts covering AIR, HTML5/WebWorks and Native development. Most of the events have been focused on game development, but I’ve also done one centred around business apps using WebWorks.

Developers, either in teams or individually, work some long hours over the two day period. At the end of the second day, their apps are judged and winners awarded additional prizes. Nothing like a bit of competition to bring out the best in a dev team!

And with BB10 on the horizon, there’s a lot of anticipation from developers. Keep your eyes open for an event coming to your city this summer. Hope to see you there!

oliverm

JavaScript Developer Survey

Sunday, December 4th, 2011

Looks like this is turning into an annual event. Given JavaScript’s importance in the Mobile/HTML5 space, it will be interesting to see how developers are using it:

http://dailyjs.com/2011/12/01/javascript-developer-survey-2011/

 

Rod Nolan

Debugging WebWorks applications using the PlayBook simulator and Google Chrome

Saturday, September 24th, 2011

By: Rod Nolan

I encountered an error recently while working on a WebWorks project. So I broke out the PlayBook WebInspector (aka Developer Tools in Google Chrome) and got to work… sort of.

In case you haven’t discovered this yet, to use the debugging tools in Chrome, you just launch your application in the simulator and then open Chrome and connect to the simulator over port 1337 (http://{simulator IP address}:1337).  You should see a simple page with a single link and when you click it, you’re connected to the running application.

Connecting to the PlayBook WebInspector

Connecting to the PlayBook WebInspector

This usually starts the Developer Tools in Chrome complete with Console, Script Debugger, Profiler and all the goodies you know and love. But this time around I got a nearly empty page… a blank toolbar area and the toggle buttons at the bottom of the page that didn’t work.

Where are the Chrome Developer Tools?

Where are the Chrome Developer Tools?

Hmm, this worked last week?! What changed?

I confirmed that the Chrome Developer Tools worked as expected with a regular public web site.

Then I tried a different version of the PlayBook simulator since I have two:

  • version 1.0.1 (from the BlackBerry WebWorks SDK for TabletOS 2.1.0.6)
  • version 1.0.6 (from the blackberry-tablet-sdk-1.1.0)

But both simulators produced the same result.

Maybe it was Chrome? You probably know how Google Chrome just silently updates itself without asking. (Can software be arrogant?)

The solution turned out to be this:

  1. Completely uninstall Google Chrome.
  2. Go find an installer for an older version (oldapps.com).
  3. Install it and get back to work.
PlayBook WebInspector works as expected in Chrome ver13

PlayBook WebInspector works as expected in Chrome ver13

Happy debugging. But keep that Chrome (Lucky 13) installer around and be ready to undo the auto update.

Thanks to Oliver Merk, NTG principal Consultant, for discovering this fix.

oliverm

A Date with SQLite

Thursday, August 11th, 2011

By Oliver Merk – Principal Consultant

Been doing a lot with SQLite lately (sqlite.org) on the PlayBook and elsewhere and wanted to pass on a few quick notes.

First, SQLite columns are typeless.

What?

Yup. Even though you may declare fields as VARCHAR or DATETIME, you may actually store any type of data you want in them. The exception to this rule is for PRIMARY KEY fields declared as INTEGER.

I’ve found that typeless fields can lead to some problems when storing and retrieving date values. I suspect that minor version differences in SQLite are returning different CURRENT_TIMESTAMP values.

Here’s an example of some SQL which creates a table with a date field:

CREATE TABLE location (
    location_ID INTEGER PRIMARY KEY NOT NULL,
    name VARCHAR,
    latitude NUMERIC NOT NULL,
    longitude NUMERIC NOT NULL,
    addDate DATETIME DEFAULT CURRENT_TIMESTAMP);

If I INSERT a new record without specifying the addDate value, SQLite will default to inserting its CURRENT_TIMESTAMP value to populate the addDate field and I get something like 2011-08-11 12:05:10.

But if I decide to explicitly use CURRENT_TIMESTAMP in my insert statement, the value gets stored in an odd-looking decimal format. For example, 2455769.105023148.

Depending on the SQLite version, I may or may not be able to convert the returned date field using JavaScript’s date parsing functions for fields inserted with CURRENT_TIMESTAMP:

Client SQLite version Format Supports JS Date parsing
Chrome (Win) 13.0 beta 3.7.6.3 NO
Firefox (Win) 5.0 3.7.5 NO
PlayBook AIR Runtime 3.7.3 YES

My concern is that the code which now works with the PlayBook might break when it gets its next SQLite update. Guess I’ll burn that bridge when I get to it.

I should also mention a great Firefox add-on called SQLite Manager that allows you to manage these databases.

Oh, and how did I get the SQLite version?

SELECT DISTINCT sqlite_version() AS version FROM sqlite_master;

I’ll leave the rest up to you…

oliverm

jQuery Mobile With WebWorks Gotcha

Monday, June 6th, 2011

By Oliver Merk – Principal Consultant

Since RIM’s WebWorks platform for the PlayBook is based on HTML5, it’s natural to use a popular JavaScript framework such as jQuery Mobile. One thing to be aware of when creating a WebWorks app in this way is that the jQuery Mobile framework relies on AJAX calls to load pages. When your HTML is hosted on a server, this works great. But when running a WebWorks application you’re actually running off the file system, where the URL starts with file:///. If you try to link from your main index.html to another HTML file using jQuery Mobile, the browser throws an error: XMLHttpRequest cannot load file file:///… Origin null is not allowed by Access-Control-Allow-Origin. If you run your HTML in Google Chrome and open the Developer Tools (Ctrl-Shift-i), you’ll see this error in the console. jQuery Mobile pops up a quick error message as well: Error Loading Page.

Basically, the AJAX call is failing because the browser is considering a file request as though it were a request to another domain and prevents it, for your own safety and security.

The remedy for this is to create all of your jQuery Mobile “pages” in one file. That is, having multiple page tag sets in your index.html file:

<div id="faq" data-role="page">...

To “go to” these pages requires that your anchor tags point to the id of the “page” you want:

<a href="#faq">FAQ</a>

Of course, this becomes a bit unweildy for larger applications since all layout now has to be in one file.

I’ve seen this problem reported as a Chrome bug, so it could really be a WebKit problem. Hopefully this will get fixed soon and find its way into the PlayBook’s WebKit-based browser.

Please comment if you’ve run into this or found another solution.

oliverm

BlackBerry PlayBook Developer Links

Sunday, May 29th, 2011

By Oliver Merk – Principal Consultant

General

Developing Adobe AIR Application for PlayBook

QNX Components for AIR apps

WebWorks (for PlayBook)

HTML5

NTG Training Courses