Overview

Telerik AppMock allows you to quickly and easily create prototypes of your Windows Store applications. Providing a rich set of Windows 8 Style tools and components, conveniently grouped in galleries and categories, you can simply drag and drop UI elements onto the design surface to arrange the layout and flow of your application. You can organize the prototypes in pages (called sheets) and projects and in the end you can run the projects to see all that in action, by navigating through the pages using preset links (hot-spots).

Most Important Features/Behaviors

Creating Projects

Telerik AppMock allows you to organize your prototypes in projects by letting you:

• Create new Project and give it a custom name
• Save and Open the newly created Project
• Rename your Project

Using the Design surface

Telerik AppMock supports two different modes – Design-time and Run-time. While you are designing (mocking) your application you are in the Design mode. It is visually split into a ToolBox (on the left, containing the Galleries) and Design surface on the right.

 

Creating Sheets (Pages)

Every project consists of sheets. A sheet represents a single screen of your application. You can:

• Save (Save as) a sheet
• Add/Remove sheet from the project
• Copy/Paste the entire sheet

Using the rich Galleries

Telerik AppMock comes with a set of predefined galleries containing various UI shapes. Each shape represents a component or tool that can show certain logic of your app. For convenience all shapes are grouped in categories such as Navigation, Interactivity, etc. In addition there’s a search box right at the top of the toolbox (the panel containing all shapes) to enable you quickly find a tool or component. You can drag and drop any shape from the toolbox onto the design surface. Following is the list of predefined galleries:

• Windows 8 Controls containing groups of shapes such as Interactivity, Buttons&Links, Text&Input, Data Visualization, Media, Layout, Editors, Loading indicators, Data&Scheduling, Navigation
• Gestures
• Comments
• Basic Shapes - containing groups of shapes such as Flow Chart and Arrows

Customizing the shapes

You can select and manipulate one or more tools and components on the design surface at a time. When you select a shape a Settings pane pops up at the top right corner that allows you to execute an action on this particular shape (or group of selected shapes).

Cut, Copy, Paste, Delete or Group/Ungroup multiple shapes

 

Specify size, rotation angle, position

Arrange - Bring to Front, Send to Back

 

Set Text to basic shapes

 

Set links (hot-spots) to be used when you run the project. The links can point to any existing page in your project

 

You can also:

• Cchoose font size, foreground or basic text options
• Lock the shape – define per-operation lock – resize, rotate, move/drag
• Align selected items – left, top, right, bottom or center

Setting Application Theme

Telerik AppMock exposes a set of predefined themes (color schemes) that you can apply to the whole design surface. This allows you to test your application’s UI with different color schemes.

 

Application Settings

You can configure the entire design surface by using the AppBar options (as shown above):

• Hide/Unhide the ToolBox
• Enable/Disable Snapping
• Show/Hide Grid (the background grid)
• Zoom in/out

Undo/Redo

You can use the Undo/Redo option in the AppBar to undo/redo any change.

Multiple Selection

When running on touchscreens you can select multiple shapes by tap and hold. On desktop pcs you can use Ctrl+Mouse as well as Ctrl+A to select all the available shapes on a screen.

Navigating between the Sheets

You can easily navigate through all the project’s sheets using the NavBar at the top. In addition the NavBar enables you to quickly add new sheets to the project or navigate to the project’s home screen, where you can review all the available sheets.

 

 

Running your Project

With Telerik AppMock you can define links (or the so called clickable hot-spots) within the sheets while in design-time. When you Run the project (using the AppBar’s Run button) you can use these predefined links to navigate through the sheets at run-time. Running the project will start your prototype (mock-up) in full-screen.

 

Search and Share

Telerik AppMock natively integrates with the Search and Share charms to enable the user search the existing sheets as well as share the projects with mail users and SkyDrive.

 

 

Pin Sheets and Projects to the Start Screen

You can easily pin important or favorite projects to the Start Screen to enable quick and easy access to these sheets and projects at any time.

 

Export projects

You can export you mock-ups to AppMock type files and open these files with AppMock later.