Layout Management – Silverlight

Amikor Layout Management-ről beszélünk, akkor az alkalmazásunk felhasználói felületén megjelenített vezérlőelemek elrendezéséről beszélünk.

Pozicionálás: Az abszolút és a dinamikus pozicionálást támogatja. Leíró kód áttekinthető. Minden silverlight program egy konténer elemre építkezik. A konténerek a vezérlőelemeket tárolja. Több féle vezérlőelem létezik pl.: Canvas,Grid. Amennyiben nem adunk meg neki paramétereket, akkor kitöltik a rendelkezésükre álló teret, ez alól egy kivétel van, mégpedig ha a konténer elem a canvas. Pozíciók finomhangolására is lehetőség van. Minden vezérlőben másképpen történik. Létezik egyszerűbb módszer is. A VerticalAligment és a HorizontalAligment tulajdonságpáros.

Grid: A legsokoldalúbb és a leggyakrabban használt konténer. Tetszőleges számú sor és oszlop definiálását. Alapértelmezés szerint egy oszlop és sor van definiálva. Többet szeretnénk, akkor a RowDefinition és ColumnDefinition objektumot kell elkészíteni.A ShowGridLines segítségével láthatóvá tehetjük az oszlopok és sorok elválasztó vonalait.

Canvas: lehetővé teszi, hogy explicit módon koordináták segítségével pozicionáljuk vezérlőinket. Nem veszi figyelembe a böngésző méretét. Az x/y koordinátákat a Canvas.Left illetve a Canvas.Top attached propertykkel állítjuk be. Itt különféle beállításokat végezhetünk el. ZIndex segítségével beállíthatjuk például,hogy a vezérlő eltakarhat-e egy másikat.

Kezdeti lépések

Helló,

Egy kis emlékeztető: Célok

Tehát, ahhoz hogy wondow 8 alatt fejlesszünk ’windows store app’ stílusú alkalmazásokat a következő dolgokra lesz szükségünk:

Windows 8

Visual studio 2012 for win8.

Ha ezek telepítésével megvagyunk kezdőthet is a fejlesztés :).

Nyissuk meg a vs2012-őt és hozzunk létre egy új projektet(FILE->new->project), ezután a  templates-ek küzül válasszuk a JavaScript-et itt pedig a Blank App, állítsuk be a projekt helyét és nevezzük el majd ok. Ha minden jól megy létre is jött a projektünk.

A projekt solution-ében a főbb dolgok a következők:

References (windows library for JavaScript)

css mappa: kezdetben a defaultl.css-t tartalmazza, ide menthetjük a különböző css fájljainkat.

images mappa:  kezdetben itt a programunkban talalható kepek vannak például az alkalmazás indulásánál mi jelenjen meg stb. Ezek a fájlok felül írásával könnyedén cseréljetjük ezeket(érdemes odafigyelni hogy azonos felbontású és méretű képekkel írjuk felól a meglévőket)

js mappa: kezdetben a default.js-t tartalmazza ez fogja indítani az alkalmazásunkat

default.html: (fentebb láthtjuk a tartalmát),A WinJS references részt érdemes minden html oldlunkba bemásolni a References részeit „incloudolja”, itt állíthatjuk monjuk az alkalmazásunk stílusát sötétre vagy világosra az „ui-dark.css”, vagy „ui-light.css” segítségével. Ez után saját referenciáinkat is hozzáadjuk jelen esetben a default.css-t és default.js-t.

Ha mindennel megvagyunk futtasuk a programot, ha még nincs tabletünk (ami jelenleg elég valószínű) akkor két lehetőségünk van a futtatásra, futtathatjuk a saját gépünkön(local machine) vagy szimulátoron (Simulator).

Ha elindítottuk az alkalmazásunkat a következő fog megjelenni: „Content goes here”, ez van a html fájlunk body-jában.

Nos egyenlőre ennyi hamarosan folyt. köv.

Üdv.: Balázs

Silverlight – Animációk

