logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Mai 31

Java + MongoDB + Spring Data

Escrito por Ebercom em 1, 2.0, 2009, 4, 6, api, app, AR, auto, back, BI, C#, case, class, collection, configuração, dados, demo, email, exemplo, Flex, for, git, Hibernate, IE, if, int, interface, Java, JPA, lista, map, mg, O, on, Opinião, Outros, PHP, RIA, Ria’s Geral, S+S, Spring, string, super(), tag, TAT, Tecnologia, template, UI, XML @ 05 31st, 2011 | via http://www.flexdev.com.br/home | Sem comentários
Ebercom
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Olá.

A alguns dias escrevi um post sobre PHP + MongoDB e recebi um feedback muito positivo
então resolvi repetir a dose e mostrar um pouco da integração entre Java e MongoDB.

Na minha opinião essa é uma das principais vantagens do MongoDB em relação a outros bancos de dados NoSQL,
O MongoDB e extremamente fácil de se integrar com a maioria das linguagens.

Neste Post vou falar um pouco sobre o MongoDB e a integração com o java utilizando o Spring Data.
O MongoDB fornece o mongo-java-driver que atualmente esta na versão 2.6.X é uma API completa para acessar o MongoDB.
O Spring Data é um projeto recente, lançado em 2010, ele oferecer suporte a novas tecnologias não relacionais, suporte a extensões específicas a bancos de dados relacionais. Spring Data trabalha como uma camada intermediária entre seus POJOs e o MongoDB.

Nesse exemplo estou usando o maven para gerencias as dependências do projeto
Então alem das dependências habituais do projeto: Spring, JUnit e etc.. vamos precisar adiciona ao pow.xml as dependências do MongoDB e Spring Data

pow.xml

Feito isso as dependências do projeto estão configuradas e podemos partir para a configuração do spring.
A configuração é bem simples, nesse exemplo existem apenas 2 beans que configuram o MongoDB e Spring Data mongoTemplate e mongo

applicationContext.xml

O Spring Data oferece uma serie de anotações que permitem mapear o POJO de forma bem similar ao Hibernate/JPA
Contact.java

@Document(collection="contacts")
public class Contact 
    @Id
    private ObjectId id;
    private String name;
    private String email;

  //getter and setter methods 
  ...

E é através do mongoTemplate que vamos interagir com o MongoDB por exemplo :

@Autowired
MongoTemplate template;

// insere um novo registro		
template.insert("contacts", contact);

// insere/altera um registro
template.save("contacts", contact);

// remove um registro
template.remove(contact);

// lista todos os registros
List list = template.getCollection(collectionName, Contact.class);

Apesar do Spring Data suportar o JPA repository fiz uma implementação genérica para um repositório usando o Spring Data.

GenericRepositoryWithMongo.java – Repositório genérico

public abstract class GenericRepositoryWithMongo 

  @Autowired
  protected MongoTemplate template;
  protected Class targetClass;
  protected String collectionName;

  @SuppressWarnings("unchecked")
  public GenericRepositoryWithMongo() 
     this.targetClass = (Class) ((ParameterizedType) getClass().getGenericSuperclass()).getActualTypeArguments()[0];
  

  @PostConstruct
  public void initCollection() 
    if(this.targetClass.isAnnotationPresent(Document.class))
      Document document   = this.targetClass.getAnnotation(Document.class);
      this.collectionName = document.collection();
    
    else
      this.collectionName = this.targetClass.getSimpleName().toLowerCase();
    
  }

  public List getCollection() 
    return template.getCollection(collectionName, targetClass);
  

  public void persist(T entity) 
    template.insert(collectionName, entity);
  

  public void merge(T entity) 
    template.save(collectionName, entity);
  

  public void remove(T entity) 
    template.remove(entity);
  

  public List findAll() 
    return getCollection();
  

  public long count() 
    return getCollection().size();
  
}

E então a interface do repositório e sua implementação

ContactRepository.java – Repositório de contatos

