Friday, September 04, 2015

Debugging HTML5 running in iOS from Windows with Chrome dev tools!


In order to debug HTML5 running in Safari on iOS, I used to connect the iOS device to my Mac, open Safari, go to Developer menu(needs to be activated from Safari Preferences) and open the page.
You can find detailed steps how to do this on internet.

I tried to remote debug HTML5 with other tools (Telerik has one), but the best way is with an utility called ios-webkit-debug-proxy which uses Chrome dev tools!

You can find it here https://github.com/google/ios-webkit-debug-proxy and its Windows port: https://github.com/artygus/ios-webkit-debug-proxy-win32

It allows you inspect the WebKit (either the Safari or UIWebViews) running on the iOS device from your Windows machine with Chrome dev tools.
This utility connects to the WebKit for inspection.

Steps (most of these are written in https://github.com/google/ios-webkit-debug-proxy):
  1. Go to https://github.com/artygus/ios-webkit-debug-proxy-win32
  2. You can either get the compiled version or build from the source. I chose to built it from source just for the kicks.
  3. Run the ios-webkit-debug-proxy.exe
  4. In Chrome, go to http://localhost:9222/ to see web-browser tabs open in Safari or the WebViews on the iOS device. Click on a tab.
  5. A new window should open with Dev tools. Note the silver icon, click on it and choose to 'Load unsafe scripts':



Some things to keep in mind:

- note that a web server is being used. when inspecting a tab, the link is
  https://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html?host=localhost:9222&page=1
  not sure if this might be a security issue for what you're debugging.

- in the inspector window, clicking on elements in the Elements tab doesn't do anything; you can use arrow keys to navigate up and down in the DOM tree




Monday, June 22, 2015

GridSplitter control for Xamarin Forms

I created a GridSplitter control for Xamarin Forms, for iOS and Android.

You can find the full description of how it works and how to include it in your app:
https://github.com/andreinitescu/GridSplitterApp

Some screenshots with sample layouts included in the sample app:

mGkd879Oqv

and a Grid with both horizontal and vertical splitters:

DnaXEi1wzw

The sample app also shows a technique to create reusable custom controls which you can style easily just with XAML, very similar to how it works on Windows.

Wednesday, June 17, 2015

Easiest way to know which w3wp.exe PID corresponds to which application pool

I keep forgetting this.
Open Task Manager and have it show the Command Line column
You can see for the w3p.exe processes the name of the app pool in the command line parameters


Wednesday, June 10, 2015

Xamarin Forms: Create a style BasedOn default style defined in app's global resource dictionary

Suppose there’s a style defined in app's global resource dictionary (App.xaml):

<Style TargetType="Label">
    <Setter Property="TextColor" Value="Red" />
</Style>

And this style defined in a page:

<Style x:Key="MyLabelStyle" TargetType="Label">
    <Setter Property="FontSize" Value="14" />
</Style>

If you want MyLabelStyle to inherit the global style, one way is to use this syntax:

<Style x:Key="MyLabelStyle" TargetType="Label" BasedOn=”{StaticResource Xamarin.Forms.Label}”>

otherwise MyLabelStyle will not have the text color red.

Note that this won’t work:
<Style x:Key="MyLabelStyle" TargetType="Label" BasedOn=”{StaticResource {x:Type Label}}”>

Instead of hard coding the Label’s type full name, a nicer way would be to define a custom markup extension which resolves the Label type (something like this)

Xamarin Forms style resets

There are some default styles which you might want to reset in your Xamarin Forms apps.
For example, some container controls have default padding and spacing for their child views.

In a more complicated UI, sometimes these default styles can become an issue. Because the UI you build is complex, you can forget about these default values and you wonder why some views are not positioned the way you want.

I created a small XAML 'resets' snippet, which can be added to the App.xaml:
https://gist.github.com/andreinitescu/69e8afcad1ed9de69b76

Add App.xaml in your Xamarin Forms project

In the current version of Xamarin tools, the default Xamarin Forms project templates in both Visual Studio and Xamarin Studio do not generate App.xaml along with the App class that derives from Application and provides an entry point where you can add initialization code. 

The support for App.xaml is briefly mentioned in Xamarin Forms documentation but without giving the exact steps.
These steps are:

1. Right click on the PCL project and choose to add a new file
2. In Visual Studio, choose the "Forms Xaml Page" item
    In Xamarin Studio, choose the "Forms ContentPage Xaml" item
3. Write "App" as name

You will get a App.xaml and App.xaml.cs created. You need to do some small modifications in each of these:

1. in App.xaml, replace the XAML with the following:
<Application
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyApp.App">
    <Application.Resources>
        <ResourceDictionary>
           
        </ResourceDictionary>
    </Application.Resources>
</Application>

Note the x:Class="MyApp.App" attribute. You should replace MyApp with the name of your Xamarin Forms project.

2. in App.xaml.cs, replace the base class ContentPage with Application
public partial class App : Application
{
    public App ()
    {
        InitializeComponent ();
        MainPage = YourContentPage(); // change as required
    }
}

You might also need to delete the old App.cs, you don't need it anymore.

Monday, June 08, 2015

IconView control for Xamarin Forms


Someone was asking on the forum how to draw a colored icon.
I created an IconView control which does this: https://github.com/andreinitescu/IconApp/

The control takes a local image and applies a color on it. This is useful when you want to color images on the fly, without the need to have multiple images for different colors.

At this moment the implementation is for Android and iOS. Contributions for Windows support are welcome!

Usage

An example of a Page using the IconView control:
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="IconApp.MyPage" xmlns:controls="clr-namespace:IconApp;assembly=IconApp"> <controls:IconView Source="monkey" Foreground="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Center" VerticalOptions="Center" /> </ContentPage>
This draws the "monkey" image with red color in the center of the screen:



Add the control to your project


1. Add /IconApp/IconApp/IconView.cs to your Xamarin Forms PCL project
2. The control uses native renderes. You need to add the renderers to your Android and iOS project respectively:
/IconApp/IconApp.Droid/Renderers/IconViewRenderer.cs
IconApp/IconApp.iOS/Renderer/IconViewRenderer.cs

Note you might need to update some namespaces.

Tuesday, May 26, 2015

CallDataMethod trigger in Xamarin Forms



Here’s a very simple implementation of a CallDataMethod trigger in Xamarin Forms:
public class CallDataMethod: TriggerAction<VisualElement> { public string Method { get; set; } #region implemented abstract members of TriggerAction protected override void Invoke (VisualElement sender) { MethodInfo method = sender.GetType ().GetRuntimeMethod (Method, new Type[0]); if (method != null) { ParameterInfo[] parameters = method.GetParameters (); if (parameters.Length == 0) method.Invoke (sender, null); } } #endregion }

For a demo, let’s say we have two text-boxes (Entry control in Xamarin Forms) and you want to enable the second one when the first has ten characters:

<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:controls="clr-namespace:Xamore.Controls;assembly=Xamore.Controls" x:Class="Xamore.Controls.TestApp.Views.CallDataMethodPage"> <StackLayout> <Entry x:Name="FirstEntry" WidthRequest="100" /> <Entry IsEnabled="false" WidthRequest="100"> <Entry.Triggers> <DataTrigger TargetType="Entry" Binding="{Binding Source={x:Reference FirstEntry}, Path=Text.Length}" Value="10"> <Setter Property="IsEnabled" Value="True" /> <Trigger.EnterActions> <controls:CallDataMethod Method="Focus" /> </Trigger.EnterActions> </DataTrigger> </Entry.Triggers> </Entry> </StackLayout> </ContentPage>

Wednesday, May 20, 2015

Manually install Xamarin Studio addins

Just copy the .dll file to (note the Xamarin Studio version, it might be different today):

on Windows:
%LocalAppData%\XamarinStudio-5.0\LocalInstall\Addins

on Mac:
/Users/[YourUser]/Library/Application Support/XamarinStudio-5.0/LocalInstall/Addins

Source:
http://forums.xamarin.com/discussion/comment/6356/#Comment_6356


Monday, May 18, 2015

Add ImageFailed and ImageOpened to the Xamarin Forms Image control

Currently the Image control in Xamarin Forms does not have an event to handle when image could or couldn't open.
I created a way to do this by extending the implementation for the Image control and ImageSource.
Check out the source code and a demo app on my GitHub: https://github.com/nitescua/ImageExtensionsApp
I implemented two ways to handle image loaded status. You could either: 
1. Use the Image derived class ImageEx which exposes ImageOpened and ImageFailed events:
<controls:ImageEx Source="http://dummyimage.com/100x100/000/fff" ImageFailed="Image_ImageFailed" ImageOpened="Image_ImageOpened"/>


2. Handle the status change right on the ImageSource instance:
ImageSourceExtensions.SetStatusChangedHandler (MyImage.Source, (sender, status) => { Debug.WriteLine("Image status: {0}", status); });
where MyImage is an Image control in your Page

To add the implementation in your apps, you need to:

1. Add ImageSourceExtensions.cs and ImageEx.cs to your shared Xamarin Forms project
https://github.com/andreinitescu/ImageExtensionsApp/blob/master/ImageExtensionsApp/ImageExtensionsApp/Helpers/ImageSourceExtensions.cs
https://github.com/andreinitescu/ImageExtensionsApp/blob/master/ImageExtensionsApp/ImageExtensionsApp/Controls/ImageEx.cs

2. Add the ImageLoaderSourceHandlerEx.cs in your platform specific code

Android: https://github.com/andreinitescu/ImageExtensionsApp/blob/master/ImageExtensionsApp/ImageExtensionsApp.Droid/Renderers/ImageLoaderSourceHandlerEx.cs

iOS: https://github.com/andreinitescu/ImageExtensionsApp/blob/master/ImageExtensionsApp/ImageExtensionsApp.iOS/Renderers/ImageLoaderSourceHandlerEx.cs

WindowsPhone: https://github.com/andreinitescu/ImageExtensionsApp/blob/master/ImageExtensionsApp/ImageExtensionsApp.WinPhone/Renderers/ImageLoaderSourceHandlerEx.cs

Few things you should be aware of:

- the events are called when Uri is valid. So for example, it will work when uri is “http://xxxxx’ but not for ‘xxxxx’
- when using the ImageSource.StatusChangedHandler note that the event is called only if you set the ImageSource to an Image. It doesn’t work if you just create an ImageSource using ImageSource.FromXXX methods. You must set the ImageSource to an Image.

Wednesday, May 06, 2015

Cross platform splash screen in Xamarin Forms


EDIT: I do not recommend this approach. Instead, use native approach to create splash screen because it shows much faster.


If the splash screen is more than just an image, you can treat the splash screen as a Xamarin Page.
To make this there are some steps:

Step 1. set the App’s MainPage to the splash screen page:
public partial class App : Application { public App() { InitializeComponent(); Setup.Init(); // with XLabs, you would do (Page)ViewFactory.CreatePage<SplashViewModel>(); MainPage = new SplashPage(); }


Step 2.  In SplashPage, after some logic is done, you will need to “navigate” to your first app’s page. This means you just need to set again the App’s MainPage, i.e”:
void ShowMainPage() { MainPage = new SplashPage(); }
The issue is how do you call this.
If you are not doing any logic in the splash screen, you can just do something like this:
public class SplashPage : Page { async protected override void OnAppearing() { base.OnAppearing(); await Task.Delay(TimeSpan.FromSeconds(2)); // again, here you might want to use instead XLab's ViewFactory.Create<FirstPageViewModel>() App.Current.MainPage = new FirstPage(); } }
If you are doing some logic in the view-model and you want to navigate to FirstPage, you don’t want to call this in the view-model.
There are few ways to change the App’s MainPage without calling it from the view-model.

You could use a messaging mechanism to send a custom message from the view-model to the view. Look to the Xamarin Form’s MessagingCenter: http://developer.xamarin.com/guides/cross-platform/xamarin-forms/messaging-center/.

Another way is, you probably are already using some navigation service to navigate between view-models, so what you need to do is have a custom navigation behavior in the way you navigate to the first page. With XLabs for example, you can define your own CustomNavigationService : XLabs.Platform.Services.INavigationService, override NavigateTo( ), then check for the page to which you navigate to, and if it’s FirstPage then create the NavigationPage and push the first page to it:

public class CustomNavigationService : INavigationService { NavigationService navigationSvc; public CustomNavigationService() { navigationSvc = new NavigationService(); } public void GoBack() { navigationSvc.GoBack(); } public void GoForward() { throw new NotImplementedException(); } public void NavigateTo<T>(object parameter = null, bool animated = true) where T : class { NavigateTo(typeof(T), parameter, animated); } public void NavigateTo(string pageKey, object parameter = null, bool animated = true) { throw new NotImplementedException(); } public void NavigateTo(Type pageType, object parameter = null, bool animated = true) { if (pageType == typeof(MainViewModel)) { var page = (Page)ViewFactory.CreatePage(pageType); App.Current.MainPage = new NavigationPage (page); navigationSvc = new NavigationService(App.Current.MainPage.Navigation); } else { navigationSvc.NavigateTo(pageType, parameter, animated); } } public void RegisterPage(string pageKey, Type pageType) { navigationSvc.RegisterPage(pageKey, pageType); } }
Step 3. In Android, you need to configure few things:

         a. Define a startup theme and an app theme in your Resources\values\themes.axml:
<?xml version="1.0" encoding="utf-8" ?> <resources> <color name="splashscreencolor">#232323</color> <style name="StartUpAppTheme" parent="android:Theme.Holo.Light"> <item name="android:windowNoTitle">true</item> <item name="android:windowBackground">@color/splashscreencolor</item> </style> <style name="AppTheme" parent="android:Theme.Holo.Light"> </style> </resources>

b. In the native MainActivity, have the activity start with the Theme.Splash and then have it running with the AppTheme:

[Activity(Theme = "@style/Theme.Splash"", MainLauncher = true, ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.KeyboardHidden | ConfigChanges.ScreenSize)] public class MainActivity : FormsApplicationActivity { protected override void OnApplyThemeResource(global::Android.Content.Res.Resources.Theme theme, int resid, bool first) { base.OnApplyThemeResource(theme, Resource.Style.AppTheme, first); } ... }