Silverlight animációk létrehozásának egyik legegyszerűbb módja a blend segítségével lehetséges. A blend erőssége az animációkban rejlik. Próba képpen megpróbálok animálni egy négyzetet, amely kék színből szürkévé váltzik. A négyzet kirajzolása viszonylag egyszerű feladat. Kitöltése is. Aki használt már Adobe Falsh-t annak nagyon ismerős kinézet, működés. Itt is megtalálható az idővonal, amelyben létrehozunk egy storyboardot. A z idővonalon beállíthatjuk az időkorlátokat valamint találhatunk az idővonal felett nyilakat amelyekkel elindíthatjuk az animációt, illetve ugrálhatunk a különböző storyboardok között.A feladatunk annyi volt scupán, hogy egy storyboard beszúrása után a négyzet színét olyan változtattam, amilyenre szerettem volna, helyben megtekintettem az eredményt és a szín sikeresen megváltozott. Ha sikerült megváltoztatni a színt, akkor próbálkozzunk meg mondjuk, hogy a négyzetből kört animáljon. Amennyiben ezzel is kész vagyunk próbáljunk olyan animációt létrehozni, amelyben gombbal indíthatjuk el az animációnkat. Hozzunk létre a button eszköz segítségével egy nyomógombot, melynek adjuk az “animáció indítása” nevet. Hozzunk létre egy ellipszis. Majd a timeline-on hozzunk létre storyboardot. 3-mat vagy akár többet is. Hozzunk létre egyet az 1ms-nél és húzzuk oda az ellipszis, majd a 2ms-hez is húzzuk oda.Elindítjuk az animációt láthatjuk ,hogy a kis ellipszisünk a megadott útvonalon mozog. Ekkor még semmi köze a gombhoz. Jelöljük ki a gombot, majd a kis villám ikonra kattintva előjön a gombhoz tartozó események megadása. Kattintsunk kétszer a Clickre. Előjön egy forráskód. Ennek a kódnak a “private void Button_Click(object sender, System.Windows.RoutedEventArgs e)” sora után írjuk be, hogy : sbAnim.Begin(); . Ezután, ha lefuttatjuk gombnyomásra indíthatjuk az animációnkat. A mai napba sajnos csak ennyi fért bele, de hamarosan újra jelentkezek!

Hangok hozzáadása

Kétféle hang van, folytonos háttérzene és effekt hang.

1. Hozzuk létre a megfelelő változókat
SoundEffect effect;
Song music;

2. A Content projekten belül helyezzük el a hangfájlokat. Célszerű egy új mappát létrehozni.

3. A LoadContent() metóduson belül töltsük be a hangokat
music = Content.Load<Song>( “Sound/gameMusic” );
effect = Content.Load<SoundEffect>( “Sound/laserFire” );

4. A háttérzenét még a LoadContent-ben elindítjuk
PlayMusic( music );

5. Ehhez a PlayMusic metódust létre kell hozni
private void PlayMusic(Song song) {
try {
MediaPlayer.Play( song );
MediaPlayer.IsRepeating = true;
} catch {
}
}

6. Az effekt hangot a megfelelő helyeken elindítjuk
effect.Play();

Szövegek megjelenítése

Sokszor szükséges, hogy a játék aktuális állását megjelenítsük.

1.  Hozzuk létre a következő adattagokat:
int score;
SpriteFont font;

2. Az Initialize() metóduson belül adunk egy kezdőértéket a score változónak

3. A Content projekten belül el kell helyeznünk a betűtípust leíró fájlt. Célszerű egy külön mappába tenni.

4. A LoadContent() metóduson belül betöltjük a betűtípust
font = Content.Load<SpriteFont>( “Fonts/gameFont” );

5. A score változóban tároljuk az aktuális pontszámot. Helyezzük el a megfelelő feltételek után a változó értékét módosító műveleteket.

6. A Draw() metóduson belül kirajzoljuk a szöveget a képernyőre
spriteBatch.DrawString( font, “score: ” + score, new Vector2( GraphicsDevice.Viewport.TitleSafeArea.X, GraphicsDevice.Viewport.TitleSafeArea.Y ), Color.White );

Játékos létrehozása

1. Hozzunk létre egy új XNA projektet, a típusa Windows Phone Game (4.0). Ilyenkor létrejön már a projektben egy Game1.cs nevű főosztály, ennek adhatunk valami beszédesebb nevet.

2. Hozzunk létre egy új osztályt, ez lesz a játékos.

