[DEPRECATED] App Designer (UI layout tool) has been deprecated!
IMPORTANT: the Intel XDK App Designer component (aka the UI layout tool) has been deprecated. It will be retired in an upcoming release. Once retired, existing App Designer projects will continue to work, but you will not be able to create new App Designer projects.
No bug fixes will be implemented for the existing App Designer component nor for any of the UI frameworks that were supported by App Designer.
If you have designed your layout by hand or by using an external tool, there will be no changes to your project. This change ONLY affects projects that have been created using the App Designer UI layout tool. If you are just starting with the Intel XDK we recommend that you do NOT use App Designer to create your layout, since the editor will not be maintained and may eventually be discontinued.
There are many UI frameworks and tools available for creating UI layouts; too many to enumerate here. The vast majority of layout tools that generate standard HTML5 code (HTML/CSS/JavaScript) should work with no issue. The Intel XDK creates standard Cordova CLI (aka PhoneGap) applications, so any UI frameworks and tools that work in the Cordova CLI environment will work with your Intel XDK applications.
- 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?
- Unable to select App Designer UI option when I create a new App Designer project.
Which App Designer framework should I use? Which Intel XDK layout framework is best?
There is no "best" UI framework for your application. Each UI framework has pros and cons. You should choose that UI framework which serves your application needs the best. Using App Designer to create your UI is not a requirement to building a mobile app with the Intel XDK. You can create your layout by hand or using any UI framework (by hand) that is compatible with the Cordova CLI (aka PhoneGap) webview environment.
Twitter Bootstrap 3 -- 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 Twitter Bootstrap please visit the Twitter Bootstrap website and the Twitter Bootstrap GitHub repo for documentation and help.
Framework7 -- This UI framework has been retired from App Designer. 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 Framework7 please visit the Framework7 project page and the Framework7 GitHub repo for documentation and help.
Ionic -- This UI framework has been retired from App Designer. 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 Ionic please visit the Ionic project page and the Ionic GitHub repo for documentation and help.
App Framework 3 -- This UI framework has been retired from App Designer. 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 App Framework please visit the App Framework project page and the App Framework GitHub repo for documentation and help.
Topcoat -- This UI framework has been retired from App Designer. 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 and help.
Ratchet -- This UI framework has been retired from App Designer. 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 and help.
jQuery Mobile -- This UI framework has been retired from App Designer. 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 and help.
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.
App Designer versions of the layout and user interface templates 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.
Unable to select App Designer UI option when I create a new App Designer project.
If you previously created an App Designer project named 'ui-test' that you then delete and then create another App Designer project using the same name (e.g., 'ui-test'), you will not be given the option to select the UI framework for the new project named 'ui-test.' This is because the Intel XDK remembers a framework name for each project name that has been used and does not delete that entry from the global-settings.xdk file when you delete a project (e.g. if you chose "Framework 7" the first time you created an App Designer project with the name 'ui-test' then deleting 'ui-test' and creating a new 'ui-test' will result in another "Framework 7" project).
Because the UI framework name is not removed from the global-settings.xdk file when you delete the project, you must either use a new unique project name or edit the global-settings.xdk file to delete that old UI framework association. This is a bug that has been reported, but has not been fixed. Following is a workaround:
- Close the Intel XDK.
- Open the global-settings.xdk file with a text or code editor (Sublime, Notepad++, Brackets, etc.). See this FAQ for how to locate the global-settings.xdk file on your system.
- Look for the project name you are trying to reuse at the end of the file. For example for a project name 'ui-test':
"FILE-/C/Users/xxx/Downloads/pkg/ui-test/www/index.html": {"canvas_width": 320,"canvas_height": 480,"framework": "framework 7"
}- Remove the last line ("framework": "framework 7") from the JSON object (remember to remove the comma at the end of the preceding line or you won't have a proper JSON file and your global-settings.xdk file will be considered corrupt).
- Save and close the global-settings.xdk file.
- Launch the Intel XDK.
- Create a new project with old name you are reusing.
You should now see the list of App Designer framework UI selection options when you create the new project with a previously used project name that you have deleted.