public interface ContactRepository 

    public Contact findByEmail(String email);

    public void persist(Contact entity);

    public void merge(Contact entity);

    public void remove(Contact entity);

    public List findAll();

ContactRepositoryImpl.java – Implementação do repositório de contatos

@Service("contactRepository")
@Repository
public class ContactRepositoryImpl extends GenericRepositoryWithMongo implements ContactRepository

	public Contact findByEmail(String email) 
	   Criteria criteria	 = Criteria.where("email").is(email);
	   Query query 	         = new Query(criteria);
	   return template.findOne(query, targetClass);
	
}

Realmente me surpreendi com a facilidade da integração usando o Spring Data
é um exemplo bem simples da integração porem mais da o caminho das pedras para quem esta se aventurando no mundo NoSQL.
Espero que seja util..

Para quem tiver o interesse deixei app no git
https://github.com/FabioBatSilva/spring-mongodb

Abraço e até a próxima….

Click aqui para ver o post Original
Fábio B. Silva
Fabio B. Silva
http://www.flexria.com.br

Mai 30

Carregando sub-aplicações de versões diferentes do Flex com SWFLoader

Escrito por Cognitiva Soluções em 1, 2.0, 3d, 4, 6, Adobe, app, AR, BI, blog, Blogs, C#, carregar, class, classe, classes, código, Documentação, event, EventListener, exemplo, Flex, Flex 4, for, function, Google, html, if, image, mg, NaN, O, on, processo, Ria’s Geral, S+S, string, swf, Teste, UI @ 05 30th, 2011 | via http://blog.cognitivasolucoes.com | Sem comentários
Cognitiva Soluções
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Existe uma maneira de carregar aplicações de versões anteriores dentro de outra aplicação Flex 4.5. No caso estas aplicações são chamadas sub-applications.
Utilizando o SWFLoader fica muito fácil!
Segue o exemplo:

Devesse colocar um parâmetro de compilação na aplicação principal e nas sub-aplicações:
-includes=mx.managers.systemClasses.MarshallingSupport


Agora vamos ao código Flex:

public function loadModule(url:String):void
   if( swfLoader == null )
    swfLoader = new SWFLoader();
    swfLoader.loadForCompatibility = true;
    swfLoader.percentWidth = 100;
    swfLoader.percentHeight = 100;

    // Adicionando listeners.
    swfLoader.addEventListener(Event.INIT, initSWF);

   swfLoader.unloadAndStop();
   swfLoader.source = url;
   swfLoader.load();
  }

  protected function initSWF(event:Event):void
   this.addChild(this.swfLoader);

   this.sysManagerSubSWF =  swfLoader.content;
   this.sysManagerSubSWF.addEventListener(FlexEvent.APPLICATION_COMPLETE, completeSWF);

  protected function completeSWF(event:*):void
   this.applicationSubSWF = sysManagerSubSWF.application;

   // Agora é possivel invocar funções da sub-aplicação
   if (this.applicationSubSWF.hasOwnProperty("funcaoTeste"))
    var funcaoTeste:Function = (this.applicationSubSWF["funcaoTeste"] as Function);
    funcaoTeste("Teste");

  }

Segue aqui a documentação oficial completada e detalhada sobre todo o processo de carregar sub-aplicações: “About loading sub-applications“.

Mai 30

Loading Applications – About application domains

Escrito por Fabio da Silva em 1, 4, 6, app, AR, Behavior, BI, blog, Blogs, C#, class, classe, classes, control, err, erro, error, event, flash, Flash Player, Flex, for, framework, Google, if, int, LOB, mg, O, on, player, Ria’s Geral, RoR, runtime, S+S, swf @ 05 30th, 2011 | via http://fabiophx.blogspot.com | Sem comentários
Fabio da Silva
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

About application domains

An application domain is a container for class definitions. Applications have a single, top-level application domain called the system domain. When you load a sub-application into another, main application, you can load it into one of three application domains: sibling, child, and current. Each of these locations defines where the sub-application can get its class definitions from.

The System domain

