EzDev.org

app-framework

app-framework - iOS and Android Apps with HTML & JavaScript - develop, build and deploy - free and open source!


How to disable scrolling in Intel AppFramework UI side menu

The question is in the title ;).
I tried style="overflow:hidden" as for panels, but it did not work.

Thank you for any help.


Source: (StackOverflow)

load external page in appFramework

I'm using AppFramework.
I have a form.html page that want to use it in a seprate page, but when I click on form , it loads with AJAX and inside the index! what should do I do for loading the form.html page in a separate page?
here is an axample : http://jsbin.com/ziropu/2
when I click on link I want to load page independence of afui!
sorry for my bad english :(


Source: (StackOverflow)

intel app framwork centering content

I want to create a very simple layout with buttons on bottom of screen and some centered content.

How may I achieve this with Intel app Framework UI.

I need to support all screen sizes of course.


Source: (StackOverflow)

Switching from Jquery Mobile to AppFramework

I've built a project using Jquery Mobile. JQM seems perfect for fast prototyping but the end result on an iphone 3GS/IOS 5.1 is far from fluid. I've tried a lot of hacks/tricks to make it faster and got rid of transitions but still, I cannot get a satisfying result.

I've been looking around. What I need is a lightweight solution with a decent UI (JQM is perfect for what I need in that domain).

trigger.io and AppFramework seem to be the 2 solutions which are available (maybe I'm missing some others).

I'd like to give AppFramework a go but I'd like to have feedback from people who have made the change.

Thank you.


Source: (StackOverflow)

Disable slide to open menu on AppFramework UI

How to disable the slide action to open the left side menu on in AppFramework UI? I don't want the menu to open when slide the finger left to right on the screen.


Source: (StackOverflow)

Intel appframework ui: how to pass data in a simple list-detail app

I try to learn the Intel Appframework UI.

I want to build a simple offline app with just two panels. One panel contains a list with items (links), the second panel should display details to the selected item. The details in the second panel should be filled with javascript.

How do I pass data (for example a numeric item_id) to the second panel, so that my javascript can access it and fill it into the details page?

Can I use a part of the url of the links in the list, like this:

<li>
   <a rel='nofollow' href="#detailpanel?item=3"> Item 3 </a>
</li>

If yes, how do I get the information back in the details page? Or do I need to use javacript-links?


Source: (StackOverflow)

set orientation not locking to portrait [duplicate]

This question already has an answer here:

I am building a mobile application using Cordova and Intel app framework. I try to set the orientation to portrait mode

var onDeviceReady = function () {        
    intel.xdk.device.setRotateOrientation('portrait');
    intel.xdk.device.setAutoRotate(false);
    intel.xdk.device.hideSplashScreen();

};
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);`

But when I check the build by installing the APK in Android 4.4, it doesnt work. It always rotate in both modes. Any suggestions?


Source: (StackOverflow)

Mobile WYSIWYG editor: Alternatives or a guide to XDK AppDesigner

I recently (4 days) stumbled upon Intel XDK to develop hybrid html5 apps and it looks very promising and powerful.

I wanted, for learning purposes, to design a simple application (a single view application with some buttons, a list and a swipe menu) using one of the XDK integrated UI frameworks like JQuery mobile or AppFramework 3.

To achieve my goal I started a new project using AppDesigner and I followed the official Intel XDK video tutorials.

However those tutorials refer to an older version of AppDesigner, and some things now are missing / different in the current version (2727).

I also encountered many different problems (button groups with different buttons size, misplaced elements, apparently random behaviours, crashes...) to the point that I can't use it even for simple tasks like putting something different than a title on a footer.

So I came up with 2 alternatives:

1- AppDesigner, right now, is bugged like hell. In this case are there any FREE WYSIWYG editors that target mobiles and offer the same feeling and functionalities of AppDesigner (drag&drop functionalities, preview on an emulated phone etc.) ? I don't have any preferences about the graphic framework used, so if an editor works only on AppFramework, Ionic or another it would be ok anyway. OFFLINE editors are prefered. It would be fine even if someone finds a link to older versions of XDK, so I can use the same used in the tutorials.

2- I failed to understand how AppDesigner works. As said however the official video tutorials are outdated. So is there a more recent guide (video tutorials are prefered, but a book / guide would be fine anyway) that targets a more recent version of AppDesigner and covers almost every basic functionality?

Many thanks


Source: (StackOverflow)

Scroll DataTables with Intel XDK app Framework

I'm new to DataTables so accept my apologies if this is silly...

I'm trying to integrate datatables on the intel xdk app framework. While the datatable expands the vertical length of the div it doesn't expand the horizontal length and I can't seem to scroll. Here is the code.

I'm not sure how to provide an example for the xdk app framework but if someone let's me know I'm glad to post.

Thanks!

Addendum:

I don't know if this will help, but if you hit the table just right it scrolls. It's almost like it's not registering the click or something else is registering it on a top layer. Every one in 10/20 tries though it scrolls correctly. It almost appears that the app framework is not passing control/focus to the DataTable correctly. How can I fix that? Hopefully that helps someone!

   var table = $('#table').dataTable( {
        "symbol": symbol,
        "exchange": exchange,
        "aoColumns": columnData,
        "aoColumnDefs": [
        { "aTargets": [0],      "mRender": function (data, type, full) {return dateFormat(data)} },
        { "aTargets": [1],      "mRender": function (data, type, full) {return numberWithCommas(data)} },
        { "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
        ],
        "aaSorting": [[ 0, "desc" ]],
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bProcessing": true,
        "sScrollX": "100%",
        "bScrollCollapse": true,
        "bServerSide": true,
        "sAjaxSource": str,
        "bDeferRender": true,
        "fnServerData": function( sUrl, aoData, fnCallback ) {
            $.ajax( {
                "url": sUrl,
                "data": aoData,
                "success": fnCallback,
                "dataType": "jsonp",
                "cache": false
            } );
        }
    } );

Source: (StackOverflow)

Intel XDK side panel scrolls only if long enough at initalization

I'm using the app mobile framework and think I've found a bug regarding the scrollbar. If the side panel is long enough to scroll at initialization, I can scroll after rotation. However, if the app starts in portrait mode (no scroll required) and then I rotate to landscape, then there is no scrollbar. Here's the relevant code below. Right now I have a bunch of "hello's" so that the scrollbar is always there. How to get it to scroll without them?

<div class="inner-element uib_w_21 uib_sidebar rightbar bar-bg" data-uib="layout/right_sidebar" data-ver="0" data-anim="{'style':'overlap', 'v':200, 'side':'right'}" id="rightPanel">
    <div class="sidebar-content">

        <div class="grid grid-pad urow uib_row_12 row-height-12" data-uib="layout/row" data-ver="0">
            <div class="col uib_col_13 col-0_12-12" data-uib="layout/col" data-ver="0">
                <div class="widget-container content-area vertical-col">

                    <div class="widget uib_w_22 d-margins" data-uib="media/text" data-ver="0">
                        <div class="widget-container left-receptacle"></div>
                        <div class="widget-container right-receptacle"></div>
                        <div>
                            <p>Settings:</p>
                        </div>
                    </div><span class="uib_shim"></span>
                </div>
            </div>
            <span class="uib_shim"></span>
        </div>

        <div class="grid grid-pad urow uib_row_13 row-height-13" data-uib="layout/row" data-ver="0">
            <div class="col uib_col_14 col-0_12-12" data-uib="layout/col" data-ver="0">
                <div class="widget-container content-area vertical-col">

                    <div class="widget uib_w_23 d-margins" data-uib="media/text" data-ver="0">
                        <div class="widget-container left-receptacle"></div>
                        <div class="widget-container right-receptacle"></div>
                        <div id=rightpanel_container style="overflow-y:scroll">
                            <p> hello there! hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!hello there!</p>
                            <div>
                                <div class="widget-container content-area vertical-col">
                                    <label for="startdate">Start Date:</label>
                                    <input type="date" name="startdate" id="startdate" value="2014-02-01" class="jq-ui-forms">
                                    <span class="uib_shim"></span>
                                </div>
                                <div class="widget-container content-area vertical-col">
                                    <label for="enddate">End Date:</label>
                                    <input type="date" name="enddate" id="enddate" value="2014-03-01" class="jq-ui-forms">
                                    <span class="uib_shim"></span>
                                </div>
                            </div>
                            <div class="widget-container content-area vertical-col">
                                <div id="fieldOptions">
                                    Field Options Go here
                                </div>
                            </div>
                            <div class="widget-container content-area vertical-col">
                                <a class="button widget uib_w_26 d-margins icon error" data-uib="app_framework/button" data-ver="0" id="removeFavorite-button">Remove Stock from Favorites</a>
                                <a class="button widget uib_w_27 d-margins icon add" data-uib="app_framework/button" data-ver="0" id="addFavorite-button">Add Stock to Favorites</a>
                                <a class="button widget uib_w_18 d-margins icon check" data-uib="app_framework/button" data-ver="0" id="settings-done-button">Done</a>
                            </div>
                        </div>
                    </div><span class="uib_shim"></span>
                </div>
            </div>
            <span class="uib_shim"></span>
        </div>
    </div>
</div>

Source: (StackOverflow)

Injecting Maven project information into Swing Application Framework resources?

I have a Maven project using the Swing Application Framework and would like to inject project information from the pom.xml into my application's global resources to avoid duplication.

The base application (provided via netbeans) uses Application.title, Application.version, Application.vendor, Application.description resources etc for Window titles and about box configuration but I can't find a way to set these values programatically at run time and I'm not a maven maven so don't have the skills to inject them at build time.

Anyone have any recommendations on how best to achieve the desired result?


Source: (StackOverflow)

How to use panelload/panelbeforelod in appframework 3

af3 removed data-load, I notice it added panelload, but it won't trigger in my app, here is my code, any one can help?

<div data-left-drawer="left" class="panel" id="plugins" data-title="plugins" panelload="plugins_load" panelbeforeload="plugins_beforeload">
                loading...
 </div>

and function defined:

var plugins_beforeload = function(obj) {
    alert('plugins_beforeload');
}

Source: (StackOverflow)

Cordova/appFramework app shows up blank on iOS

I've a very simple hybrid mobile application developed with Cordova and appFramework.

index.html looks like this

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and
    height=device-height attributes. See https://issues.apache.org
    /jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1,
    maximum-scale=1, minimum-scale=1, width=device-width, 
    height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/index.css" />

    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/main.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/appframework.css" />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/lists.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/forms.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/buttons.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/badges.css"  />      
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/grid.css"  />

    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/android.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/win8.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/bb.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/ios.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/ios7.css"  />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="css/af/tizen.css"  />

    <title>Cordova Application</title>
    <script type="text/javascript" charset="utf-8"
    src="js/vendor/appframework.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.scroller.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.css3animate.js"></script>

    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/appframework.ui.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/fade.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/flip.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/pop.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slide.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slideDown.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slideUp.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.slidemenu.js"></script>

    <script>
        $.ui.ready(function () {
            console.log("UI Ready!!!");
        });
        $(document).ready(function() {
            console.log('Document Ready...');
            alert('Document Ready...');
        });
    </script>
</head>
<body>
    <div id="afui">
        <div id="header">
        </div>
        <div id="content">
            <div data-title="Home" class="panel"
                                 id="main" selected="true">
                <span>THIS is the HOME Page!</span>
            </div>
            <div data-title="Second Page" class="panel" id="second">
            </div>
        </div>
        <nav>
            <div class="title">Nav Home</div>
            <ul>
                <li><a class="icon home mini"
                                    rel='nofollow' href="#main">Home Link</a></li>
                <li><a class="icon mini"
                                    rel='nofollow' href="#second">Second Link</a></li>
            </ul>
        </nav>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
</body>
</html>

This shows up correctly and even the navigation is wired up when opened in Safari or Chrome desktop browsers.

But if I run it in either iOS or Android emulators, I see the alert 'Document Ready' and after that blank page. Home panel is not displayed.

Here is what I do to run the emulators.

 cordova emulate ios
 cordova emulate android

Even if I open the index.html files directly from the platform builds they show up correctly on the desktop browser.

I'm pretty new to all this so I may be missing steps here. Any help would be appreciated.


Source: (StackOverflow)

Appframework jquery plugin breaks app

I'm trying to use jquery ui:s autocomplete widget in an appframework phonegap app. I'm using the jq.appframework.js plugin as per the documentation, like so:

<script src="appframework/jquery.js"></script>
<script src="appframework/jq.appframework.js"></script>
<script src="appframework/appframework.ui.js"></script>
<link rel="stylesheet" rel='nofollow' href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

But when the page loads the app breaks and I get the following console error:

uncaught TypeError: Cannot read property '__events' of undefined.

Its the following row (the second one, nr 261) that throws the error in jq.appframework.js:

   $.bind = function (obj, ev, f) {
   if (!obj.__events) obj.__events = {};

Not sure how to proceed with this, all help much appreciated!


Source: (StackOverflow)

intel XDK how to define permissions manully

i'm developing app using XDK new editor and it contains a list which is update by JSON (getJSON).app working correctly with XDK Emulator.but not with real device. i want to know how to set network connection permission manually to the app.


Source: (StackOverflow)