- Which App Designer framework should I use? Which App Designer 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?
Which App Designer framework should I use? Which App Designer framework is best?
There is no "best" App Designer framework. Each framework has it's pros and cons. You should choose that framework which serves your applicaton needs best. The list below provides a list of pros and cons for each of the frameworks that are available as part of App Designer.
Framework 7 -- Pros: provides pixel perfect layout with device-specific UI elements for Android and iOS platforms. Cons: difficult to customize and modify.
Twitter Bootstrap 3 -- Pros: 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. Cons: to be written.
App Framework 3 -- Pros: an optimized for mobile library that is very lean. Cons: to be written.
Ionic -- to be written.
Topcoat -- This UI framework has been deprecated and will be retired from App Designer in a future release of the Intel XDK. You can still use this framework in apps that you create using 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 still use this framework in apps that you create using 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 still use this framework in apps that you create using 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 Ratchet project page and 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.