{"id":621,"date":"2017-05-03T20:36:54","date_gmt":"2017-05-03T20:36:54","guid":{"rendered":"http:\/\/bitcows.com\/?p=621"},"modified":"2017-05-03T20:36:54","modified_gmt":"2017-05-03T20:36:54","slug":"appcelerator-extending-ui-elements","status":"publish","type":"post","link":"https:\/\/bitcows.com\/?p=621","title":{"rendered":"Appcelerator extending UI elements"},"content":{"rendered":"

If you have every used <NavigationWindow><\/code> in your Alloy code you know that it will only work with iOS. But what if you don’t want to have to duplicate all your code for android?<\/p>\n

\n\/\/ index.xml\n<Alloy>\n    <NavigationWindow id=\"win1\" platform=\"ios\">\n        <Window class=\"container\">\n            <View>\n                <Button onClick=\"showDetails\">Show Details<\/Button>\n            <\/View>\n        <\/Window>\n    <\/NavigationWindow>\n    \/\/ Terrible we are duplicating code!!\n    <Window class=\"container\" platform=\"android\">\n        <View>\n            <Button onClick=\"showDetails\">Show Details<\/Button>\n        <\/View>\n    <\/Window>\n<\/Alloy><\/pre>\n
This is NOT GOOD!<\/p>\n
So then why not use and Require<\/strong> tag? Ok thats not so bad, but then we have to create a new subView.xml file, subView.tss, and subView.js controller for it.<\/p>\n
\n\/\/ index.xml\n<Alloy>\n    <Require platform=\"android\" src=\"subView\"\/>\n    <NavigationWindow id=\"win1\" platform=\"ios\">\n        <Require src=\"subView\"\/>\n    <\/NavigationWindow>\n<\/Alloy>\n\n\/\/ subView.xml\n<Window class=\"container\">\n    <View>\n        <Button onClick=\"showDetails\">Show Details<\/Button>\n    <\/View>\n<\/Window>\n<\/pre>\n
This is BETTER but its still…<\/p>\n
What about if we extended the NavigationWindow<\/strong>? Let see what that might look like.<\/p>\n
\n\/\/ lib\/ui.js\nexports.createNavigationWindow = function(args) {\n    \/***\n     * This will be used for the Android Window\n     * @param {Object} args\n     *\/\n    function navigationWindow(args) {\n\n        this.open = function(options) {\n            args.window.open();\n        };\n\n        \/\/ Convert an iOS openWindow call to Window.open\n        this.openWindow = function(win) {\n            win.open();\n        };\n\n        \/\/ Convert an iOS closeWindow call to Window.close\n        this.closeWindow = function(win) {\n            win.close();\n        };\n    }\n\n    \/\/ Android returns the above function\n    if (OS_ANDROID) {\n        return new navigationWindow(args);\n    } else {\n        return Ti.UI.iOS.createNavigationWindow(args);\n    }\n}; \n\n\/\/ views\/index.xml\n\/\/ Add the module=\"ui\" to NavigationWindow\n<Alloy>\n    <NavigationWindow module=\"ui\" id=\"win1\">\n        <Window class=\"container\">\n            <View>\n                <Button onClick=\"showDetails\">Show Details<\/Button>\n            <\/View>\n        <\/Window>\n    <\/NavigationWindow>\n<\/Alloy>\n\n<\/pre>\n
Ok now we’re talking, but what is this file doing? For starters we are exporting our own createNavigationWindow<\/strong> that our <NavigationWindow module=\"ui\" id=\"win1\"><\/code> tag will call first. <\/p>\n
In this way we intercept the call to the built in Ti.UI.iOS.createNavigationWindow<\/code> and determine who’s calling it and modify the return value. If its iOS<\/strong> we just return the original createNavigationWindow<\/em> since that is what iOS can use. <\/p>\n
If however, if it’s Android<\/strong> we will override the createNavigationWindow<\/em> functions and divert them to the basic open or close functions of the Window class. This way when we call it we don’t need to use any sort of logic to determine which function to call.<\/p>\n
So finally when we call the openWindow<\/strong> it works with both platforms.<\/p>\n
function showDetails() {\n    var win2 = Alloy.createController(\"details\").getView();\n    $.win1.openWindow(win2);\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
If you have every used <NavigationWindow&gt in your Alloy code you know that it will only work with iOS. But what if you don’t want to have to duplicate all your code for android? \/\/ index.xml <Alloy> <NavigationWindow id=”win1″ platform=”ios”> <Window class=”container”> <View> <Button onClick=”showDetails”>Show Details<\/Button> <\/View> <\/Window> <\/NavigationWindow> \/\/ Terrible we are duplicating code!!…<\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":649,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5,15],"tags":[32],"class_list":["post-621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-appcelerator","category-ios","tag-appc"],"_links":{"self":[{"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/posts\/621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=621"}],"version-history":[{"count":0,"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/posts\/621\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=\/"}],"wp:attachment":[{"href":"https:\/\/bitcows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}