Classes defined by Flash Player are in the system domain. The system domain parents all other application domains. The main application’s application domain is a child of the system domain. Classes defined in the system domain are never redefined in sub-applications or main applications. Those applications all share the common definitions of Flash Player. These definitions include classes such as DisplayObject, Event, and Sprite. The definitions of these shared classes are contained in the playerglobal.swc file.

Sibling applicaton domains

The application domain that a sub-application is in determines where the sub-application gets its class definitions from. If the main application loads a sub-application into a sibling application domain, the sub-application defines its own non-player class definitions. This is the configuration for multi-versioned applications.

Child application domains

If a main application loads a sub-application into a child application domain of its application domain, the subapplication gets its class definitions from the main application. This behavior is the default for application loading. It can result in runtime errors if the applications are compiled with different versions of the Flex framework. These errors occur because the applications are sometimes compiled against different definitions of the same classes.

If a sub-application defines one of the classes that is already defined in the main application, the child’s definition is ignored. If multiple sub-applications define the same class that isn’t defined in the main application, each sub-application uses its own definition.

The current application domain

If you load a sub-application into the current application domain, the sub-application’s class definitions are often ignored. This behavior is because the first definition in a domain is used. Subsequent definitions loaded into that domain are ignored. If new class definitions are added, the main application can use them.

Using the current application domain is typical of RSLs and other specially compiled resources, and is not typically used when loading sub-applications.

Setting application domain

You specify the application domain of a sub-application by setting the value of the loadForCompatibility property on the SWFLoader. If you set the value of this property to true, then the sub-application is loaded into a sibling application domain. If you set the value of this property to false (default), then the sub-application is loaded into a child application domain.

You can also specify the application domain on the LoaderContext object. You do this if you specify the value of the loaderContext property when using the SWFLoader control.

Mai 29

Agile Portugal 2011 a 20-22 de Junho, no Porto

Escrito por riaPT em Eventos, Ria’s Geral @ 05 29th, 2011 | via http://riapt.org | Sem comentários
riaPT
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Para os amantes das metodologias ágeis de gestão de projectos, recomendo vivamente o evento Agile Portugal 2011.

A segunda edição da Agile Portugal terá lugar em 20-22 Junho, no Porto, novamente perto do S.João, a maior festa da cidade. O objectivo da conferência mantém-se o mesmo, promover um ambiente de inovação, discussão, e networking com outros agilistas nacionais e internacionais, juntando sob o mesmo tecto liders, praticantes e formadores.

Um evento a não perder! Existe um número limitado de lugares, por isso não é de deixar o registo para os últimos momentos.

O Programa deste ano conta já com um conjunto muito bom de palestrantes de renome internacional, como:

  • Allen Wirfs-Brock
  • Dave Thomas
  • Joseph Yoder
  • Mike Beedle
  • Mitch Lacey
  • Rebecca Wirfs-Brock

No website da conferência é possível encontrar as últimas notícias e actualizações ao programa. Visite o website do evento – http://2011.agilept.org/ – para mais informações.

Aproveito ainda para informar que, numa parceria entre a Webfuel e a Agile Portugal 2011, temos um código promocional de 20€ para o Airgile, uma plataforma de gestão de projectos. O código é válido até dia 23 de Junho de 2011, e para o utilizar basta preencher “agilept2011″ no campo “código promocional” durante o registo no Airgile.

Mai 28

TextArea com atalho para Desfazer e Refazer

Escrito por SamuelFacchinello em 1, 2.0, 4, 6, Adobe, Adobe Flex, AR, as2, BI, Bindable, blog, Blogs, botão, break, C#, case, class, código, código fonte, collection, Componente, control, Controls, Download, event, EventListener, Evento, events, flash, Flex, fonte, for, function, gestão, git, Google, html, IE, if, int, mg, O, on, padrão, RIA, Ria’s Geral, S+S, site, string, super(), Tema, tv, UI, utils @ 05 28th, 2011 | via http://desenvolvendoemflex.blogspot.com/ | Sem comentários
SamuelFacchinello
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Por padrão o componente TextArea do Flex não possui função de desfazer e refazer, com isso resolvi implementar estas duas funções.

