- Which App Designer framework should I use? Which Intel XDK layout framework is best?
- What does the Google* Map widget’s "center type" attribute and its values "Auto calculate,""Address" and "Lat/Long" mean?
- How do I size UI elements in my project?
- How do I create lists, buttons and other UI elements with the Intel XDK?
- Why is the user interface for Chrome on Android* unresponsive?
- How do I work with more recent versions of App Framework* since the latest Intel XDK release?
- Is there a replacement to XPATH in App Framework* for selecting nodes from an XML document?
- Why does my App Framework* app that was previously working suddenly start having issues with Android* 4.4?
- How do I manually set a theme?
- How does page background color work in App Framework?
- What kind of templates can I use to create App Designer projects?
- My AJAX calls do not work on Android; I'm getting valid JSON data with an invalid return code.
- What do the data-uib and data-ver properties do in an App Designer project?
Which App Designer framework should I use? Which Intel XDK layout framework is best?
There is no "best" App Designer framework. Each framework has pros and cons. You should choose that framework which serves your application needs best. The list below provides a quick list of pros and cons for each of the frameworks that are available as part of App Designer.
Twitter Bootstrap 3 -- PRO: a very clean UI framework that relies primarily on CSS with very little JavaScript trickery. Thriving third-party ecosystem with many plugins and add-ons, including themes. Probably the best place to start, especially for UI beginners. CON: some advanced mobile UI mechanisms (like swipe delete) are not part of this framework.
App Framework 3 -- PRO: an optimized for mobile library that is very lean. App Framework includes the ability to automatically change the theme as a function of the target device. For example, on an Android device the styling of your UI looks like an Android app, on an iOS device the styling looks like an iOS app, etc. CON: not as widely known and supported as some other UI frameworks.
Framework 7 -- PRO: provides pixel perfect layout with device-specific UI elements for Android and iOS platforms. CON: difficult to customize and modify; requires a strict adherence to the Framework 7 "rules of layout" for best results. You should have a good understanding of how Framework 7 works before using this framework to build your app!
Ionic -- PRO: a very sophisticated mobile framework with many features. If you are familiar with and comfortable with Angular this framework may be a good choice for you. CON: tightly coupled with Angular, many features can only be accessed by writing JavaScript Angular directives. If you are not familiar or comfortable with Angular this is not a good choice!
Topcoat -- This UI framework has been deprecated and will be retired from App Designer in a future release of the Intel XDK. You can always use this (or any mobile) framework with the Intel XDK, but you will have to do so manually, without the help of the Intel XDK App Designer UI layout tool. If you wish to continue using Topcoat please visit the Topcoat project page and the Topcoat GitHub repo for documentation.
Ratchet -- This UI framework has been deprecated and will be retired from App Designer in a future release of the Intel XDK. You can always use this (or any mobile) framework with the Intel XDK, but you will have to do so manually, without the help of the Intel XDK App Designer UI layout tool. If you wish to continue using Ratchet please visit the Ratchet project page and the Ratchet GitHub repo for documentation.
jQuery Mobile -- This UI framework has been deprecated and will be retired from App Designer in a future release of the Intel XDK. You can always use this (or any mobile) framework with the Intel XDK, but you will have to do so manually, without the help of the Intel XDK App Designer UI layout tool. If you wish to continue using jQuery Mobile please visit the jQuery Mobile API page and jQuery Mobile GitHub page for documentation.
What does the Google* Map widget’s "center type" attribute and its values "Auto calculate,""Address" and "Lat/Long" mean?
The "center type" parameter defines how the map view is centered in your div. It is used to initialize the map as follows:
- Lat/Long: center the map on a specific latitude and longitude (that you provide on the properties page)
- Address: center the map on a specific address (that you provide on the properties page)
- Auto Calculate: center the map on a collection of markers
This is just for initialization of the map widget. Beyond that you must use the standard Google maps APIs to move and/or modify the map. See the "google_maps.js" code for initialization of the widget and some calls to the Google maps APIs. There is also a pointer to the Google maps API at the beginning of the JS file.
To get the current position, you have to use the Geo API, and then push that into the Maps API to display it. The Google Maps API will not give you any device data, it will only display information for you. Please refer to the Intel XDK "Hello, Cordova" sample app for some help with the Geo API. There are a lot of useful comments and console.log messages.
How do I size UI elements in my project?
Trying to implement "pixel perfect" user interfaces with HTML5 apps is not recommended as there is a wide array of device resolutions and aspect ratios and it is impossible to insure you are sized properly for every device. Instead, you should use "responsive web design" techniques to build your UI so that it adapts to different sizes automatically. You can also use the CSS media query directive to build CSS rules that are specific to different screen dimensions.
Note:The viewport is sized in CSS pixels (aka virtual pixels or device independent pixels) and so the physical pixel dimensions are not what you will normally be designing for.
How do I create lists, buttons and other UI elements with the Intel XDK?
The Intel XDK provides you with a way to build HTML5 apps that are run in a webview on the target device. This is analogous to running in an embedded browser (refer to this blog for details). Thus, the programming techniques are the same as those you would use inside a browser, when writing a single-page client-side HTML5 app. You can use the Intel XDK App Designer tool to drag and drop UI elements.
Why is the user interface for Chrome on Android* unresponsive?
It could be that you are using an outdated version of the App Framework* files. You can find the recent versions here. You can safely replace any App Framework files that App Designer installed in your project with more recent copies as App Designer will not overwrite the new files.
How do I work with more recent versions of App Framework* since the latest Intel XDK release?
You can replace the App Framework* files that the Intel XDK automatically inserted with more recent versions that can be found here. App designer will not overwrite your replacement.
Is there a replacement to XPATH in App Framework* for selecting nodes from an XML document?
This FAQ applies only to App Framework 2. App Framework 3 no longer includes a replacement for the jQuery selector library, it expects that you are using standard jQuery.
App Framework is a UI library that implements a subset of the jQuery* selector library. If you wish to use jQuery for XPath manipulation, it is recommend that you use jQuery as your selector library and not App Framework. However, it is also possible to use jQuery with the UI components of App Framework. Please refer to this entry in the App Framework docs.
It would look similar to this:
<script src="lib/jq/jquery.js"></script><script src="lib/af/jq.appframework.js"></script><script src="lib/af/appframework.ui.js"></script>
Why does my App Framework* app that was previously working suddenly start having issues with Android* 4.4?
Ensure you have upgraded to the latest version of App Framework. If your app was built with the now retired Intel XDK "legacy" build system be sure to set the "Targeted Android Version" to 19 in the Android-Crosswalk build settings. The legacy build targeted Android 4.2.
How do I manually set a theme?
If you want to, for example, change the theme only on Android*, you can add the following lines of code:
- $.ui.autoLaunch = false; //Stop the App Framework* auto launch right after you load App Framework*
- Detect the underlying platform using either navigator.userAgent or intel.xdk.device.platform or window.device.platform. If the platform detected is Android*, set $.ui.useOSThemes=false todisable custom themes and set <div id=”afui” class=”android light”>
- Otherwise, set $.ui.useOSThemes=true;
- When device ready and document ready have been detected, add $.ui.launch();
How does page background color work in App Framework?
In App Framework the BODY is in the background and the page is in the foreground. If you set the background color on the body, you will see the page's background color. If you set the theme to default App Framework uses a native-like theme based on the device at runtime. Otherwise, it uses the App Framework Theme. This is normally done using the following:
<script>
$(document).ready(function(){ $.ui.useOSThemes = false; });</script>Please see Customizing App Framework UI Skin for additional details.
What kind of templates can I use to create App Designer projects?
Currently, you can only create App Designer projects by selecting the blank 'HTML5+Cordova' template with app designer (select the app designer check box at the bottom of the template box) and the blank 'Standard HTML5' template with app designer.
There were app designer versions of the layout and user interface templates that were removed in the Intel XDK 3088 version.
My AJAX calls do not work on Android; I'm getting valid JSON data with an invalid return code.
The jQuery 1 library appears to be incompatible with the latest versions of the cordova-android framework. To fix this issue you can either upgrade your jQuery library to jQuery 2 or use a technique similar to that shown in the following test code fragment to check your AJAX return codes. See this forum thread for more details.
The jQuery site only tests jQuery 2 against Cordova/PhoneGap apps (the Intel XDK builds Cordova apps). See the How to Use It section of this jQuery project blog > https://blog.jquery.com/2013/04/18/jquery-2-0-released/ for more information.
If you built your app using App Designer, it may still be using jQuery 1.x rather than jQuery 2.x, in which case you need to replace the version of jQuery in your project. Simply download and replace the existing copy of jQuery 1.x in your project with the equivalent copy of jQuery 2.x.
Note, in particular, the switch case that checks for zero and 200. This test fragment does not cover all possible AJAX return codes, but should help you if you wish to continue to use a jQuery 1 library as part of your Cordova application.
function jqueryAjaxTest() {
/* button #botRunAjax */
$(document).on("click", "#botRunAjax", function (evt) {
console.log("function started");
var wpost = "e=132&c=abcdef&s=demoBASICA";
$.ajax({
type: "POST",
crossDomain: true, //;paf; see http://stackoverflow.com/a/25109061/2914328
url: "http://your.server.url/address",
data: wpost,
dataType: 'json',
timeout: 10000
})
.always(function (retorno, textStatus, jqXHR) { //;paf; see http://stackoverflow.com/a/19498463/2914328
console.log("jQuery version: " + $.fn.jquery) ;
console.log("arg1:", retorno) ;
console.log("arg2:", textStatus) ;
console.log("arg3:", jqXHR) ;
if( parseInt($.fn.jquery) === 1 ) {
switch (retorno.status) {
case 0:
case 200:
console.log("exit OK");
console.log(JSON.stringify(retorno.responseJSON));
break;
case 404:
console.log("exit by FAIL");
console.log(JSON.stringify(retorno.responseJSON));
break;
default:
console.log("default switch happened") ;
console.log(JSON.stringify(retorno.responseJSON));
break ;
}
}
if( (parseInt($.fn.jquery) === 2) && (textStatus === "success") ) {
switch (jqXHR.status) {
case 0:
case 200:
console.log("exit OK");
console.log(JSON.stringify(jqXHR.responseJSON));
break;
case 404:
console.log("exit by FAIL");
console.log(JSON.stringify(jqXHR.responseJSON));
break;
default:
console.log("default switch happened") ;
console.log(JSON.stringify(jqXHR.responseJSON));
break ;
}
}
else {
console.log("unknown") ;
}
});
});
}What do the data-uib and data-ver properties do in an App Designer project?
App Designer adds the data-uib and data-ver properties to many of the UI elements it creates. These property names only appear in the index.html file on various UI elements. There are other similar data properties, like data-sm, that only are required when you are using a service method.
The data-uib and data-ver properties are used only by App Designer. They are not needed by the UI frameworks supported by App Designer; they are used by App Designer to correctly display and apply widget properties when you are operating in the "design" view within App Designer. These properties are not critical to the functioning of your app; however, removing them will cause problems with the "design" view of App Designer.
The data-sm property is inserted by App Designer, and it may be used by data_support.js, along with other support libraries. The data-sm property is relevant to the proper functioning of your app.