Convergent Journalism

Blog for helping students of Convergent Journalism class (Famecos) *Credits for the homepage image: www.japanexperterna.se

[itsconvergentjournalism]

Contact Us - Email Form

Adjust the layout with labels and text boxes as in the image below. After that, add a ActivityStarter component from the section Connectivity.

In the property Action of the ActionStarter Component, write: 

android.intent.action.VIEW

So, go to Blocks and write a code like this.

It is ready to go! :)

If you just want a button Email Us, instead of all the fields in the app, just create a button, add the Activity Starter component. In the property Action of the ActionStarter Component, write: 

android.intent.action.VIEW

And them make a code like this:

It is ready to go!

[itsconvergentjournalism]

Content index - App Inventor

General tips

Opening screen

Connecting screens

Button for show and hide elements

Creating a Menu with ListPicker

Creating a button bar menu

Spinner List

Embedding pages

Embedding videos

Contact Us Form

Final Adjustments

[itsconvergentjournalism]

Embedding videos

This tutorial helps you on how to insert an external video on the app screen. Putting video on the app depends on two steps. The first is publishing the material on YouTube, followed by putting the link on AppInventor.

On YouTube

1 -Publish your video on YouTube. Then, access

Don’t copy the raw URL. Choose the EMBED option to get the URL from your video. You need to copy and paste it on NotePad or other text editing software. In the case of the example video, the provided code is <iframe width=“420” height=“315” src=“//www.youtube.com/embed/EzgGTTtR0kc” frameborder=“0” allowfullscreen></iframe> . Cut what is between the quotes after the tag SRC, as in bold. Take it to any text editor and add the http:// at the beginning. Reserve it.

2 - Open AppInventor and insert a WebViewer component.

Select WebViewer and paste the address you edited before under the field HomeUrl. Edit Width e Height in the respective fields. To widescreen videos, use 320 pixels of width, with 180 height, and 320 by 240 in 4:3 videos.

[itsconvergentjournalism]

Button bar Menu

1 – In Designer, drag an element called HorizontalArrangement. It allows you to organize elements inside a horizontal structure in the screen.

2 – Under its properties, change the width to Fill parent, which means it will fill all the superior element in the hierarchy.

3 – Now insert more X HorizontalArrangement elements inside the original, where X = number of buttons you intend to insert. Take care for not putting one inside the other, but all parallel, inside the initial. The Components section will help you with that.

4 – Access each element in the internal HorizontalArrangements and change its width to Fill parent.

5 – Now, insert a Button element inside each internal HorizontalArrangement.

6 – By its turn, under the Properties of each button, edit width so it’s Fill parent as well.

7 – Now, they’re all alligned. Don’t forget a) to access Blocks to build the link for each button; and b) that in each screen to where the button directs, this menu should persist, which means that you should replicate it on the other screens.

[itsconvergentjournalism]

Embedding pages

This tutorial will help you on how to insert an external web page to display in your own app

1 – In Designer, access User Interface > WebView

2 – In Properties, insert the URL of the page and perform any other needed changes.

[itsconvergentjournalism]

Spinner List

Final code should look like this:

[itsconvergentjournalism]

Menu with ListPicker

1 – Select the option ListPicker in UserInterface and drag to the App screen.

2 – In the Elements field, in Properties, put the items separated by comma. If the ideia is to jump to different Screens, they need to have exaclty the same name as the screens.

3 – In the codes part, select the ListPicker components and the first block.

4 - Then, select the element open another screen screenName

5 – The final element, seen here, will define how the items will be displayed.

The final code should be like this:

[itsconvergentjournalism]

Connections Between Screens

This tutorial helps you on how to insert a button with a link to other page.

1 – In Designer, create a new screen. Don’t use spaces or accents in the name.

2 – Create your button, dragging the element Button, in User Interface.

3 - In Blocks, make connections between the buttons with the blocks. Each block placed on the screen has specific properties. First, place an action when the button is clicked. Select the button and choose “When Button1 Click”. You can change the Button1 name in the properties.

4 – Then, look for a Control to organize the action when you press the button. Drag Open Another Screen and then you’ll only need to call the name of the desired screen

5 – Drag a blank text component and fill in the exact name of the screen your button will call. The name should respect high and low cases.

The final code is this.

Each button should have this command in the block screen. Unfortunately, it’s not possible to copy and paste it from a screen to another, but it’s not difficult to repeat.

[itsconvergentjournalism]

Opening screen

This tutorial will help you on how to create an opening screen that stays “x" seconds opened and goes to a second screen.

1 – On the main screen, put the element “Clock”. It’s on the left tab on the sensors items.

2 – In the field TimeInterval it’s possible to change the time (in milisseconds).

3 – In the blocks screen, add the following code (“Notícias" should be followed by the exact screen name to where your user will be taken, with high and low case):

[itsconvergentjournalism]

General tips about your project

Account - AppInventor doesn’t allow two accounts to edit the same app. You can create a Google account specially for the assignment or choose an account of one of the colleagues, but be careful with password sharing.

UX x Building - Decide how many screens will be made and then listen what you’ll need to fill them (texts, pictures, videos). Divide the tasks and control the pace of the project.

Flow of working - First, build the visual part of the app in Designer, then head to the programming in Blocks. There’s no way to program without the elements. First adjust the elements and make them work, then go for the refinements (buttons, better colors, etc.).

Design – Give value tu your content with sans serif fonts and contrast between the font and the background. To more criterion and tips on mobile interfaces design, you can check the provided material and ask.

Screen size - The recommended width is 320 pixels., or 420 pixels in landscape view. Don’t forget to set the orientation (field ScreenOrientation in the Properties) in each screen.

Presenting - At the end of the course, the app will be put in a phone and will have to work in a presentation.

[itsconvergentjournalism]

Button for hiding and showing content

To create a button that has the function to show or hide any element on the screen just follow these steps: 1 - Create a button and an element (this is the element you want to be shown or hidden according to the interaction with the button you made). Then uncheck the box visible in the configuration box of the element.

2 - Go to “Blocks” screen. You should organize a code like this. For that, follow the tips below.

- Get the first piece “When Button 1. Click. Then get the piece “If then” in Control. Notice that there is a blue box in the right top of the piece. 

- Click on it and drag and drop the option “else if”, as shown in the image below:

Now you have everything you need to finish your code!

[itsconvergentjournalism]

Final adjustements

If you want a background image, select it on the option BackgroundImage. Remember to avoid elements that harm the reading. A ligh color goes a long way sometimes.

Check the item ScreenOrientation. If your app works correctly only on the vertical position, choose Portrait. This avoids problems when using the phone Then, check the option Scrollable