Intel® XDK FAQs - App Designer

 Is there a tool to auto-build elements to see how it is done?

Yes, you may use the App Starter tool put together by the author of App Framework*. It is very useful for learning how to build elements with App Framework*. If you wish to design your project layout using this tool, you will need to copy the layout files it creates to your Intel XDK project directories and turn your project into a non-App Designer project.

 What does the Google* Map widget’s"center type" attribute and its values 'Auto calculate', 'Address' and 'Lat/Long' mean? 

That 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 

Note: 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. Google* Maps API will not give you any device data, it will only display information for you. Please refer to this sample app for some help with 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 can research the use of "responsive web design" techniques to build your UI so that it adapts to different sizes automatically. You can also look into media query to see how you can use that.  

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 in Intel XDK?

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, if you were writing a single-page client-side HTML5 app. You can use Intel XDK’s App Designer to drag and drop UI elements.

 Why is the user interface for Chrome on Android* unresponsive? [App Framework*] 

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? [App Framework*]

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? [App Framework*]

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 (Android* 4.4.4)?  [App Framework*]

Ensure you have upgraded to the latest version of App Framework*. If your app is built with "legacy" then try using the Cordova build and set the "Targeted Android* Version" to 19. The legacy build targets Android* 4.2.

 How do I manually set a theme? [App Framework*]

If you want to, for example, change the theme only on Android*, you can add the following lines of code:

1. $.ui.autoLaunch = false; //Stop the App Framework* auto launch right after you load App Framework*
2. 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 to disable custom themes and set <div id=”afui” class=”android light”>
3. Otherwise, set $.ui.useOSThemes=true;
4. When device ready and document ready have been detected, add $.ui.launch();

 

 

Back to FAQs Main