3. Hozzáadjuk a játékos osztályhoz a szükséges adattagokat, és az ezek eléréséhez szükséges metódusokat.

4. A főosztályban létrehozzuk privát adattagként a játékos(oka)t.

5. Az Initialize() metóduson belül példányosítunk.

6. A LoadContent() metódus csak egyszer hívódik meg, itt helyezzük el a textúrák betöltéséhez szükséges utasításokat.

7. A Draw() metódusban hívjuk meg a kirajzoláshoz szükséges metódusokat.

8. A képernyő felbontását a főosztály konstruktorában állítjuk be.

9. Az Update() metódus magát a játékciklust reprezentálja.

Push Notification Service

Hello!

Ma egy Push Notification szerviz készítést mutatok be:

  • Hozzunk létre egy új Azure projektet, adjuk hozzá a WCF Service Web Role-t
  • Töröljük a létrehozott service-t majd adjunk hozzá egy új Silverlight-enabled WCF Service-t
  • Töröljük az alapból létrehozott metódust, majd hozzunk létre egy konstruktor és egy metódust amely elmenti a beregisztrált eszköz címét.Erre a címre küldünk egy tailMessage-t és egy toastMessage-t.
  • Az üzenetek létrehozásához töltsük le ezt majd importáljuk a programba a WindowsPhone.Recipes.Push.Messages.dll-t
  • Adjunk hozzá egy Wp7-es projektet majd ehhez adjuk meg Service Reference-ként a szervizünk címét
  • Egyszerű felületet hozzunk létre kell egy feliratkozás gomb meg egy leiratkozás gomb írjuk meg az click eseménykezelőjét (hozzuk létre a csatornát,kérjük el az üzenetket)

Forrás

Üdv:
Szmeti

Windows Phone és Windows Azure

Hello!

Mai posztomban készítettem egy egyszerű fényképező alkalmazást mely a képeket nem a telefonra menti hanem a felhőbe.

  1. Készítsünk egy új  Windows Azure Project-et adduk hozzá ASP.NET MVC3 WebRole-t
  2. Telepítsük fel a NuGet package managert ha nincs fent
    (ha régi verzió lenne fent, jobb letölteni a legfrissebbet, ha telepítés sikertelen lenne uninstalláljuk a régi verziót és utána telepítsük)
  3. Package Manager Consolba írjuk be a következőt:
    “Install-Package WindowsAzure.Storage.Proxy”
  4. StorageServices.cs-ben állítsuk be CloudStorageAccount értékét
    Azure Storage Account
    Ezek után az AzureProjects/Roles/-nál hozzuk létre a DataConncetionStringet
  5. Adjunk hozza egy WP 7-es projektet
  6. Package Manager Consolba írjuk be a következőt:(wp7 projekthez)
    “Install-Package Phone.Storage”
  7. Állítsuk át a kliens proxy foglalását
    ProxyResolves
  8. Dobjunk fel egy gombot majd írjuk meg a click eseménykezelőjét, ez nem csinál mást mint megjeleníti a CameraCaptureTask-ot
  9. Iratkozzunk fel a Completed eseményére, itt kapcsolódjunk az storage-hoz, válasszunk létező konténert (új konténert nem hoz létre,nem létező konténer hibával elszáll) és töltsük fel a képet

Példaprogram
AzureStorageExplorer – Azure storage-unk menedzseléséhez

Minden jót!
Szmeti

This is sick!

Hi folks!

This is true, this Microsoft Access Control system is so awesome that words can’t describe it properly,but I will give it a try. Listen. You always had problem, how to verify your users? Now with the Microsoft Access Control system, you can so easily verify your users like a baby poops her pants (just kidding). So let me summarize it you can add windows ID, google, yahoo login options and a facebook login too. So you don’t even need to have a windows live id nor google you just have to login with your facebook account and you can use the application. How awesome is that. The developers can easily add this login method for their applications if it neccessary. They just have to do a registration process via facebook and create a app on FB, then choose the right method for their purposes, and thats it. Then you can go back to the Azure Access Control Service and add Facebook login option. For more detailed info look up this little training kit: http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=8396

 

These were my first intentions about the MS access control service and all I can say is nearly perfect 😉