Kesbath: Press Me!: Difference between revisions
Created page with "
1. Always use your P Drive!!!! 2. To Test your code. Click the play button shown …> 3. To ‘Deploy’ your working code… Following Testing you MUST deploy the cod..." |
No edit summary |
||
| Line 1: | Line 1: | ||
=== A few tips before you start === | |||
# Always use your home folder. | |||
# To Test your code. | |||
Click the play button shown …> | Click the play button shown …> | ||
# To ‘Deploy’ your working code… | |||
Following Testing you MUST deploy the code. To do this select the Run Menu and Deploy
. | |||
This creates a folder with all the html code to run in a website. | |||
# Add to your website. | |||
Move the folder onto a folder within your VLE page or website. Then provide a link to it, by hyperlinking to the index file in the folder created by your AppStudio deploy. The html file index.html can also be embedded into your home folder. | Move the folder onto a folder within your VLE page or website. Then provide a link to it, by hyperlinking to the index file in the folder created by your AppStudio deploy. The html file index.html can also be embedded into your home folder. | ||
=== Part 1 === | |||
Select a small screen size…. | Select a small screen size…. | ||
Change the | Change the backgroundcolor to red. | ||
Change the Height and Width to values between 200 & 300 | Change the Height and Width to values between 200 & 300 | ||
Add a Button and a Label | Add a Button and a Label | ||
Change the Button value to Press Me! | Change the Button value to Press Me! | ||
Change the Button onclick to Button1_Click()
This is one of the options when you click the down arrow.
< The top setting does not need to be changed.
<The Press Me! From the top comment! | Change the Button onclick to Button1_Click() | ||
This is one of the options when you click the down arrow.
| |||
< The top setting does not need to be changed.
| |||
<The Press Me! From the top comment! | |||
The code for the Button and label… | The code for the Button and label… | ||
<This hides the label at the start
<Code for clicking the button
<Change the Label text
<Unhide the Label Text
<End of Button click. |
<This hides the label at the start
| ||
<Code for clicking the button
| |||
<Change the Label text
| |||
<Unhide the Label Text
| |||
<End of Button click. | |||
Part 2 | === Part 2 === | ||
This can be extended with an image.
The Image1 will need the same code as label1 to hide and then display it.
The Image1 Property of src will need to pint to a valid image file. | This can be extended with an image.
The Image1 will need the same code as label1 to hide and then display it.
The Image1 Property of src will need to pint to a valid image file. | ||
Part 3 | |||
=== Part 3 === | |||
Test your code! That is Press the Play button or Run > Start in Desktop Browser | Test your code! That is Press the Play button or Run > Start in Desktop Browser | ||
Part 4 | |||
=== Part 4 === | |||
After testing add the code to the index html file and test as a link from your own website! That is… Use Run and Deploy (F6) to create the folder and files that you can use in your website… | After testing add the code to the index html file and test as a link from your own website! That is… Use Run and Deploy (F6) to create the folder and files that you can use in your website… | ||
Do not forget to add….. the … | Do not forget to add….. the … | ||
Additional html Code to make page run outside of AppStudio. Insert via Dreamweaver or Notepad… | Additional html Code to make page run outside of AppStudio. Insert via Dreamweaver or Notepad… | ||
Revision as of 14:41, 12 October 2015
=== A few tips before you start ===
- Always use your home folder.
- To Test your code.
Click the play button shown …>
- To ‘Deploy’ your working code…
Following Testing you MUST deploy the code. To do this select the Run Menu and Deploy .
This creates a folder with all the html code to run in a website.
- Add to your website.
Move the folder onto a folder within your VLE page or website. Then provide a link to it, by hyperlinking to the index file in the folder created by your AppStudio deploy. The html file index.html can also be embedded into your home folder.
Part 1
Select a small screen size…. Change the backgroundcolor to red. Change the Height and Width to values between 200 & 300 Add a Button and a Label Change the Button value to Press Me! Change the Button onclick to Button1_Click() This is one of the options when you click the down arrow. < The top setting does not need to be changed. <The Press Me! From the top comment! The code for the Button and label… <This hides the label at the start <Code for clicking the button <Change the Label text <Unhide the Label Text <End of Button click.
Part 2
This can be extended with an image. The Image1 will need the same code as label1 to hide and then display it. The Image1 Property of src will need to pint to a valid image file.
Part 3
Test your code! That is Press the Play button or Run > Start in Desktop Browser
Part 4
After testing add the code to the index html file and test as a link from your own website! That is… Use Run and Deploy (F6) to create the folder and files that you can use in your website… Do not forget to add….. the … Additional html Code to make page run outside of AppStudio. Insert via Dreamweaver or Notepad…