Introduction

The Intel® HTML5 App Porter Tool - BETA is an application that helps mobile application developers to port native iOS* code into HTML5, by automatically translating portions of the original code into HTML5. This tool is not a complete solution to automatically port 100% of iOS* applications, but instead it speeds up the porting process by translating as much code and artifacts as possible.

It helps in the translation of the following artifacts:

• Objective-C* (and a subset of C) source code into JavaScript
• iOS* API types and calls into JavaScript/HTML5 objects and calls
• Layouts of views inside Xcode* Interface Builder (XIB) files into HTML + CSS files
• Xcode* project files into Microsoft* Visual Studio* 2012 projects

This document provides a high-level explanation about how the tool works and some details about supported features. This overview will help you determine how to process the different parts of your project and take the best advantage from the current capabilities.

How does it work?

The Intel® HTML5 App Porter Tool - BETA is essentially a source-to-source translator that can handle a number of conversions from Objective-C* into JavaScript/HTML5 including the translation of APIs calls. A number of open source projects are used as foundation for the conversion including a modified version of Clang front-end, LayerD framework and jQuery Mobile* for widgets rendering in the translated source code.

Translation of Objective-C* into JavaScript

At a high level, the transformation pipeline looks like this:

This pipeline follows the following stages:

• Parsing of Objective-C* files into an intermediate AST (Abstract Syntax Tree).
• Mapping of supported iOS* API calls into equivalent JavaScript calls.
• Generation of placeholder definitions for unsupported API calls.
• Final generation of JavaScript and HTML5 files.

About coverage of API mappings

Mapping APIs from iOS* SDK into JavaScript is a task that involves a good deal of effort. The iOS* APIs have thousands of methods and hundreds of types. Fortunately, a rather small amount of those APIs are in fact heavily used by most applications. The graph below conceptually shows how many APIs need to be mapped in order to have certain level of translation for API calls .

Currently, the Intel® HTML5 App Porter Tool - BETA supports the most used types and methods from:

• UIKit framework
• Foundation framework

Additionally, it supports a few classes of other frameworks such as CoreGraphics. For further information on supported APIs refer to the list of supported APIs.

Backgrid.js – A set of core Backbone UI elements

http://codevisually.com/backgrid-js/

Backgrid.js is a set of components for building semantic and easily stylable data grid widgets. It offers a simple, intuitive programming interface that makes easy things easy, but hard things possible when dealing with tabular data.
The goal of Backgrid.js is to produce a set of core Backbone UI elements that offer you all the basic displaying, sorting and editing functionalities you'd expect, and to create an elegant API that makes extending Backgrid.js with extra functionalities easy.

jquery와 angulars 같이 사용하기.

requireJS로 시작했다가 무거운거 같아서 그냥 같이 쓰는걸로 해봤다.

문법적인 문제는 발견되지 않았다. 너무 간단한 테스트라서 그럴지도.

AS-IS

 : index.html에 require.js와 main.js, angular.js, controllers.js 등을 녹여넣었다.

* index.html

* main.js - require.js에서 사용함. 

* controllers.js - angular.js에서 사용 

TO-BE

* index.html 에 다 순차적으로 호출하였다.(require.js 사용안함) 

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

http://requirejs.org/

프로젝트에 require.js와 main.js 파일이 필요하다.

아래에서 main.js를 호출하는 구문이다.

<script src="require.js" data-main="main"></script>

main.js( data-main="main" )에 로드할 JSLibrary와 해당 JSLabrary의 구문을 입력하면 된다.

아래에는 "jquery.js" 가 있어야 실행이 된다.

