Crie seu próprio widget: 6 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Este Instructable irá ensiná-lo a criar um Yahoo! Ferramenta. Ao final deste tutorial, você terá aprendido um pouco de JavaScript e XML.

Etapa 1: primeiros passos

Algumas ferramentas de que você precisará para fazer um widget são: - Um computador com Mac OS X ou Windows Xp / Vista - Um programa de edição de texto. (Bloco de notas é perfeito.) - Um programa de edição de imagens. (O Microsoft Paint é bom.) - Paciência e tempo.- Yahoo Widgets- Widget Converter WidgetUma vez que você tenha esses programas e widgets, está pronto para passar para a etapa dois.

Etapa 2: Criando Estrutura de Pasta

Agora você precisará criar a estrutura de pastas para abrigar todos os arquivos que compõem um widget. A estrutura é semelhante a: -Widget Name | Conteúdo | Recursos do Widget.kon Main.js | Todas as imagens que o widget usaráVocê pode baixar este widget para criar automaticamente a pasta structureStructure - Reinier KaperDefina as preferências de um widget clicando com o botão direito em qualquer parte dele e clique em preferências. Altere as preferências de Estrutura para o seguinte: root: Navegue até a pasta de widgets. (Localizado em 'Meus Documentos' no Windows) Agora você pode clicar no widget e uma caixa de diálogo aparecerá, perguntando o nome do widget.

Etapa 3: Criação de todos os arquivos necessários

Começaremos criando o arquivo widget.xml, que informa ao mecanismo do widget informações sobre o seu widget. Baixe um modelo que criei para você usar. Baixe o link abaixo. Coloque o arquivo na pasta 'Conteúdo' localizada na pasta com o nome que você escolheu anteriormente. Abra o arquivo com o editor de texto de sua escolha e substitua YourNameHere pelo seu nome. Salve e feche. Em seguida, criaremos o arquivo.kon que é o arquivo principal que diz ao widget o que fazer. O arquivo.kon é apenas um arquivo XML com uma extensão renomeada. Baixe este arquivo widget.kon básico e também coloque-o na pasta 'Conteúdo'. Novamente, abra o arquivo com um editor de texto. A primeira linha significa que o arquivo é um arquivo XML criado com a codificação UTF-8. A próxima tag a ser adicionada é a tag do widget; Então você declara suas configurações, como depurar;. Agora você está pronto para adicionar os elementos da janela;. Os widgets têm vários objetos que fazem certas coisas e têm certas propriedades. Por exemplo, o objeto de texto,, cria texto. Aqui está uma lista de algumas das propriedades do objeto de texto: -name (autoexplicativo) -window (depreciado) -data (texto a ser exibido) -color (autoexplicativo) -size -font -hOffset (também conhecido como x) -vOffset (também conhecido como y) -width -height Com isso dito, vamos começar a codificar. Adicione o seguinte código ao arquivo kon, nas tags: myTextHello World! BlueArial18left252Em inglês, isso configura um objeto de texto chamado myText, que exibe "Hello World!" na fonte Arial, cor azul e tamanho 12. Salve o arquivo kon e continue na etapa quatro.

Etapa 4: aproveite

Clique duas vezes no arquivo kon e seu widget será carregado. Parabéns! Você criou seu primeiro widget. Mas ainda não terminamos a codificação. Você provavelmente está pensando: "Só isso?", Certo? Continue na etapa 5 para adicionar alguma função ao seu widget.

Etapa 5: Adicionando Função

Agora vamos fazer o widget exibir a hora atual. Isso exigirá um cronômetro que é atualizado a cada minuto e outro arquivo. O próximo arquivo será um arquivo JavaScript, que irá para a pasta 'Conteúdo'. Abra seu editor de texto e crie um arquivo chamado main.js. Para adicionar a hora, usaremos "o objeto Date". Para configurar o objeto de data, você cria uma função. Adicione esta função ao arquivo js: function updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "A hora é:" + theHour + ":" + theMinutes; print ('update');} Seu widget ainda não mostrará a hora, pois não sabe o que fazer com o arquivo js. Para cuidar disso, adicionamos este manipulador de eventos ao arquivo Kon, nas tags, mas não nas tags: include ('main.js'); Para fazer a atualização de tempo, precisamos criar um cronômetro, que entra o arquivo Kon, nas tags, mas não nas tags: Salve os arquivos e carregue o widget. Deve mostrar a hora. Se não funcionar, baixe o kon e o js abaixo e substitua pelos antigos.

Etapa 6: Resumindo tudo

Use o widget conversor de widget para converter o widget em um arquivo.widget. NOTA: Arraste a pasta com o nome de seu widget para o conversor, não o arquivo kon. Se você quiser ir ainda mais longe com seu widget, pegue alguns recursos aqui. Aqui está uma lista de coisas que você pode tentar realizar com seu widget: -Adicione preferências para controlar a fonte usando a tag e a subtag da fonte- Adicione alguns manipuladores de eventos como onClick usando as tags ou.-Exiba uma imagem de um arquivo local usando o objeto de imagem Espero que você tenha achado este tutorial útil e você aproveite as infinitas possibilidades de widgets, Hunter