Para testar é só digitar um texto, e pressionar Ctrl+Z para desfazer e Ctrl+Y para refazer.

*download do fonte: botão direito “View Source”

Código Fonte:

/*############################################################*/
/*                                                            */
/*   Powered by: Samuel Facchinello                           */
/*   http://desenvolvendoemflex.blogspot.com/                 */
/*                                                            */
/*############################################################*/
package com.blogspot.desenvolvendoemflex.utils
    import flash.events.Event;
    import flash.events.KeyboardEvent;

    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
    import mx.controls.TextArea;

    /**
     *
     * @author SAMUEL FACCHINELLO
     * @site http://desenvolvendoemflex.blogspot.com/
     */
    public class TextAreaWithUndo extends TextArea 

        /**
         * Variable of control position Undo or Redo
         * */
        [Bindable]
        private var _position:int = -1;

        public function get position():int
            return _position;

        /**
         * Variable that stores all typed letters
         * */
        [Bindable]
        private var _array:ArrayCollection = new ArrayCollection();

        public function get array():ArrayCollection
            return _array;

        /**
         * Constructor
         *
         */
        public function TextAreaWithUndo()
            super();
            //add value default
            addValue("");

            //add Event on KeyDown
            addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);

        /**
         * Function with KeyDown
         * @param eventObj: KeyboardEvent
         *
         */
        private function myKeyDown(eventObj:KeyboardEvent):void
            // Was Ctrl key pressed?
            if (eventObj.ctrlKey)
                var valueReturn:String = null;

                switch (eventObj.keyCode) 

                    case 90: // Was Ctrl-Z pressed?
                        valueReturn = returnPrevisionValue();
                        break;

                    case 89: // Was Ctrl-Y pressed?
                        valueReturn = returnNextValue();
                        break;

                    default:
                        break;

                //if return exist
                if (valueReturn!=null)
                    //set text with return functions
                    text = valueReturn;

                    //select last _position in TextArea
                    setSelection(text.length, text.length);

            } else
                //only adds to the list if any of these characters.
                //list from here: http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html
                if ((eventObj.keyCode>=65&&eventObj.keyCode<=90)
            }
        }

        /**
         * Function that adds the letters in the array
         * @param value: propertie "text" of TextArea
         *
         */
        private function addValue(value:String):void
            //it was press Ctrl + Z ever, and was entered some value, clears the values ??of the position in which this forward
            if (_array.length>0&&_array.length-1>_position)
                for (var i:int = _array.length-1; i>_position; i--)
                    _array.removeItemAt(i);

            }

            //if the value is being added is equal to the last added, not added!
            if (_array.length>0)
                if (value==_array.getItemAt(_array.length-1))
                    return;

            }

            _array.addItem(value);
            _position++;
        }

        /**
         * triggered when press Ctrl + Y
         * @return : Returns the next value from the list according to position
         *
         */
        private function returnNextValue():String
            if (_position+1>=0&&_position+1<_array.length)
                _position++;
                return _array.getItemAt(_position) as String;

            return null;
        }

        /**
         * triggered when press Ctrl + Z
         * @return : Returns the Prevision value from the list according to position
         *
         */
        private function returnPrevisionValue():String
            if (_position-1>=0)
                _position--;
                return _array.getItemAt(_position) as String;

            return null;
        }
    }
}

Adicionei este componente ao Google Code, pode ser visto aqui: http://code.google.com/p/textarea-with-undo/

Qualquer elogio, dúvida, sugestão ou melhoria para o componente, deixe um comentário!!

Abraço, até a próxima.

*Tradução para o inglês com o Google Translate. :)

Mai 28

Google Wallet, o sistema de pagamentos via NFC do Google é oficial

