KPWatts

Q: help with debugging in iadproducer

Hi,

I am new to iadproducer and am struggling with the interface and lack of searchable documentation.  I have a few questions which will get just set me up to get going:

1) The marketing blurb indicates there are great debugging tools with one click breakpoints etc. I cannot find this. If I am in the JS Code editor, no matter where i click I cannot set a break point. So this question is a little bigger than just break poiints - How do I activate and use a debugger in iadproducer.

2) If I make silly syntax mistakes in Javascript like coding an if statement with a then or using an incorrectly spelt property, the code continues fine and has weird behaviour. Would be great if it would let me know i screwed up. I am sure there must be a hidden output window somewhere that will inform me of such mistakes?

3) the marketing blurb also indicates the tool has autocompletion. I have struggled to find this also. I am assuming this means if I have a layer variable and add a dot I should get to see all properties of a layer.

4) Documentation. Here I am asking a specific question on documentation I cannot find. My real goal is to understand how to find similar answers... I have some example code using layer.style.top - how would I find documentation describing this?

 

Pointers to get me going with the above javascript development components of this tool greatly appreciated.

Regards

Paul

iBook, OS X Mavericks (10.9)

Posted on Jan 14, 2014 6:32 PM

Close

Q: help with debugging in iadproducer

  • All replies
  • Helpful answers

  • by markmalone,Helpful

    markmalone markmalone Jan 14, 2014 8:25 PM in response to KPWatts
    Level 2 (210 points)
    Jan 14, 2014 8:25 PM in response to KPWatts

    Hello,

     

    1) The marketing blurb indicates there are great debugging tools with one click breakpoints etc. I cannot find this. If I am in the JS Code editor, no matter where i click I cannot set a break point. So this question is a little bigger than just break poiints - How do I activate and use a debugger in iadproducer.

     

    iAd Producer uses the same debugging facility as Safari - Web Inspector.  It will open automatically when your content is previewed if the "Show Web Inspector When Previewing" menu item under the "Preview" menu is checked. 

     

    You can find more about debugging under the "Debug your project" section of the built-in help by selecting the "iAd Producer Help" menu item under the "Help" menu.

     

    If I make silly syntax mistakes in Javascript like coding an if statement with a then or using an incorrectly spelt property, the code continues fine and has weird behaviour. Would be great if it would let me know i screwed up. I am sure there must be a hidden output window somewhere that will inform me of such mistakes?

     

    The Web Inspector includes a console log and many other helpful features that will help you debug your project.

     

    the marketing blurb also indicates the tool has autocompletion. I have struggled to find this also.

     

    Auto-completion (while temperamental sometimes) can be turned on via "Code Sense" section in the iAd Producer Preferences window found via the "Preferences" menu item under the "iAd Producer" menu.

     

     

    I have some example code using layer.style.top - how would I find documentation describing this?

     

    All visual objects on a page have a layer property which allows you to access/manipulate/style the actual DOM element.   Ideally you'll never need to access these dom elements since the application does so much for you.

     

    Creating a project with iAd Producer is generally a process of using built-in visual Objects for your page layout, Interactions for user events and Actions for animation and such. All these high-level objects are built using a JavaScript and CSS library collectively called iAd JS. Detailed documentation on iAd JS can be found via the "Code Documentation" menu item under the "Help" menu, in any code window under the "Documentation" drop-down menu or at https://developer.apple.com/library/iad/navigation/

     

    Cheers,

     

    -Mark

  • by KPWatts,

    KPWatts KPWatts Jan 14, 2014 9:42 PM in response to markmalone
    Level 1 (0 points)
    Jan 14, 2014 9:42 PM in response to markmalone

    3) The answer on code sense works great - Thanks. The rest - I am making some progress with, but no aha moments...

     

    1) I had webinspector turned on, but it showed me a window of the html my javascript created. I really wanted to step through the javascript as it was creating the html. Based on your direction - i have delved further. I have found the java script files under a resources tab in the inspector. I can set break points etc. Problem is it has alredy run the code by the time i set the breakpoint. So i tried setting the breakpoint and rerunning. Sadly the break point was cleared. hmmm - setting a break point on screenwillappear event still a problem.

     

    2) I have added some silly errors - my "then" on the if statement came out as a syntax error in theconsole log. Thanks for this info... However creating an invalid property gives no warnings or errors. ie setting layer.hide=true; instead of layer.hidden=true; This is now less of an issue now I have codesense switched on, but still feels wrong.

     

    4) I am working a through the "space tours to mars" iad project trying to understand and replicate the "pinch spread" feature. In the javascript code it is doing many things one of which is layer.style.top=0. Again -  not really important I get this specific answer, but I would love to find the documentation to let me know exactly what these properties do, so I can then find the answers to the rest. I agree that iadproducer is great for defining and moving many layers/objects, but some things we need to go to code for. At that point I would love to know how to navigate the documentation. I searched and searched the documentation for layer to answer the above specific question - and come up with nothing.

     

    Thanks again for helping Mark

    - Paul

  • by KPWatts,

    KPWatts KPWatts Jan 14, 2014 10:15 PM in response to KPWatts
    Level 1 (0 points)
    Jan 14, 2014 10:15 PM in response to KPWatts

    OK - i am good with Q1 now. I have stopped running in iadproducer, i run in safari and then set the break point, then reload the page.

     

    So all I am really after now is how to research what is going on in the method calls using the documentation. I will probably start another discussion thread on understanding the pinchspread logic in spacetourstomars, if I am still struggling after finding and reading info on all relevant calls.

     

    Thanks

  • by patixa,Solvedanswer

    patixa patixa Jan 15, 2014 6:32 PM in response to KPWatts
    Level 3 (597 points)
    Jan 15, 2014 6:32 PM in response to KPWatts

    KPWatts wrote:

     

    2) I have added some silly errors - my "then" on the if statement came out as a syntax error in theconsole log. Thanks for this info... However creating an invalid property gives no warnings or errors. ie setting layer.hide=true; instead of layer.hidden=true; This is now less of an issue now I have codesense switched on, but still feels wrong.

     

    Sorry if I sound like a jerk, but "Welcome to JavaScript!". It's a very dynamic langauge with little validation, so "layer.hide" is just as valid as "layer.hidden". This design makes the language very flexible and powerful, but at the cost of unexpected behaviors to those (like me) more familiar with languages with stricter constructs.

     

    4) I am working a through the "space tours to mars" iad project trying to understand and replicate the "pinch spread" feature. In the javascript code it is doing many things one of which is layer.style.top=0. Again -  not really important I get this specific answer, but I would love to find the documentation to let me know exactly what these properties do, so I can then find the answers to the rest. I agree that iadproducer is great for defining and moving many layers/objects, but some things we need to go to code for. At that point I would love to know how to navigate the documentation. I searched and searched the documentation for layer to answer the above specific question - and come up with nothing.

     

    I recommend watching the two WWDC 2013 presentations about iAd Producer:

    • Session 609, "Introduction to iBooks Author Widget and iAd Rich Media Ad Development with iAd Producer 4"
    • Session 611, "Building Advanced iBooks HTML 5 Widgets and iAd Rich Media Ads"

    You can find the videos on the ADC site:

         https://developer.apple.com/wwdc/videos/

    They were invaluable to me!

     

    The Help > Code Documentation menu item is a place to dig through once you have the basic orientation.

     

    Finally, if you're feeling brave, you can use the Remote Web Inspector to introspect the objects and figure out their prototypes and properties. (In JS, objects derive from a "protoype" and not a superclass, so the "__proto__" property defines each object's inheritance.) WWDC 2013 sessions 601 and 603 cover the Web Inspector.

     

    Hope that helps!