Zebble
  • About Zebble
  • Compare
  • Documentation
  • Themes
  • Plug-ins
  • Contact Us

    • What is Zebble?
    • Structure of a Zebble solution
    • Zebble Designer (UWP)
    • Installing - Introduction
    • Change log
    • Introduction
    • ViewModel development
    • VM.EXE
    • View development
    • Dialogs
    • Lists and Collections
    • Tips and shortcuts
    • List views
    • ViewModel testing
    • Automatic Views
    • View development process
    • Hello World - Core Concepts
    • Layout: Sizing & Positioning
    • Event handling
    • Navigation
    • Alerts, Dialog, Prompt and toast
    • View lifecycle
    • Managing Files & Resources
    • Config & Debugging
    • Forms
    • Page templates
    • Device API
    • Animations
    • Web Api - Part 1 (reading data)
    • Web Api - Part 2 (post and delete)
    • Web Api - Part 3 (server vs client domain model)
    • Gesture events
    • View class
    • Zebble Markup (.zbl files)
    • Data Binding and MVVM
    • Stack class
    • Sizing and positioning
    • Layout examples
    • ScrollView class
    • Page class
    • Styling in Zebble
    • CSS property mapping to Zebble
    • Supported selectors
    • Zebble CSS: Under the hood
    • Inline styling
    • CSS real-time updates
    • Dynamic expressions in CSS
    • Gradient background colours
    • CSS Pseudo-classes support
    • Using Bold and Light Fonts in Zebble
    • Rotation in Zebble
    • Using custom fonts in Zebble
    • Flashing on tap using AutoFlash
    • Button
    • Carousel class
    • Checkbox class
    • DatePicker
    • Drawing class
    • FilePicker class
    • Grid class
    • IconButton class
    • ImageView
    • ItemPicker class
    • ListView & Grid classes
    • OptionsList
    • SearchInput class
    • Slider class
    • Switch class
    • Tabs Class
    • TextInput class
    • TextView
    • TimePicker
    • TreeView
    • Waiting Indicator
    • WebView class (displaying html)
    • C# Methods and Properties Of UI Components
    • Nav.Forward() vs Nav.Go()
    • Passing parameters to the destination page
    • Going Back
    • Showing Popup pages
    • Waiting class
    • Hardware Back button (e.g. Android)
    • NavigationBar class
    • Tabs class
    • Caching (pages)
    • Navigation without event handler
    • Use the Windows version
    • Logging messages for Debugging
    • Debugging Zebble/Plugin
    • Exception handling in Zebble
    • Debugging layout and styles
    • Zebble Device API
    • Device.Screen and orientation (landscape | portrait)
    • Code that should run on a specific platform
    • Using Lamp (aka Flash, LED and Torch)
    • Using Compass (Smooth compass)
    • Using Accelerometer (device angle)
    • Using Gyroscope (device motion speed)
    • How to Vibrate the device?
    • Launching the device browser
    • Finding device model and manufacturer
    • Responding to System events
    • Handling device shake event
    • Permissions
    • Permissions declaration (manifest files)
    • Sharing
    • Prompt for rating the app
    • Finding if Internet connection is available
    • Device messaging (Make a phone call, send SMS or Email)
    • Showing a local notification
    • Copying to Clipboard
    • Accessing device contacts
    • Reading and writing into Gallery (albums)
    • Playing & Recording Audio
    • Cache and temp files and folders
    • C# async / await
    • Understanding Zebble Threading
    • Debugging - the StackTrace problem
    • Not awaiting (running in parallel)
    • Timer (interval / scheduled running)
    • Post-render changes to the UI (dynamic)
    • Introduction of Geo location
    • Map & Location Services
    • Launch directions to a location (external)
    • Getting current Location
    • Tracking user location
    • Device.Media: Taking and picking photos
    • Playing an audio file
    • VideoPlayer class
    • Augmented reality
    • Recording audio
    • Virtual Reality
    • Speech Recognition
    • Recording or picking video
    • Playing remote videos in iOS
    • Text to speech
    • Introduction to the importance of Mobile Testing
    • Why and what to test
    • Testing mobile apps on different devices
    • Testing mobile apps
    • Xamarin Profiler
    • Performance optimization
    • Moving a view to another container at run-time
    • Attaching custom data (tag) to objects
    • Saving a view as image
    • Naming best practices
    • Fastest way to update your nuget package
    • Tips for Clean and Brief code
    • Splash screen and icon generation
    • Advice for passing Approval
    • Options for iOS app distribution
    • Test Release (internal and UAT)
    • Application Icons in IOS
    • Submitting to App Store
    • Releasing to App Store
    • Crash reporting
    • Optimized Release Build
    • Android - Generating an APK for manual installation
    • Payment (subscriptions & in-app purchases)
    • Introduction to push notifications
    • Registration process (App)
    • Push notification setup - iOS
    • Push notification setup - Android
    • Push notification setup - Windows
    • Sending a push message from the web app
    • Introduction
    • Connecting Zebble to Web API
    • Installation
    • Creating an API class
    • GET APIs
    • Calling a GET API (in the mobile app)
    • POST, PUT, PATCH and DELETE APIs
    • Domain Model
    • Web API and Authentication
    • Versioning
    • Uniquely identifying installations (token)
    • Settings file: config.xml
    • Standard Zebble settings
    • Login/Register with Facebook
    • Creating a composite component / plugin
    • Creating a Zebble component using Html and Javascript
    • CustomRenderedView: Third-party native components / plugins
    • Mapbox
    • Naming considerations
    • Random problems?
    • Display Keyboard for Visual Studio Android Emulator
    • iOS goes mad?
    • Configuring a Windows phone for ad-hoc testing
    • Fixing Error DEP0001 : Unexpected Error: -2147009287 while deploying Windows UWP app on device
    • Fixing Error DEP0001 : Unexpected Error: -1988945906 while deploying Windows UWP app on device
    • Unable tp Connect to the Mac agent from Visual Studio
    • Can't connect to the Mac agent from Visual Studio?
    • Choosing the CPU architecture
    • Zebble CLI
    • How to add a Device API to Zebble source?
    • About Automated UI testing
    • What should we test in mobile applications?
    • Creating an Automated UI Test in Zebble