Escrito por Tecinfor em 4, AR, C#, Google, IE, Notícias, O, on, produto, Ria’s Geral, S+S, Segurança, serviço, UI @ 05 28th, 2011 | via http://tecinfor.net | Sem comentários
Tecinfor
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Google Wallet é um produto oficial da empresa de Mountain View. O serviço estará disponível como um aplicativo no Nexus S 4G, contando com todos os pré-requisitos de segurança necessários para realizar as transações, incluindo o teclado de um número PIN de segurança, e depois aproximar um leitor para pagar o produto adquirido. Nesse estágio [...]

Mai 28

Vodafone 858 o novo telemovel da vodafone

Escrito por Tecinfor em Android, AR, C#, Google, Notícias, O, on, portugal, Ria’s Geral, S+S, SmartPhone, Tema @ 05 28th, 2011 | via http://tecinfor.net | Sem comentários
Tecinfor
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Disponível em preto e em branco, o Vodafone 858 é um smartphone que, funciona sobre o Android. O que não disse ainda é que a versão do sistema operativo do Google que vem incluída é a 2.2 (Froyo) sendo que não sabemos se uma actualização para o Gingerbread está prevista. O Vodafone? 858 é o? terceiro? smartphone de [...]

Mai 27

Criando Mockups com o Microsoft SketchFlow

Escrito por Ebercom em 1, 2.0, 3.5, 4, 6, api, app, AR, Artigo, back, bar, BI, Blend, blog, Botões, busca, buscas, C#, cliente, control, Controles, Curso, Cursos, demo, Desenvolvimento, Diversos, err, expression, Expression Blend, Ferramenta, Flex, fonte, for, ide, IE, image, int, interface, label, layout, lista, lite, map, Mate, menu, mg, Microsoft, Microsoft Expression, NaN, novidade, Novidades, O, on, padrão, protótipo, RIA, Ria’s Geral, S+S, silverlight, sketchflow, tag, transição, UI, uint, UX, Wordpress, XP, zend @ 05 27th, 2011 | via http://www.flexdev.com.br/home | 1 comentário
Ebercom
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Mock-up é uma maquete ou um modelo em tamanho real de um projeto. Utilizado para o ensino, demonstração, avaliação de concepção e outras finalidades. Um Mock-up é um protótipo e mostra pelo menos alguma funcionalidade que o projeto real visa ter.

O SketchFlow é um recurso da família Microsot Expression Studio Ultimate, que lhe da a capacidade, rapidez e eficácia de mapear o fluxo de uma aplicação de interface com o usuário através de layout de telas permitindo a transição de um estado para outro. Esta habilidade permite explorar e testar várias idéias sem investir grandes quantidades de tempo, mostrando ao seus clientes que você é capaz de encontrar a solução certa para eles.

Com o SketchFlow os clientes podem testar diversos cenários e fornecer um feedback para a equipe de desenvolvimento, através de comentários, anotando a sua experiência enquanto navegam pelo protótipo.

Então vamos começar!!!

Um cliente te ligou solicitando a criação de uma tela para a consulta de pedidos de compra feitos no dia que deve mostrar o número de vendas/hora por vendedor. Você logo imaginou o que o cliente queria e iniciou o desenvolvimento do protótipo de tela.

Para isso inicie o Microsoft Expression Blend 4 + Skecth Flow e na guia Projects escolha New Project, e então na tela New Project escolha Silverlight SketchFlow Application e nomeie o protótipo com o seguinte nome PurchaseRequestSample então click em OK, conforme a figura 1 logo abaixo.

Figura 1 – Criando o projeto para o protótipo da tela.

image

Na barra de ferramentas do blend clique em Assets (recursos) e então na árvore selecione SketchFlow –> Styles –> SketchStyles clique no controle TitleLeft-Sketch e então desenhe no topo da página. Com um duplo clique no controle você poderá editar o texto ou então utlizar a barra de propriedades no grupo Common Properties propriedade Text.

Figura 2 – Selecionando o controle.

image

Figura 3 – Controle desenhado no topo da página.

image

Figura 4 – Barra de propriedades.

image

Existem algumas coisas importantes que você precisa saber ao utilizar o Expression Blend.

