Part 2
READ NOW THE PART 1!
Thank Seblogapps for images and this part of the guide!
Start:
- Go to App Inventor
We open our project and insert the following components in the Design Editor.
1) a Button
2) a WebViewer
3) a Clock
In this example I will show you the contents dell'Horizontal Arrangement (Ha_app) would in practice the content of your application
This is the overview of the project, it is important to emphasize that Screen1 (and possibly all other existing screen) should have the flag "scrollable" enabled, once the user clicks the banner will have a web page definitely the highest of 'height of our screen, so it is important to give the user the ability to scroll the page.
Let's see now the property of the WebViewer component:
It 'important to include in HomeUrl the exact address and full of our page containing the only banner advertising (as set out in Part 1 of the tutorial "http://yoursite.altervista.org/ad.html"), let flagged followLinks (if we do not will not be accepted any click on the sponsor)
Width must be put in "fill parent" and above Height in "automatic" so that the WebView can resize to show all content of advertising when it is needed.
The clock component is very simple, there must only generate an event every second:
Why do we need this element we see it right away,
Now we analyze the code to insert into the Blocks Editor, you look the part relating to Clock1_Ads.Timer for now:
Explanation of the code (this is perhaps the most important part of the whole tutorial) ...
Just part of the app, we'll see the banner (because it is loaded from the WebView at HomeUrl)
the button to return to the app (this can always be visible as in my example, or you can make it visible only when the ad is displayed)
And of courseyou will seethe main contentof the appitself.
So basically this is the "normal" state of our application when the user will use:
In this state you look at the still image of the Blocks editor with the windows open to watch (debug) active
we notice these things:
1) ownership WebViewer_Ads.CurrentUrl (which gives us the address of the current page) is the same as our "base" address (HomeUrl) where we loaded our banner
in the example in question is equal to http: //venicetideads.altervista.org...xxxxx.html
2) the propertyis equal toWebViewer_Ads.Height64pixel(the height of the banneronlyinpractice)
Now we have to figure out how we can, through App Inventor, capture the event click on our banner, as with all software problems there are various ways to go, I set before you what I have found it easier, if you find something better let me know: ).
If the userclicks on the ad, theCurrentUrlwill no longer beequal to theinitialHomeUrlbut it will bethe web addresswiththe contents of theadvertisements themselves, thisisthe key toeverything!
Well, using this factwe can understandso if it isinthatmoment, the userhas clicked on thebanner.
Given that unfortunately there is an event that is generated at the click of advertising, we have to check every second (for this we need the component clock) if CurrentUrl = HomeUrl;
When there is the same we have to show the advertisement in full screen and hide our application.
Simulating what actually happens with the Eclipse app scheduled to click on the banner.
Look what we have in fact put in the block Clock1_Ads.Timer; If a condition
ie; if CurrentUrl is different from HomeUrl, hide the app (ie make "false" the visible property dell'Horizontal arrangment that contains our app)
This isall thatis needed toproperly displayouradvertising...
Let us now always with the watch window of what happened after the user has clicked on the banner:
As you can see the CurrentUrl is now different from HomeUrl and then after about a second hide our app and we display in its place advertising.
The advertising will automatically adapt to the necessary height because we defined the Height of WebView in automatic :)
This is for example the result in our tests, before and after the click:
Now we have to do is program the key which brings us back to our app,
Unfortunately it is not possible to program the AI back button (pressing it come out the application).
We must then place in a clearly visible position a button that we can call "back to the app" or "main menu" or Cmq something that is clearly and immediately understandable by the user of the app.
Whenthis button is pressedwe have tobring everything backto the initial conditions(such as whenwe launchedtheapp)
Then reload the WebView with the address stored in HomeUrl (will be then closed the previous advertising and showed a new banner)
For safety, we set the height of the webview at a fixed value of 64pixel (this is the value of banner ads), if we do not we run the risk that the banner will continue to deal with too large a portion of the screen hiding the fact of our app.
Finally we make it visible again our main part of the app by setting to "true" the visible property dell'Horizontal Arrangement.
Nessun commento:
Posta un commento