Kultainen koodi

.NET-osaajan ajatuksia paremmasta koodailusta

Archive for the category “UI ohjelmointi”

Keskitä vertikaalisesti kolmella koodirivillä

Työkaveri vihjasi törkeän mainion sivun, jossa kerrotaan miten UI-elementin voi keskittää vertikaalisesti kolmella koodirivillä. Taikasana on CSS.

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Saman voi kirjoittaa myös mixininä.

/* Mixin */
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @include vertical-align();
}

Elementti voi sijoittua pikseleiden väliin, jolloin elementin reunat voivat näyttää sumuisilta tai pehmeiltä. Määrittelemällä keskittämisen parin lisämääreen avulla ongelma ratkeaa.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Korjauksen voi tehdä myös perspectiven avulla (ratkaisua ehdotti alkuperäisessä postissa roydukkey):

.element {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

Nauti keskittämisestä!

Mainokset

Underscore js – JavaScriptin muistilista

Frontin tekeminen ja JavaScript? Underscorejs ratkaisee huolesi tarjoamalla pikaisia vastauksia tyypillisiin ongelmiin. Tavallisesti ongelmiin liittyvät vastaukset joutuu kaivamaan API:sta tai StackOverflowsta, mutta JavaScriptin puolella ratkaisukokoelma helpottaa elämää.

Näyttökuva 2017-03-26 kello 15.58.37

Underscoren kautta löytää hyviä esimerkkejä tyypillisiin funktiokutsuihin. Positiivisena puolena voi mainita funktiot. Jos osaat funktionaalista ohjelmointia, JavaScriptin opetteleminen tätä kautta käy helposti. Mikäli et vielä ymmärrä funktioita, niin esimerkkien avulla opit lisää.

Osaamistasi saat lisättyä codewarsin kautta, kuten kerroin aiemmin.

Riemullista JavaScriptailua!

Windows Forms lokalisointi, Satellite Assemblies

Windows Forms -lokalisointi eli kieliversioiden tarjoaminen teksteille ei käy käden käänteessä. Teknisesti asia hoidetaan yksinkertaisesti. Luodaan yksi resurssitiedosto jokaiselle tarvittavalle kielelle ja merkkijonojen käännökset sijoitetaan näihin tiedostoihin. Uudemmilla tekniikoilla, kuten WPF, tämän voi automatisoida hyvin pitkälle esimerkiksi ReSharperilla.

Demoissa käytetty Microsoftin ”automaattinen” kieliversiointi luo jokaiselle lomakkeelle ja UserControllille omat resurssitiedostot. Esimerkiksi kymmenen formin ja viiden UserControllin projektissa tällöin kahdelle kieliversiolle tulisi kolmekymmentä resurssitiedostoa, joissa sama teksti toistuisi useaan kertaan. Ok- tai Peruuta-tekstit pitäisi kääntää jokaisen komponentin kohdalla erikseen ja muistaa tehdä muutokset jokaiseen resurssitiedostoon.

Windows forms -lokalisointi toimii näin:
1. Luodaan resurssitiedostot käytetyille kielille
2. Luodaan sovelluskohtainen ResourceManager
3. Asetetaan lomake tai UserControl lokalisoitavaksi
4. Tehdään lokalisointi koodin puolella
5. Luodaan lokalisoitavat tekstit resurssitiedostoihin
ja
6. Luodaan paikka, jossa voi vaihtaa kieliasetusta

Vaiheet 1 ja 2 tehtään kerran. Vaiheita 3-5 toistetaan jokaisen lokalisoitavan lomakkeen ja UserControllin kohdalla. Sovelluksesta riippuen, kieliversion vaihtaminen sijoitetaan sovelluksen mukaisesti joko aina nähtäville tai kertavalinnaksi.

Kieliversioitu testilomake

Yksinkertainen lomake Satellite Assembly -lokalisointia varten.

1. Luodaan resurssitiedostot käytetyille kielille

Luo projektiin Resources-kansio. Lisää sinne resurssitiedostot. Geneerinen en-valinta sopii hyvin Suomalaiseen makuun, koska meillä ei yleensä tehdä suurta eroa Amerikan- ja Britannianenglannin välille.

Luo resurssitiedostot

Luo resurssitiedostot

2. Luodaan sovelluskohtainen ResourceManager

Luo päälomakkeelle tai sovelluksen avaavaan program-kohtaan globaali ResourceManager.

private ResourceManager _resourceManager = null;

Initialinnin yhteydessä aseta nykyinen kulttuuri, tässä tapauksessa Suomi ja sen lisäksi viittaus resurssitiedostojen sijaintiin.

Thread.CurrentThread.CurrentCulture = new CultureInfo("fi-FI");
Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
_resourceManager = new ResourceManager("WFSatelliteAssembly.Resources.WFSatelliteAssembly", 
                                       Assembly.GetExecutingAssembly());

Globaalin resurssienhallitsijan sijaan voit luoda myös aina uuden, jos siltä tuntuu. Tällöin pitää huolehtia resurssitiedostojen löytymisestä, varsinkin jos yritetään viitata niihin toisesta projektista käsin. Useampaa projektia käytettäessä globaali olio tuntui kätevämmältä.

3. Asetetaan lomake tai UserControl lokalisoitavaksi

Valitse haluttu luokka ja muuta se lokalisoitavaksi.

Laita lokalisointi päälle

Laita lokalisointi päälle

4. Tehdään lokalisointi koodin puolella

Konstruktoriin, heti komponenttien initialisoinnin jälkeen aseta kieliversioidut tekstit.

InitializeComponent(); // Visual Studion luoma metodi
UpdateUiControls();

Itse päivitysmetodi

private void UpdateUiControls()
{
    try
    {
        if (_resourceManager != null)
        {
            Text = _resourceManager.GetString("Lomakkeen otsikko");
            uiLabelFirst.Text = _resourceManager.GetString("Eka teksti");
            uiLabel1.Text = _resourceManager.GetString("Toka teksti");
            uiLabel3.Text = _resourceManager.GetString("Kolmas teksti");
            uiLabel4.Text = _resourceManager.GetString("Valitse kieli");
            uiButton1.Text = _resourceManager.GetString("Peruuta");
            uiButtonTemput.Text = _resourceManager.GetString("Tee temput");
        }
    }
    catch (System.Exception e)
    {
        MessageBox.Show(e.Message);
    }
}

5. Luodaan lokalisoitavat tekstit resurssitiedostoihin

UpdateUiControls-metodissa annetaan avain, jonka perusteella haetaan lokalisoitu teksti. Esimerkiksi lomakkeen otsikko haetaan avaimella ”Lomakkeen otsikko” ja sen arvo suomeksi on ”Monikielisyys”. Jos kielen vaihtaa englanniksi, otsikon teksti muuttuu arvoon ”Satellite assembly test”.

Suomenkielinen lokalisointi

Suomenkieliset tekstit

Englanninkielinen lokalisointi

Englanninkieliset tekstit

6. Luodaan paikka, jossa voi vaihtaa kieliasetusta

Kielen valinta voidaan tehdä RadioButtonilla seuraavasti:

private void uiRadioButton_Click(object sender, Resco.UIElements.UIMouseEventArgs e)
{
    UIRadioButton radioButton = sender as UIRadioButton;
    string culture = string.Empty;
    if (radioButton == null) return;

    switch (radioButton.Text)
    {
        case "Suomi":
            culture = "fi-FI";
            break;
        case "English":
            culture = "en-GB";
            break;
    }

    // This is used for the language of the user interface
    Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(culture);
    // This is used with formatting and sort options (e.g. number and date formats)
    // e.g. a float value 2.352 will be 2,3.52 if CurrentCulture is set to de-DE
    Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(culture);
}

Näillä ohjeilla voi luoda kieliversioinnin Windows Forms -sovellukselle.

Katso myös

Windows forms -komponenttien siirtely ja editointi

Windows Forms -maailmassa UI elementit sijoittuvat aina johonkin kohtaan elementtien hierarkiaa. Esimerkiksi peruslomakkeella on Grid, joka sisältää pari elementtiä. Toinen voi olla toisen tason grid, joka sisältää syöttökenttiä ja painikkeita.

Murheita tulee helposti silloin, kun elmenttejä pitää siirtää näytön sisällä. Pitää ottaa yläosan syöttökentät ja siirtää ne alaosaan tai jakaa pitkä lomake parille tabille. Perinteinen leikkaa ja liimaa ei toimi, hierarkiasta johtuen. Vai olisiko ongelma editorissa?

Microsoft on ratkaissut ongelman Document Outline -työkalulla, jossa näkyy elementtien hierarkia. Siellä sitten vain raahaillaan elementtejä hierarkiasta toiseen. Homman saa tehtyä, mutta ei se tunnu yhtä kätevältä kuin WPF:n xaml-tiedoston editointi.

Document outline avautuu komennolla Ctrl+W, U tai VS2010:ssa Ctrl+ALT+T.

Post Navigation