image
image Utilize essa seta, quando você quiser redimensionar os controles.

Quando o controle estiver selecionado ele ficará de forma parecida como o da imagem abaixo, mostrando as áreas em que você pode manipular o mouse para redimensionar o controle.
image

Podemos também manipular as âncoras do controle.
Quando a âncora está habilitada ela fica dessa forma image e quando desabilitada dessa image.

Quando habilitada; a medida em que a página for redimensionada o controle também será. Isso depende das configurações de âncora que você definiu, nesse caso o controle é redimensionado quando todas as âncoras estão habilitadas.

Para habilitar ou desabilitar as âncoras basta dar um clique em cima dela.

image Utilize essa seta, quando você quiser mover os controles.
image Utilize a “Mãozinha” para mover a página dentro do Expression Blend sem desorganizar os controles.
image Utilize a Lupa para aumentar o zoom da página. Mantenha a tecla ALT pressionada enquanto clica para reduzir o zoom.
image Utilize para inserir textos na página. BasicTextBlock-Sketch para Labels e BasicTextBox-Sketch para caixas de texto.

image

image Utilize para inserir controles de usuário como botões, caixas de seleção, etc…

image

Agora, vamos criar um subtítulo para a tela, para isso em Assets –> Sketch Styles selecione SubtitleLeft-Sketch e adicione o controle logo abaixo do título, então altere o texto para “Vendas hora por vendedor”. Você pode encontrar os controles facilmente fazendo buscas conforme a figura 5.

Figura 5 – Localizando os controles mais facilmente.

image

Mude o tamanho da fonte do controle para 14, através da barra de propriedades conforme a figura 6.

Figura 6 – Mudando o tamanho da fonte

image

Agora vamos inserir um retangulo abaixo do subtítulo para simular uma caixa de listagem, para isso pesquise em Assets por rect para localizar o controle Rectangle-Sketch.

A sua página deverá ficar como a figura 7 ao executar o protótipo. Para executar o protótipo pressione a tecla F5 ou vá para o menu Project e clique na opção Run Project .

Figura 7 – Página esperada até o momento.

image

Em algum momento teremos de redimensionar a página que está sendo criada. Uma coisa que você precisa saber é que toda a página ou UserControl criado pelo Expression Blend por padrão tem um controle Grid nomeado de LayoutRoot é nele que adicionamos os nossos controles. Através da barra de ferramentas Objects and Timeline podemos observar como os nosso controles estão organizados. Veja a figura 8.

Figura 8 – Objects and Timeline

image

Todos os controles que estão no UserControl podem ser observados através dessa barra de ferramenta. Cada controle possui um símbolo de um olho image, clique nele para ocultar ou mostrar os controles que estão na página. Você também pode travar os controles evitando que eles se movam acidentalmente, para isso clique ao lado do símbolo do olho para habilitar o cadeado.

Figura 9 – TextBlock Travado.

image

O controle Grid “LayoutRoot” é redimensionado junto com a página, pois todas as suas âncoras estão habilitadas por padrão. Como queremos aumentar a página devemos clicar em UserControl na barra Objects and Timeline e então clicar na seta de redimensionamento image e redimensionar a página conforme o desejado.

Quando estamos redimensionando a página podemos notar que os controles acompanham o redimensionamento do controle pai. Caso você não queira que eles acompanhem desabilite as âncoras.

Agora vamos inserir alguns retângulos dentro do rentâgulo criado anteriormente e dentro de cada retângulo adicione um controle BasicTextBlock-Sketch com o nome do vendedor.

Figura 10 – Selecionando o controle BasicTextBlock-Sketch

image

Deixe o nome dos vendedores em negrito selecionando B “Bold” através da barra de propriedades no grupo Text.

Figura 11

image

A página deverá ficar conforme a figura 12.

Figura 11

image

Vamos redimensionar a página e adicionar mais controles até que ela fique da seguinte forma.

Figura 12

image

