React.js ::: Dicas & Truques ::: Passos Iniciais |
Aprenda a desenvolver aplicações React diretamente no HTML, sem usar a ferramenta create-react-appQuantidade de visualizações: 2118 vezes |
|
Embora seja recomendável usar a ferramenta create-react-app para criar suas aplicações React, às vezes gostaríamos de testar algumas idéias diretamente no código HTML, ou seja, sem precisar passar pelo processo "npx create-react-app" -> "npm start" -> "npm run build". Tudo que temos que fazer é incluir três scripts, a saber, react.production.min.js, react-dom.production.min.js e babel.min.js. Estes scripts estão disponíveis para inclusão via CDN (o mais recomendado) ou você pode baixá-los para uso local, o que, com certeza, vai deixar o processo de desenvolvimento ainda mais rápido. Para obter os CDS ou fazer o download individual dos mesmos, basta pesquisá-los no Google por seus nomes. Nesta dica eu optei por baixar os scripts e rodá-los a partir da minha máquina de desenvolvimento. Os dois primeiros scripts nos permitem escrever código React em nossos códigos JavaScript, e o terceiro, babel.min.js, nos permite usar a síntáxe JSX (JavaScript XML) e também dar suporte ao JavaScript ES6 para os navegadores mais antigos. Então, vamos escrever código? Veja a listagem a seguir:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estudos React</title>
<script src="js/react.production.min.js"></script>
<script src="js/react-dom.production.min.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<h1>Primeira aplicação React direto no HTML</h1>
<div id="minha_app"></div>
<script type="text/babel">
// vmaos criar um novo compomente React
class Mensagem extends React.Component{
render() {
return <h1>Olá, bem-vindo(a) ao React!</h1>
}
};
// vamos exibir o componente Mensagem na div minha_app
ReactDOM.render(<Mensagem />, document.getElementById('minha_app'));
</script>
</body>
</html>
Ao abrir esta página no navegador teremos o seguinte resultado: Primeira aplicação React direto no HTML Olá, bem-vindo(a) ao React! Pronto! Agora você pode testar idéias no React de forma bem rápida e fácil. Mas, lembre-se, em aplicações mais complexas, o uso da ferramenta create-react-app continua sendo o mais recomendado. |
Java ::: Coleções (Collections) ::: ArrayList |
Como excluir um elemento de uma ArrayList do Java baseado em seu valor - Como usar o método remove() da ArrayList do JavaQuantidade de visualizações: 14961 vezes |
|
Nesta dica mostrarei como remover a primeira ocorrência de um elemento na ArrayList. Para isso nós vamos usar o método remove(), que recebe o valor do elemento a ser excluído. Se o elemento estiver na ArrayList e for excluído com sucesso, o retorno será true. Se o elemento não for encontrado, o retorno será false. Veja o exemplo Java a seguir:
package estudos_java;
import java.util.ArrayList;
public class Estudos {
public static void main(String[] args) {
// cria uma ArrayList que conterá strings
ArrayList<String> nomes = new ArrayList<>();
// adiciona itens na lista
nomes.add("Carlos");
nomes.add("Maria");
nomes.add("Fernanda");
nomes.add("Osmar");
nomes.add("Maria");
// Vamos remover o elemento "Osmar"
if (nomes.remove("Osmar")) {
System.out.println("O elemento foi removido com sucesso!");
}
else {
System.out.println("O elemento não foi encontrado!");
}
System.exit(0);
}
}
Ao executar este código Java nós teremos o seguinte resultado: O elemento foi removido com sucesso! |
Java ::: Dicas & Truques ::: Gráficos |
Como desenhar em um JComponent (JLabel, JButton, JPanel, etc) usando o método getGraphics() para obter o contexto de desenhoQuantidade de visualizações: 14542 vezes |
|
A classe JComponent possui um método chamado getGraphics() que retorna um objeto da classe Graphics que pode ser usado para desenhar na superfície do componente. Desta forma, qualquer componente que herda de JComponent pode ser usado para esta finalidade. Antes de demonstrarmos como isso funciona, tenha em mente que o contexto de desenho de um componente só está disponível após ele ser pintado pela primeira vez. Se tentarmos obter o Graphics antes que o componente tenha sido pintado, corremos o risco de lançar uma exceção NullPointerException. O trecho de código abaixo mostra como desenhar uma linha em um JLabel ao clicar em um botão. Fique atento a este código. Boa parte das dicas vistas nesta seção usam esta abordagem:
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Estudos extends JFrame{
JLabel label;
public Estudos() {
super("Desenhando em um JLabel");
Container c = getContentPane();
c.setLayout(new BorderLayout());
// Cria um JLabel
label = new JLabel();
c.add(label, BorderLayout.CENTER);
// Cria um botão
JButton btn = new
JButton("Desenhar uma linha");
btn.addActionListener(
new ActionListener(){
public void actionPerformed(ActionEvent e){
// Desenha uma linha no JLabel
Graphics graphics = label.getGraphics();
graphics.drawLine(0, 0, 150, 100);
}
}
);
// Adiciona o botão à janela
c.add(btn, BorderLayout.SOUTH);
setSize(350, 250);
setVisible(true);
}
public static void main(String args[]){
Estudos app = new Estudos();
app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Há algo de interessante neste código. Se você maximizar, minimizar ou redimensionar a janela verá que o desenho é apagado. Isso acontece porque todas as vezes que a janela sofre alguma alteração, ela é pintada novamente, juntamente com seus componentes filhos. Se você deseja que o desenho seja feito automaticamente novamente, é melhor fazer uma sub-classe do componente desejado e sobrescrever seu método paintComponent(). Nesta mesma seção você encontrará exemplos de como fazer isso. |
Revit C# ::: Dicas & Truques ::: Eixos - Grids |
Como criar eixos no Revit via programação usando a função Create() da classe Grid da Revit C# APIQuantidade de visualizações: 775 vezes |
|
Os eixos, ou grids, são linhas que auxiliam na construção de um projeto, ou seja, uma espécie de malha de linhas. Eles são mais utilizados quando se trabalha com elementos estruturais, para a locação de colunas e pilares. No Revit, os eixos podem ser verticais, horizontais, inclinados e até em forma de arcos. Para criá-los, vá na aba Arquitetura, seção Dados e localize o item Eixo (ou digite GR). Via programação nós podemos criar um eixo no Revit usando a função Create() da classe Grid da Revit C# API. Neste exemplo mostrarei, em detalhes, como isso pode ser feito. O primeiro passo é obter uma referência ao documento UI atual usando this.ActiveUIDocument. Após isso acessar o documento usando uidoc.Document. As coordenadas geométricas de início e fim do eixo são criadas como objetos da classe XYZ. Então, de posse das coordenadas, nós criamos um objeto Line usando a função Line.CreateBound(). Para finalizar nós usamos a função Grid.Create() para desenhar o eixo na área de desenho do Revit. Note como passamos o objeto Line e uma referência ao documento atual para esta função. Veja ainda o uso de uma Transaction para abrir uma transação do Revit, criar o elemento e fechá-la em seguida. Este exemplo criará um eixo com o LevelId -1, ou seja, no primeiro nível do documento. Em outras dicas dessa seção eu mostro como definir o nível para o grid recém-criado. Veja o código Revit C# API completo para o exemplo:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Autodesk.Revit.DB;
using Autodesk.Revit.DB.Architecture;
using Autodesk.Revit.DB.Structure;
using Autodesk.Revit.UI;
using Autodesk.Revit.UI.Selection;
namespace Estudos {
[Autodesk.Revit.Attributes.Transaction(Autodesk.Revit.Attributes.
TransactionMode.Manual)]
[Autodesk.Revit.DB.Macros.AddInId("ED8EC6C4-9489-48F7-B04E-B45B5D1BEB12")]
public partial class ThisApplication {
private void Module_Startup(object sender, EventArgs e) {
// primeiro obtemos uma referência ao documento atual
UIDocument uidoc = this.ActiveUIDocument;
Document doc = uidoc.Document;
// criamos a linha geométrica para posicionar o eixo
// não se esqueça de converter metros para pés
XYZ inicio = new XYZ(0, -100, 0);
XYZ final = new XYZ(0, 100, 0);
// construímos a linha
Line linhaGeometrica = Line.CreateBound(inicio, final);
// iniciamos uma nova transação
using(Transaction t= new Transaction(doc)) {
t.Start("Criar um novo Grid");
// e criamos o novo eixo
Grid eixo = Grid.Create(doc, linhaGeometrica);
t.Commit();
// e mostramos o resultado
TaskDialog.Show("Aviso", "O novo eixo foi criado com o ID: " +
eixo.Id);
}
}
private void Module_Shutdown(object sender, EventArgs e) {
// para fazer alguma limpeza de memória ou algo assim
}
#region Revit Macros generated code
private void InternalStartup() {
this.Startup += new System.EventHandler(Module_Startup);
this.Shutdown += new System.EventHandler(Module_Shutdown);
}
#endregion
}
}
Ao executar este código Revit C# API teremos o seguinte resultado: O novo eixo foi criado com o ID: 49827 |
Nossas 20 dicas & truques de programação mais populares |
|
Python - Como excluir e retornar um item da lista Python baseado em seu índice usando a função pop() C - Como inverter (reverter) o conteúdo de uma string em C usando uma função str_reverse() personalizada |
Você também poderá gostar das dicas e truques de programação abaixo |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |





