Menu is not shown on iOS

[dewang]

Hi,

I am using the following script to create menus on my index.html page after having included the desired index.js file and the 4 files from the NativeControls folder inside the Plugin folder. The script I am using to create index.html is below (the same that we use for Android), but it doesn't work. I see no menu at all in my iPhone application.

Can you please advice. We are using deploying and testig it on iPhone 4.0

<script type="text/Javascript">
        var onDeviceReady = function() {                

            var toolbar = document.createElement('menu');
            toolbar.setAttribute('type', 'toolbar');
            toolbar.setAttribute('label', 'Home');

            var commandLogout = document.createElement('command');
            commandLogout.setAttribute('label', 'Logout');
            commandLogout.setAttribute('action', function() { alert('Logout'); });

            var commandAdd = document.createElement('command');
            commandAdd.setAttribute('icon', 'img/plus.png');
            commandAdd.setAttribute('action', function() { alert('Add'); });

            var commandBack = document.createElement('command');
            commandBack.setAttribute('label', 'Back');
            commandBack.setAttribute('accesskey', 'back');
            commandBack.setAttribute('action', function() { alert('Back'); });

            toolbar.appendChild(commandLogout);
            toolbar.appendChild(commandAdd);
            toolbar.appendChild(commandBack);

            // Context Menu

            var context = document.createElement('menu');
            context.setAttribute('type', 'context');

            var commandHome = document.createElement('command');
            commandHome.setAttribute('label', 'Home');
            commandHome.setAttribute('icon',  'img/house.png');
            commandHome.setAttribute('action', function() { alert('Home'); });
            commandHome.setAttribute('disabled', true);

            var commandSearch = document.createElement('command');
            commandSearch.setAttribute('label', 'Search');
            commandSearch.setAttribute('icon',  'img/magnifyingglass.png');
            commandSearch.setAttribute('action', function() { alert('Search'); });

            var commandSettings = document.createElement('command');
            commandSettings.setAttribute('label', 'Settings');
            commandSettings.setAttribute('icon',  'img/preferences.png');
            commandSettings.setAttribute('action', function() { alert('Settings'); });

            context.appendChild(commandHome);
            context.appendChild(commandSearch);
            context.appendChild(commandSettings);

            // context.removeChild(commandHome);
        };

        $(document).ready(function() {              

            $.IE.UI.Reset('#reset_Passcode', {
                    resetElement: '#txt_Passcode'
                }
            );

            var url = window.location.pathname.slice(1),
                helpBack;

            $(".nav-link").Touch(function(e) {
                if ($(this).hasClass("help-back")) {
                    url = helpBack;
                    helpBack = null;
                }
                else if ($(this).hasClass("help")) {
                    helpBack = url;
                    url = $(this).attr("href");
                }                   
                else {
                    url = $(this).attr("href");
                    helpBack = null;
                }

                if (url != "index.html") {
                    $("body").html("");
                    window.scrollTo(0, 0);
                    $("body").load(url);
                }
                else {
                    location.href = url;
                }
            }, navigator.userAgent.indexOf("Android") == -1 ? "touchend" : "touchstart");

            window.addEventListener('load', function() {
                document.addEventListener('deviceready', onDeviceReady, false);
            }, false);
        });
    </script>

[mwbrooks]

Hi @dewang,

You mentioned that you added the 4 Objective-C files to the Plugins directory. Did you also add the same files to the Plugins directory within the Xcode project. You can do this by dragging the 4 files into Xcode's "Plugin" directory or right-click on the "Plugin" directory and add the 4 existing files.

[mwbrooks]

@dewang, here is the generated Xcode project that runs on my system:

http://dl.dropbox.com/u/30262219/ie/phonegap-plugin-menu-ios.zip

[dewang]

Hi, The way we were building that was to do an Ant Build on windows to get a zip file of our application. We then copied that zip to Mac and compiled using MAC. I had a look at the zip file and it did not have any file in the plugin folder.

Now, I am trying to use those files and we are getting compilation errors. So I went back to the simplest hello world applcaion by installation phoneGap on Mac and creating a PhoneGap application. The application is compiled correctly. Then I tried to include the 4 objective c files to the plugins directory and now I am getting 56 compilation errors.

Do you know if we need to have anything else as well apart from these 4 file to use the menu in our app.

Cheers

[mwbrooks]

Hi @dewang,

You should not receive compilation errors when dealing with a plugin. Typically, it would be a runtime error because Objective-C PhoneGap plugins use dynamic bindings.

Since you are receiving compile errors, I think you may not be using the latest version of PhoneGap-iOS (0.9.6). If you haven't updated, can you download and run the latest PhoneGapLibInstaller.pkg.

I also realized that there is another step that you will need to do in order to use the menu plugin on iOS (this is a recent addition as of 0.9.6). You will need to update the PhoneGap.plist to include the menu plugin. Below I'll describe how.

Installing the Plugin:

• Create a PhoneGap 0.9.6 project
  • It is possible to upgrade a project but difficult
• Copy the 4 Objective-C files to MyProject/Plugins/
• Open the XCode project and add the 4 files to the project's plugin directory
  • You can drag the files into the XCode plugin folder
  • or
  • Right-click on the XCode plugin folder and select "Add Existing Files"
• Add Menu plugin to PhoneGap.plist
  • Screenshot
  • Open XCode
  • Expand the MyProject > Supporting Files > PhoneGap.plist
  • Expand the key: `Plugins
  • Add a new row to Plugins
  • Key: NativeControls2
  • Value: NativeControls2
• Add the JavaScript interface and include it in your HTML

[ Edit: Added a screenshot for editing the PhoneGap.plist ]

Let me know if this helps, Michael

[dewang]

Hi,

Many thanks for your help. The adding menu plugin to PhoneGap.plist did the trip. We are able to compile menu in our demo application now. We can close this issue now. Thanks again.

[mwbrooks]

Great to hear. I'll be sure to update the iOS Getting Started Docs too.