As setas do lado direito foram desenhas através dos controles Block Arrow Down Sketch e Block Arrow Up Sketch, elas foram redimensionadas até que ficassem dessa forma.

As cores dos retângulos foram aplicadas através do grupo Brushes da barra de propriedades, selecionando Background e aplicando a cor desejada.

Figura 13

image

Nesse post conhecemos o SketchFlow e aprendemos diversos detalhes do Expression Blend. Aprendemos como adicionar controles a página, redimensioná-los e alterar suas propriedades.

No próximo post adicionaremos fluxos de navegação a esse protótipo, e será demonstrado como o cliente pode fornecer um feedback para a equipe de desenvolvimento.

Veja o protótipo desse post clicando aqui ou um mais completo aqui.

Continue acompanhando novidades através do blog da FlexDev e do meu blog no wordpress, até o próximo artigo.

Mai 26

Carregando CSS diferentes em runtime

Escrito por SamuelFacchinello em .NET, 1, 2.0, 4, 6, action, Actionscript, Adobe, Adobe Flex, AR, BI, blog, Blogs, botão, C#, carregar, css, Download, exemplo, flash, Flex, fonte, for, Google, html, IE, if, int, internet, mg, O, on, platform, procura, pt, reference, Ria’s Geral, runtime, S+S, swf, UI, Vários, zend @ 05 26th, 2011 | via http://desenvolvendoemflex.blogspot.com/ | Sem comentários
SamuelFacchinello
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Muitas vezes precisamos que uma mesma aplicação fique com aparências diferentes de acordo com o gosto de cada um, por isso vou mostrar como carregar um ou vários CSS em runtime no Flex.
Procurando na internet sobre isso, me deparei com o blog do Fabio Silva dizendo como fazer, então resolvi implementar e mostrar para vocês como fazer.
Como faz?
O css deve ser compilado, (no FlashBuilder) basta clicar com o botão direito do mouse no arquivo do CSS e marcar a opção “Compile CSS to SWF”, com isso o CSS será compilado como um arquivo externo, no formato “.swf”, ao rodar sua aplicação basta usar a função:
StyleManager.loadStyleDeclarations(“./css/css.swf”);
Exemplo:

Para fazer o download do fonte clique com o botão direito e depois em “view source”.

Por hoje é isso!!!

Sigam o blog e comentem!!

Fontes:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/styles/StyleManager.html
http://fabiophx.blogspot.com/2010/09/carregando-css-em-run-time.html

Mai 26

Salvar tamanho e posição das colunas em um DataGrid

Escrito por SamuelFacchinello em 1, 4, 6, Adobe Flex, AR, blog, Blogs, botão, C#, cliente, código, código fonte, Cookie, DataGrid, Dica, Dicas, flash, Flex, fonte, Google, IE, if, mg, O, on, player, problema, RIA, Ria’s Geral, S+S, tag, Tema, Twitter, UI, web @ 05 26th, 2011 | via http://desenvolvendoemflex.blogspot.com/ | Sem comentários
SamuelFacchinello
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Hoje surgiu um problema aqui na @PontoSistemas, onde teríamos que salvar a posição e o tamanho da coluna de acordo com o que o cliente preferir, como cada pessoa organiza a tela de um jeito diferente. Tudo isso porque toda vez que o DataGrid é construído novamente, ele volta ao estado inicial.

A idéia:
Ao organizar ou alterar os tamanhos das colunas de um DataGrid/AdvancedDataGrid salve as posições e os tamanhos das colunas.

A solução:
Altere o tamanho e/ou a ordem das colunas, e recarregue a página. Elas irão voltar na mesma ordem e tamanho que você as deixou.

Clique com o botão direito em cima do DataGrid, depois em “view source” para visualizar o código fonte.

Da maneira que foi implementado, as definições da posição e do tamanho das colunas são salvas na memória do FlashPlayer (como se fosse os cookies das páginas web), ao limpar esse “cookie” as configurações voltam ao estado original.

Por hoje é isso. Em breve novas dicas.

Comentem!!!

« Entradas anteriores |

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2758 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com