Gesture events


How to use an event in Zebble

We want to create a simple sample that has a TextView and a SearchInput components. When the user types a string and selects Search button, the string is shown in TextView automatically.

First of all, we create a page named Page-5 with this Markup code:

Page-5.zbl:

<?xml version="1.0"?>
<z-Component z-type="Page5" z-base="Templates.Default" z-namespace="UI.Pages"
    z-partial="true" Title="About us" data-TopMenu="MainMenu" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="./../.zebble-schema.xml">
  <z-place inside="Body">
<TextView Id="txt1" ></TextView>
  <SearchInput Id="MySearchInput" on-Searched="ApplySearch" />
  </z-place>
</z-Component>

As you can see, we determine that when the on-Searched event is raised, the ApplySearch method is executed.

For implementing the ApplySearch method, you should go to Page-5.cs file:

 partial class Page5
    {
        public override async Task OnInitializing()
        {
            await base.OnInitializing();
            await InitializeComponents();
        }
        async Task ApplySearch()
        {
            txt1.Text = MySearchInput.Text;
            // In this example I want to pass the keywords to an API to implement the search logic on the server.       
        }
    }

The result page is same this image:

 

 

 

Note:

Previously events like Tapped and LongPressed optionally provided an event argument of type Point. 

Now all gesture events provide a single XXXEventArgs argument which will wrap the other parameters in them.

Following, the gesture events of Zebble have been described:

1- Tapped

The tapped event is fired when the user tapps a view. 

 

 

Sample:

in this sample, the user tapped on the TextView. After that, the alert with "Hello you!" is shown on the screen:

Sample 1:

<TextView Id="Something" Text="Tap me!"
on-Tapped="SomethingTapped" />
Task SomethingTapped() => Alert.Show("Hello you!");

 

 

 

 

 

 

 

 

 

 

Sample 2:

<TextView Id="Something" Style.Height="50" Style.Width="50" Style.BackgroundColor="brown"  on-Tapped="SomethingTapped" />

Task SomethingTapped()
{
if (Something.Width==50) Something.Width=100;
else
Something.Width=50;
return Task.CompletedTask;
}

2- LongPressed

Every view has a long press event. When you hold an element with your finger for a full second it will be fired.

Note: In Windows desktop (during development), you fire that event by right clicking the object instead of holding the mouse key down.

 

Sample 1 :

<TextView Id="Something" Text="Tap me!"  on-LongPressed="SomethingTapped" />   

Sample 2:

This sample demonstrates using the LongPressed to implement dragging an image.

In this sample, we have an image in MarkUp:

<ImageView Id="MyImage" Path="Images/Something.png" 
on-LongPressed="CallDrag"/>
We use the argument which pass to the CallDrag for moving the image object:

Task CallDrag(LongPressedEventArgs args)
{
      MyImage.Style.X= args.X;
      MyImage.Style.Y= args.Y;
      return Task.CompletedTask;
}

 

 

 

 

Sample 3:

In This sample, we demonstrate how using the LongPressed to implement dragging an image to the Remove box for simulating deleting an image. When users want to remove an image, they should select it and press for a long time for raising LongPressed events. After that, they drag it on a image which we called it Remove box.

In this sample, we have an image in MarkUp:

<ImageView Id="MyImage" Path="Images/Something.png"  on-LongPressed="CallDrag"/>
<ImageView Id="RemoveImage" Path="Images/remove.png" />

We use the argument which pass to the CallDrag for moving the image object:

Task CallDrag(LongPressedEventArgs args)
{
      MyImage.Style.X= args.X;
      MyImage.Style.Y= args.Y;
 if args.X >= RemoveImage.X && args.Y >= RemoveImage.Y
{
// Do something for removing
}
      return Task.CompletedTask;
}

3- Panning & PanFinished

Every view in Zebble supports the following gesture events:

  • Panning: Happens when the user is touching the view and moving the finger (or mouse).
    This is raised many times, for every tiny movement (one pixel or more).
    Your event handler can take the starting and ending point.

 

<TextView Id="Something" Text="Tap me!"  on-Pannig="SomethingTapped" />  

 

 

  • PanFinished: Happens at the end of a panning batch when the finger or mouse button is release

<TextView Id="Something" Text="Tap me!"  on-PanFinished="SomethingTapped" />  

You can use these events to create custom user interactions and advanced scenarios.

Example:
Try the following example, which makes a draggable object that you can freely move around with a tiny bit of code!

<Canvas Id="Board" on-Panning="BoardPanning">
     <Canvas Id="Bullet" />
</Canvas>

Note:

Previously events like Tapped and LongPressed optionally provided an event argument of type Point. 

Now all gesture events provide a single XXXEventArgs argument which will wrap the other parameters in them.

Task BoardPanning(PannedEventArgs args)
{
      Bullet.X(args.To.X).Y(args.To.Y);
      return Task.CompletedTask;
}

#Board { height: 400px;}
#Bullet { background: blue; height: 40px; width:40px; border-radius: 20px; position:absolute }

4- Swiped

It's fired when the user pans towards left or right for at least 20 pixels.

 

 

 

 

 

Sample

<TextView Id="Something" Style.Height="50" Style.Width="150" Style.BackgroundColor="brown"  on-Swiped="SomethingTapped" />  

Task SomethingTapped()
{
switch (Something.BackgroundColor.Tostring())
{
case "brown": 
Something.BackgroundColor = "black"; 
break; 
case "black":
Something.BackgroundColor = "green";
break;
}
return Task.CompletedTask;
}

 

5- Pinching

 

This event is fired when the user uses two fingers that go towards or away from each other.

The primary use case for this is to implement a custom zoom-in or zoom-out behaviour.

Note: In Windows desktop (during development) you should hold the Ctrl key and turn the mouse wheel up or down to invoke this event.

 

 

 

 

Example

<TextView Id="Something" Style.Height="50" Style.Width="50" Style.BackgroundColor="brown"  on-Tapped="SomethingTapped" />

Task SomethingTapped()
{
 MyImage.Height= args.X;
      MyImage.Width= args.Y;
      return Task.CompletedTask;
}

 

6. UserRotating

You can handle the UserRotating event to handle the gesture when the user is using two fingers in the motion demonstrated here.

The main use case for this gesture is to rotate your view on the Z index and it's common in Map applications.

Note: In Windows desktop (during development) you should hold the Shift key and turn the mouse wheel up or down to invoke this event.

 

Exceptions

Most of any application's code runs when the user provides an input, often in the form of a gesture. In other words often everything starts from an event handler such as tapping of a button.

Of course any code may have bugs including your event handler, and everything else that is invoked in a chain from there. If there is an unhandled exception the default behaviour of iOS, Android and Windows is to crash the app and close it immediately. That's not helpful for debugging, or for user experience.

To solve this problem event handlers in Zebble always catch any unhandled exception and display an error pop-up to the user, unless you're running the app with a Debugger attached, in which case the error will be thrown, allowing you go about your debugging the normal way.




‹
Zebble is a product of Geeks Ltd , a software house based in London, UK. All rights are reserved.

Telephone: +44 (0)845 643 6229

Email: hello@zebble.net

Address: 66a London Road, Morden

Greater London, United Kingdom, SM4 5BE

Privacy Statement
Terms & Conditions
Contact Us