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

Easies 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.