require(["jquery"], function($) {
  $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

** Optimize your JavaScript with RequireJS

http://www.webdesignerdepot.com/2013/02/optimize-your-javascript-with-requirejs/

IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔

Get started then check out the API.

require.js 2.1.4MinifiedWith Comments

All you need to start using require.js in the browser.

Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability

http://howtojboss.com/2013/02/05/modularized-javascript-with-jboss-portal-platform-6-avoid-conflicts-promote-re-usability/

JBoss Portal Platform 6

JBoss Portal Platform 6 Beta is now available.
http://www.redhat.com/promo/jpp6/

Many new features are documented there:

• Built on blazingly fast, lightweight JBoss Enterprise Application Platform 6 technology
• Develop with JSF2 and Rich Faces 4 in portlets, via Portlet Bridge
• Implement single sign-on (SSO) using SAML 2.0
• Launch fast with Maven quick starts

Portlet and JavaScript

However, to developers and architects, one of the first issues and most difficult issue we face in any portal implementation is – what are the best practices to use JavaScripts in a portal platform?

Imagine if you have 2 portlets both using a shared JavaScript, such as jQuery – how would you share the JavaScript between the 2 portlets?

• Each Portlet include its own
  • This is largely a no-no.  If each portlet include its own jQuery in a <script> tag, they’ll most likely run into conflicts or unnecessarily reload a script already loaded.
• Deploy a single version
  • Then what if you need multiple versions?
  • What if some portlets needs a different version of the JavaScript library?

Now, expand this dilemma to not just common JavaScripts libraries, but to all of your application’s JavaScripts!

Oh, and don’t forget, you may also want to minify and combine scripts to reduce latency, to be Content Delivery Network (CDN) friendly, and ultimately, to improve your customer’s browsing  experience.

25+ Excellent jQuery Menu Plugins

http://creativecan.com/2013/02/jquery-menu-plugins/

MenuStation – Real Unlimited Responsive Menu –

http://codecanyon.net/item/menustation-real-unlimited-responsive-menu/3076965?ref=andy4321&ref=andy4321&clickthrough_id=107725296&redirect_back=true

Metro Flexible Navigation – 

http://codecanyon.net/item/-metro-flexible-navigation/full_screen_preview/2796746

UberMenu – WordPress Mega Menu Plugin – MORE INFO

UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the WordPress 3 Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

MenuStation – Real Unlimited Responsive Menu – MORE INFO

This plugin features real unlimited menu, responsive design, and many colors to change. it is easy to customize and light weight.

Menu with CSS3 Effects and Notification Bubbles – MORE INFO

This Menu with CSS3 Effects and Notification Bubbles has everything you need. The functionality is divided in different parts and that makes it very powerful.

niceTree – JQuery Tree Plugin – MORE INFO

Get rid of that ugly tree menu on your site with niceTree. An easy to install JQuery plugin with more options than you’ll ever need. niceTree will take your HTML and turn it into a collapsible menu system with unlimited menus within menus.

Metro Flexible Navigation – MORE INFO

The Metro Flexible Navigation is a simple, clean grid layout looking a lot like the new Windows 8 interface. It can be customized to be laid out horizontally or vertically. It’s scrollable and drag-able at the same time and contains useful sliding controls. Icons can be changed, there is a large collection available.

MeanMenu – MORE INFO

Main features include hide or show menu children, orientation adjustment and control screen width where the plugin activates. This plugin is easy to setup and configure and bundled with configurable CSS.

Memu – A simple CSS / JavaScript / JQuery Menu – MORE INFO

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. It has feature so that when visitors are navigating your site, the selected item will stay highlighted.

Revolver – Sliding Website Plugin – MORE INFO

This is not a menu plugin actually, but it can do some powerful stuff and create a creative navigation on you website. Revolver is a jQuery plugin for creating full screen sliding websites. It can be integrated into any website template.

jQuery Animated Button & Menu – MORE INFO

The animated button & menu jQuery plugin allows you to easily replace <a> links with animated buttons and grouping buttons into a menu (drop down menu).

jAccordion – jQuery Accordion – MORE INFO

jAccordion is a complex and responsive jQuery plugin with powerful API, large amount of callbacks and options which let you customize it to suit your needs.

Cursor Following Menu – MORE INFO

This is a navigation menu that will always follow your cursor. It was generated using CSS and jQuery library, which is easy to configure and implement. The script features CSS styling, 2-level navigation and simple markup.

jQuery Drilldown Menu – MORE INFO

iPhone inspired drilldown menu. So easy. So powerful.

Sticklr WP – Sticky Side Panel WordPress Plugin – MORE INFO

Stickr WP, a sticky side panel menu WordPress plugin. Inspired by Envato site-switcher, after released as CSS3 +jQuery, due to popular demand I decided to create this WordPress plugin version. The features are similar with jQuery version, only WordPress version has an intuitively easy administration panel, so you don’t have to know the coding behind it.

Shuffling Tiles jQuery Plugin – MORE INFO

Inspired by the step by step movements of the shuffle dance and the new Metro UI look, Shuffling Tiles combines elements from both and then some, producing a versatile, animated and compact webpage widget. Use it when you have lot’s of information that you want to fit in a small area, and you want to present it in a lively, original and interactive way.

jQuery iNav – Products Showcasing Navigation – MORE INFO

iNav it’s a jQuery plugin that let you create an amazing animated Menu (even with multiple menus) or Items Showcasing. Inspired by Apple products navigation, iNav can introduce in your website a very powerful javascript navigation! In order to work properly, iNav requires at least jQuery 1.4 or higher.

jQuery Live Menu – MORE INFO

jQuery Live Menu is a jQuery plugin that allows you to create easily nice and animated menus. Menus are opened on left or right click on the defined target. You can customize layout, effects and the tooltip design by jQuery parameters .

PullOuts – jQuery Slide-out Widgets – MORE INFO

PullOuts allows to grab any piece of content from a web page and display it as a pullout widget. Whether it’s a block of text, images, shopping cart, login, search or subscription form, a video or any other content – you can make it a pullout.

jQuery Push Menu – MORE INFO

Now with hoverIntent integration. Cross Browser Compliant – IE9 , FF3+,Opera, Safari, Chrome. Mobile Ready – Works in mobile browsers. Sliding Sub menu level items.

Titan Menu – MORE INFO

Titan Menu, a fresh and powerfull menu solution.

Sticklr – Sticky Side Panel CSS3 + jQuery Plugin – MORE INFO

The latest version is version 1.4, made on January of 2012. Custom tab size option was added and the ability for a tab to act as link was improved.

Superfish – Free jQuery Menu Plugin - MORE INFO

Superfish is a JQuery plugin especially dedicated to menus. It allows many improvement from what you can achieve with HTML and CSS as such as hover support for IE6, animations, keyboard accessibility and more.

Smooth Expandable Menu – MORE INFO

Smooth Expandable Menu is the definitive tool for building minimal vertical expandable menus, which can be easily customized due to its 17 built-in config parameters, directly from the html file / script call. The pack includes 3 samples (Serif, San Serif and Tiny), to make easier the integration on any web project. It uses Google Fonts library system, so you won’t need to integrate font files or @fontface scripts. It has been optimized for mobile devices.

jMenu – MORE INFO

jMenu is a jQuery plugin that allows the creation of horizontal navigations with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists.

Navigation Menu Widget – MORE INFO

This is an advanced plugin that gives you total control over the output of your menus. Support shortcodes, widget and template function. Easy to customize, full features. and supports Twitter Bootstrap. Displays a list of menu as links. This plugin is based on the WordPress function: wp_nav_menu()

jPie jQuery Circular Menu – MORE INFO

jPie is a Contextual Circular Menu for jQuery. You can create countless instances and each instance can be fully customizable using the attributes provided by the plugin.

Fancy Typewriter – jQuery plugin – MORE INFO

Fancy Typewriter is a jQuery plugin for creating stunning menu effects and much more. Just add the plugin to any tag, which contains text. Check out the preview, which says more than words.