how to fake a database/backend in axure... and more
DESCRIPTION
For more information on London Axure Meetup visit: http://AxureLondon.com The RP File for the repeater widget presentation can be found here: http://axurelondon.com/RP_Files/RepeaterWidget_AxureLondon.rp Meetup Description: Thank you all for voting on what our next topic should be. And the winner is (drum roll)... The Repeater Widget! The Repeater Widget is one of the exciting new feature introduced with Axure 7, and it was created with the purpose of display repeating patterns of text, images, and links or in other words, the ability to "fake" a backend. For Show-and-Tell, Scott from TalkTalk will walk us through the Axure prototype that helped shaped TalkTalk's current YouView TV app. He will demonstrate how to use Axure to prototype TV apps using a TV remote control to control the app…. I know what you all thinking… I had no idea that could even be done! If so, come along and check it out :D Last but not least, I have a very special guest, author of the book Axure for Mobile, Lennart Hennigs, who will be joining us via Skype. I will have a few questions prepared for him, and I will be opening the floor for Q&A, so have your own brilliant mobile prototyping questions ready for him as well. As always, there will be pizza and drinks sponsored by Axure, and I will have plenty this time, I pinky promise ;) Well that's it for now, I hope to see you all in three week! Cheers! SandraTRANSCRIPT
![Page 1: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/1.jpg)
How to fake a backend in Axure
Axure 6.5 & Axure 7
#AxureLondon
July 30, 2014
![Page 2: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/2.jpg)
Very Special Thanks!
@Axurerp @TalkTalk_Uk
#AxureLondon
![Page 3: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/3.jpg)
Very Special Thanks!
@scott_room
#AxureLondon
![Page 4: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/4.jpg)
Very Special Thanks!
@LennartHennigs
#AxureLondon
![Page 5: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/5.jpg)
Paul Godfrey - Head of Creative
#AxureLondon
![Page 6: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/6.jpg)
Introduction
@MetroWiseUX
#AxureLondon
![Page 7: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/7.jpg)
Just so you know…
@AxureLondon
New twitter account and website
@AxureLondon
AxureLondon.com
![Page 8: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/8.jpg)
Prototyping for TVwith Axure 6.5
by Scott Room
![Page 9: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/9.jpg)
Prototyping for TV in Axure 6.5
Challenge: Create a rapid prototyping mechanism allowing for customer testing of TV interactions using the interface controls customers will have in their homes (i.e. a remote)
Questions: Can we get an axure prototype onto a set top box?
How do we translate mouse and key strokes into remote button presses?
@scott_room
![Page 10: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/10.jpg)
The solution RedRat infrared device
Allows infra-red signals to be collected through a PC Provides software that maps these signals into key-presses Collects infra-red signals from pretty much any remote
(although the TalkTalk remote is the only one you’ll ever need!)
Can work on any application – not just websites!
Issues/limitations Only works on PC technology (we all know that mac’s are the
creative go-to!) Complex to set-up (need to teach the software the
relationship between the remote signals and the buttons available) – but you can save your setup once complete.
You still need an application that can accept key-presses!
![Page 11: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/11.jpg)
Prototyping for TV in Axure 6.5
@scott_room
![Page 12: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/12.jpg)
Prototyping for TV in Axure 6.5
@scott_room
Global variable holds the value of the “Last Button Pushed”
![Page 13: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/13.jpg)
Prototyping for TV in Axure 6.5
@scott_room
A OnPanelStateChange event gets triggered and the global variable holding the information on what key was pressed determines the next interaction.
![Page 14: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/14.jpg)
Outcome and Future uses Used to inform the interaction design of the TV
player, identify immediate pain points for action. Recently went live with TalkTalkPlayer v2.
Future rapid prototyping to bring interactions to life without complex POCs and external technology support
Ability to put quick ideas and concepts in front of customers to get immediate feedback with a tactile device.
@scott_room
![Page 15: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/15.jpg)
How to fake backend systems with Axure 7
by Sandra Sears
![Page 16: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/16.jpg)
What is a Repeater Widget?
@metrowiseux
Is a way to bring database capabilities into Axure.
An advanced widget used to display repeating patters of text, images and links.
Great for repeating product listings, contact info list, blog post and more.
![Page 17: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/17.jpg)
What is a Repeater Widget?
@metrowiseux
Today’s guinea pig:
![Page 18: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/18.jpg)
What is a Repeater Widget?
@metrowiseux
Index
App Name
App ID
App Platform
Description
Picture
1 Add & Subtract
123 WP Learn to Add & Subtract: right answers get stars & help you advance levels. Game achievements and summaries available!
2 RecNote 456 W8 Make/Share bookmarks of specific times in YouTube vids w/ RecNote—it's speech enabled & Xbox Music integrated too!
3 Firefly Runner
789 both Play as Switch the hero firefly & run, fly, or shoot evil foes in the magical 3D running game Firefly Runner!
4 PoP! 952 both Have your own dessert factory & PoP! bubbles filled w/ ingredients for new recipes. "Combo pops" earn more points!
![Page 19: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/19.jpg)
What is a Repeater Widget?
@metrowiseux
ID
App Name
App ID
App Platform
Description
Picture
![Page 20: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/20.jpg)
What is a Repeater Widget?
@metrowiseux
![Page 21: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/21.jpg)
What is a Repeater Widget?
@metrowiseux
![Page 22: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/22.jpg)
Step 1 Drag a repeater into the grid
@metrowiseux
![Page 23: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/23.jpg)
Step 1 Add the following columns into the repeater
dataset: Index App Name App ID App Platform Description Picture
Populate the dataset (4 first apps)
@metrowiseux
![Page 24: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/24.jpg)
Step 2 Name the repeater and the shape. Surface name using the “OnItemLoad” event.
There are two ways of changing this event. Change
Name to the shape: App Name
@metrowiseux
![Page 25: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/25.jpg)
Step 3 Set up the repeated information to be in
columns and not rows
@metrowiseux
![Page 26: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/26.jpg)
Step 4 Set up the shape to be the right width (164
px) and height (318 px) Add a space of 10px in between rows.
@metrowiseux
![Page 27: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/27.jpg)
Step 5 Open the repeater item Drag and drop and image widget
Set it up to 164 x 164 Name it “App Image”
@metrowiseux
![Page 28: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/28.jpg)
Step 6 Link the pictures of the data set into the
repeater.
@metrowiseux
![Page 29: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/29.jpg)
Step 7 Open the Repeater Select the shape and go to Alignment and
Padding section: Alignment: Left and Top Padding T: 168
@metrowiseux
![Page 30: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/30.jpg)
Step 8 Open the OnItemLoad Case and edit the
content displayed below the picture. Include the App description Bold the App Name, add an space between
the app title and the description.
@metrowiseux
![Page 31: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/31.jpg)
Step 9 Make the background of the Repeater Shape
transparent as well as the lines of the shape
@metrowiseux
![Page 32: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/32.jpg)
Step 10 Add another app (row in the database)
@metrowiseux
![Page 33: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/33.jpg)
Step 11 Open the Repeater Tick on “Wrap (Grid) from the layout section,
and enter the number 4 on the “items per row” input field.
@metrowiseux
![Page 34: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/34.jpg)
Step 12 Open the Repeater Add a 164 by 32 rectangle into the Repeater
shape with no lines and filled with the same gray as the site (#f2f2f2) and an transparency of 80%
Convert rectangle into a dynamic panel and call it “Platform icon”
@metrowiseux
![Page 35: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/35.jpg)
Step 13 … here is where I took the wrong turn!!!
@metrowiseux
![Page 36: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/36.jpg)
Step 13 REPEATER ARE NOT ALLOW INSIDE REPEATERS!!!
Drag another repeater on the page Set the database with three columns: Platform, icon
and icon_hover Add the two rows with the correspondent info. Add a 30 by 30 image into the shape. Name the image icon. Set up the OnItemLoad Interaction as follows: Case 1: Set default image to value [[Item.Icon]] Set Mouse Over image to value [Item.Icon_hover]]
@metrowiseux
![Page 37: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/37.jpg)
Step 13 Open the Repeater Formatting for the icon
and change the layout from Vertical to Horizontal.
Delete the rectangular shape which is defaulted when the repeater launches.
Add 10 pixel spacing in between Place the repeater in the right position Open the Repeater Formatting for the icon
and change the layout from Vertical to Horizontal.
@metrowiseux
![Page 38: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/38.jpg)
Step 13
@metrowiseux
![Page 39: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/39.jpg)
Step 13 Create the three states necessary to support
the three different cases: Only Windows Phone app, only Windows 8 app or both
Call the states: WP7 W8 both
@metrowiseux
![Page 40: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/40.jpg)
Step 9 Add the logic to pick the right state on the
repeater
@metrowiseux
![Page 41: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/41.jpg)
Axure Stop Motion Movie
The inception of AxureLondon.com
#AxureLondon
![Page 42: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/42.jpg)
The Movie Birth of our new AxureLondon.com
@metrowiseux
![Page 43: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/43.jpg)
A few more tips Think a head! Give enough space for all sorts of data Think about long strings, alignment and wrapping
@metrowiseux
![Page 44: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/44.jpg)
A few more tips Think a head! Most copy would required a limit of character given that there is no truncation capabilities in Axure.
@metrowiseux
![Page 45: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/45.jpg)
Advanced tutorial
Achieving responsive, realistic, data driven design using Repeaters and RWD Views. http
://www.axureworld.org/library/achieving-responsive-realistic-data-driven-design-using-repe.html
#AxureLondon
![Page 46: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/46.jpg)
Building Mobile Prototypes with Axure 7
by Lennart Hennigs
![Page 47: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/47.jpg)
@LennartHennigs
![Page 48: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/48.jpg)
Slides for this presentation can be found here: http://www.slideshare.net/problemloeser/building-mobile-prototypes-with-axure-rp-70
![Page 49: How to fake a database/backend in Axure... and more](https://reader034.vdocument.in/reader034/viewer/2022051208/5468c41caf7959a75e8b5724/html5/thumbnails/49.jpg)
Thanks! @AxureLondon AxureLondon.com [email protected]
Please rate this event
Suggestions for next meeting?
Share your Axure fun with all of us!
Feedback is always welcome
#AxureLondon