Friday, May 31, 2013

Mashup - Featured Tools & Tutorials

This is a list of the tutorials and demos described in my articles and blogs:

Ajax-Powered Google Maps Mashup   Start here!!!
Intended for newbies to mashups starting with minimal web programming skills. This example shows how easy it is to build a Google Maps mashup using the following technologies: HTML, JSON, Javascript, Ajax, and the Google Maps API.

Building Mashups with Greasemonkey
These tutorials show how to build a mashup using Greasemonkey, a Firefox plugin,  to combine two web sites (O'Reilly and BEA) together in a powerful combination. Later blogs discuss when Greasemonkey is appropriate for the enterprise, and the issues to be aware of. Technologies: Firefox, Greasemonkey, JavaScript, XmlHttpRequest.

Google Maps Construction Tool for the Non-Technical User
Schmapplets is a tool that allows a non-techie to build a Google Maps based mashup. If you want to get Mom going on creating mashups, Schmapplets is the tool to use. Mom still won't have any idea about what you do for your job, but that's a much bigger problem.

Building a Mashup with SnapLogic and Oracle
This tutorial shows an integration with Oracle WebLogic Portal and a data mashup tool called SnapLogic.The integration uses RESTful APIs to achieve the integration.

Building a Data Driven Microsoft Popfly Mashup 
This tutorial shows how to build a Microsoft Popfly mashup using a data feed that we build. This mashup uses: Popfly, JSON and Javascript technologies. Note that Popfly requires you to install the Microsoft Silverlight plugin into your browser. You will be prompted to do so before viewing the mashup.
Note: as of early 2009, Microsoft has end of lifed Popfly. Use of this tool is no longer recommended.

BEA WebLogic + Microsoft Popfly = Enterprise Mashups
This tutorial integrates our previous work with Microsoft Popfly to include an enterprise data service provided by BEA WebLogic Portal. This shows the promise of enterprise mashups within Popfly.
 
BEA WebLogic Portal + Swivel.com + Excel = Enterprise Data Mashups
In this blog entry I explore an approach that allows spreadsheet data to be managed by IT, and then visually mashed up with other data sets. This solution combines the Content Management capabilities of WebLogic Portal with the data mashup features of Swivel.com.

What's New

SnapLogic
Maker of a mashup tool I blogged on. I saw it at Web 2.0 Expoin 2008 and was impressed. It looks to be highly useful as a data feed engine (a la Yahoo Pipes).
User Created Google Maps
Google Maps allows for users to plot their own maps, including scrawl line art on the page. Not technically a mashup, but something along the same lines.  I have created a visitor guide to the Oracle HQ  in Redwood Shores:
Mashup Keyword Search Data for SEO
I have attached 1 year worth of search analytics data for this site that shows what people are searching on to get here. If you have a mashup tool it may be interesting data for doing SEO on your site.

Mashup Related References


Enterprise Mashup References


Mashup Creation Tools and Builders


Mashup Lists


Other Mashup Tutorials

Yahoo Pipes Tutorial
This is a quick tutorial showing how to use Yahoo Pipes to aggregate a RSS feeds. Pipes allows for transforms to be applied, as well as multiple RSS feeds to be aggregated.
Adobe Flex, Yahoo Weather, Yahoo Answers Mashup Tutorial 
The hosted working example is not, well, working. But this tutorial looks promising as a simple effort to build a mashup in Flex. It accepts a zip code, and then retrieves the weather, and then looks to Yahoo Answers to find questions relevant to the current weather situation.

Interesting Sample Mashups

AP News
My personal favorite sample mashup, it mashes up an Associated Press news wire, with Yahoo geocoding, and Google Maps. When I need to explain what a mashup is, this is a great example. Be sure to click on news stories on the right to have the map respond.
GeoMonkey, Wayfaring
These tools allow the everyman to create a Google Maps mashup using a list of places that you choose. Good for non-programmers to map out their favorite restaurants, clean bathrooms, or whatever spot they choose in a city. They provide a nice visual tool in the browser.
Wikimapia
This mashup sample allows you to overlay polygons onto Google Maps to define areas of interest. The BEA Boulder office is marked on this entry:
 SalaryScout
This sample mashup shows the power of social computing to measure the going wages for people - all mapped out of course.
Commercial Tools
http://www.integratedsemantics.com/index.html

Java - Duplicate key in java collection (Map, HashMap)

Required:
http://commons.apache.org/proper/commons-collections/

Source Code
import java.util.Set;
import java.util.Map;
import java.util.Iterator;
import java.util.List;

import org.apache.commons.collections.map.MultiValueMap;
public class MultiMapExample {

   public static void main(String[] args) {
      MultiValueMap mp=new MultiValueMap();
      mp.put("a", 10);
      mp.put("a", 11);
      mp.put("a", 12);
      mp.put("b", 13);
      mp.put("c", 14);
      mp.put("e", 15);
      List list = null;

      Set set = mp.entrySet();
      Iterator i = set.iterator();
      while(i.hasNext()) {
         Map.Entry me = (Map.Entry)i.next();
         list=(List)mp.get(me.getKey());
       
         for(int j=0;j<list.size();j++)
         {
          System.out.println(me.getKey()+": value :"+list.get(j));
         }
      }
   }
}

Results:
a: value :10
a: value :11
a: value :12
c: value :14
b: value :13
e: value :15

Wednesday, May 29, 2013

Mobile Website vs. Mobile App (Application): Which is Best for Your Organization?

If you're planning to establish a mobile presence for your business or organization one of the first considerations that will likely come to mind is whether you want to create a mobile application for users to download (app) or a mobile website, or perhaps both. Mobile websites and apps can look very similar at first-glance, and determining which is most suited to your needs will depend upon a number of factors, including target audiences, available budget, intended purpose and required features.

What’s the Difference Between a Mobile Website and an App?

Before you can evaluate the benefits of a mobile website vs. an app it’s important to understand the key differences between the two. Both apps and mobile websites are accessed on a handheld devices such as smartphones (e.g. iPhone, Android and Blackberry) and tablets.
A mobile website is similar to any other website in that it consists of browser-based HTML pages that are linked together and accessed over the Internet (for mobile typically WiFi or 3G or 4G networks). The obvious characteristic that distinguishes a mobile website from a standard website is the fact that it is designed for the smaller handheld display and touch-screen interface.
Like any website, mobile websites can display text content, data, images and video. They can also access mobile-specific features such as click-to-call (to dial a phone number) or location-based mapping.
Apps are actual applications that are downloaded and installed on your mobile device, rather than being rendered within a browser. Users visit device-specific portals such as  Apple’s App Store, Android Market, or Blackberry App World in order to find and download apps for a given operating system. The app may pull content and data from the Internet, in similar fashion to a website, or it may download the content so that it can be accessed without an Internet connection.

Which is Better – an App or a Mobile Website?

When it comes to deciding whether to build a native app or a mobile website, the most appropriate choice really depends on your end goals. If you are developing an interactive game an app is probably going to be your best option. But if your goal is to offer mobile-friendly content to the widest possible audience then a mobile website is probably the way to go. In some cases you may decide you need both a mobile website and a mobile app, but it’s pretty safe to say that it rarely makes sense to build an app without already having a mobile website in place.
Generally speaking, a mobile website should be considered your first step in developing a mobile web presence, whereas an app is useful for developing an application for a very specific purpose that cannot be effectively accomplished via a web browser.

Advantages of a Mobile Website vs. Native Apps

If your goals are primarily related to marketing or public communications, a mobile website is almost always going to make sense as a practical first step in your mobile outreach strategy. This is because a mobile website has a number of inherent advantages over apps, including broader accessibility, compatibility and cost-effectiveness.
CheckImmediacy – Mobile Websites Are Instantly Available
A mobile website is instantly accessible to users via a browser across a range of devices (iPhone, Android, BlackBerry, etc).  Apps on the other hand require the user to first download and install the app from an app marketplace before the content or application can be viewed - a significant barrier between initial engagement and action/conversion. 
CheckCompatibility – Mobile Websites are Compatible Across Devices
A single mobile website can reach users across many different types of mobile devices, whereas native apps require a separate version to be developed for each type of device. Furthermore, mobile website URLs are easily integrated within other mobile technologies such as SMS, QR Codes and near field communication (NFC).
CheckUpgradability – Mobile Websites Can Be Updated Instantly
A mobile website is much more dynamic than an app in terms of pure flexibility to update content. If you want to change the design or content of a mobile website you simply publish the edit once and the changes are immediately visible; updating an app on the other hand requires the updates to be pushed to users, which then must be downloaded in order to update the app on each type of device. 
CheckFindability – Mobile Websites Can be Found Easily
Mobile websites are much easier for users to find because their pages can be displayed in search results and listed in industry-specific directories, making it easy for qualified visitors to find you. Most importantly, visitors to your regular website can be automatically sent to your mobile site when they are on a handheld (using device-detection).  In contrast, the visibility of apps are largely restricted to manufacturer app stores.
CheckShareability – Mobile Websites Can be Shared Easily by Publishers, and Between Users
Mobile website URLs are easily shared between users via a simple link (e.g. within an email or text message, Facebook or Twitter post). Publishers can easily direct users to a mobile website from a blog or website, or even in print. An app simply cannot be shared in this fashion.
CheckReach – Mobile Websites Have Broader Reach
Because a mobile website is accessible across platforms and can be easily shared among users, as well as search engines, it has far greater reach capability than a native app. 
CheckLifeCycle – Mobile Websites Can’t be Deleted
The average shelf-life of an app is pretty short, less than 30 days according to some research, so unless your app is something truly unique and/or useful (ideally, both), it’s questionable how long it will last on a user’s device. Mobile websites on the other hand are always available for users to return to them. 
CheckA Mobile Website Can be an App!Just like a standard website, mobile websites can be developed as database-driven web applications that act very much like native apps. A mobile web application can be a practical alternative to native app development.

CheckTime and Cost - Mobile Websites are Easier and Less Expensive
Last but certainly not least, mobile website development is considerably more time and cost-effective than development of a native app, especially if you need to have a presence on different platforms (requiring development of multiple apps).
CheckSupport and Sustainability
The investment considerations of app vs website don’t end with the initial launch; properly supporting and developing an app (upgrades, testing, compatibility issues and ongoing development) is more much more expensive and involved than supporting a website over time.

When Does an App Make Sense?

Despite the many inherent benefits of the mobile web, apps are still very popular, and there are a number of specific use scenarios where an app will be your best choice.  Generally speaking, if you need one of the following, an app makes sense:
  • Interactivity/Gaming – for interactive games (think Angry Birds) an app is almost always going to be your best choice, at least for the foreseeable future.
  • Regular Usage/Personalization – If your target users are going to be using your app in a personalized fashion on a regular basis (think EverNote) then an app provides a great way to do that.
  • Complex Calculations or Reporting – If you need something that will take data and allow you to manipulate it with complex calculations, charts or reports (think banking or investment) an app will help you do that very effectively.
  • Native Functionality or Processing Required - mobile web browsers are getting increasingly good at accessing certain mobile-specific functions such as click-to-call, SMS and GPS. However, if you need to access a user's camera or processing power an app will still do that much more effectivley.
  • No connection Required – If you need to provide offline access to content or perform functions without a network/wireless connection then an app makes sense.
As with any project, when developing an app you want to ensure that your are getting an optimal return on your investment. What you want to avoid at all costs is the needless and expensive exercise of building an app to do something basic that can be achieved with a mobile website.

In Conclusion

As long as mobile remains a relatively new frontier, the “app vs web” question will remain a very real consideration for organizations seeking to establish a mobile presence. If your mobile goals are primarily marketing-driven, or if your aim is to deliver content and establish a broad mobile presence that can be easily shared between users and found on search engines, then the a mobile website is the logical choice. On the other hand, if your goal is interactive engagement with users, or to provide an application that needs to work more like a computer program than a website, then an app is probably going to be required.

Source:
http://www.hswsolutions.com/services/mobile-web-development/mobile-website-vs-apps/

Jquery Mobile - Improve Performance

jQuery Mobile Performance Improvement

There are times when jQuery Mobile can seem a bit sluggish. If this is happening to your app, don’t worry, there is help available. Here are some tips that can put a spring back into your app’s steps.

Upgrade jQuery Mobile and jQuery

Besides fixing bugs and adding features, upgrading and using a new version of jQuery Mobile and jQuery can help with your app’s performance. You have to be careful when upgrading however. jQuery and jQuery Mobile are separate projects under development by separate teams. Occasionally a breaking change may be introduced. For example, jQuery 1.7.2 is not compatible with versions of jQuery Mobile prior to version 1.1.

Don’t Use .live()

The .live() method of jQuery was seen as a godsend when it was introduced to the API in version 1.3. In a typical jQuery app there can be a lot of DOM manipulation and it can become very tedious to hook and unhook as elements come and go. The .live() method made it possible to hook an event for the life of the app based on its selector. Great right? Wrong, the .live() method is extremely slow. The .live() method actually hooks its events to the document object, which means that the event must bubble up from the element that generated the event until it reaches the document. This can be amazingly time consuming.
It is now deprecated. The folks on the jQuery team no longer recommend its use and neither do I. Even though it can be tedious to hook and unhook events, your code will be much faster without the .live() method than with it.

Use the Active Page

One of jQuery Mobile’s most compelling feature is its ability to have a lot pseudo pages loaded in the DOM at one time. This is great for performance since a server call isn’t always need to go from one page to the next, but it can also slow down how long it takes jQuery to find DOM elements specified by a given selector. By using the active page in the selector you narrow down the part of the DOM that has to be searched for a given element. It is specified by:
 $.mobile.activePage.headerHeight = $("header", $.mobile.activePage).height();

Use prevent default

Just because you’ve already handled an event doesn’t stop the browser from wanting to handle it too. The jQuery event API includes a method call, event.preventDefault(). It tells the browser not to bother executing its default behavior and this behavior can take a relatively long time to execute.
    $("button", $.mobile.activePage).tap(function(event){
        var key = $(this).attr("data-rockncoder-tag"),
            id = this.id;
        event.preventDefault();
        return false;
    });

Cache selectors

This is one a lot of novice jQuery Mobile developers miss. Every time you call jQuery with a selector it returns the results of the call. Normally you chain the results to another jQuery method, but you can also save the results of the call into a variable. The results of caching is, the next time around you don’t have to search the DOM for the same results again. Now this only works for elements that are not being dynamically modified. If you change the DOM, you will have to re-cache the selector.
var $scalePic = $("#scalePic"),
    $panPic = $("#panPic"),
    $hiddenPic = $("#hiddenPic"),

Summary

These are only a few tips and I am sure that there are a lot more out there. Hopefully these will help you to speed up your up your own jQuery Mobile app.

Source:

http://blog.safaribooksonline.com/2012/07/20/jquery-mobile-performance-improvement/

Tuesday, May 28, 2013

Android - Install APK from Windows to Android Device

In the folder where the Android SDK was installed, there should be a folder called “tools.”

Find the MS-DOS Batch File called “ddms” and open it. You should see your device listed in the name box.

Head over to the “Device” tab and click for the pull down menu.  You can also take screenshots of the tablet through this as well. Click on “File Explorer” and a new window will open.  There are a lot of different folders, but locate the folder where the majority of your data is stored.

On the tablet, it’s under sdcard.  Clicking the "+" button gives the option of adding a new folder.  Rename the folder to whatever you want and click ok. I called my folder “fire."

Now you can import the apk onto the device. Click on the button to push the file onto the device. A new pop-up window will appear, find the location of the file and press open.  It will import the apk onto the device.

Now that the file is on the device, go and open Astro File Manager.  Click on the folder where you imported the file and you will see the apk sitting inside.

It will give two options: browse file and open app manager.  We want to choose the second option.

Now click install and the app will be installed on the device.

The app is installed and now playable.

The user controlled apk install process is relatively painless and takes around five minutes to complete, not including installing the necessary software.  Android users should have the Android SDK and Astro File Manager because they are essential utilities.
Users should explore all the options of the Android SDK and especially Astro File Manager.  Being able to directly control files from the device is a very useful tool.  Sometimes those files you thought were deleted are still hiding on the device.

Titanium - Trouble Shooting - Top FAQ

Trouble Shooting

Failed to load the JNI shared library ...jvm.dll

Install additional 32bit version of Java (without removing the 64bit). The two things which I had to change were:
  • the system PATH variable (i added "C:\Program Files (x86)\Java\jre7\bin" - place where installed my 32bit java).
  • [little mod inTitaniumStudio.ini by adding]
         -vm C:\Program Files (x86)\Java\jre7\bin\javaw.exe"

Failed to create java virtual machine
Remove --launcher.XXMaxPermSize 256m from titaniumstudio.ini and start again

Failed to install acs. Please see the Studio log for more information 

Run  TitaniumStudio.exe as Administrator

Emulator process exited with code 1

changed the SDK version number in these lines from 11 to 14 - with relevant existing emulator

<uses-sdk android:targetSdkVersion="14"/>
<tool-api-level>14</tool-api-level>
 
Error typeerror argument of type 'nonetype' is not iterable 

Copy the following files from build-tools to platform-tools
 
C:\Android\build-tools\17.0.0\aapt.exe to C:\Android\platform-tools\aapt.exe
C:\Android\build-tools\17.0.0\dx.bat  to  C:\Android\platform-tools\dx.bat
C:\Android\build-tools\17.0.0\lib  to  C:\Android\platform-tools\lib 
Failure [INSTALL_FAILED_MISSING_SHARED_LIBRARY
Select 'Run Configurations' from the 'Run' menu, find 'Titanium Android Emulator - appcelerator-KitchenSink-...', then change the 'Android API' field to 'Google APIs Android 2.1-...'

Running Application in Android Simulator - Time out
adb kill-server

Where does Titanium put the APK file?
build/android/bin.

Vaadin Touchkit - New Project

Prerequisites:
  • Eclipse Java EE IDE for Web Developers with m2eclipse plugin
  • Apache Tomcat installed on your computer and integrated with Eclipse
  • Sun Java 2 Standard Edition 6.0 (Java 1.5 or newer is required)

1. Create a new Maven project in eclipse using vaadin-archetype-touchkit archetype. 

Create the project.
Type touchkit in the filter field and you the desired archetype will be offered. Select it.
Type the group and artifact id for the new maven project.
After pressing Finish the project will be created in your workspace. It has some sample files so you can start the sample application without any modifications. But we'll do some changes so we can call this a HelloWorld application :).

2. Change the code so that button generate a "HelloWorld" message

If you open the src/main/java directory you will see a package named after your maven group and artifact ID. Open the MyVaadinApplication.java file located in that package and change the text of the label (created when the button is pressed) to "Hello World!".

3. Compile vaadin widget set using gwt-maven-plugin

You could try and start the application by starting your Tomcat instance inside Eclipse. Typing the URL addresse of your application in the browser (localhost:8080/helloworldtouchkit/) will result in following error:
This means that your vaadin widgets aren't compiled into javascript. You should press CTRL-6 for Vaadin Eclipse plugin to compile them. But now you will get another error in Eclipse saying:
java.lang.ClassNotFoundException: com.google.gwt.dev.GWTCompiler
The problem is that Vaadin plugin expects to find gwt-dev.jar on the project classpath but the Touchkit archetype doesn't create that maven dependency in the pom. To fix this problem we have two solutions. First one is to manually add that maven dependency in the pom.xml file and use the Vaadin plugin button. The other one is to use gwt-maven-plugin that is already specified in the project pom file. We are going for the second approach and all we need to do is to create new maven run configuration (which execute gwt:compile goal ) as shown on the image below.
After running maven build all widgets should be compiled.

4. Deploy and start the application

Add the application to the Tomcat server to be configured and start it. In the web browser type the URL of the application (localhost:8080/helloworldtouchkit/). The application should start and by pressing the Click me button, the Hello World! label should be written on the screen.

Source: 
http://itconclusion.blogspot.co.at/2012/11/mobile-hello-world-app-with-vaadin.html

Vaadin 7 - Ivyde - Eclipse




Installing Vaadin Plugin for Eclipse

If you are using the Eclipse IDE, using the Vaadin Plugin for Eclipse helps greatly. Notice that you can also create Vaadin projects as Maven projects in Eclipse.
The plugin includes:
  • An integration plugin with wizards for creating new Vaadin-based projects, themes, and client-side widgets and widget sets.
  • A visual editor for editing custom composite user interface components in a WYSIWYG fashion. With full round-trip support from source code to visual model and back, the editor integrates seamlessly with your development process.
  • A version of Book of Vaadin that you can browse in the Eclipse Help system.

Installing the IvyDE Plugin

The Vaadin Plugin for Eclipse requires the Apache IvyDE plugin, which needs to be installed manually in Eclipse before the Vaadin plugin.
  1. Select Help → Install New Software....
  2. Add the IvyDE update site by clicking the Add... button.
    Enter a name such as "Apache Ivy Update Site" and the URL of the update site: 
    http://www.apache.org/dist/ant/ivyde/updatesite
    Then click OK. The Vaadin site should now appear in the Available Software window.
  3. Select the new "Apache Ivy Update Site" from the Work with list.
  4. Select the Apache Ivy, Apache Ivy Ant Tasks, and Apache IvyDE plugins.
    The Apache IvyDE Resolve Visualizer is optional, and would require additional dependency plugins to be installed.
    Then, click Next.
  5. Review the installation details and click Next.
  6. Accept or unaccept the license. Finally, click Finish.
  7. Eclipse may warn about unsigned content. If you feel safe, click OK.
  8. After the plugin is installed, Eclipse will ask to restart itself. You can proceed to install the Vaadin plugin before the restart, as described in the following section, so you can answer Apply Changes Now.

Installing the Vaadin Plugin

You can install the plugin as follows:
  1. Select Help → Install New Software....
  2. Add the Vaadin plugin update site by clicking Add... button.
    Enter a name such as "Vaadin Update Site" and the URL of the update site: http://vaadin.com/eclipse. If you want or need to use the latest unstable plugin, which is usually more compatible with development and beta releases of Vaadin, you can use http://vaadin.com/eclipse/experimental. Then click OK. The Vaadin site should now appear in the Available Software window.
  3. Select all the Vaadin plugins in the tree.
    Then, click Next.
  4. Review the installation details and click Next.
  5. Accept or unaccept the license. Finally, click Finish.
  6. After the plugin is installed, Eclipse will ask to restart itself. Click Restart.
More installation instructions for the Eclipse plugin can be found at http://vaadin.com/eclipse.

Updating the Plugins

If you have automatic updates enabled in Eclipse (see Window → Preferences → Install/Update → Automatic Updates), the Vaadin plugin will be updated automatically along with other plugins. Otherwise, you can update the Vaadin plugin manually as follows:
  1. Select Help → Check for Updates. Eclipse will contact the update sites of the installed software.
  2. After the updates are installed, Eclipse will ask to restart itself. Click Restart.
Notice that updating the Vaadin plugin updates only the plugin and not the Vaadin libraries, which are project specific. See below for instructions for updating the libraries.

Updating the Vaadin Libraries

Updating the Vaadin plugin does not update Vaadin libraries. The libraries are project specific, as a different version might be required for different projects, so you have to update them separately for each project.
  1. Open the ivy.xml in an editor Eclipse.
  2. Edit the entity definition at the beginning of the file to set the Vaadin version. 
    <!ENTITY vaadin.version "7.0.1">
    You can specify either a fixed version number, as shown in the above example, or a dynamic revision tag such as latest.release. You can find more information about the dependency declarations in Ivy documentation.
  3. Right-click the project and select Ivy → Resolve.
    Updating the libraries can take several minutes. You can see the progress in the Eclipse status bar. You can get more details about the progress by clicking the indicator.
  4. If you have compiled the widget set for your project, recompile it by clicking the Compile Vaadin widgets button in Eclipse toolbar.
  5. Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by right-clicking the server and selecting Clean as well as Clean Tomcat Work Directory, and restart it.
If you experience problems after updating the libraries, you can try clearing the Ivy resolution caches by right-clicking the project and selecting Ivy → Clean all caches. Then, do the Ivy → Resolve and other tasks again. 

Update Vaadin 7 Project with Ivyde

Right click/ Ivyde / Resolve

Source:
https://vaadin.com/book/vaadin7/-/page/getting-started.eclipse.html

Vaadin - Activiti - Eclipse

Eclipse IDE for Java EE Developers

- Ganymede, Eclipse Indigo and Juno or newer

Vaadin Plugin

 To install the plugin:
  • Select Install New Software... from the Help -menu
  • Add new update site:
    • Eclipse 3.5 and newer: http://vaadin.com/eclipse
    • Eclipse 3.4: http://vaadin.com/eclipse/3.4
      Visual Designer not available in the Eclipse 3.4 version.
  • Select the features you want to install and click Next to proceed with the installation.

 

 

 

 

 

 

 

 

 

 

 Activiti BPMN Pluggin


Activiti comes with an Eclipse plugin, the Activiti Eclipse Designer, that can be used to graphically model, test and deploy BPMN 2.0 processes.

The following installation instructions are verified on Eclipse Indigo. Note that Eclipse Helio is NOT supported.
Go to Help -> Install New Software. In the following panel, click on Add button and fill in the following fields:
  • Name: Activiti BPMN 2.0 designer
  • Location: http://activiti.org/designer/update/

Eclipse - HTML Editor Plugin


How to add an HTML Editor for Eclipse

1. Go to Help --> Install New Software...
 2. Select the Juno repository (http://download.eclipse.org/releases/juno/) from the 'Work with:' menu:
3. In the search box, enter 'web' to filter the results, and select 'Web Page Editor':
4. Click Next:

Android - Failed to allocate memory - Application Error Is a directory

Error
Failed to allocate memory: 8
This application has requested the Runtime to terminate it in an unusual way.






Solved: 
Memory Options: change 1024 --> 512



Application Error Is a directory (file:///#android_asset/www/index.html)

This means, in your index.html, you are using a resource that requires internet access. See your index.html and look for any CSS, javascript or Cordova file that is linked directly from the internet. If so, you must download the related file and make it local.

 


Friday, May 24, 2013

Debugger for Mobile

weinre - Home

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
weinre is WEb INspector REmote. Pronounced like the word "winery". Or maybe like the word "weiner". Who knows, really.
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
Interesting places to visit:
videos at YouTube: http://www.youtube.com/results?search_query=weinre
this documentation: http://people.apache.org/~pmuellr/weinre/ [temporary]
unofficial binary packages: http://people.apache.org/~pmuellr/weinre/ [temporary]
issues: https://issues.apache.org/jira/gobble-de-gook/...
create a new issue: bug or new feature
cloneable source at Apache: https://git-wip-us.apache.org/repos/asf/cordova-weinre.git
Apache repo cloned at GitHub: https://github.com/apache/cordova-weinre
mailing lists at Apache: http://mail-archives.apache.org/mod_mbox/cordova-dev/ (for weinre development)
discussion at Google Group: http://groups.google.com/group/weinre (for weinre usage)
More information on weinre's big brothers, Web Inspector / Google Chrome Developer Tools, is available at Google's Chrome Dev Tools pages and Apple's Web Inspector pages.
If you aren't familiar with FireBug or Web Inspector, weinre isn't going to make too much sense to you. weinre reuses the user interface code from the Web Inspector project at WebKit, so if you've used Safari's Web Inspector or Chrome's Developer Tools, weinre will be very familiar. If you're not familiar with Web Inspector, the links above to Google's and Apple's documentation will be useful.
Here's an example session using weinre:

Two screen captures are shown above. On the left is the weinre client application, displaying debug information. On the right is the target web page, running in Mobile Safari in the iOS Simulator.
In normal usage, you will be running the client application in a browser on your desktop/laptop, and running a target web page on your mobile device.
In the session above, the debugger is display the Elements panel, with the embedded console expanded in the bottom third of the window. In the console area, we've entered two statements: 
document.body.style.backgroundColor
document.body.style.backgroundColor = "pink"
The result of running the first statement shows the value of the body's background style is not set. The second statement sets the body's background to pink. That horrifying pink background is then rendered in the target's window.
In addition, an h1 element is selected in the upper third of the Elements panel, which causes the side panels on the right to be filled in with relevant information. In this case, the matched CSS rules for that h1 element are being shown.
If you are familiar with WebKit's Web Inspector, a partial list of differences between it and weinre are listed below:
  • weinre does not make use of any 'native' code in the browser, it's all plain old boring JavaScript.
  • Because weinre doesn't use 'native' code, it's functionality is limited. For instance, source level debug of JavaScript is not possible easy.
  • Because weinre doesn't use 'native' code, the debug target code will run on browsers without specialized debug support. For instance, a browser running on your phone.
  • weinre supports 'remote' interaction, so you can run the debugger user interface on one machine and can debug a web page running on another machine. For instance, debug a web page displayed on your phone from your laptop.
  • Because weinre supports 'remote' interaction, multiple debug clients can be debugging the same debug target at the same time.
  • One thing not different from Web Inspector is that the debug client user interface only runs on WebKit-based browsers.

Supported Libraries and Platforms

Generally version numbers listed here are the earliest versions of the relevant thing that have been tested. Later versions of those things are also hopefully supported, but let us know.

Libraries not supported

  • versions of Prototype.js before version 1.7 are not supported, as they do not support the JSON.stringify() API correctly. You will get an alert() in the web page you are debugging if you attempt to debug it with weinre and you are using an unsupported version of Prototype.js.

Platforms supported - debug server

Any platform that supports node.js.

Platforms supported - debug client

The browser where the debugger user interface runs.
  • Google Chrome
  • Apple Safari
  • Other recent-ish WebKit-based browsers

Platforms supported - debug target

The browser with the page you are debugging.
  • Android Browser application
  • iOS Mobile Safari application
  • PhoneGap/Cordova
  • other

Platforms not supported - debug target

  • iOS 3.1.3 or earlier
  • webOS 1.45 or earlier 

Source:

http://people.apache.org/~pmuellr/weinre/docs/latest/

Charts for Mobile




The Plot Chart
Numeric data quickly becomes difficult for us humans to understand. Once the number of rows or columns in a table passes two or three, the meaning quickly becomes harder to grasp. The easiest way to give meaning to numeric data is to display it as a chart. Unfortunately jQuery Mobile doesn't have any built-in charting capabilities and to the best of my knowledge there isn't a jQuery Mobile charting plug-in available. But lucky for us, jQuery Mobile is built on top of jQuery and there are several charting plug-ins available for it. 

My requirements for a charting library are pretty simple:
  1. Free and open source
  2. Compatible across the three mobile platforms I support: iOS, Android, Windows Phone 7
One of my favorite JavaScript charting libraries is "Raphael". I have used it on desktop projects previously but it was quickly out of the running. Raphael uses SVG, which isn't supported well across mobile platforms.

Next I googled, "jQuery charts". Nearly 3 million websites were returned, so I knew I was going to find something. Close to the top of the list was the following link: 1st Web Designer. The post there listed six jQuery charting plug-ins: 
  1. GraphUp
  2. jQuery Visualize
  3. Highcharts
  4. Flot
  5. jQuery Sparklines
  6. jqPlot
After doing a bit of analysis, I decided to run with jqPlot. This is not to say that the other packages aren't good, it is just that I was able to understand jqPlot's examples quicker than the others and it met all of my requirements. For your own needs, please try out the libraries, they may meet your needs better than they had mine.

jqPlot

There are two methods for generating graphics in HTML5, canvas and SVG. 
Canvas is like a bitmap and JavaScript can render graphics to it. SVG's use of vector graphics makes it seem ideal for a charting library, the problem is that SVG is not as well supported as canvas and it is not available on 2.x Android or any WP7. jqPlot uses HTML5 canvas. 

The jqPlot library is huge. It has an immense number of features. But it is not a bloated pig, it is smartly architected. Rather than force you to download a lot of charts and features you won't use, it, itself is composed of a large number of plug-ins, I counted 26 of them. This means you only download the plug-ins you want to use.

I could spend weeks explaining all of the features of jqPlot, unfortunately I don't have the time for that. Instead I am going to give you a quick walk through my demo app and explain anything interesting along the way.


Source:
http://therockncoder.blogspot.co.at/2012/05/jquery-mobile-charts.html