Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 22    Views: 81

bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
12/19/13 10:48 AM (11 years ago)

Programming a Segue: How to setup the HTML

Hello all, Been following Buzz-touch for some time but just now starting to make plugins. I am building the simple agreement splash that is in the Webinar David did some time ago. I have figured out how to do everything as far as getting HTML in place for images/colors/strings and also coding it. However, the issue I am running into is setting up a segue when the user clicks a button. I want to be able to let the user choose which screen to use sorta like the Simple Menu plugin. I am trying to find an example of what I am looking for but have had no luck. I thought for sure someone what have a simple transition from an action example but I have not found one. I have been dissecting the Simple Menu to try to pull the code out for the segue and I have done that without to much trouble. I know android and Objective C very well, but the trouble I am having is with the HTML. I have done very little HTML. So I am trying to figure out how to pull the elements/info I need from the simple menu to do a segue without the list of them. I only need one segue so it would be nice if it just pulls up the current segue and if no segue then just have it blank. So as far as what I have done. I am thinking that maybe redesigning it completely is the way to go as far as the HTML goes because the Simple Menu has alot of stuff that is not needed for what I need. Can someone point me in the right direction as to how to design the elements and information that I need to segue. Thanks in Advance, Sean
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 11:58 AM (11 years ago)
So, if you're wanting to load one screen from another, the code is really simple: NSString *itemIdToLoad = [BT_strings getJsonPropertyValue:self.screenData.jsonVars nameOfProperty:@"itemIdToLoad" defaultValue:@""]; BT_item *screenObjectToLoad = [appDelegate.rootApp getScreenDataByItemId: itemIdToLoad]; [self handleTapToLoadScreen:screenObjectToLoad theMenuItemData:nil]; You mention HTML though - that is a bit trickier. I take it your plugin uses a UIWebVIew to display content, and you're trying to make a link click in that web view load the screen? For that, you'll need to detect URL changes in the webview and if the url to be loaded matches some pre-defined value (like the item id of the screen to load), then stop action on the webview and instead load the code above. See my HTML Pro plugin for how I do this there.
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 12:05 PM (11 years ago)
hey Chris, Thanks for the reply. So you are right I figured out the code without a issue. The issue I am having is how to get the JSON information into the app so it knows where to segue. This would be done through the HTML sections that you write for your plugin. This is so the user can input which screen they want to segue to from the "control panel". So not positive what it is called. The place where you can change strings, colors and images on plugins. Sorry for the confusion. Thanks, Sean
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 12:07 PM (11 years ago)
Oh ok - you're talking about the control panel then. You want something like this then: <!-- ##################################################### --> <!-- ############### Menu properties ######### --> <div class='cpExpandoBox colorLightBg' id="section_menuProperties"> <a href='#' onClick="fnExpandCollapse('box_menuProperties');return false;"><img src='../../images/arr_right.gif' alt='arrow' />Menu Properties</a> <div id="box_menuProperties" style="display:none;"> <table style='padding-top:15px;'> <tr> <td style='vertical-align:top;padding-left:0px;'> <b>Data URL</b> (Advanced users only - used instead of manually entering child items on this page)<br/> </td> </tr> <tr> <td style='vertical-align:top;padding-left:0px;padding-top:5px;'> <input type="text" name="json_dataURL" id="json_dataURL" value="" /> </td> </tr> </table> <div class='boxButton'> <input type='button' title="save" value="save" align='absmiddle' class="buttonSubmit" onClick="saveAdvancedProperty('saveResult_menuProperties');return false;"> <div id="saveResult_menuProperties" class="submit_working">&nbsp;</div> </div> </div> </div> <!-- ############### end Menu properties ##### --> <!-- ##################################################### -->
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 12:08 PM (11 years ago)
Save code like that as an html file, and include it in your config_cp.txt file.
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 12:14 PM (11 years ago)
Ok cool thanks. just a couple more questions. The data URL, isn't that the URL that tells buzztouch apps where to pull data from? If this is the case then that is not going to get the screen we need for the app, will it? I need to get the information on which screen to segue to. Here is the HTML I am working on right now. I have not tested it yet and I am sure it is full of bugs but it is a work in progress. I am trying to make it so people can choose from the select menu which screen they want to segue to and also be able to create a new one right from here. Any ideas? <!-- ################################################# --> <!-- ############### child items property ############--> <div class='cpExpandoBox colorLightBg'> <a href='#' onClick="fnExpandCollapse('box_childItems');return false;"><img src='https://www.buzztouch.com/images/arr_right.gif' alt='arrow' />Menu Row Items</a> <div style='margin-top:10px;margin-bottom:10px;'> Create menu rows to show on the screen. For each row, select which screen loads by entering (or selecting) it's nickname in the "New or Existing" screen box. </div> <!-- add new child item --> <table cellspacing='0' cellpadding='0' style='margin:10px;margin-left:0px;'> <tr> <td style="vertical-align:top;padding-left:0px;"> <div style='padding-top:5px;'> <b>Row Title</b><br/> <input name='addMenuItemText' id='addMenuItemText' type='text' value="" /> </div> <div style='padding-top:5px;'> <b>New or Existing Screen</b> &nbsp;&nbsp; <img src="https://www.buzztouch.com/images/arr_right.gif" alt="arrow"/> <a href="../../../app/cp_v20/bt_app/bt_pickerScreen.php?appGuid=JAB32D6DA31E13EE4792EE034&formElVal=addScreenNicknameId&formElLabel=addScreenNickname" rel="shadowbox;height=750;width=950">Select</a> <br/> <input type="text" name="addScreenNickname" id="addScreenNickname" value=""> <input type="hidden" name="addScreenNicknameId" id="addScreenNicknameId" value=""> </div> <div style='padding-top:5px;'> <b>Choose if adding a screen</b><br/> <select name="addPluginUniqueId" id="addPluginUniqueId" style="margin:0px;width:250px;"> <option value="">I entered an existing screen above...</option> <option value=''>&nbsp;&nbsp;</option> <option value=''>--Menu screens--</option> <option value="menuListSimple">&nbsp;&nbsp;&nbsp;Menu Simple</option> <option value="menuButtons">&nbsp;&nbsp;&nbsp;Menu Buttons</option> <option value=''>&nbsp;&nbsp;</option> <option value=''>--Content Screens--</option> <option value="customHTML">&nbsp;&nbsp;&nbsp;Custom HTML / Text</option> <option value="pptDoc">&nbsp;&nbsp;&nbsp;PowerPoint Doc</option> <option value="locationMap">&nbsp;&nbsp;&nbsp;Location Map</option> <option value="htmlDoc">&nbsp;&nbsp;&nbsp;HTML Doc</option> <option value="excelDoc">&nbsp;&nbsp;&nbsp;Excel Doc</option> <option value="wordDoc">&nbsp;&nbsp;&nbsp;Word Doc</option> <option value="pdfDoc">&nbsp;&nbsp;&nbsp;PDF Doc</option> <option value="customURL">&nbsp;&nbsp;&nbsp;Custom URL</option> <option value="blankScreen">&nbsp;&nbsp;&nbsp;Blank Screen</option> <option value="quiz">&nbsp;&nbsp;&nbsp;Interactive Quiz</option> <option value="apigee">&nbsp;&nbsp;&nbsp;apigee</option> <option value="LR_videoWithInfoScreen">&nbsp;&nbsp;&nbsp;Video with Info</option> <option value="LR_user_agreement_eula">&nbsp;&nbsp;&nbsp;Agreement Splash</option> <option value="LR_interactiveScreen">&nbsp;&nbsp;&nbsp;InteractiveScreen</option> <option value=''>&nbsp;&nbsp;</option> <option value=''>--Splash Screens--</option> <option value="splash">&nbsp;&nbsp;&nbsp;Splash Screen</option> <option value=''>&nbsp;&nbsp;</option> <option value=''>--Settings Screens--</option> <option value="settingsDevice">&nbsp;&nbsp;&nbsp;Device Info</option> <option value="settingsLocation">&nbsp;&nbsp;&nbsp;Allow GPS</option> <option value="settingsLogin">&nbsp;&nbsp;&nbsp;Login Screen</option> <option value=''>&nbsp;&nbsp;</option> <option value=''>--Other Actions--</option> <option value="shareEmail">&nbsp;&nbsp;&nbsp;Share via Email</option> <option value="sendEmail">&nbsp;&nbsp;&nbsp;Send Email</option> <option value="shareSMS">&nbsp;&nbsp;&nbsp;Share via SMS (Text Message)</option> <option value="launchNativeApp">&nbsp;&nbsp;&nbsp;Launch Native App</option> <option value="sendSMS">&nbsp;&nbsp;&nbsp;Send SMS (Text Message)</option> <option value="callUs">&nbsp;&nbsp;&nbsp;Call Us</option> <option value=''>&nbsp;&nbsp;</option> <option value=''>&nbsp;&nbsp;</option> </select> </div> <div class='boxButton'> <input type='button' title="save" value="save" align='absmiddle' class="buttonSubmit" onClick="saveAdvancedProperty('saveResult_segue');return false;"> <div id="saveResult_segue" class="submit_working">&nbsp;</div> </div> </td> </td> <td style='vertical-align:top;padding-left:15px;'> <div style='padding-top:5px;'> <b>Indicator Type</b><br/> <select name="addRowAccessoryType" id="addRowAccessoryType" style="width:250px;"> <option value="" selected >Default Arrow</option> <option value="details" >Details Indicator</option> <option value="none" >None</option> </select> </div> <div style='padding-top:5px;'> <b>Transition Type</b> (iOS Only) <br/> <select name="addTransitionType" id="addTransitionType" style="width:250px;"> <option value="" selected >Default transition type</option> <option value="fade" >Fade</option> <option value="flip" >Flip</option> <option value="curl" >Curl</option> <option value="grow" >Grow</option> <option value="slideUp" >Slide Up</option> <option value="slideDown" >Slide Down</option> </select> </div> <div style='padding-top:5px;'> <b>Sound Effect File Name</b> &nbsp;&nbsp; <img src="https://www.buzztouch.com/images/arr_right.gif" alt="arrow"/> <a href="../../../app/cp_v20/bt_app/bt_pickerFile.php?appGuid=JAB32D6DA31E13EE4792EE034&formEl=addSoundEffectFileName&fileNameOrURL=fileName&searchFolder=/audio" rel="shadowbox;height=550;width=950">Select</a> <br/> <input type="text" name="addSoundEffectFileName" id="addSoundEffectFileName" value=""> </div> </tr> </table> </div> </div> <!-- ############### end child items properties ########## --> <!-- ##################################################### -->
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 12:19 PM (11 years ago)
Usually, yes the dataURL loads childItems from an external script. It's however your plugin uses the property called "dataURL" though. I was just giving that as an example. Since you're trying to add menu/child items, rather than just a single property, it's a bit more complex. If you have the self-hosted software, look at the bt_v15/bt_includes/btSection_childItems.html file for a good example of what you need to do.
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 01:03 PM (11 years ago)
Wow, this is turning out to be a bit more complicated then I thought. I guess this would explain why no one has created many plugins with buttons that segue to screens chosen in the control panel. Well I will start playing with it. But just to give me an idea of what needs to happen. First a child item is just a set of JSON inside JSON? aka { "Stuff" : "Stuff2", "childItem" : { "stuff3" : "stuff3" }, "childItem2" : [ { "stuff4" : "stuff4"}] } childitem one and two would both be child items but one is just an array of JSON objects. Are both childItem one and two legal childItems? Should I just write my own Javascript function to parse and build the child items? I am assuming that is what the Javascript is doing in the HTML you pointed me to? It seems like the objective of the Javascript is to build the array of child items in such a way that can be interpreted by buzz touch. if this is the case then I will probably be better off just building my own data and then parsing it myself in the code. So with this in mind i just need to figure out how to get the object ID's of all the screens in there app and/or figure out how to make a new screen. Thanks for any help, Sean
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 01:05 PM (11 years ago)
The JSON is actually being parsed via PHP on the backend, since it's being inserted into the database. Child items should be in this format: {"itemId":"yourMainScreenId","itemType":"pluginClassName","childItems":[ {"itemId":"childItem1","itemType":"childItemType","key1":"value1"}, {"itemId":"childItem2","itemType":"childItemType","key1":"value2"} ]}
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 01:07 PM (11 years ago)
Ummm so if I do not need an array, can I just remove it? or is there a better way to do it if i do not need an array? thanks, Sean
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 01:10 PM (11 years ago)
If you don't need to let the user add any number of objects, then yes, I would do away with child items. Let's say you have 2 (and only 2) buttons on your screen. You could simply use preset JSON properties for each button: {"itemId":"screenId","itemType":"className","button1":"value1","button2":"value2"} Now, you can let the user assign screen id's to "button1" and "button2", and have your code look at those values to perform some action. Much simpler than child items. If you're wanting the user to add however many buttons they want, though, then you'll need the more complicated approach.
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 01:15 PM (11 years ago)
Ok sounds much easier that way. So can I look up the screen ID in the app and is that the only thing I need to look up? I could just have an entry for the button that takes a screen name and then in the code I will match the screen name to an ID and then with that ID I can segue? Is there any way to access the current screen names and the current installed plugins in the HTML on the control panel? Thanks, Sean P.S I will only have one button on the screen and only one so.
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 01:17 PM (11 years ago)
<div style='padding-top:5px;float:left;width:250px;'> <b>Load Screen Nickname</b> &nbsp;&nbsp; <a href="#" onClick="fnPickScreen('json_button1id', 'json_button1nickname');return false;"><img src="../../images/arr_right.gif" alt="arrow"/>Select</a> <br/> <input type="text" name="json_button1nickname" id="json_button1nickname" value="" style="width:225px"> <input type="hidden" name="json_button1id" id="json_button1id" value=""> </div>
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 01:18 PM (11 years ago)
Now, they can press "select" to select one of their screens, and it will automatically create two JSON properties: "button1id" "button1nickname" You can use either property in your code to load the screen.
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 01:21 PM (11 years ago)
Sweet man!! Thanks a ton for the help I will be coding this right away and then I will report back for others trying to do the same thing. Thanks, Sean
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 01:24 PM (11 years ago)
Sorry double post.
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 04:07 PM (11 years ago)
Hey I got one more issue related to the handleTapToLoadScreen function. On my current class I have no function call that is named that. I did notice that BT_ViewCOntrollerManager does have that function but there is another parameter that i ma not sure what it is. [BT_viewControllerManager handleTapToLoadScreen:screenObjectToLoad theMenuItemData:nil theScreenData:nil]; When I call this it does nothing saying it cannot find the ID of that screen.
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 04:10 PM (11 years ago)
are you working on a 2.0 or 3.0 project? If 3.0, the method has changed - it's now in the BT_viewController class. If 2.0, call it like this: [BT_viewControllerManager handleTapToLoadScreen:nil theMenuItemData:nil theScreenData:screenObjectToLoad];
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 04:12 PM (11 years ago)
I am pretty sure I am using the latest one. 3.0 because the HTML section files now have there own files for each section. I think this is a 3.0 thing. How can I tell for sure?
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 04:14 PM (11 years ago)
If you have a BT_viewControllerManager file, then it's not an iOS 3.0 project.
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 04:25 PM (11 years ago)
Ummm ok then how do I get a 3.0 project? The way I have done it so far is go to download the code. And then I click prepare ios project then download the package. Is this not the way to get the latest version? Thanks, Sean
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
12/19/13 04:26 PM (11 years ago)
When you prepare the project, there are two links - the top one prepares the old format, and the bottom says "prepare for iOS 3.0"
 
bobisback
Code is Art
Profile
Posts: 24
Reg: Sep 22, 2012
Pensacola
1,540
like
12/19/13 04:35 PM (11 years ago)
Oh haha, see I thought it meant it was going to build the project for iOS 3.0..... not buzztouch 3.0..... umm maybe they should change that. But I get it now. Thanks for the help, Sean
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.